@charset "utf-8";
@import url("../css/column.css");

main img {width: auto; height: auto; max-width: 100%; max-height: 100%;}

/*更新日*/
#bc-ykdt_title > div { font-size: 12px; text-align: right; line-height: 1.3em; }

/*見出し*/
h2{ margin: 10px 0 20px; }

@media screen and (max-width:899px){
  h2 img { display: none; }
  h2::before {
    content: "";
    display: block;
    width: 100%; height: 0;
    padding: 0 0 47.44%;
    background: url("images/header2.webp");
    background-size: cover;
  }
}

/**============================================================================================ メインコンテンツ **/

main section[id^="index"]{ margin: 0 0 40px; }

/*メイン見出し*/
h3 {
  position: relative;
  margin: 0 0 20px; padding: 7px 7px 7px 35px;
  background: #d2ecfe;
  color: #00487b; font-size: 1.2em;
}

/*メイン見出し番号*/
h3::before {
  display: block; position: absolute; top: 9px; left: 7px;
  width: 20px; height: 20px;
}

#index01 h3::before { content: url(/info/images/icon-no1_w20.gif); }
#index02 h3::before { content: url(/info/images/icon-no2_w20.gif); }
#index03 h3::before { content: url(/info/images/icon-no3_w20.gif); }
#index04 h3::before { content: url(/info/images/icon-no4_w20.gif); }
#index05 h3::before { content: url(/info/images/icon-no5_w20.gif); }
#index06 h3::before { content: url(/info/images/icon-no6_w20.gif); }

/*先頭に縦線がある見出し*/
main .ttl4 {
  margin: 0 0 10px; padding: 5px;
  border-left: solid 5px #00487b;
  color: #00487b; font-size: 1.2em;
}

/*枠付きの見出し*/
main .ttl5 {
  display: inline-block;
  padding: 5px 10px;
  background: #00487b;
  color: #fff; font-size: 1em; font-weight: 100;
}
/*.ttl5 枠*/
main .ttl5 + div {
  margin: 0 0 20px; padding: 10px;
  border: solid 1px #00487b;
}

/*下線付きの見出し*/
main .ttl6 {
  margin: 0 0 10px; padding: 5px;
  border-bottom: solid 1px #00487b;
  color: #00487b; font-size: 1em;
}

/*youtube*/
main .movie-wrap{
  position: relative;
  height: 0;
  padding: 0 0 56.25%;
}

main iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

/*肩掛け型とウエストベルト型、プリント、刺繍サービスのご紹介*/
main .dis-tbl_tab { width: 100%; }
main .dis-tbl_tab > div {
  display: table-cell;
  padding: 10px;
  text-align: center;
  vertical-align: top;
}
@media screen and (max-width:999px){
  main .dis-tbl_tab,
  main .dis-tbl_tab > div { display: block; }
}

/*表*/
main table {
  border: solid 1px #999;
  border-collapse: collapse;
}
main td,
main th {
  border: solid 1px #999;
  line-height: 1.3em;
}
main th { background: #eee; }

/*ポイント*/
main .point { margin: 10px 0 0; padding: 10px; color: #d00; }
main .point strong {
  display: block;
  width: 100px;
  margin: 0 0 10px; padding: 2px 5px 4px 10px;
  border-radius: 10px;
  background: #d00;
  color: #fff; font-size: 1.1em;
  line-height: 1em;
  letter-spacing: 1px;
}
main .point strong::after {
  content: '';
  display: inline-block;
  position: relative; top: 2px;
  width: 20px;
  height: 20px;
  margin: 0 0 0 2px;
  background: url('images/point.svg') no-repeat;
  background-size: cover;
}

/*ボタン*/
main .btn,
main .btn2 {
  display: block;
  max-width: 650px;
  margin: 20px auto; padding: 7px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
}
main .btn {
  border: solid 1px #00487b;
  color: #00487b;
}
main .btn2 {
  position: relative;
  border: solid 1px #960000;
  color: #960000;
}
main .btn2::before {
  content: '';
  display: inline-block;
  position: absolute; top: calc(50% - 10px); right: 10px;
  width: 20px; height: 20px;
  background-image: url("images/popup-rd.svg"); background-size: cover;
}
main .btn:hover,
main .btn2:hover { color: #fff; }
main .btn:hover { background: #00487b; }
main .btn2:hover { background: #960000; }
main .btn2:hover::before { background-image: url("images/popup-wh.svg"); }

/*======桜マークとは？======*/

/*国土交通省型式承認品マーク画像*/
#index01 > div:first-of-type {
  padding: 0 10px 10px;
  text-align: center;
}

/*======/桜マークとは？======*/

/*======どんな種類があるの？選び方のポイント======*/

/*自動式と手動式　自動膨張の仕組み*/
#index02 .dis-tbl01 > *,
#index02 .dis-tbl02 > * {
  display: table-cell;
  padding: 10px;
  vertical-align: middle;
}
#index02 .dis-tbl02 > div { width: 160px; }

@media screen and (max-width:699px){
  #index02 .dis-tbl01,
  #index02 .dis-tbl02,
  #index02 .dis-tbl01 > * ,
  #index02 .dis-tbl02 > * { display: block; }
  #index02 .dis-tbl01 > div,
  #index02 .dis-tbl02 > div { width: auto; text-align: center; }
}

/*肩掛け型とウエストベルト型 表*/
#index02 td,
#index02 th { padding: 5px; }
#index02 th { font-weight: normal; }
@media screen and (max-width:999px){
  #index02 table { width: 100%; margin: 0 auto;}
}

/*======/どんな種類があるの？選び方のポイント======*/

/*======よくある質問======*/

#index05 strong {
  display: block;
  color: #00487b; font-size: 1.2em; line-height: 1.7em;
}
#index05 .question {
  padding: 5px;
  background: #fef7ad;
}
#index05 .answer {
  margin: 0 0 10px; padding: 10px 5px;
  border-bottom: dashed 2px #00487b;
}

/*======/よくある質問======*/

/*======プリント、刺繍サービスのご紹介======*/

/*リスト*/
#index06 ul { margin: 0 0 20px; }
#index06 li { 
  margin: 0 0 10px; padding: 0 0 0 1em;
  text-indent: -1em;
}
#index06 li::before { content: '・'; }

/*画像*/
#index06 .dis-tbl_tab > div { vertical-align: bottom; }
#index06 div:has(> .dis-ilblk) { font-size: 0px; text-align: center; }

/*1.単色シルクプリント（最も一般的なプリント） 画像*/
#index06 .dis-tbl_tab .dis-ilblk { width: auto; }
@media screen and (max-width:999px) and (min-width:700px){
  #index06 .dis-tbl_tab .dis-ilblk { width: 50%; }
}

/*2.単色ラバープリント（小ロット向き）、3.フルカラー転写プリント 画像*/
#index06 .dis-ilblk { width: 50%; }
@media screen and (max-width:699px){
  #index06 .dis-ilblk { width: auto; }
}

/*表*/
#index06 table { width: 100%; }
#index06 td,
#index06 th { padding: 7px; }
#index06 table th { text-align: left; }

/*======/プリント、刺繍サービスのご紹介======*/

/**============================================================================================ メインコンテンツ **/
/* LastUp2026.08.10_kimata */