@charset "UTF-8";
#wrap-container {
  width: 100%;
}

body #container {
  font-family: 'Noto Sans JP','Roboto', sans-serif;
  font-weight: 400;
  font-feature-settings: "palt";
}

.ichiran a:hover {
  color: #ffffff;
  text-decoration: none;
}

.usb-howto-sp {
  display: none;
}

/* コンテナ枠
----------------------------*/
#container {
  width: 100%;
  position: relative;
}

/* メイン枠
---------------------------*/
#main_contents {
  width: 100%;
  color: #444444;
}

h1 {
  max-width: 980px;
  font-size: 1.6em;
  line-height: 1.2;
  margin: 0 auto 20px;
  padding-bottom: 2px;
  border-bottom: 1px solid #cccccc;
}

.howto-wrapper {
  width: 940px;
  margin: 0 auto;
}

/* タイトルバナー */
.title-banner {
  width: 100%;
  background-color: #d9eaf7;
  text-align: center;
}

.title-banner img {
  max-width: 980px;
}

/* 目次 */
.toc-box {
  margin: 40px auto 0;
  padding: 21px 0;
  border: 1px solid #cccccc;
  box-sizing: border-box;
}

.toc-head {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.93;
  text-align: center;
}

.toc-inner {
  display: flex;
  flex-wrap: wrap;
  width: 91.6%;
  margin: 30px auto 0;
}

.toc-item {
  width: 30%;
  font-size: 1.0666em;
  margin: 0 0 3.1%;
  color: #1c64b3;
}

.toc-item:nth-child(2) {
  margin-left: 9%;
}

.toc-item:nth-child(5) {
  margin-left: 9%;
}

.toc-item:nth-child(3) {
  margin-left: 8.6%;
  width: fit-content;
}

.toc-item:nth-child(6) {
  margin-left: 8.6%;
  width: fit-content;
}

.toc-item a {
  color: #1c64b3;
  text-decoration: underline;
}

/* 共通スタイル */
.howto-ttl {
  font-size: 2em;
  line-height: 1.3333;
  text-align: center;
}

.howto-ttl span {
  font-size: .9333rem;
  font-weight: normal;
  margin-left: .5em;
}

.howto-sub-ttl {
  font-size: 1.3333em;
  line-height: 1.35;
  padding-left: .4em;
  border-left: 4px solid #298bde;
}

.howto-cap {
  width: 82.9787%;
  max-width: 780px;
  font-size: 1.0666em;
  line-height: 1.8125;
  margin: 1% auto 0;
}

a.search-link-btn {
  display: block;
  width: 400px;
  background: #0a4ea2;
  font-size: 1.13333em;
  font-weight: bold;
  text-align: center;
  margin: 53px auto 0;
  padding: 15px 0 19px;
  color: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  position: relative;
  opacity: 1;
  transition: 0.2s;
}

a.search-link-btn img {
  width: 20px;
  height: 20px;
  margin-right: 2%;
}

a.search-link-btn:hover {
  opacity: 0.6;
  transition: 0.2s;
}

a.light-blue-btn {
  display: block;
  width: fit-content;
  background-color: #298bde;
  font-size: 1em;
  font-weight: bold;
  line-height: 2.666;
  letter-spacing: .15px;
  text-align: center;
  padding: 0 3.9% 0 2.4%;
  color: #ffffff;
  border-radius: 19px;
  position: relative;
  opacity: 1;
  transition: 0.2s;
}

a.light-blue-btn::after {
  content: '';
  width: 4px;
  height: 4px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 5%;
  margin: auto;
}

a.light-blue-btn:hover {
  opacity: 0.6;
  transition: 0.2s;
}

section:nth-of-type(even) {
  background-color: #F4F8FB;
}

/* USBとは？ */
#what-usb {
  margin-top: 80px;
}

#what-usb .howto-cap {
  margin: 2.6% auto 0;
}

.what-usb-img {
  display: flex;
  justify-content: space-between;
  width: 82.9787%;
  margin: 3.7% auto 0;
}

.what-usb-img img {
  width: 48.7179%;
}

/* USBの転送速度と規格一覧 */
#speed-regs {
  margin: 90px auto 0;
  padding: 66px 0 100px;
}

#speed-regs .howto-cap {
  margin: 2% auto 0;
  letter-spacing: 0.03em;
}

#speed-regs .speed-regs-img {
  text-align: center;
  margin: 1.7% auto 0;
}

#speed-regs .speed-regs-img img:first-child {
  margin: 0 0 3%;
}

#speed-regs .speed-regs-link-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
  margin: 1.6% auto 0;
}

