@charset "UTF-8";

/*____________________________________________________________________________

SITE TITLE: LOCONDO.jp
TITLE: ロコメジャーSP
____________________________________________________________________________*/


/*----------------------------------------------------------------------------
非表示
----------------------------------------------------------------------------*/
#header_top,
#footer_ver4,
.rotateImg,
footer,
#headerInformation{
  display:none;
}
/*----------------------------------------------------------------------------
ロコメジャー
----------------------------------------------------------------------------*/

/* フォント */
.locomeasure *{
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 1px;
}

/*====== 共通指定（全画面、PC・SP） ======*/

/* 既存要素 */
body, html{
  position:relative;
  height:100%;
  background-color:#eee;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.wrapperUnderGnav{
  width:100%;
  height:100%;
}
#info_box_top{
  position:absolute;
  top:0;
  margin-top:0;
}

/* locomeasure */
.locomeasure,
.locomeasure_notLogin{
  width:640px;
  height:640px;
  background-color:#fff;
  border:1px solid #ddd;
  overflow:hidden;
}
.locomeasure .screen{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  width:100%;
  height:596px;
  text-align:center;
  box-sizing:border-box;
  position:relative;
  padding-top:40px;
  padding-bottom:120px;
}
.locomeasure .wrapBtn{
  width:calc(100% - 80px);
  position:absolute;
  bottom: 50px;
}
.locomeasure .illust{
  display:inline-block;
  width:240px;
  height:auto;
  margin-bottom:24px;
}
/* テキスト */
.locomeasure .description{
  display:block;
  line-height:1.7;
  font-size:20px;
  color:#333;
  margin-bottom:.4em;
}
.locomeasure .description_note{
  margin-bottom:16px;
  line-height:1.7;
  font-size:13px;
  color:#333;
}
/* select */
.locomeasure select{
  font-size:20px;
  font-weight:800;
  width:3em;
  height:2.5em !important;
  padding:0 0.2em 0 0.5em;
  border-radius:4px;
  border:1px solid #ddd;
  cursor:pointer;
}
.locomeasure select[name$="2"]{
  width:2.5em;
}
.locomeasure fieldset .select_addLetter{
  font-size:30px;
}
.locomeasure fieldset .select_addLetter:last-child{
  margin-left:.2em;
  font-size:20px;
}
.locomeasure select:invalid{
  background-color:rgba(255, 0, 0,.2);
}
/* button, moveBtn */
.locomeasure button{
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  appearance: none;
}
.locomeasure button:not(:disabled){
  cursor: pointer;  
}
.locomeasure .moveBtn,
.locomeasure .moveBtn-last{
  display:block;
  margin:0 auto;
  width:70%;
  height:56px;
  font-size:18px;
  font-weight:normal;
  color:#ac2734;
  background-color:#F6E9EA;
  border:solid 2px #ac2734;
  border-radius:2px;
}
.locomeasure #confirmLength[disabled],
.locomeasure #confirmFootWidth[disabled],
.locomeasure #confirmCircum[disabled],
.locomeasure #calcBtn[disabled]{
  border-color:#eee;
  color:#eee;
  background-color:#fff;
}
.locomeasure .moveBtn:not(:disabled):hover{
  color:#fff;
  background-color:#ac2734 !important;
}
.locomeasure .moveBtn.notHave{
  margin-bottom:12px;
  color:#727171;
  border-color:#9fa0a0;
}

/* 一番上の帯ナビ */
.locomeasure .topBarNav{
  width:100%;
  height:44px;
  background-color:#ac2734;
  position: relative;
}
#prevBtn{
  position:absolute;
  top:13px;
  left:20px;
  width: 30px;
  height: 18px;
  background: url(//media.aws.locondo.jp/fitfitstatic/common/img/locomeasure/prevBtn_white.svg)0 0 no-repeat;
  background-size: auto 100%;
  cursor:pointer;
}
/* 最初の画面では消す */
[data-displayslide="0"] #prevBtn{
  display:none;
}
#closeBtn{
  position:absolute;
  top:13px;
  right:20px;
  display: block;
  width: 18px;
  height: 18px;
  background: url(//media.aws.locondo.jp/contents/img/common/locomeasure/instant_close_whitegray.png)0 0 no-repeat;
  background-size: auto 100%;
  cursor:pointer;
}

/* ロコメジャーダウンロード */
.downloadPdf .description-download{
  font-size:12px;
}
.downloadPdf .description-download a{
  text-decoration: underline;
}

