@charset "UTF-8";

/* ------------------------------------------------------------------------
    reset
------------------------------------------------------------------------  */
html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
em,
img,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
}

/* スクロールバーの有無によるズレ対策 */
html {
  overflow-y: scroll;
  font-size: 62.5%;
}

body {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Helvetica, Arial, Meiryo, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

p,
ol,
ul,
dl,
address {
  font-size: 16px;
  font-size: 1.6rem;
}

a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
a:visited {
  color: #333;
}
a:hover {
  color: #cf110b;
}
a:hover,
a:active {
  outline: 0;
}
/* Tabキーでの移動をしやすくする */
a:focus {
  outline: thin dotted;
  color: #f29d17;
}

li {
  list-style-type: none;
}

p {
  margin-bottom: 24px;
}

/* 隣接するセルのborderを重ねて表示 */
table {
  font-size: 16px;
  font-size: 1.6rem;
  border-collapse: collapse;
  border-spacing: 0;
}

/* ハイライトの色指定 */
::selection {
  background: #f29d17;
  color: #fff;
}
/* Firefoxに対応 */
::-moz-selection {
  background: #f29d17;
  color: #fff;
}

/* clearfix */
/* before擬似要素の設定により上マージンの崩れを防ぐ */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1; /* for IE6/7 */
}

/* ------------------------------------------------------------------------
    base
------------------------------------------------------------------------  */
h1 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 1; /* 48px */
}

h2 {
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.3333; /* 48px */
}

hgroup,
h3,
h4,
h5,
h6 {
  font-size: 16px; /* 16px */
  font-size: 1.6rem;
  line-height: 1.5; /* 24px */
}

.top-body {
  background-color: #fbf9ed;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.mBtom24 {
  margin-bottom: 24px;
}

.mBtom48 {
  margin-bottom: 48px;
}

.mBtom96 {
  margin-bottom: 96px;
}

.mLeft48 {
  margin-left: 48px;
}

.posi-center {
  text-align: center;
}

/* ------------------------------------------------------------------------
    header
------------------------------------------------------------------------  */
.toppage-header {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 24px;
  background-color: #fff;
}
.toppage-header h1 {
  margin-bottom: 60px;
}

.top-gnav ul {
  width: 960px;
  margin: 0 auto;
}
/* メニューが5つ(100/5=20%) */
.top-gnav li {
  float: left;
  width: 20%;
}
.top-gnav li a {
  display: block;
  padding: 6px 0;
}

.btn-style {
  background-color: #f29d17;
  border-radius: 10px;
}
.btn-style a {
  color: #fff;
  border-radius: 10px;
  transition: background-color 0.3s ease-out;
}
.btn-style a:hover {
  background-color: #cf110b;
}

/* スティッキー状態のスタイル */
.sticky-header {
  z-index: 9999;
  width: 100%;
  min-width: 960px;
}

.sticky {
  position: fixed;
  top: 0;
  padding: 12px 0;
  background-color: #fff;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 3px 0 5px #333;
}

/* ------------------------------------------------------------------------
    header(下層ページ)
------------------------------------------------------------------------  */
.subpage-header {
  padding: 20px 0;
}

