@charset "UTF-8";

/*===============================
  reset
================================*/
html { min-width: 320px; font-size: 62.5%; color: #000; background: #FFF;}
body, div, dl, dt, dd, ul, li, h1, h2, h3, p { margin: 0; padding: 0;}
img { border: 0;}
li { list-style: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
body {
  margin: 0;
  font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', 'ＭＳ Ｐゴシック', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.4em;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  color: #000000;
}
body * { box-sizing: border-box;}
.pc { display: none;}

/*===============================
  hader
================================*/
header { width: 100%; height: 64px; margin-bottom: 30px; border-bottom: 1px solid #eee; display: flex; justify-content: center; align-items: center;}
.pane-sub-header   { padding: 0 0 0 4vw; position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
.pane-header-inner { display: flex; justify-content: center; align-items: center;}
.pane-sub-header a { display: block;}
.pane-sub-header .block-header-logo-sports { width: 130px; padding: 0 20px 0 0; border-right: 1px solid #000; box-sizing: border-box;}
.pane-sub-header .block-header-logo-sports img { height: 26px; max-width: 100%; display: block;}
.pane-sub-header .block-header-brandsite-list  { width: calc(100% - 130px); padding-left: 15px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
.pane-sub-header .block-header-brandsite-list li { width: 33%; max-width: 84px; padding: 0 4px; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
.pane-sub-header .block-header-brandsite-list li a { display: flex;}
.pane-sub-header .block-header-brandsite-list img  { max-width: 100%;}

/*===============================
  footer
================================*/
.footer-bottom { padding: 26px 0 25px 0; background-color: #000000;}
.pane-sub-footer .footer-bottom { padding: 0;}
.footer-inner a { display: block; text-decoration: none; color: #A7A7A7; padding: 7px 0;}
.footer-inner h3 { padding: 0; margin: 0;}
.footer-menu-toggle ul { display: none; margin-bottom: 6px; margin-top: -1px;}
.footer-menu > a { font-size: 1.2rem;}
.footer-menu h3 { position: relative; width: 100%; font-size: 1.2rem; font-weight: normal; color: #B0B0B0; padding: 8px 30px 8px 0;}
.footer-menu-toggle h3:before,
.footer-menu-toggle h3:after { content: ""; display: block; position: absolute; width: 8px; height: 1px; top: 50%; right: 5px; background-color: #ffffff;}
.footer-menu-toggle h3:after { transform: rotate(90deg); transition: all .4s ease;}
.footer-menu-toggle h3.active:after { transform: rotate(0);}
.footer-menu-toggle a { padding: 6px 0 7px 0; color: #747474; font-size: 1.2rem;}
.footer-menu-vertical { display: flex; flex-direction: column;}
.footer-menu-vertical li a { display: inline-block; font-size: 1.2rem;}
.footer-top .footer-menu { padding: 0 0 28px 0; margin: 0 4vw;}
.footer-bottom .footer-menu { padding: 0 0 0px 0; margin: 0 4vw;}
.footer-bottom h3 { font-size: 1.2rem; color: #B0B0B0;}
.footer-bottom h3 a { color: #B0B0B0;}
.footer-bottom .footer-menu-vertical li { margin-bottom: 7px;}
.footer-logo { padding: 23px 0 16px 0; display: flex; justify-content: center; align-items: center;}
.pane-sub-footer .footer-logo { padding: 14px 0 12px 0px;}
.footer-logo img { display: block;}
.footer-logo > div { padding-right: 5vw; opacity: 0.5;}
.footer-logo > div img {  width: 123px;}
.footer-logo ul { display: flex; justify-content: center; align-items: center;}
.footer-logo li { margin-right: 6.5vw;}
.footer-logo li:last-of-type { margin-right: 0;}
.footer-logo li a { display: block;}
.footer-logo--columbia img { width: 60px;}
.footer-logo--mountainhardwear img { width: 41px;}
.footer-logo--sorel img { width: 32px;}
.copyrigth { border-top: 1px #333333 solid; text-align: center; font-size: 1.0rem; color: #A7A7A7; margin: 0 4vw; padding-top: 20px; letter-spacing: -0.05em;}
footer.error-503 .copyrigth { border-top: none; padding-top: 0;}

/*===============================
  Error
================================*/
.pane-main      { max-width: 800px; margin: 0 auto 20px; text-align: center;}
#error_title    { margin: 0 0 40px 0;}
#error_title h2 { margin: 0 0 10px 0; font-size: 2.6rem; font-weight: bold; text-align: center; line-height: 1.2;}
#error_title p  { font-size: 1.8rem; font-weight: bold; text-align: center;}

#error_message  { margin: 0 0 20px;}
#error_message p{ font-size: 1.4rem; font-weight: normal; text-align: center; letter-spacing: -0.5px;}

#brand_list     { padding: 0 4vw 20px; text-align: center;}
#brand_list ul  { max-width: 320px; margin: 0 auto 10px;}
#brand_list li  { padding: 5px 0; text-align: center;}
#brand_list li a{ padding: 5px 0; min-height: 60px; display: flex; justify-content: center; align-items: center;}
#brand_list li a{ text-decoration: none; color: #000; transition: 0.3s;}
#brand_list li a:hover,
#brand_list li a:hover img { opacity: 0.7;}
#brand_list .logo { width: 50%; display: flex; justify-content: center; align-items: center;}
#brand_list .columbia .logo img { width: 112px;}
#brand_list .mhw .logo img      { width: 70px;}
#brand_list .sorel .logo img    { width: 60px;}
#brand_list .name { width: 50%; text-align: center; font-size: 1.4rem; white-space: nowrap; word-break: keep-all;}

#customer_service { padding: 20px 0; border-top: 1px solid #eee;}
#customer_service .ttl { margin: 0 0 10px; letter-spacing: -0.5px;}
#customer_service .link a { font-weight: bold; text-align: center; text-decoration: underline; color: #000;}
#columbia_media { padding: 20px 0; border-top: 1px solid #eee;}
#columbia_media .ttl  { margin: 0 0 15px; letter-spacing: -0.5px;}
#columbia_media .link { text-align: center;}
#columbia_media .link img { width: 180px;}

/*===============================
 503 Error
================================*/
.block-custom-error-503 #error_title    { margin: 0 0 30px 0;}
.block-custom-error-503 #error_title h2 { font-size: 2.6rem; font-weight: bold; text-align: center;}
.block-custom-error-503 #error_title p  { font-size: 2rem; font-weight: bold; text-align: center;}

#error_maintenance { padding: 0 0 20px 0;}
#error_maintenance .ttl { margin: 0 0 10px; font-size: 1.8rem;}
#error_maintenance ul { text-align: center;}
#error_maintenance li { font-size: 1.6rem; font-weight: bold; text-align: center;}
#error_maintenance li.between { display: none;}
#error_maintenance li.finish::before { content: '～'; margin-right: 5px;}