/*====== メジャーの有無で画面遷移が変わる（ロコメジャーを持っている/持っていない/zozomat） ======*/

/* 画面 - 通過画面を display:none; するとギクシャクした動きになる*/
[data-startfrom="loco"] #scr_start_ok{
  opacity:0;
}
[data-startfrom="notHave"] #scr_cutMeasure{
  opacity:0;
}
[data-startfrom="zozo"] #scr_start_ok,
[data-startfrom="zozo"] #scr_stocking,
[data-startfrom="zozo"] #scr_sitting,
[data-startfrom="zozo"] #scr_footLength,
[data-startfrom="zozo"] #scr_footWidth,
[data-startfrom="zozo"] #scr_cutMeasure,
[data-startfrom="zozo"] #scr_footCircum{
  opacity:0;
}
/* 要素 */
[data-startfrom="loco"] .description.zozo{
  display:none;
}
[data-startfrom="zozo"] #scr_footLength_input .description.loco,
[data-startfrom="zozo"] #scr_footWidth_input .description.loco,
[data-startfrom="zozo"] #scr_footCircum_input .description.loco{
  display:none;
}
[data-startfrom="notHave"] .description.zozo{
  display:none;
}

/* zozomatの項目表記 */
.description.zozo .paren:before{
  content:"「❶";
}
.description.zozo .paren:after{
  content:"」";
}
#scr_footWidth_input .description.zozo .paren:before{
  content:"「❷";
}
#scr_footCircum_input .description.zozo .paren:before{
  content:"「❸";
}

/*====== 各画面（PC・SP） ======*/
/* 未ログイン */
.locomeasure_notLogin,
#scr_notLogin{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}
#scr_notLogin .logo{
  width:70px;
  margin-bottom:20px;
}
#scr_notLogin .title{
 font-size:36px;
  margin-bottom:20px;
}
#scr_notLogin .loginBtn a{
  display:block;
  font-size:14px;
  padding:0 1.5em;
  line-height:3em;
  color:#fff;
  background-color:#ac2734;
  border-radius:4px;
}

/* #scr_start */
#scr_start {
  padding-bottom:260px;
}
#scr_start .title{
  font-size:36px;
  margin-bottom:20px;
}
#scr_start .logo{
  display:inline-block;
  width:72px;
  margin-bottom:10px;
}
#scr_start .illust{
  width:260px;
  margin:0 auto;
  margin-bottom:20px;
}
#scr_start .wrapBtn{
  bottom:40px;
}
#scr_start .moveBtn.haveLoco{
  background-color:#F6E9EA;
}
#scr_start .moveBtn.haveZozo{
  margin-top:1em;
  width:auto;
  height:2em;
  padding:0 2em;
  font-size:14px;
  color:#fff;
  border:none;
  background-color:#b5b5b6;
}
#scr_start .moveBtn.notHave{
  background-color:#fff;
}
#scr_start .moveBtn.notHave:hover{
  color:#fff;
  background-color:#9fa0a0 !important;
}
#scr_start .moveBtn:nth-of-type(-n + 2){
  margin-bottom:12px;
  width:70%;
  height:56px;
  font-size:16px;
}
#scr_start .downloadPdf{
  margin:0 auto;
  width:70%;
  text-align:right;
}
#scr_start .downloadPdf a{
  font-size:11px;
  color:#727171;
}
#scr_start .downloadPdf i{
  color:#ac2734;
}
#scr_start .downloadPdf a:hover{
  color:#ac2734;
}
#scr_start_ok .illust{
  width:225px;
  margin-top:50px;
  margin-bottom:100px;
}

/* #scr_stocking */

