@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ ゆびのばソックス ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  アスタキサンチンって知っていますか？
  
----------------------------------------------------------------------------------------------------*/

#about p {
  text-align:left;
}

.about_ttl { text-align:center; }
.about_ttl h3 { margin-bottom:2rem; }

@media print,screen and (min-width:641px) {
  #about {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-top:80px;
  }
  
  #about p {
    display:inline-block;
    padding-top:50px;
  }
}

@media screen and (max-width:640px) {
  #about {
    padding:2.5rem 1.5rem 0 1.5rem;
  }
  
  #about p { padding-top:2rem; }
}


/*----------------------------------------------------------------------------------------------------

  特長・おすすめ
  
----------------------------------------------------------------------------------------------------*/

.socks_block {
  background-color:#fff;
  box-sizing:border-box;
}

.socks__body {
  text-align:left;
}

@media print,screen and (min-width:641px) {
  #socks {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-top:20px;
  }
  
  .socks_block {
    margin-top:60px;
    padding:60px;
  }

  .socks__body {
    padding-top:50px;
  }
}

@media screen and (max-width:640px) {
  #socks {
    padding:1rem 1.5rem 0 1.5rem;
  }
  
  .socks_block {
    margin-top:2rem;
    padding:2.25rem 1.75rem 2rem 1.75rem;
  }

  .socks__body {
    padding-top:1.75rem;
  }
}


/*-----------------------------------------------------------------------------------
  特徴
-----------------------------------------------------------------------------------*/

.tokucho ul {
  text-align:left;
  list-style:none;
  counter-reset:s-number;
  padding-bottom:0.75rem;
}

.tokucho li {
  position:relative;
  counter-increment:s-number;
  padding-left:3rem;
  padding-top:0.1rem;
  margin-bottom:0.5rem;
}

.tokucho li:before {
  content:counter(s-number);
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", 游明朝, "Yu Mincho", YuMincho,sans-serif;
  font-weight:300;
  font-style:normal;
  text-align:center;
  display:inline-block;
  position:absolute;
  left:0;
  top:0.2rem;
  background-color:#61c5b4;
  color:#fff;
  line-height:1;
  min-width:1.75em;
  padding:0.5rem;
  box-sizing:border-box;
  z-index:2;
}

@media print,screen and (min-width:641px) {
  .tokucho .illust {
    display:inline-block;
    width:400px;
    float:right;
  }
}

@media screen and (max-width:640px) {
  .tokucho {
    text-align:center;
  }

  .tokucho .illust {
    padding-top:0.5rem;
    padding-bottom:1.75rem;
    display:block;
    text-align:center;
  }
  
  .tokucho .illust img {
    width:70%;
    max-width:400px;
  }
  
  .tokucho ul {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
  }
  
  .tokucho p {
    text-align:left;
  }
}


/*-----------------------------------------------------------------------------------
  こんなお悩みをお持ちの方におすすめ
-----------------------------------------------------------------------------------*/

.osusume {
  background-color:#f0f8f8;
  text-align:left;
  box-sizing:border-box;
  position:relative;
}

.osusume_ttl {
  display:block;
  line-height:1.4;
  padding-top:0.25rem;
  padding-bottom:0.75rem;
}

.osusume ul {
  list-style:none;
}

.osusume li {
  box-sizing:border-box;
  margin-top:0.5rem;
  padding-left:2em;
  line-height:1.4;
  position:relative;
}

.osusume li:before {
  content:"";
  width:1.2em;
  height:1.2em;
  display:inline-block;
  background-image:url(../../../image/icon/checkbox.svg);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  position:absolute;
  left:0;
  top:0;
}

.no-svg .osusume li:before {
  background-image:url(../../../image/icon/checkbox.png);
}

.osusume li:last-child:after {
  content:"...など";
  display:inline-block;
  margin-left:2em;
}

.osusume-ar {
  display:inline-block;
  position:relative;
  width:40px;
  height:30px;
  background-color:#f7e17a;
  top:-15px;
  margin-bottom:2rem;
}

.osusume-ar:after { 
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-top:30px solid #f7e17a;
  border-left:36px solid transparent;
  border-right:36px solid transparent;
}

@media print,screen and (min-width:641px) {
  .osusume {
    padding:2.5rem;
  }
  
  .osusume ul {
    display:inline-block;
    padding-top:0.5rem;
  }
  
  .osusume li {
    width:25%;
    float:left;
  }
}

@media screen and (max-width:640px) {
  .osusume {
    padding:1.75rem;
  }

  .osusume_ttl {
    text-align:center;
  }
}


/*-----------------------------------------------------------------------------------
  ゆびのばソックスで一生歩ける足づくり
-----------------------------------------------------------------------------------*/

.yubinoba {
  text-align:left;
}

@media print,screen and (min-width:641px) {
  .yubinoba {
    position:relative;
    min-height:225px;
  }

  .yubinoba .txt {
    margin-left:350px;
    padding-top:1rem;
  }
  
  .yubinoba .photo {
    display:inline-block;
    width:300px;
    position:absolute;
    left:0;
    top:0;
  }
}

@media screen and (max-width:640px) {
  .yubinoba .photo {
    display:block;
    text-align:center;
    padding-bottom:1.5rem;
    padding-top:1.5rem;
  }
  
  .yubinoba .photo img {
    max-width:400px;
  }
}


/*----------------------------------------------------------------------------------------------------

  下段 コメント
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  #come {
    padding-top:80px;
    padding-bottom:100px;
  }
}

@media screen and (max-width:640px) {
  #come {
    padding:2.75rem 1.5rem 3rem 1.5rem;
  }
}