.inner-header {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
.logo-header {
  position: absolute;
  top: 6px;
  left: 0;
}

/* グローバルナビゲーション */
.sub-gnav {
  float: right;
}
.sub-gnav li {
  float: left;
  margin: 12px 0;
}
.sub-gnav a {
  display: block;
  padding: 6px 1.4em;
}
.sub-gnav .selected {
  color: #cf110b;
}

.subpage-header .sticky {
  padding: 0;
}

/* ------------------------------------------------------------------------
    layout
------------------------------------------------------------------------  */
/* image-style2→タブレットでの閲覧時にparallax.jsの適用を避ける */
.image-style,
.image-style2 {
  width: 100%;
  height: 650px;
  margin: 0 auto;
  padding: 0;
}

.image-block01 {
  background: url(../images/bg-chiyodaseni4.jpg) 50% 60px no-repeat fixed;
  background-size: cover;
}

.image-block02 {
  background: url(../images/bg-chiyoji.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
}

.image-block03 {
  background: url(../images/bg-socks.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
}

.image-block04 {
  background: url(../images/bg-equip.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
}

.image-block05 {
  background: url(../images/pic-socks.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
}

.content-block01,
.content-inner02,
.content-block03,
.content-block04,
.content-block05 {
  width: 960px;
  margin: 0 auto;
  padding: 0;
}

.content-block01,
.content-block02,
.content-block03,
.content-block04,
.content-block05 {
  position: relative;
}

.content-block01 {
  height: 650px;
  background: url(../images/bg-chiyodaseni02.png) 50% 50% no-repeat;
}

.content-block02 {
  height: 1020px;
  background: url(../images/bg-chiyoji02.jpg) 50% 0 no-repeat;
}

.content-block03 {
  height: 650px;
  background: url(../images/bg-socks02.jpg) 0 bottom no-repeat;
}

.content-block04 {
  height: 930px;
}

.content-block05 {
  height: 600px;
}

/*ボタンの共通スタイル*/
.btn-detail {
  position: absolute;
  background-color: #f29d17;
  border-radius: 10px;
}
.btn-detail a {
  display: block;
  padding: 12px 36px;
  color: #fff;
  border-radius: 10px;
  transition: background-color 0.3s ease-out;
}
.btn-detail a:hover {
  background-color: #cf110b;
}

/* 三角矢印を後ろ（Back）に（右向き：Right）でつける */
.arrowBR {
  position: relative;
  top: 0;
  left: 0;
  padding-right: 24px;
}
.arrowBR:before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #fff;
}

/* ------------------------------------------------------------------------
    千代田繊維工業について
------------------------------------------------------------------------  */
.hl-block01 {
  width: 446px;
  height: 29px;
  position: absolute;
  top: 50%;
  margin-top: -15px; /* 29px/2 */
}

.inner-block01 {
  height: 240px; /* 24px(16px*1.5)*7行 + 24px(p要素のmargin-bottom)*3段落 */
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -120px; /* 240px/2 */
  margin-right: 60px;
}

.btn-position01 {
  top: 72%;
  right: 0;
}

/* ------------------------------------------------------------------------
    千代治のくつ下
------------------------------------------------------------------------  */
.hl-block02 {
  width: 207px;
  height: 28px;
  position: absolute;
  top: 50%;
  margin-top: -14px; /* 28px/2 */
}

.inner-block02 {
  height: 264px; /* 24px(16px*1.5)*7行 + 24px(p要素のmargin-bottom)*4段落 */
  position: absolute;
  top: 56%;
}

.btn-position02 {
  top: 84%;
}

.btn-position02-2 {
  background-color: #cf110b;
  top: 84%;
  left: 30%;
}
.btn-position02-2 a:hover {
  background-color: #568ad4;
}

.btn-position02-3 {
  background-color: #cf110b;
  top: 84%;
  left: 50%;
}
.btn-position02-3 a:hover {
  background-color: #568ad4;
}

/* ------------------------------------------------------------------------
    オリジナルソックスの制作
------------------------------------------------------------------------  */
.hl-block03 {
  width: 357px;
  height: 29px;
  position: absolute;
  top: 25%;
  left: 50%;
}

.inner-block03 {
  height: 192px; /* 24px(16px*1.5)*5行 + 24px(p要素のmargin-bottom)*3段落 */
  position: absolute;
  top: 36.5%;
  left: 50%;
}

.btn-position03 {
  top: 70%;
  left: 50%;
}

/* ------------------------------------------------------------------------
    設備のご紹介
------------------------------------------------------------------------  */
.hl-block04 {
  width: 179px;
  height: 29px;
  position: absolute;
  top: 10%;
  left: 5%;
}

.inner-block04 {
  height: 216px; /* 24px(16px*1.5)*6行 + 24px(p要素のmargin-bottom)*3段落 */
  position: absolute;
  top: 19.5%;
  left: 5%;
}

.btn-position04 {
  top: 34.5%;
  right: 0;
}

.inner-block04-2 {
  padding-top: 48.5%;
  text-align: center;
}
.inner-block04-2 li {
  width: 33.333%;
  float: left;
}

/* ------------------------------------------------------------------------
    お問い合わせ
------------------------------------------------------------------------  */
.hl-block05 {
  width: 176px;
  height: 29px;
  position: absolute;
  top: 25%; /* 500*0.192=96px */
  left: 40.8%; /* (960-176)/2=392px 392px/960px */
}

.inner-block05 {
  position: absolute;
  top: 50%;
  left: 24.2%; /* (960-495)/2=232.5px 232.5px/960px */
  margin-top: -27.5px;
}

.btn-position05 {
  top: 75%;
  left: 39%;
}

/* ------------------------------------------------------------------------
    footer
------------------------------------------------------------------------  */
footer {
  height: 200px;
  width: 100%;
}

.footer-inner {
  width: 960px;
  margin: 0 auto;
  padding-top: 85px;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
}

/* トップページのみ */
.top-footer {
  background-color: #fff;
}

/* ------------------------------------------------------------------------
    layout(下層ページ)
------------------------------------------------------------------------  */
.title-main {
  height: 100px;
  background-color: #fbf9ed;
}
.title-main h1 {
  text-align: center;
  padding-top: 22px;
}

.sub-image-style {
  width: 100%;
  height: 310px;
  margin: 0 auto;
  padding: 0;
}

.conttent-wrap {
  width: 960px;
  margin: 0 auto;
  padding-top: 48px;
  background: url(../images/bg-chiyodaseni02.gif) 0 0 repeat-y;
}

.main-content {
  width: 730px;
  min-height: 450px; /*フッター下部に空白ができることを防止*/
  float: right;
}

.main-content h2 {
  margin-bottom: 24px;
}

.inner-content {
  margin-bottom: 72px;
}

.sub-content {
  width: 190px;
  float: left;
}

.sub-nav li {
  margin-bottom: 12px;
  font-size: 14px;
  font-size: 1.4rem;
}
.sub-nav a {
  display: block;
  text-align: center;
  padding: 12px;
  background-color: #f9f0cf;
  border-radius: 10px;
  transition: background-color 0.3s ease-out;
}
.sub-nav li a:hover {
  color: #fff;
  background-color: #f29d17;
}
.sub-nav li a.selected {
  color: #fff;
  background-color: #f29d17;
}

.sub-nav2 li {
  margin-bottom: 12px;
  font-size: 14px;
  font-size: 1.4rem;
  border: solid 2px #f29d17;
  border-radius: 11px;
}
.sub-nav2 a {
  display: block;
  text-align: center;
  padding: 12px;
  background-color: #fff;
  border-radius: 10px;
  transition: background-color 0.3s ease-out;
}
.sub-nav2 li a:hover {
  color: #fff;
  background-color: #f29d17;
  border-radius: 7px;
}

.page-top {
  padding: 6px;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #f9f0cf;
  border-radius: 5px;
}

/* ------------------------------------------------------------------------
    千代田繊維工業について(下層ページ)
------------------------------------------------------------------------  */
.image-main-chiyodaseni {
  background-size: cover;
}

.syomei {
  margin: 24px 0 48px 288px;
}

/* ------------------------------------------------------------------------
    つくり手の想い(下層ページ)
------------------------------------------------------------------------  */
.image-main-message {
  background: url(../images/main-message.jpg) 50% 0 no-repeat;
  background-size: cover;
  background-position: center;
}
.message-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 30px;
  color: #e69412;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 80px !important;
}
.message-unit-01,
.message-unit-02,
.message-unit-03 {
  font-family: "Shippori Mincho", serif;
  line-height: 2;
}
.message-unit-01,
.message-unit-02 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}
.message-unit-01 img,
.message-unit-02 img {
  width: auto;
  max-width: 100%;
}
.message-unit-01__text {
  width: 50%;
}
.message-unit-01__img {
  width: 45%;
}
.message-unit-02__text {
  width: 68%;
}
.message-unit-02__img {
  width: 27%;
}

/* ------------------------------------------------------------------------
    オリジナルソックスの制作(下層ページ)
------------------------------------------------------------------------  */
.image-main-byorder {
  background: url(../images/main-byorder.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.howto-order p {
  padding-left: 72px;
}

.price-table {
  width: 100%;
  margin-bottom: 48px;
}
.price-table th,
.price-table td {
  padding: 24px 0;
  border-top: 1px solid #f29d17;
  border-bottom: 1px solid #f29d17;
}
.price-table th {
  padding-left: 36px;
  text-align: left;
}
.price-table td {
  padding-right: 36px;
  text-align: right;
}

.bnr-contact {
  float: left;
}
.btn-pdfdl {
  float: left;
  margin-left: 48px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #568ad4;
  border-radius: 10px;
}
.btn-pdfdl a {
  display: block;
  padding: 24px;
  color: #fff;
  transition: background-color 0.3s ease-out;
}
.btn-pdfdl a:hover {
  color: #f29d17;
}

/* ------------------------------------------------------------------------
    設備のご紹介(下層ページ)
------------------------------------------------------------------------  */
.image-main-equipment {
  background: url(../images/main-equipment.jpg) 50% 0 no-repeat;
  background-size: cover;
  background-position: center;
}

.equip-table {
  width: 100%;
  margin-bottom: 48px;
  border: 1px solid #bbb;
  background-color: #fff;
  border-radius: 10px;
}
.equip-table tr :first-of-type,
.equip-table tr :last-of-type {
  text-align: left;
}
/* カウントする要素をtrに限定する(td要素にまで適用させない) */
.equip-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
.equip-table th,
.equip-table td {
  padding: 12px;
  border: 1px solid #bbb;
}
.equip-table th {
  color: #568ad4;
  background-color: #eef5ff;
}
.equip-table td {
  text-align: right;
}

/* ------------------------------------------------------------------------
    千代治のくつ下(下層ページ)
------------------------------------------------------------------------  */
.image-main-chiyoji {
  background: url(../images/main-chiyoji.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.wrap-4set {
  position: relative;
  top: 0;
  left: 0;
}

.image-4set {
  position: absolute;
  right: 0;
}

/* 500px(画像の高さ)+48px間隔をあける */
.mTop-chiyoji {
  margin-top: 548px;
}

.socks-type {
  margin-bottom: 24px;
}
.socks-type h3 {
  color: #568ad4;
  border-bottom: solid 1px #ccc;
}

.item-description {
  width: 430px;
  padding-top: 12px;
}

.btn-chiyoji01,
.btn-chiyoji02 {
  float: left;
  margin-right: 24px;
  font-size: 16px;
  font-size: 1.6rem;
  border-radius: 5px;
}
.btn-chiyoji01 a,
.btn-chiyoji02 a {
  display: block;
  padding: 12px 24px;
  color: #fff;
  transition: background-color 0.3s ease-out;
  border-radius: 5px;
}
.btn-chiyoji01 a {
  background-color: #f29d17;
  border-radius: 5px;
}
.btn-chiyoji01 a:hover {
  background-color: #cf110b;
  border-radius: 5px;
}

.btn-chiyoji02 a {
  background-color: #cf110b;
  border-radius: 5px;
}
.btn-chiyoji02 a:hover {
  background-color: #568ad4;
  border-radius: 5px;
}

/* ------------------------------------------------------------------------
    商品のご紹介(下層ページ)
------------------------------------------------------------------------  */
.image-main-socks {
  background: url(../images/main-socks.jpg) 50% 0 no-repeat;
  background-size: cover;
  background-position: center;
}

.socks-thum-position {
  position: relative;
}

.img-thum01,
.img-thum02,
.img-thum03 {
  position: absolute;
}

.img-thum01 {
  top: 0;
  right: 22%;
}
.img-thum02 {
  top: 20%;
  right: 0;
}
.img-thum03 {
  bottom: 5%;
  right: 0;
}

/* 画像(192px)との間を24px空ける */
.howto-descripton {
  width: 514px;
}
.howto-descripton h3 {
  margin: 0 0 24px 0;
  padding: 6px 0;
}
.socks-order {
  margin-right: 12px;
  padding: 6px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #f29d17;
  background-color: #f9f0cf;
  border-radius: 5px;
}

/* ------------------------------------------------------------------------
    会社概要/お問い合わせ(下層ページ)
------------------------------------------------------------------------  */
.image-main-company {
  background: url(../images/main-company.jpg) 50% 0 no-repeat;
  background-size: cover;
  background-position: center;
}

.image-main-contact {
  background: url(../images/main-contact.jpg) 50% 0 no-repeat;
  background-size: cover;
  background-position: center;
}

.table-style th,
.table-style td {
  font-size: 14px;
  font-size: 1.4rem;
  padding: 12px;
  text-align: left;
  border-top: 1px solid #f29d17;
  border-bottom: 1px solid #f29d17;
}
.table-style th {
  width: 168px;
}

.table-style input,
.table-style textarea {
  margin: 2px 0;
  padding: 3px;
  border: 1px solid #ccc;
}

.required {
  color: #cf110b;
}

.form-button input {
  padding: 12px;
}

.error-msg {
  font-size: 16px;
  font-size: 1.6rem;
}

/* iPad CSS */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .image-block01 {
    background: url(../images/bg-chiyodaseni.jpg) 50% 0 no-repeat;
  }

  .image-block02 {
    background: url(../images/bg-chiyoji.jpg) 50% 0 no-repeat;
  }

  .image-block03 {
    background: url(../images/bg-socks.jpg) 50% 0 no-repeat;
  }

  .image-block04 {
    background: url(../images/bg-equip.jpg) 50% 0 no-repeat;
  }

  .image-block05 {
    background: url(../images/pic-socks.jpg) 50% 0 no-repeat;
  }

  .sticky {
    position: relative;
    top: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: 3px 0 5px #fff;
  }
}

/* iPhone CSS */
@media only screen and (max-device-width: 736px) {
  .image-block01 {
    background: url(../images/bg-chiyodaseni4.jpg) 50% 0 no-repeat;
  }

  .image-block02 {
    background: url(../images/bg-chiyoji.jpg) 50% 0 no-repeat;
  }

  .image-block03 {
    background: url(../images/bg-socks.jpg) 50% 0 no-repeat;
  }

  .image-block04 {
    background: url(../images/bg-equip.jpg) 50% 0 no-repeat;
  }

  .image-block05 {
    background: url(../images/pic-socks.jpg) 50% 0 no-repeat;
  }

  .sticky {
    position: relative;
    top: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: 3px 0 5px #fff;
  }
}