#speed-regs .speed-regs-link-block a {
  display: block;
  width: 49%;
  border: 1px solid #0A4EA2;
  border-radius: 6px;
  font-size: 1.2em;
  line-height: 1.6;
  padding: 2.4% 0 2.5% 3%;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  margin: 0 0 2.4%;
  letter-spacing: 0.03em;
}

#speed-regs .speed-regs-link-block a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #5070e3;
  border-right: solid 2px #5070e3;
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 7%;
  margin: auto;
}

#speed-regs .speed-regs-link-block a:hover {
  border-color: #FF0000;
}

#speed-regs .speed-regs-link-block a:hover::after {
  border-top: solid 2px #FF0000;
  border-right: solid 2px #FF0000;
}

/* USBのバージョン */
#usb-version {
  margin-top: 80px;
  padding: 12px 0 85px;
}

.usb-version-inner {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}

.usb-ver-item {
  width: 47.5%;
  margin-bottom: 7%;
}

.usb-ver-item:nth-child(odd) {
  margin-right: 3.5%;
}

.usb-ver-item:nth-last-of-type(-n+2) {
  margin-bottom: 0;
}

.usb-ver-text {
  font-size: 1em;
  line-height: 1.8;
  letter-spacing: .01em;
  margin: 2.5% 0 0 2%;
  font-feature-settings: normal;
}

.usb-ver-item a {
  display: inline-block;
  font-weight: bold;
  margin: 2.3% 0 0 2%;
  padding: 1.3% 3.9% 1.8%;
  background: #298BDE;
  color: #fff;
  width: 141px;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
}

.usb-ver-item a::after {
  content: '';
  width: 4px;
  height: 4px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 9%;
  margin: auto;
}

/*ワンポイント*/
.one-point-box {
  margin-top: 40px;
  padding: 78px 0;
  border: 2px solid #ccc;
  border-radius: 8px;
}

.one-point-icon {
  width: 138px;
  background-color: #f33c3c;
  font-size: .9333em;
  text-align: center;
  margin: 0 auto;
  padding: 1% 0 1% 2.2%;
  color: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
}

.one-point-icon::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(/static/images/product/cable/howto/icn_pencil.svg) no-repeat;
  background-size: contain;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10%;
}

.one-point-title {
  font-size: 1.3333em;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-top: 10px;
}

.one-point-text {
  width: 82.9787%;
  font-size: 1em;
  line-height: 1.6;
  margin: 2.2% auto 0;
  letter-spacing: 0.03em;
}

.usb-name-table {
  width: 82.9787%;
  margin: 29px auto 0;
  border-collapse: collapse;
}

.usb-name-table th {
  width: 33.3%;
  background-color: #cccccc;
  line-height: 1.666;
  text-align: center;
  padding: 1.5% 0;
}

.usb-name-table th:nth-child(2n) {
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;
}

.usb-name-table tr:nth-child(odd) {
  background-color: #f8f8f8;
}

.usb-name-table td {
  font-size: 1.0666em;
  line-height: 1.5625;
  text-align: center;
  padding: 1.7% 0;
}

.usb-name-table td .red {
  font-weight: bold;
  color: #f22222;
}

.usb-name-table td .l-align {
  display: block;
  width: 53%;
  text-align: left;
  margin: 0 auto;
}

.usb-name-table td:nth-child(2n) {
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;
}

.speed-comparison {
  text-align: center;
  margin: 82px auto 0;
}

.speed-comparison .one-point-title {
  font-size: 1.2em;
}

.speed-comparison img {
  width: 65.957%;
  margin: 2.2% auto 0;
}

/* コネクタ形状の種類 */
#connector-shape {
  padding: 75px 0 10px;
}

.connector-shape-inner {
  display: flex;
  flex-wrap: wrap;
  margin-top: 68px;
}

.connector-shape-item {
  width: 48%;
  margin-bottom: 10.9%;
}

.connector-shape-item:nth-child(odd) {
  margin-right: 3%;
}

.connector-shape-item .connector-img {
  width: 96%;
  margin: 2.4% 1% 0 auto;
  border-radius: 10px;
  overflow: hidden;
}

.connector-shape-item img {
  width: 460px;
  object-fit: cover;
  object-position: -15px 0;
}

.connector-cap {
  font-size: 1em;
  line-height: 1.8;
  letter-spacing: .005em;
  margin: 2.5% 0 0 2%;
}

a.connector-link-btn {
  display: block;
  font-weight: bold;
  margin: 4.5% auto 0;
  padding: 2.3% 4.8%;
  background: #298BDE;
  color: #fff;
  width: 276px;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
  letter-spacing: 0.03em;
}

