@charset "UTF-8";

.sizeguide-frame { background: #F5F5F5;}
.sizeguide-frame * { font-size: 1.2rem;}
.sizeguide-frame p  { font-size: 1.4em;}
.sizeguide-frame li { font-size: 1.4em;}
.sizeguide-frame .sizeguide_head  { height: 70px; background: #000; display: flex; justify-content: center; align-items: center; position: relative;}
.sizeguide-frame .sizeguide_head h2 { padding: 0; margin: 0; border: none; letter-spacing: 0.3em; color: #fff; font-size: 1.6rem; font-family: 'primaryfont', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'ＭＳ Ｐゴシック', -apple-system, BlinkMacSystemFont, sans-serif;}
.sizeguide-frame .sizeguide_head .btn-close { width: 78px; height: 70px; position: absolute; left: 0; top: 0; cursor: pointer;}
.sizeguide-frame .sizeguide_head .btn-close::before,
.sizeguide-frame .sizeguide_head .btn-close::after { content: ""; width: 15px; height: 2px; background: #fff; display: block; position: absolute; top: 50%; left: 50%;}
.sizeguide-frame .sizeguide_head .btn-close::before { transform: translate(-50%, -50%) rotate(45deg);}
.sizeguide-frame .sizeguide_head .btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg);}
.sizeguide-frame .sizeguide_contents { padding: 20px 10px;}
.sizeguide-frame .contents-tab     { display: flex; justify-content: space-between;}
.sizeguide-frame .contents-tab li  { min-height: 60px; padding: 0; flex-basis: 50%; display: flex; align-items: center; justify-content: center; background: #F5F5F5; cursor: pointer;}
.sizeguide-frame .contents-tab li span { color: #007AB8; display: inline-block; text-align: center;}
.sizeguide-frame .contents-tab li.active { background: #fff;}
.sizeguide-frame .contents-tab li.active span { color: #000;}
.sizeguide-frame .top-text { margin: 0 0 20px 0; text-align: left;}
.sizeguide-frame .image    { margin: 0 auto 20px; text-align: center;}
.sizeguide-frame .top-text.notice  { color: #FF0000;}
.sizeguide-frame .point-box        { margin: 0 0 30px 0;}
.sizeguide-frame .point-box .ttl   { margin: 0 0 10px 0; font-weight: bold; text-align: center;}
.sizeguide-frame .contents-inner   { padding: 20px 10px 10px 10px; background: #fff; overflow-y: scroll;}
.sizeguide-frame h3.item-ttl       { padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: #F5F5F5 2px solid; font-size: 1.4em; font-weight: bold; text-align: left;}
.sizeguide-frame .size-box         { margin: 0 0 30px 0;}
.sizeguide-frame .size-box .ttl    { margin: 0 0 10px 0; text-align: left;}
.sizeguide-frame .size-table-wrap table    { border: 1px #D8D8D8 solid; border-collapse: collapse;}
.sizeguide-frame .size-table-wrap table th,
.sizeguide-frame .size-table-wrap table td { padding: 5px 10px; border: 1px #D8D8D8 solid; border-collapse: collapse; white-space: nowrap; word-break: keep-all; text-align: center; vertical-align: middle;}
.sizeguide-frame .size-table-wrap table th,
.sizeguide-frame .size-table-wrap table td.head { font-weight: bold; background: #EEE;}

html[data-browse-mode="P"] .sizeguide-frame .sizeguide_contents { padding: 20px 50px;}
html[data-browse-mode="P"] .sizeguide-frame .contents-inner    { height: calc(100vh - 270px); padding: 40px 20px 20px 20px;}
html[data-browse-mode="P"] .sizeguide-frame .contents-tab li span { font-size: 1.0em;}
html[data-browse-mode="S"] .sizeguide-frame p  { font-size: 1.2em;}
html[data-browse-mode="S"] .sizeguide-frame li { font-size: 1.2em;}
html[data-browse-mode="S"] .sizeguide-frame .size-table-wrap   { overflow: hidden; overflow-x: scroll;}
html[data-browse-mode="S"] .sizeguide-frame .sizeguide_head h2 { font-size: 1.2rem;}
html[data-browse-mode="S"] .sizeguide-frame .contents-inner    { height: calc(100vh - 170px);}
html[data-browse-mode="S"] .sizeguide-frame .point-box .desc li{ text-align: left;}

#sizeguide_columbia .sizeguide-sunpou .image { max-width: 330px;}
#sizeguide_mhw .asian-fit { padding: 15px; margin: 0 0 20px 0; border: 2px #f5f5f5 solid; text-align: left;}
#sizeguide_mhw .asian-fit .txt-ttl { margin: 0 0 10px 0; font-size: 1.4rem; font-weight: bold;}
#sizeguide_mhw .mhw-flex-box { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;}
#sizeguide_mhw .mhw-flex-box .size-image { min-width: 100px; margin: 0 10px 10px 0;}