/* #scr_sitting */
#scr_sitting .illust{
  width:260px;
}
/* scr_footLength */
#scr_footLength .illust{
  width:300px;
}
/* scr_footLength_input */
#scr_footLength_input .illust{
  width:200px;
}
/* scr_footWidth */
#scr_footWidth .illust{
  width:230px;
  transform:translate(4vw, 0);
  margin-top:-5vh;
  margin-bottom:20px;
}
/* scr_footWidth_input */
#scr_footWidth_input .illust{
  width:100px;
}
/* scr_cutMeasure */
#scr_cutMeasure .illust{
  width:300px;
}
/* scr_footCircum */
#scr_footCircum .illust{
  width:120px;
  margin-bottom:40px;
  margin-top:20px;
}
/* scr_footCircum_input */
#scr_footCircum_input .illust{
  width:210px;
}
/* #scr_footShape */
#scr_footShape{
  padding-top:0;
}
#scr_footShape .sizeCalc_inputFootShape{
  display:flex;
  justify-content:space-between;
  width:80%;
  gap:5px;
}
#scr_footShape .wrapRadio{
  position:relative;
  width:100%;
}
#scr_footShape .wrapRadio [type="radio"]{
  position:relative;
  top:40px;
}
#scr_footShape .wrapRadio label{
  padding-top:50px;
  color:#333;
  text-align:center;
  border-radius:8px;
  cursor:pointer;
}
#scr_footShape .wrapRadio [type="radio"]:checked ~ label{
  background-color:#f0f0f0;
}
#scr_footShape .heading{
  display:block;
  font-size:20px;
}
#scr_footShape .note{
  display:block;
  font-size:15px;
  font-weight:400;
  margin-bottom:.5em;
}
#scr_footShape .illust{
  width:115px;
}
/* screenEnd */
#scr_end.screenEnd{
  padding:40px;
  padding-top:50px;
  text-align:center;
  background-color:#fff;
}
#scr_end.screenEnd .text{
  display:
  block;
  margin-bottom:10px;
}
.screenEnd_searchQuery{
  line-height:1.6;
  font-size:20px;
  margin-bottom:20px;
}
.screenEnd_searchQuery li{
  font-size:30px;
  text-align:left;
  font-weight:800;
}
.screenEnd_searchQuery li span{
  letter-spacing:.25em;
}
.screenEnd_searchQuery li small{
  margin-left:.2em;
  font-size:1em;
}
/* ボタン */
.screenEnd .answerBox_searchBtn-primary{
  display:block;
  line-height:3.2em;
  width:22em;
  font-size:20px;
  font-weight:normal;
  text-align:center;
  border-radius:2px;
  color:#fff;
  background-color:#ac2734 !important;
  margin-bottom:40px;
}
.answerBox_searchBtn-primary:hover{
  opacity:.8;
}
.screenEnd .subBtn{
  display:block;
  text-align:center;
  margin-bottom:20px;
}
.screenEnd .subBtn a {
  display: block;
  margin:0 auto;
  width:21em;
  line-height: 3em;
  font-size: 13px;
  color: #727171;
  text-decoration: none;
  border: 1px solid #727171;
  border-radius: 2px;
  cursor:pointer;
}
.screenEnd .subBtn a:hover{
  background-color:#eee;
}

/*====== 769px以下に適用されるCSS（SP用） ======*/
@media screen and (max-width: 769px) {
  .sp_header,
  .fixed_grobalnavi,
  #info_box_bottom{
    display:none;
  }
  .locomeasure,
  .locomeasure_notLogin{
    width:100vw;
    height:calc(var(--vh) * 100);
    border-radius:0px;
  }
  .locomeasure .screen {
    padding: 0 20px 50px 20px;
    height:calc( (var(--vh) * 100) - 44px );
  }
  .locomeasure .screen .title{
    margin-bottom:60px;
  }
  .locomeasure .moveBtn,
  .locomeasure .moveBtn-last{
    width:100%;
  }
  .locomeasure .moveBtn-last{
    color:#fff;
    background-color:#ac2734;
    border:solid 1px transparent;
  }

  /* SP各画面 */
  #scr_start{
    padding-bottom:220px;
  }
  #scr_start .moveBtn:nth-of-type(-n + 2){
    width:100%;
  }
  #scr_start .moveBtn.haveZozo {
    width: 100%;
    padding: 0 1em;
  }
  #scr_start .downloadPdf{
    width:100%;
  }
  #scr_footWidth .illust{ 
    width:56vw;
    transform:translate(14vw, 0);
  }
  #scr_footWidth_input .illust{ 
    width:22vw;
  }
  #scr_footShape .sizeCalc_inputFootShape{
    margin-bottom:20px;
  }
  #scr_footShape .heading{
    font-weight:800;
    margin-bottom:.5em;
  }
  #scr_footShape .note{
    display:inline-block;
    line-height:1.5;
    height:3em;
  }
  #scr_footShape .wrapRadio [type="radio"] {
    top: 30px;
  }
  #scr_footShape .wrapRadio label {
    padding-top: 0px;
    display: inline-block;
    padding-top:40px;
  }
  #scr_footShape .illust{
    width:70%;
  }
  #scr_footShape .sizeCalc_inputFootShape{
    width:100%;
  }
  #scr_end.screenEnd{
    padding:20px;
  }
  .screenEnd .answerBox_searchBtn-primary {
    width: initial;
    padding:0 1em;
    font-size: 18px;
  }  
}