.connector-link-btn::after {
  content: '';
  width: 4px;
  height: 4px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 5%;
  margin: auto;
}

/* USBと他のコネクタをつなぐ（変換） */
#usb-useful {
  padding: 99px 0 0;
}

#usb-useful .howto-cap {
  margin: 2.9% auto 0;
}

.usb-useful-inner {
  display: flex;
  flex-wrap: wrap;
  margin-top: 45px;
}

.usb-useful-item {
  width: 48%;
  margin-bottom: 12.8%;
}

.usb-useful-item:nth-child(odd) {
  margin-right: 3%;
}

.usb-useful-item:nth-last-of-type(-n+2) {
  margin-bottom: 0;
}

.usb-useful-item .usb-useful-img {
  width: 96%;
  margin: 2.4% 1% 0 auto;
  border-radius: 10px;
  overflow: hidden;
}

.usb-useful-item img {
  width: 440px;
  object-fit: cover;
  object-position: -5px;
}

.usb-useful-item .light-blue-btn {
  margin: 3% auto 0;
  font-size: 0.8666em;
  padding: 0 7% 0 6%;
}

.usb-useful-cap {
  font-size: 1em;
  line-height: 1.8;
  letter-spacing: .005em;
  margin: 2.5% 0 0 2%;
}

/* USBケーブルを延長する方法 */
#extended-usb-cable {
  width: 980px;
  margin: 75px auto 0;
  padding: 43px 0 60px;
}

#extended-usb-cable .howto-cap {
  margin: 4.2% auto 0;
}

#extended-usb-cable .method-item {
  width: 80%;
  margin: 6% auto 9%;
}

#extended-usb-cable .method-item .method-ttl {
  font-size: 1.3333em;
  font-weight: bold;
  line-height: 1.6;
}

#extended-usb-cable .method-item .method-ttl img {
  margin: 0 1% 0 0;
}

#extended-usb-cable .method-item .method-ttl span {
  vertical-align: middle;
  line-height: 1.3;
}

#extended-usb-cable .method-item .method-cap {
  font-size: 1.0666em;
  line-height: 2.2;
  padding: 0 0 0 0.9%;
  width: 95%;
  letter-spacing: 0.06em;
}

#extended-usb-cable .method-item .method-img {
  width: 100%;
}

#extended-usb-cable .method-item .method-img img {
  width: 100%;
}

#extended-usb-cable .method-item .method-link-btn {
  display: block;
  font-weight: bold;
  margin: 1.5% auto 0;
  padding: 1.3% 0 1.3% 7.8%;
  background: #298BDE;
  color: #fff;
  width: 39%;
  border-radius: 45px;
  box-sizing: border-box;
  position: relative;
  letter-spacing: 0.03em;
}

#extended-usb-cable .method-item .arrow {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  vertical-align: middle;
  margin: -0.8% 0 0 4%;
}

#extended-usb-cable .method-item:last-of-type {
  margin-bottom: 0;
}

/* USBアクセサリを選ぶ */
#select-usb-acc {
  padding: 116px 0 0;
}

.select-usb-acc-inner {
  margin-top: 25px;
}

.usb-acc-menu-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0 0;
}

.usb-acc-menu-box {
  margin-bottom: 4.5%;
}

a.usb-acc-menu-btn {
  display: block;
  width: 220px;
  height: 120px;
  border: 1px solid #CCC;
  box-sizing: border-box;
  color: #333333;
  padding: 1%;
  margin: 0 20px 20px 0;
}

a.usb-acc-menu-btn:nth-child(4n) {
  margin-right: 0;
}

a.usb-acc-menu-btn .product-img {
  display: inline-block;
  width: 89px;
  vertical-align: middle;
  overflow: hidden;
}

a.usb-acc-menu-btn .product-img img {
  width: 100%;
  object-fit: cover;
}

a.usb-acc-menu-btn .product-img img.small-img {
  width: 100px;
  object-position: -6px;
}

a.usb-acc-menu-btn .product-name {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
  font-size: 1.0666em;
  font-weight: bold;
  line-height: 1.4375;
}

/* 関連ページ */
.relation {
  width: 980px;
  margin: 80px auto 0;
}

.relation h3 {
  font-size: 1.666em;
  text-align: center;
  line-height: 0.96;
  padding: 13px 0;
  color: #fff;
  background-color: #004DA2;
}

.relation a {
  display: inline-block;
  width: 230px;
  height: 153px;
  margin: 20px 14px 15px 0;
}

.relation a:nth-child(4n) {
  margin-right: 0;
}

.relation a img {
  width: 100%;
}

.link-img li {
  display: inline;
}

.link-img li:nth-child(4n) img {
  margin-right: 0;
}