@charset "UTF-8";
/*
Theme Name: AQUOS アクセサリー
Author: NTT DATA SBC Corporation
Author URI: http://k-tai.sharp.co.jp/accessories/
Description: AQUOs Accessaries WordPress Theme.
Version: 1.0
Text Domain: aquos-accessory
*/
@import url(//fonts.googleapis.com/css?family=Roboto:400);
/*-------------------------------------------------- Base Setting --------------------------------------------------*/
html { height: 100%; margin: 0px; padding: 0px; }

html * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

body { height: 100%; margin: 0px; padding: 0px; }

body.active-menu { overflow: hidden; }

a { text-decoration: none; }

img { display: inline-block; vertical-align: top; }

ul { margin: 0; padding: 0; list-style: none; }

/*-------------------------------------------------- Font / Color --------------------------------------------------*/
@font-face { font-family: 'Noto Sans CJK JP Light'; font-style: normal; font-weight: 300; src: url(./webfonts/NotoSansCJKjp-subset-Light.woff2) format("woff2"), url(./webfonts/NotoSansCJKjp-subset-Light.woff) format("woff"), url(./webfonts/NotoSansCJKjp-subset-Light.otf) format("opentype"); }

@font-face { font-family: 'Noto Sans CJK JP Regular'; font-style: normal; font-weight: 400; src: local("NotoSansJP-Regular.otf"), url(./webfonts/NotoSansCJKjp-subset-Regular.woff2) format("woff2"), url(./webfonts/NotoSansCJKjp-subset-Regular.woff) format("woff"), url(./webfonts/NotoSansCJKjp-subset-Regular.otf) format("opentype"); }

body { color: #333; font-family: 'Roboto', 'Noto Sans CJK JP Regular', Helvetica, Arial, "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; font-size: 14px; font-weight: 400; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

@media screen and (max-width: 480px) { body { font-size: 13px; } }

h1, h2, h3 { color: #333; font-family: 'Roboto', 'Noto Sans CJK JP Light', "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; font-weight: 300; margin: 0; }

h4, h5, h6 { color: #333; font-family: 'Roboto', 'Noto Sans CJK JP Regular', "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; font-weight: 400; margin: 0; }

p { color: #333; font-size: 14px; }

p.gray { color: #666; }

p.light-gray { color: #8a8e9a; }

p.note { font-size: 12px; }

@media screen and (max-width: 480px) { p { font-size: 14px; line-height: 1.6em; }
  p.note { font-size: 10px; } }

.roboto { font-family: 'Roboto', sans-serif; font-weight: normal; }

.notosans-light { font-family: 'Noto Sans CJK JP Light', sans-serif; font-weight: 300; }

.notosans-regular { font-family: 'Noto Sans CJK JP Regular', sans-serif; font-weight: 400; }

/*-------------------------------------------------- Common Layout --------------------------------------------------*/
header { width: 100%; height: auto; background-color: white; }

.aquos-header { height: 64px; }

.aquos-header-inner { width: 100%; height: 64px; position: fixed; z-index: 100; background-color: rgba(255, 255, 255, 0.95); }

.aquos-header .sharp-logo { position: absolute; top: 15px; left: 10px; }

.aquos-header .sharp-logo img { width: 100px; height: auto; }

.aquos-header .aquos-logo { position: absolute; top: 14px; left: 50%; margin-left: -77px; }

.aquos-header .aquos-logo img { width: 154px; height: auto; }

.aquos-header .mobile-menu { display: none; position: absolute; top: 0; right: 0; width: 50px; height: 55px; }

.aquos-header .mobile-menu a { display: block; width: 100%; height: 100%; position: relative; }

.aquos-header .mobile-menu a i, .aquos-header .mobile-menu a i:before, .aquos-header .mobile-menu a i:after { position: absolute; width: 30px; height: 2px; background-color: #8a8e9a; }

.aquos-header .mobile-menu a i { top: 28px; left: 10px; -webkit-transition: background-color 0.25s ease 0s; -moz-transition: background-color 0.25s ease 0s; -ms-transition: background-color 0.25s ease 0s; -o-transition: background-color 0.25s ease 0s; transition: background-color 0.25s ease 0s; }

.aquos-header .mobile-menu a i:before, .aquos-header .mobile-menu a i:after { content: ""; left: 0; -webkit-transition: top 0.25s ease-out, transform 0.25s ease-out; -moz-transition: top 0.25s ease-out, transform 0.25s ease-out; -ms-transition: top 0.25s ease-out, transform 0.25s ease-out; -o-transition: top 0.25s ease-out, transform 0.25s ease-out; transition: top 0.25s ease-out, transform 0.25s ease-out; }

.aquos-header .mobile-menu a i:before { top: -8px; }

.aquos-header .mobile-menu a i:after { top: 8px; }

.aquos-header .mobile-menu a.active i { background-color: transparent; }

.aquos-header .mobile-menu a.active i:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 0px; }

.aquos-header .mobile-menu a.active i:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 0px; }

.aquos-header .mobile-menu-list { display: none; position: absolute; top: 55px; left: 0; width: 100%; overflow: auto; background-color: #f6f6f6; }

.aquos-header .mobile-menu-list.init { display: block; }

.aquos-header .mobile-menu-list ul { padding-bottom: 40px; }

.aquos-header .mobile-menu-list li { padding: 0px 10px 0px 20px; }

.aquos-header .mobile-menu-list li a { display: block; height: 50px; padding-left: 60px; color: #333; font-size: 14px; line-height: 50px; border-bottom: 1px solid #e6e6e6; background-repeat: no-repeat; background-size: 45px auto; background-position: left center; }

.aquos-header .mobile-menu-list li.text { padding: 0px 10px 0px 10px; }

.aquos-header .mobile-menu-list li.text a { padding-left: 0px; }

@media screen and (max-width: 768px) { .aquos-header .mobile-menu { display: block; height: 64px; }
  .aquos-header .mobile-menu-list { top: 64px; } }

@media screen and (max-width: 480px) { .aquos-header { height: 55px; }
  .aquos-header-inner { width: 100%; height: 55px; }
  .aquos-header .sharp-logo { top: 15px; left: 10px; }
  .aquos-header .sharp-logo img { width: 75px; height: auto; }
  .aquos-header .aquos-logo { top: 14px; left: 50%; margin-left: -66px; }
  .aquos-header .aquos-logo img { width: 132px; height: auto; }
  .aquos-header .mobile-menu { height: 55px; }
  .aquos-header .mobile-menu-list { top: 55px; } }

.accessories_header{position:relative;}

.global-nav-header { height: 66px; overflow: hidden; background-color: #f6f6f6; }

.global-nav-header .global-nav { float: right; }
.global-nav-header .global-nav {width: calc(100% - 400px);}
.global-nav-header .global-nav ul { display:flex; }

.global-nav-header .global-nav li { display: inline-block; /*margin-right: 60px; */}
.global-nav-header .global-nav li{width:100%;}

/*.global-nav-header .global-nav li:last-child { margin-right: 0px; }*/

.global-nav-header .global-nav li a { display: block; padding: 24px 30px; color: #333; }
.global-nav-header .global-nav li a {display:flex;padding: 0 5px;text-align: center; justify-content: center; align-items: center; height: 66px;}

.global-nav-header .global-nav li a:hover { color: #8a8e9a; }

.global-nav-header .device-nav { float: left; }

.global-nav-header .device-nav .user-device-phone a { display: block; padding: 5px 0px; }

.global-nav-header .device-nav .user-device-phone a span { display: block; min-width: 350px; padding: 20px 60px 20px 35px; border-radius: 6px; text-align: center; color: #fff; background-color: #8a8e9a; position: relative; height:56px;line-height: 16px;}

.global-nav-header .device-nav .user-device-phone a span i { display: block; width: 22px; height: 22px; position: absolute; right: 10px; top: 50%; margin-top: -11px; font-style: normal; transform: rotate(45deg); }

.global-nav-header .device-nav .user-device-phone a span i:before, .global-nav-header .device-nav .user-device-phone a span i:after { content: ""; position: absolute; background-color: #fff; }

.global-nav-header .device-nav .user-device-phone a span i:before { width: 22px; height: 2px; top: 10px; right: 0px; }

.global-nav-header .device-nav .user-device-phone a span i:after { width: 2px; height: 22px; top: 0px; right: 10px; }

.global-nav-header .device-nav .user-device-phone a span.default-selection { min-width: 350px; padding: 18px 0px; text-align: center; }

.global-nav-header .device-nav .user-device-phone a span.default-selection i { transform: rotate(0deg); }

.global-nav-header .device-nav .user-device-phone .device-image { position: absolute; width: auto; max-width: 26px; height: 50px; top: 0px; right: auto; margin-left: 10px; }

@media screen and (max-width: 768px) { .global-nav-header { height: auto; }
  .global-nav-header .container { display: flex; flex-direction: column-reverse; }
  .global-nav-header .global-nav { float: none; display: block; width:auto;}
  .global-nav-header .global-nav ul { display: flex; justify-content: space-around; }
  .global-nav-header .global-nav li { margin-right:0;width: 100%;position: relative; }
  .global-nav-header .global-nav li a {  padding: 10px 5px 10px; text-align: center; line-height: 1.2; font-size: 12px;height:auto; }
  .global-nav-header .global-nav li:nth-child(n+2)::before { content: ""; width: 1px; height: 24px; background-color: #bbb; position: absolute; top: 14px; left: 0; }
  .global-nav-header .device-nav { float: none; width: 98%; margin-left: auto; margin-right: auto; }
  .global-nav-header .device-nav .user-device-phone a { padding: 5px 0px; }
  .global-nav-header .device-nav .user-device-phone a span { padding: 15px 30px 15px 10px; border-radius: 10px; text-align: center;height:50px; line-height: normal;}
  .global-nav-header .device-nav .user-device-phone a span i { display: block; width: 18px; height: 18px; margin-top: -9px; }
  .global-nav-header .device-nav .user-device-phone a span i:before { width: 18px; height: 2px; top: 8px; right: 0px; }
  .global-nav-header .device-nav .user-device-phone a span i:after { width: 2px; height: 18px; top: 0px; right: 8px; }
  .global-nav-header .device-nav .user-device-phone .device-image { height: 86%; right: auto; margin-left: 10px; } }

@media screen and (max-width: 480px) { .global-nav-header .device-nav .user-device-phone a span { min-width: 0px; }
  .global-nav-header .device-nav .user-device-phone a span.default-selection { min-width: 0px; width: 100%; padding: 12px 0px; text-align: center; } }

@media screen and (max-width: 320px) { .global-nav-header .device-nav .user-device-phone a span { text-align: left; }
  .global-nav-header .device-nav .user-device-phone .device-image { right: 20px; margin-left: 0px; } }

.header-toggle-menu { width: 100%; height: auto; position: absolute; top: 100%; z-index: 5; background-color: #f6f6f6; }

.header-toggle-menu .toggle-item { display: none; padding: 20px 0px 40px; }

.header-toggle-menu .toggle-item.show { display: block; }

.device-select-inner { text-align: center; }

.device-select-inner h3 { font-size: 16px; }

.device-select-inner .device-select-tab { margin-top: 20px; }

.device-select-inner .device-select-tab li { display: inline-block; width: auto; margin: 0px 10px; }

.device-select-inner .device-select-tab li a.round-button { padding: 0px 25px; }

.device-select-inner .device-select-list { margin-top: 20px; }

.device-select-inner .device-select-list ul { display: none; }

.device-select-inner .device-select-list ul.selected { display: block; }

.device-select-inner .device-select-list ul.old-devices { display: inline; }

.device-select-inner .device-select-list li { display: inline-block; width: 150px; height: 200px; margin-bottom: 10px; vertical-align: top; }

.device-select-inner .device-select-list li a { display: block; width: 100%; height: 100%; color: #333; font-size: 12px; background-color: transparent; border-radius: 10px; }

.device-select-inner .device-select-list li a.selected, .device-select-inner .device-select-list li a:hover { color: #fff; background-color: #c5c5c5; }

.device-select-inner .device-select-list li .model-image { height: 126px; }

.device-select-inner .device-select-list li .model-image img { height: 100%; width: auto; }

.device-select-inner .device-select-list li .model-name { margin-top: 20px; }

@media screen and (max-width: 768px) { .header-toggle-menu .toggle-item.show.toggle-menu-category { display: none; }
  .device-select-inner .device-select-tab li { margin: 0px 10px 10px; } }

@media screen and (max-width: 480px) { .device-select-inner .device-select-tab li a.round-button { padding: 0px 20px; }
  .device-select-inner .device-select-list ul { border-top: 1px solid #e6e6e6; }
  .device-select-inner .device-select-list li { display: block; width: 100%; height: 60px; margin-bottom: 0; }
  .device-select-inner .device-select-list li a { font-size: 13px; text-align: left; border-bottom: 1px solid #e6e6e6; border-radius: 0px; padding: 0px 5px; }
  .device-select-inner .device-select-list li a.selected { color: #fff; background-color: #c5c5c5; }
  .device-select-inner .device-select-list li .model-image { display: inline-block; width: 50px; height: 50px; vertical-align: top; text-align: center; }
  .device-select-inner .device-select-list li .model-name { display: inline-block; margin-top: 0px; padding-top: 12px; }
  .device-select-inner .device-select-list .old-device-button { text-align: center; }
  .device-select-inner .device-select-list .old-device-button a { display: inline-block; padding: 10px 0px; color: #0990ee; font-family: 'Noto Sans CJK JP Light', sans-serif; font-weight: 300; font-size: 20px; }
  .device-select-inner .device-select-list .old-devices { display: none; width: 100%; }
  .device-select-inner .device-select-list .old-devices.show { display: inline !important; }
  .device-select-inner .device-select-list .old-devices li a { padding-left: 15px; }
  .device-select-inner .device-select-list .old-devices li .model-image { display: none; } }

.header-coach-mark { width: 100%; height: auto; position: absolute; top: 85px; z-index: 6; opacity: 0.0; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }

.header-coach-mark.init { opacity: 1.0; }

.coach-mark-box { width: 100%; height: 300px; margin-top: 40px; background-color: rgba(0, 0, 0, 0.85); text-align: center; position: relative; }

.coach-mark-box:after { content: ""; position: absolute; top: -40px; right: min(calc(100% - 212px), calc(50% + 270px)); width: 0; height: 0; border-style: solid; border-width: 0 30px 40px 30px; border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent; }

.coach-mark-box h4 { color: white; font-size: 24px; }

@media screen and (max-width: 1200px) {/* .coach-mark-box:after { right: 22%; }*/ }

@media screen and (max-width: 768px) { 
  .header-coach-mark {top:60px;}
  .coach-mark-box { height: 240px; margin-top: 30px; }
  .coach-mark-box:after { top: -30px; left: 50%; margin-left: -20px; border-width: 0 20px 30px 20px; } }

@media screen and (max-width: 480px) { /*.header-coach-mark { top: 110px; }*/
  .coach-mark-box { height: 200px; }
  .coach-mark-box h4 { font-size: 18px; } }

.bottom-banners { padding: 40px 0px; background-color: #f6f6f6; }

.bottom-banners .banner-items { text-align: center; font-size: 0; }

.bottom-banners .banner-items li { display: inline-block; width: 25%; padding: 0px 2px; font-size: 100%; }

.bottom-banners .banner-items li a { display: block; }

.bottom-banners .banner-items li a:hover { opacity: 0.6; }

.bottom-banners .banner-items li img { width: 100%; height: auto; }

.bottom-banners .g { text-align: center !important; font-size: 0 !important; }

.bottom-banners .g .g-col { display: inline-block !important; width: 25% !important; padding: 0px 2px !important; font-size: 100% !important; }

.bottom-banners .g .g-col a { display: block; }

.bottom-banners .g .g-col a:hover { opacity: 0.6; }

.bottom-banners .g .g-col img { width: 100%; height: auto; }

@media screen and (max-width: 480px) { .bottom-banners { padding: 30px 0px; }
  .bottom-banners .banner-items li { width: 100%; margin-bottom: 5px; }
  .bottom-banners .g .g-col { width: 100% !important; margin-bottom: 5px !important; } }

.breadcrumbs p { color: #666; font-size: 13px; }

.breadcrumbs a { color: #0990ee; }
.footer_sub_link { padding: 5px 0px; background-color: #f6f6f6; }
.footer_sub_link p { font-size:13px;}
.footer_sub_link p a,.footer_sub_link p a:visited, .footer_sub_link p a:active  { color:#333;}
.footer_sub_link p a:hover { text-decoration: underline;}
.footer_sub_link p a::before{content:"";display:inline-block;width:0.4em;height:0.4em;border-bottom:1px solid;border-right:1px solid;transform:translateY(-0.1em) rotate(-45deg);margin-right:0.5em;}
@media screen and (max-width: 480px) {
  .footer_sub_link p{ font-size:11px;}
}
@media screen and (max-width: 480px) { .breadcrumbs p { font-size: 11px; } }

/*footer { width: 100%; height: auto; background-color: #616161; }*/

.footer-nav-container { width: 100%; margin: 0px auto; padding-top: 50px; padding-bottom: 60px; position: relative; }

.footer-nav-container:after { content: ''; display: block; clear: both; }

.footer-nav-block { float: left; }

.footer-nav-block.block-logo { width: 260px; }

.footer-nav-block.block-menu { width: 420px; }

.footer-nav-block.block-related { width: 280px; }

.footer-nav-block .footer-menu li { line-height: 1.4em; margin-bottom: 8px; }

.footer-nav-block .footer-menu li a { color: #fff; font-size: 14px; }

.block-logo .block-logo-item { width: 160px; }

.block-logo .block-logo-item img { width: 100%; height: auto; }

.block-logo .block-logo-social { margin-top: 30px; }

.block-logo .block-logo-social span { display: inline-block; width: 37px; height: 37px; margin: 0px 10px; }

.block-logo .block-logo-social span:first-child { margin-left: 0px; }

.block-logo .block-logo-social span:last-child { margin-right: 0px; }

.block-logo .block-logo-social a { display: block; width: 37px; height: 37px; text-indent: 300%; white-space: nowrap; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: 37px 37px; }

.block-logo .block-logo-social a.share-fb { background-image: url(./images/common/icon_sns_facebook.png); }

.block-logo .block-logo-social a.share-tw { background-image: url(./images/common/icon_sns_twitter.png); }

.block-logo .block-logo-social a.share-gp { background-image: url(./images/common/icon_sns_google.png); }

.block-menu:after { content: ''; display: block; clear: both; }

.block-menu li a:hover { text-decoration: underline; }

.block-menu .block-menu-pages { float: left; width: 180px; }

.block-menu .block-menu-categories { float: left; width: 240px; }

.block-related > p { margin: 0 0 10px; color: #fff; }

.block-related a { position: relative; padding-left: 15px; }

.block-related a:before { content: "・"; position: absolute; left: 0; }

.block-related a:hover { text-decoration: underline; }

@media screen and (max-width: 980px) { .footer-nav-container { width: 100%; }
  .footer-nav-block.block-logo { float: none; width: 100%; margin-bottom: 40px; }
  .footer-nav-block.block-menu { width: 66.6666666%; }
  .footer-nav-block.block-related { width: 33.3333333%; }
  .block-logo .block-logo-item { margin: 0px auto; }
  .block-logo .block-logo-social { margin-top: 20px; text-align: center; }
  .block-menu .block-menu-pages { width: 50%; }
  .block-menu .block-menu-categories { width: 50%; } }

@media screen and (max-width: 768px) { .footer-nav-block .footer-menu li a { font-size: 13px; } }

@media screen and (max-width: 480px) { .footer-nav-container { padding-top: 30px; padding-bottom: 160px; }
  .footer-nav-block.block-logo { margin-bottom: 0px; }
  .footer-nav-block.block-menu { float: none; width: 100%; }
  .footer-nav-block.block-related { float: none; width: 100%; margin-top: 30px; }
  .footer-nav-block .footer-menu li { margin-bottom: 0px; }
  .block-logo { position: absolute; bottom: 10px; }
  .block-logo .block-logo-item { position: absolute; bottom: 20px; left: 50%; margin-left: -80px; }
  .block-logo .block-logo-social { margin-top: 0px; padding-bottom: 80px; }
  .block-menu .block-menu-pages { width: 100%; }
  .block-menu .block-menu-pages .footer-menu li { border-bottom: 1px solid #fff; }
  .block-menu .block-menu-pages .footer-menu li a { display: block; padding: 10px 0px; }
  .block-menu .block-menu-categories { width: 100%; }
  .block-related .footer-menu li a { display: inline-block; padding: 8px 0px 8px 15px; } }

.footer-sub-container { padding-bottom: 20px; }

.footer-sub-container:after { content: ''; display: block; clear: both; }

.footer-sub-container .footer-sub-links { float: left; }

.footer-sub-container .footer-sub-copyright { float: right; }

.footer-sub-container p { color: #fff; font-size: 12px; font-family: 'Noto Sans CJK JP Regular', sans-serif; font-weight: 400; }

.footer-sub-container a { color: #fff; }

.footer-sub-container a:hover { text-decoration: underline; }

@media screen and (max-width: 768px) { .footer-sub-container .footer-sub-links, .footer-sub-container .footer-sub-copyright { float: none; text-align: center; } }

/*-------------------------------------------------- List Layout --------------------------------------------------*/
.category-section { padding-top: 60px; }

.category-sub-list { margin-bottom: 60px; }

.category-sub-list ul { text-align: center; }

.category-sub-list li { display: inline-block; margin: 0px 10px; margin-bottom: 12px; }

@media screen and (max-width: 768px) { .category-sub-list { margin-bottom: 40px; }
  .category-sub-list li { margin: 0px 8px; margin-bottom: 10px; } }

@media screen and (max-width: 480px) { .category-sub-list { margin-bottom: 30px; }
  .category-sub-list ul { text-align: center; }
  .category-sub-list li { margin: 0px 4px; margin-bottom: 6px; } }

.category-title h1 { color: #333; font-family: 'Noto Sans CJK JP Light', sans-serif; font-weight: 300; font-size: 48px; text-align: center; }

@media screen and (max-width: 768px) { .category-section { padding-top: 40px; }
  .category-title h1 { font-size: 36px; } }

@media screen and (max-width: 480px) { .category-section { padding-top: 20px; }
  .category-title h1 { font-size: 26px; } }

.category-items { padding-top: 60px; }

.category-item { margin-bottom: 50px; position: relative; }

.category-item:after { display: none; content: ""; position: absolute; top: 80px; right: 5px; z-index: 3; width: 22px; height: 56px; background-color: transparent; background-image: url(./images/common/nav_arrow_next.png); background-repeat: no-repeat; background-size: 22px 56px; opacity: 0.6; }

.category-item:hover:after { display: block; }

.category-item:hover .category-item-image { opacity: 0.6; }

.category-item:hover .category-item-meta .meta-product-title h3 a { color: #8a8e9a; }

.category-item:hover .category-item-meta .meta-product-price p { color: #8a8e9a; }

.category-item .category-item-image { padding: 20px 30px; width: 100%; height: 240px; }

.category-item .category-item-image a.item-image-box { display: block; width: 100%; height: 100%; text-align: center; overflow: hidden; position: relative; }

.category-item .category-item-image img { width: 100%; height: auto; }

.category-item .category-item-image.vertical-image img { width: auto; height: 100%; }

.category-item .category-item-image .logo-image { position: absolute; right: 0; bottom: 0; z-index: 2; width: 64px; }

.category-item .category-item-meta { width: 100%; height: auto; padding: 0px 10px; }

.category-item .category-item-meta .meta-label { height: 20px; }

.category-item .category-item-meta .meta-label .label-new { color: #f00; font-size: 12px; }

.category-item .category-item-meta .meta-product-title { height: 40px; overflow: hidden; }

.category-item .category-item-meta .meta-product-title h3 { font-size: 14px; line-height: 1.5; }

.category-item .category-item-meta .meta-product-title h3 a { color: #333; }

.category-item .category-item-meta .meta-product-price { margin-top: 15px; height: 20px; }

.category-item .category-item-meta .meta-product-price p { color: #666; font-size: 12px; }

.category-item .category-item-meta .meta-badge { margin-top: 10px; height: 30px; }

.category-item .category-item-meta .meta-category { margin-top: 10px; /*height: 30px;*/ }

.category-item .category-item-meta .meta-category .button.round-button {margin-right:5px; margin-bottom: 2px;}

@media screen and (max-width: 768px) { .category-items { padding-top: 40px; }
  .category-item { margin-bottom: 30px; }
  .category-item:after { top: 70px; }
  .category-item .category-item-image { height: auto; padding-top: 70%; position: relative; }
  .category-item .category-item-image a.item-image-box { position: absolute; top: 0; left: 0; margin: 5%; width: 90%; height: 90%; }
  .category-item .category-item-image .logo-image { width: 48px; } }

@media screen and (max-width: 480px) { .category-items { padding-top: 30px; }
  .category-item { margin-bottom: 20px; }
  .category-item:after { top: 20%; width: 11px; height: 28px; background-size: 11px 28px; }
  .category-item .category-item-image a.item-image-box { margin: 0; }
  .category-item .category-item-image .logo-image { width: 40px; }
  .category-item .category-item-meta { padding: 0px 5px 10px; }
  .category-item .category-item-meta .meta-product-title { height: 56px; }
  .category-item .category-item-meta .meta-product-title h3 { font-size: 13px; }
  .category-item .category-item-meta .meta-product-title h3 a { color: #333; }
  .category-item .category-item-meta .meta-product-price { margin-top: 5px; }
  .category-item .category-item-meta .meta-product-price p { margin: 0; }
  .category-item .category-item-meta .meta-category { margin-top: 5px; } }

.load-more-button { text-align: center; }

.load-more-button a { display: inline-block; color: #0990ee; font-family: 'Noto Sans CJK JP Light', sans-serif; font-weight: 300; font-size: 38px; }

.load-more-button a:hover { opacity: 0.6; }

#page-navi { display: none; }

@media screen and (max-width: 768px) { .load-more-button a { font-size: 28px; } }

@media screen and (max-width: 480px) { .load-more-button a { font-size: 20px; } }

.category-sort { margin-top: 80px; }

.category-sort ul { text-align: center; }

.category-sort li { display: inline-block; margin: 0px 10px; }

@media screen and (max-width: 768px) { .category-sort { margin-top: 60px; }
  .category-sort li { margin: 0px 10px; margin-bottom: 8px; } }

@media screen and (max-width: 480px) { .category-sort { margin-top: 40px; }
  .category-sort li { margin: 0px 4px; margin-bottom: 6px; } }

.category-no-item { text-align: center; }

.category-no-item a { color: #0990ee; }

.search-words{text-align: center; margin-top:40px}
.search-no-item{  text-align: center;margin-top:40px;}
/*-------------------------------------------------- Single Layout --------------------------------------------------*/
.single-section { padding-top: 40px; }

.detail-image-container { padding-bottom: 5px; position: relative; }

.detail-image { width: 588px; min-height: 470px; height: auto; position: relative; overflow: hidden; border: 1px solid #b4b4b4; }

.detail-image .large-image { display: none; position: absolute; width: 100%; }

.detail-image .large-image img { width: 100%; height: auto; }

.detail-image .large-image.vertical-image { height: 100%; text-align: center; }

.detail-image .large-image.vertical-image img { width: auto; height: 100%; }

.detail-image .large-image:first-child { display: block; }

.detail-image .logo-image { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 80px; }

.detail-image .logo-image img { width: 100%; height: auto; }

.detail-thumbnail { width: 100%; height: auto; margin-top: 10px; }

.detail-thumbnail ul { text-align: center; }

.detail-thumbnail li { border: 1px solid #b4b4b4; height: auto; display: inline-block; vertical-align: top; }

.detail-thumbnail li a { display: block; height: 100%; max-height: 80px; overflow: hidden; }

.detail-thumbnail li img { width: 88px; height: auto; }

.detail-thumbnail li.selected { border: 1px solid #b4b4b4; }

.detail-data-container { width: 340px; margin-right: 5px; padding-left: 10px; border-top: 4px solid #b4b4b4; }

.item-name { margin-top: 15px; padding-bottom: 10px; border-bottom: 1px solid #b4b4b4; }

.item-name .label-new { color: #f00; }

.item-maker-name { font-size: 16px; line-height: 1.7em; }

.item-product-name { font-size: 18px; line-height: 1.7em; }

.item-info { margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #b4b4b4; word-wrap: break-word; }

.item-info p { font-size: 13px; margin: 0px 0px 5px; }

.item-other { margin-top: 10px; }

.item-other-badge { margin-bottom: 10px; }

.item-other-category a { display: inline-block; margin-right: 10px; margin-bottom: 10px;overflow: visible; }
.item-other-category a.parent {background-color:#eee;position:relative;overflow: visible;margin-right:25px;}
.item-other-category a.parent::after {
  content:"";
  position: absolute;
  top: 50%;
  right: -15px;
  width:7px;
  height:7px;
  border-top:1px solid #b4b4b4;
  border-right:1px solid #b4b4b4;
  transform: translateY(-50%) rotate(45deg);
}
.item-other-price { font-size: 20px; }

.item-other-link { width: 320px; height: 52px; margin-top: 5px; }

.btn-item-link { color: #fff; font-size: 18px; line-height: 52px; text-align: center; width: 100%; height: 52px; display: block; padding: 0px; background-color: #0858a3; border-radius: 10px; position: relative; }

.btn-item-link:after { content: ""; position: absolute; right: 15px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

.btn-item-link:hover { background-color: #0062ac; }

.item-notice { margin-top: 10px; }

.item-shares { margin-top: 20px; text-align: center; }

.item-shares span { width: 34px; height: 34px; text-indent: -9999em; padding: 0px 3px; margin-left: 5px; margin-right: 5px; background-image: url("images/category/category_detail_shares.png"); background-repeat: no-repeat; display: inline-block; }

.item-shares a { width: 34px; height: 34px; display: block; }

.item-share-fb { background-position: 0px 0px; }

.item-share-tw { background-position: 0px -34px; }

.item-share-gp { background-position: 0px -68px; }

@media screen and (max-width: 980px) { .detail-image-container { width: 58%; }
  .detail-image { width: 100%; min-height: 360px; }
  .detail-data-container { width: 40%; }
  .item-other-link { width: 100%; height: 52px; margin-top: 5px; } }

@media screen and (max-width: 768px) { .detail-image-container { float: none !important; width: 100%; }
  .detail-image { width: 100%; min-height: 0px; padding-top: 80%; }
  .detail-image .large-image { width: 100%; position: absolute; top: 0; }
  .detail-data-container { float: none !important; width: 100%; margin-top: 30px; }
  .item-other-link { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } }

@media screen and (max-width: 480px) { .single-section { padding-top: 20px; }
  .detail-image .large-image { width: 100%; height: 100%; }
  .detail-image .large-image a { display: block; width: 100%; height: 100%; }
  .detail-image .logo-image { width: 64px; }
  .detail-thumbnail { height: auto; width: 100%; padding: 0px; letter-spacing: -.40em; }
  .detail-thumbnail li { display: box; width: 19%; height: auto; margin: 0px 1% 0px 0px; box-sizing: border-box; letter-spacing: normal; }
  .detail-thumbnail li a { max-height: 60px; }
  .detail-thumbnail li img { width: 100%; height: auto; }
  .detail-thumbnail li:last-child { margin: 0px; }
  .detail-data-container { width: 96%; float: none; position: relative; margin: 10px auto 0px; padding: 0px; border: none; }
  .item-name { border-top: 4px solid #b4b4b4; padding-top: 15px; }
  .item-maker-name { font-size: 12px; }
  .item-product-name { font-size: 14px; }
  .item-info { margin-top: 5px; padding-bottom: 5px; }
  .item-info p { font-size: 12px; }
  .item-other-price p { font-size: 17px; }
  .item-other-link { width: 100%; height: 45px; max-width: 100%; }
  .btn-item-link { color: #fff; font-size: 14px; line-height: 45px; width: 100%; height: 45px; padding: 0px; }
  .item-notice { font-size: 10px; }
  .item-shares span { width: 29px; height: 29px; background-image: url("images/category/category_detail_shares_sp.png"); background-size: 29px 87px; }
  .item-shares a { width: 29px; height: 29px; }
  .item-share-fb { background-position: 0px 0px; }
  .item-share-tw { background-position: 0px -29px; }
  .item-share-gp { background-position: 0px -58px; } }

@media screen and (max-width: 320px) { .detail-thumbnail li a { max-height: 50px; } }

.info-item { padding-top: 30px; }

.info-item .info-name h5 { color: #666; font-size: 16px; }

.info-item .info-text { padding-bottom: 10px; border-bottom: 1px solid #c5c5c5; }

.info-item .info-text p { margin: 0px 0px 20px; }

@media screen and (max-width: 480px) { .single-content-info .info-item:first-child { padding-top: 0px; }
  .info-item { padding-top: 20px; }
  .info-item .info-name h5 { font-size: 15px; margin-bottom: 10px; }
  .info-item .info-text { padding-bottom: 5px; }
  .info-item .info-text p { margin: 0px 0px 16px; } }

.yarpp-section .yarpp-related { margin: 0; }

.yarpp-section .yarpp-related h3 { font-weight: 400; text-transform: none; padding: 0; }

.yarpp-section .yarpp-related a { font-weight: normal; }

.single-content-similar .category-items { padding-top: 0px; }

.single-content-similar .category-item { margin-bottom: 20px; }

.single-content-inner h4 { font-size: 18px; margin-bottom: 20px; }

.single-content-inner p { line-height: 1.8; margin-bottom: 15px; }

.single-content-inner a { color: #0990ee; }

/*-------------------------------------------------- Module Items --------------------------------------------------*/
.button { color: #333; font-size: 14px; display: inline-block; overflow: hidden; }

.button.small { font-size: 12px; }

.button.round-button { width: auto; height: 30px; padding: 0px 15px; line-height: 30px; letter-spacing: -0.035em; background-color: #fff; border: 1px solid #b4b4b4; border-radius: 16px; }

.button.round-button.selected, .button.round-button:hover { color: #fff; background-color: #333; border-color: #333; }

.button.round-light-button { width: auto; height: 30px; padding: 0px 15px; line-height: 30px; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 14px; }

.button.round-light-button.selected, .button.round-light-button:hover { color: #fff; background-color: #333; border-color: #333; }

.button.round-light-button.no-action.selected, .button.round-light-button.no-action:hover { color: #333; background-color: #e6e6e6; border-color: #e6e6e6; }

@media screen and (max-width: 480px) { .button { font-size: 12px; }
  .button.round-button { padding: 0px 10px; }
  .button.round-light-button { padding: 0px 10px; } }

@media screen and (max-width: 320px) { .button { font-size: 10px; } }

.middle-item { display: table; width: 100%; height: 100%; }

.middle-item .middle-item-inner { display: table-cell; vertical-align: middle; }

.vertical-image .middle-item { display: block; width: auto; height: inherit; }

.vertical-image .middle-item .middle-item-inner { display: block; width: auto; height: inherit; }

.fields { display: block; }

.fields:after { content: ''; display: block; clear: both; }

.fields > .region { float: left; }

.fields > .region.right { float: right; }

.fields.blocks { -js-display: flex; display: flex; display: -ms-flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; }

.fields.blocks > .region { float: none; }

.fields.inlines { font-size: 0; }

.fields.inlines > .region { display: inline-block; font-size: 100%; }

.fields.col20 { margin-left: -20px; }

.fields.col20 > .region { margin-left: 20px; }

.fields.size1of2 > .region { width: 50%; }

.fields.size1of2.col20 > .region { width: -webkit-calc(50% - 20px); width: calc(50% - 20px); }

.fields.size1of3 > .region { width: 33.3333333333%; }

.fields.size1of3.col20 > .region { width: -webkit-calc(33.3333333333% - 20px); width: calc(33.3333333333% - 20px); }

.fields.size1of3.col20 > .region.double { width: -webkit-calc(66.666666667% - 20px); width: calc(66.666666667% - 20px); }

.fields.size-item > .region, .fields.size1of4 > .region { width: 25%; }

.fields.size-item.col20 > .region, .fields.size1of4.col20 > .region { width: -webkit-calc(25% - 20px); width: calc(25% - 20px); }

.fields.size-item.col20 > .region.double, .fields.size1of4.col20 > .region.double { width: -webkit-calc(50% - 20px); width: calc(50% - 20px); }

.fields.size-item.col20 > .region.triple, .fields.size1of4.col20 > .region.triple { width: -webkit-calc(75% - 20px); width: calc(75% - 20px); }

@media screen and (max-width: 980px) { .fields.size-item > .region { width: 33.3333333333%; }
  .fields.size-item.col20 { margin-left: -20px; }
  .fields.size-item.col20 > .region { margin-left: 20px; width: -webkit-calc(33.3333333333% - 20px); width: calc(33.3333333333% - 20px); }
  .fields.size-item.col20 > .region.double { width: -webkit-calc(66.666666667% - 20px); width: calc(66.666666667% - 20px); } }

@media screen and (max-width: 480px) { .fields > .region, .fields > .region.right { float: none; width: 100%; }
  .fields.col20 { margin-left: 0px; }
  .fields.col20 > .region { margin-left: 0px; }
  .fields.size1of2 > .region, .fields.size1of3 > .region, .fields.size1of4 > .region { width: 25%; }
  .fields.size1of2.col20 > .region, .fields.size1of3.col20 > .region, .fields.size1of4.col20 > .region { width: 100%; }
  .fields.size1of2.col20 > .region.double, .fields.size1of3.col20 > .region.double, .fields.size1of4.col20 > .region.double { width: 100%; }
  .fields.size1of2.col20 > .region.triple, .fields.size1of3.col20 > .region.triple, .fields.size1of4.col20 > .region.triple { width: 100%; }
  .fields.size-item > .region { width: 50%; float: left; }
  .fields.size-item.col20 { margin-left: -10px; }
  .fields.size-item.col20 > .region { margin-left: 10px; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); } }

.main-content { padding-bottom: 120px; }

section { width: 100%; height: auto; }

.section-title { margin-top: 60px; margin-bottom: 40px; }

.section-title h2 { color: #333; font-size: 30px; text-align: center; }

.section-title-sub { margin-top: 30px; margin-bottom: 40px; }

.section-title-sub h2 { color: #333; font-size: 30px; text-align: center; }

.container { max-width: 980px; margin: 0px auto; padding-left: 10px; padding-right: 10px; position: relative; }
.BaseHeader_header__apMeG .container {max-width:none;padding-left: 0; padding-right: 0;}
.container:after { content: ''; display: block; clear: both; }

.full-container { max-width: 1220px; margin: 0px auto; padding-left: 10px; padding-right: 10px; position: relative; }

.full-container:after { content: ''; display: block; clear: both; }

@media screen and (max-width: 768px) { .main-content { padding-bottom: 80px; } }

@media screen and (max-width: 480px) { .main-content { padding-bottom: 60px; }
  .section-title { margin-top: 40px; margin-bottom: 30px; }
  .section-title h2 { font-size: 24px; }
  .section-title-sub { margin-top: 0px; margin-bottom: 20px; }
  .section-title-sub h2 { font-size: 24px; } }

.nav-categories { width: 100%; }

.nav-categories h3 {text-align: center; margin: 0 auto 20px;font-size:16px;width:90%;}

.nav-categories .container { padding-left: 40px; padding-right: 40px; }

.nav-categories .category-list { width: 100%; margin: 0px auto; padding: 10px 0px; overflow: hidden; text-align: center; }

.nav-categories .category-list.slick-item .slick-track { margin: 0px auto; }

.nav-categories .category-list.slick-item li { width: auto; margin: 0px 1px; }

.nav-categories .category-list.slick-item a { width: 98%; }

.nav-categories .category-list.slick-item a span { color: transparent; }

.nav-categories .category-list.slick-item.slick-slider a span { color: #333; }

.nav-categories .category-list li { display: inline-block; width: 16.6666666%; margin: 0px; }

.nav-categories .category-list a { display: block; width: 100%; height: 124px; color: #333; font-family: 'Noto Sans CJK JP Regular', sans-serif; font-weight: 400; font-size: 12px; border-radius: 10px; background-position: center 15px; background-repeat: no-repeat; background-size: 80px 70px; position: relative; }

.nav-categories .category-list a.current, .nav-categories .category-list a:hover { opacity: 0.5; }

.nav-categories .category-list a span { position: absolute; bottom: 10px; width: 100%; text-align: center; word-wrap: break-word; overflow-wrap: break-word; padding-left: 2px; padding-right: 2px; display: block; }

.nav-search {width:100%; text-align: center;padding:0 0 20px;}
.nav-search h3{margin:0 auto 40px;font-size:16px; width:90%}

.nav-search .search_form { max-width: 600px; margin: 0 auto; width: 90%; position: relative;}
.nav-search .search_input{ border: 1px solid #999; border-radius: 30px; box-sizing: border-box; height: 40px; padding-left: 20px; padding-right: 60px; -webkit-appearance: none; width: 100%;}
.nav-search .search_input:focus{outline:none}
.nav-search .search_input::placeholder{font-family:"Noto Sans CJK JP Regular";color:#bbb; }
.nav-search .search_btn{ position: absolute; right: 0; top: 0; height: 40px; border: 1px solid #999; width: 50px; border-bottom-right-radius: 30px;   border-top-right-radius: 30px; cursor: pointer; background: url(./images/common/icon_search.png) no-repeat; background-size: 30px; background-position: center;background-color:#999;transition: 0.3s;}
.nav-search .search_btn:focus{outline:none;background-color:#888;}
.nav-search .search_btn:hover{background-color:#888;}
  
.nav-case { background-image: url(./images/common/nav_case.png); }

.nav-protectionsheet { background-image: url(./images/common/nav_protection.png); }

.nav-audiovisual { background-image: url(./images/common/nav_audiovisual.png); }

.nav-headphones { background-image: url(./images/common/nav_earphone.png); }

.nav-iodevice { background-image: url(./images/common/nav_iodevice.png); }

.nav-healthcare { background-image: url(./images/common/nav_healthcare.png); }

.nav-vehicle { background-image: url(./images/common/nav_cardevice.png); }

.nav-strap_mascot { background-image: url(./images/common/nav_strap.png); }

.nav-charger { background-image: url(./images/common/nav_charger.png); }

.nav-cable { background-image: url(./images/common/nav_cable.png); }

.nav-memory { background-image: url(./images/common/nav_memory.png); }

.nav-more { background-image: url(./images/common/nav_more.png); }

.nav-categories-sp .nav-categories-sp-switch { display: none; margin: 20px 0px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }

.nav-categories-sp .nav-categories-sp-switch .switch-button { display: block; padding: 10px 20px; color: #333; font-family: 'Noto Sans CJK JP Light', sans-serif; font-weight: 300; font-size: 24px; position: relative; }

.nav-categories-sp .nav-categories-sp-switch .switch-button:after { content: ""; display: block; width: 31px; height: 11px; position: absolute; right: 20px; top: 50%; margin-top: -5px; background-image: url(./images/common/nav_arrow_down.png); background-repeat: no-repeat; background-size: 31px 11px; -webkit-transition: transform 0.4s ease 0s; -moz-transition: transform 0.4s ease 0s; -ms-transition: transform 0.4s ease 0s; -o-transition: transform 0.4s ease 0s; transition: transform 0.4s ease 0s; }

.nav-categories-sp .nav-categories-sp-block { display: block; }

@media screen and (max-width: 980px) { .nav-categories .category-list li { display: inline-block; width: 20%; margin: 0px; padding: 0px 0.5%; }
  .nav-categories .category-list a { width: 100%; } }

@media screen and (max-width: 767px) { .nav-categories .container { padding: 0; }
  .nav-categories .category-list { overflow: visible; padding-left: 0.5%; padding-right: 0.5%; }
  .nav-categories .category-list.slick-item li { width: 25%; margin: 0px; padding: 0px 0.5%; }
  .nav-categories .category-list.slick-item a { width: 100%; }
  .nav-categories .category-list.slick-item a span { color: #333; }
  .nav-categories .category-list li { display: inline-block; width: 25%; margin: 0px; padding: 0px 0.5%; }
  .nav-categories .category-list a { width: 100%; height: 100px; font-size: 10px; background-size: 60px 52px; }
  .nav-categories-sp .nav-categories-sp-switch { display: block; }
  .nav-categories-sp .nav-categories-sp-switch .switch-button { font-size: 20px; }
  .nav-categories-sp .nav-categories-sp-block { display: none; width: 100%; padding-bottom: 20px; position: absolute; z-index: 4; background-color: white; border-bottom: 1px solid #e6e6e6; }
  .nav-categories-sp.show .nav-categories-sp-switch .switch-button:after { transform: rotateX(180deg); } }

.slick-arrow { position: absolute; top: 50%; margin-top: -28px; z-index: 3; width: 22px; height: 56px; cursor: pointer; color: transparent; border: none; outline: none; background-color: transparent; background-repeat: no-repeat; background-size: 22px 56px; }

.slick-arrow.slick-disabled { display: none !important; }

.slick-arrow.slick-prev { left: 12px; background-image: url(./images/common/nav_arrow_prev.png); }

.slick-arrow.slick-next { right: 12px; background-image: url(./images/common/nav_arrow_next.png); }

.slick-arrow:hover { opacity: 0.6; }

/* Common Layout
---------------------------------------------------------*/
.error-message { width: 100%; height: 35px; background-color: #d61010; text-align: center; }

.error-message span { display: inline-block; height: 35px; color: #fff; font-size: 15px; line-height: 35px; padding-left: 35px; position: relative; }

.error-message span:before { content: ""; display: block; width: 30px; height: 35px; position: absolute; left: 0; background-image: url("images/common/icon_error.png"); background-position: left center; background-repeat: no-repeat; }

@media screen and (max-width: 480px) { .error-message { height: 30px; }
  .error-message span { height: 30px; font-size: 11px; line-height: 32px; padding-left: 25px; }
  .error-message span:before { content: ""; width: 21px; height: 18px; background-size: 21px 18px; top: 6px; } }

/* Common Modules
---------------------------------------------------------*/
.sp { display: none; }

.spi { display: none; }

.pc { display: block; }

.pci { display: inline; }

@media screen and (max-width: 480px) { .sp { display: block !important; }
  .spi { display: inline !important; }
  .pc { display: none !important; }
  .pci { display: none !important; } }

.inline { display: inline; }

.inner { position: relative; }

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

.category-detail-content p { font-size: 14px; margin-bottom: 20px; }

.category-detail-content strong { font-weight: bold; }

.item-text-box:after { content: ''; display: block; clear: both; }

.item-box-name { width: 198px; float: left; font-size: 16px; }

.item-box-content { color: #333; width: 752px; float: right; border-bottom: 1px solid #b4b4b4; margin-bottom: 40px; padding-bottom: 20px; }

.item-box-content p { max-height: 99999px; }

.no-border { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; }

.category-content-control { margin-top: 20px; margin-bottom: 20px; }

.backto-prev-button { color: #fff; font-size: 18px; line-height: 60px; text-align: center; width: 360px; height: 60px; display: block; margin-left: auto; margin-right: auto; background-color: gray; background-image: url("imgs/common/icon_btn_arrow.png"); background-position: 60px -30px; background-repeat: no-repeat; }

.backto-prev-button:hover { text-decoration: none; background-color: gray; }

.detail-related-feature-post { position: relative; }

.related-feature-image { height: 300px; overflow: hidden; }

.related-feature-image img { width: 100%; height: auto; }

.related-feature-text { margin-top: 30px; }

.related-feature-text:after { content: ''; display: block; clear: both; }

.related-feature-title { width: 350px; float: left; }

.related-feature-title .related-feature-title-category { font-size: 10px; }

.related-feature-title h3, .related-feature-title h5 { font-size: 26px; line-height: 1.5em; margin-top: 5px; }

.related-feature-title a { color: #474747; }

.related-feature-content { width: 500px; float: right; }

.related-feature-content p { font-size: 14px; }

.related-feature-content a { color: #474747; }

#similar-items .yarpp-related { margin: 0; }

#similar-items .yarpp-related a { font-weight: normal; }

.section-title-detail { background-image: url("imgs/common/section_title_border.gif"); background-position: left center; background-repeat: repeat-x; margin: 70px 0px 50px; text-align: center; }

.section-title-detail h1, .section-title-detail h2 { color: #474747; font-size: 30px; font-weight: normal; line-height: 1em; display: inline-block; padding: 0px 25px; }

.section-title-detail.subtitle h2 { color: #474747; font-size: 22px; font-weight: normal; line-height: 1em; display: inline-block; padding: 0px 25px; }

.section-title-detail h3 { color: #474747; font-size: 22px; font-weight: normal; line-height: 1em; display: inline-block; padding: 0px 25px; }

.section-line { width: 100%; height: 4px; margin: 0px auto 40px; background-color: gray; }

#error-message { width: 100%; height: 35px; background-color: red; text-align: center; }

#error-message p { color: #fff; font-size: 15px; line-height: 35px; width: 400px; margin: 0px auto; padding-left: 35px; display: inline-block; background-image: url("imgs/common/error_message.png"); background-position: left 5px; background-repeat: no-repeat; }

#not-found { width: 100%; margin: 30px auto 30px; text-align: center; }

#not-found p { font-size: 14px; }

/* FEATURE
---------------------------------------------------------*/
.section-title-feature { background-image: url("imgs/common/section_title_border.gif"); background-position: left center; background-repeat: repeat-x; width: 980px; margin: 0px auto 30px; text-align: center; }

.section-title-feature h1, .section-title-feature h2 { color: #474747; font-size: 30px; font-weight: normal; line-height: 1em; padding: 0px 25px; }

.section-subtitle-feature { background-image: url("imgs/common/section_title_border.gif"); background-position: left center; background-repeat: repeat-x; width: 950px; margin: 60px auto 30px; text-align: center; }

.section-subtitle-feature h2, .section-subtitle-feature h3 { color: #434343; font-size: 22px; font-weight: normal; line-height: 1em; padding: 0px 25px; }

.feature-main-image { text-align: center; height: 380px; overflow: hidden; }

.feature-main-image img { min-width: 1200px; width: 100%; height: auto; }

.feature-content { width: 980px; margin: 0px auto; }

.feature-content p { max-height: 99999px; }

.feature-data-category { margin-top: 20px; }

.feature-data-category span { color: #333; font-size: 11px; }

.feature-data-title { height: auto; margin-top: 15px; }

.feature-data-title h2, .feature-data-title h5 { color: #333; font-size: 36px; line-height: 1.2em; }

.feature-data-excerpt { height: auto; margin-top: 15px; }

.feature-data-excerpt p { font-size: 12px; line-height: 1.8em; }

.feature-data-excerpt strong { font-weight: 400; }

.feature-content-text { width: 980px; margin: 35px auto 0px; }

.feature-content-text .block { margin-bottom: 40px; }

.feature-content-text .block p { margin-bottom: 20px; line-height: 1.9; }

.feature-content-text .title { text-align: center; margin-bottom: 50px; }

.feature-content-text .title p { color: #474747; font-size: 30px; font-weight: normal; line-height: 1em; }

.feature-content-text .subtitle { text-align: center; margin-bottom: 40px; }

.feature-content-text .subtitle p { color: #666; font-size: 25px; }

.feature-content-text p, .feature-content-text li { font-size: 14px; }

.two-column, .three-column { margin-bottom: 40px; }

.two-column:after, .three-column:after { content: ''; display: block; clear: both; }

.two-column li, .three-column li { float: left; line-height: 1.9em; }

.two-column img, .three-column img { display: block; margin-bottom: 12px; }

.two-column span, .three-column span { display: inline-block; font-size: 12px; line-height: 1.75; }

.two-column p, .three-column p { margin-bottom: 20px; }

.two-column li { width: 456px; margin-left: 38px; }

.two-column li:first-child { margin-left: 0px; }

.two-column img { max-width: 456px; height: auto; }

.three-column li { width: 286px; margin-left: 46px; }

.three-column li:first-child { margin-left: 0px; }

.three-column img { max-width: 286px; height: auto; }

@media screen and (max-width: 480px) { .section-title-feature { width: 100%; margin: 10px auto 20px; }
  .section-title-feature h1, .section-title-feature h2 { font-size: 20px; }
  .section-title-feature h3 { font-size: 16px; }
  .section-subtitle-feature { width: 100%; margin: 30px auto 20px; }
  .section-subtitle-feature h2, .section-subtitle-feature h3 { font-size: 16px; }
  .feature-main-image { text-align: center; height: auto; overflow: visible; }
  .feature-main-image img { min-width: 100%; }
  .feature-content { width: 94%; margin: 0px auto; }
  .feature-content-data { width: 100%; }
  .feature-data-category { margin-top: 20px; }
  .feature-data-category span { color: #333; font-size: 11px; }
  .feature-data-title { height: auto; overflow: visible; margin-top: 10px; }
  .feature-data-title h2, .feature-data-title h5 { font-size: 19px; line-height: 1.3em; }
  .feature-data-excerpt { width: 100%; height: auto; overflow: visible; margin-top: 10px; }
  .feature-data-excerpt p { font-size: 12px; line-height: 1.8em; }
  .feature-content-text { width: 100%; margin: 30px auto 0px; }
  .feature-content-text .block { margin-bottom: 20px; }
  .feature-content-text .block p { font-size: 12px; margin-bottom: 16px; }
  .feature-content-text .title { margin-bottom: 20px; }
  .feature-content-text .title p { color: #474747; font-size: 20px; padding: 0px 20px; line-height: 1.4em; }
  .feature-content-text .subtitle { margin-bottom: 20px; }
  .feature-content-text .subtitle p { font-size: 16px; line-height: 1.4em; }
  .feature-content-text p, .feature-content-text li { font-size: 12px; }
  .two-column, .three-column { margin-bottom: 20px; }
  .two-column img, .three-column img { margin-bottom: 5px; }
  .two-column span, .three-column span { font-size: 11px; line-height: 1.6em; }
  .two-column p, .three-column p { margin-bottom: 16px; }
  .two-column li { width: 100%; margin: 0px auto 10px; float: none; }
  .two-column li:first-child { margin: 0px auto 10px; }
  .two-column img { max-width: 100%; height: auto; }
  .three-column li { width: 49%; margin-left: 2%; margin-bottom: 3%; float: left; }
  .three-column li:nth-child(2n-1) { margin-left: 0px; }
  .three-column img { max-width: 100%; height: auto; } }

/* STATIC
---------------------------------------------------------*/
.static-content h4 { font-size: 18px; margin-bottom: 20px; }

.static-content p { font-size: 14px; margin-bottom: 15px; }

.static-content span { padding-left: 15px; display: inline-block; }

.content-block { padding: 0px 20px; margin-bottom: 50px; }

@media screen and (max-width: 480px) { .static-content h4 { font-size: 14px; margin-bottom: 10px; }
  .static-content p { font-size: 12px; margin-bottom: 15px; }
  .static-content span { padding-left: 15px; display: inline-block; }
  .content-block { padding: 0px 20px; margin-bottom: 30px; } }

p.sorry-not-found { font-size: 16px; text-align: center; }

/* SMARTPHONE LAYOUTS
---------------------------------------------------------*/
@media only screen and (max-width: 640px) { .category-detail-head:after { content: ''; display: block; clear: both; }
  .category-detail-content { width: 96%; margin: 0px auto; }
  .category-detail-content p { font-size: 11px; margin-bottom: 16px; }
  .category-detail-content strong { font-weight: bold; }
  .item-text-box:after { content: ''; display: block; clear: both; }
  .item-box-name { color: #333; width: 100%; float: none; font-size: 14px; margin-bottom: 5px; }
  .item-box-content { width: 100%; float: none; margin-bottom: 20px; padding-bottom: 10px; }
  .category-content-control { margin-top: 0px; margin-bottom: 30px; }
  .backto-prev-button { font-size: 14px; line-height: 45px; width: 100%; height: 45px; background-color: gray; background-image: url("imgs/sp/icon_btn_arrow_left.png"); background-position: 10% center; background-size: 10px 15px; }
  .backto-prev-button:hover { background-color: gray; }
  .category-detail-others { width: 96%; margin: 0px auto; }
  .related-feature-image { position: relative; height: auto; }
  .related-feature-image img { width: 100%; height: auto; }
  .related-feature-text { margin-top: 10px; }
  .related-feature-title { width: 100%; float: none; }
  .related-feature-title .related-feature-title-category { font-size: 10px; }
  .related-feature-title h3, .related-feature-title h5 { font-size: 20px; line-height: 1.5em; margin-top: 0px; }
  .related-feature-content { width: 100%; float: none; }
  .related-feature-content p { font-size: 11px; line-height: 1.6em; margin-top: 10px; }
  .section-title-detail { background-image: url("imgs/common/section_title_border.gif"); background-position: left center; background-repeat: repeat-x; margin: 0px; text-align: center; }
  .section-title-detail h1, .section-title-detail h2 { font-size: 20px; margin: 30px 0px 20px; }
  .section-title-detail h3 { font-size: 16px; margin: 20px 0px 20px; }
  .section-line { width: 96%; margin: 0px auto 30px; }
  #error-message { width: 100%; height: 26px; }
  #error-message p { font-size: 11px; line-height: 26px; width: 300px; margin: 0px auto; padding-left: 20px; background-image: url("imgs/common/error_message.png"); background-position: 0% center; background-repeat: no-repeat; background-size: 15px 12px; } }

.ytPlayer { position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: hidden; margin-top: 20px; margin-bottom: 20px; }

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

/*--- 2024/09/10 add. -------------------------------------------------*/
.category-items > .fields.col20.size-item {
	display:flex;
	flex-wrap:wrap;
}
.category-items > .fields.col20.size-item .region{
	margin-bottom:20px;
	border-radius:8px;
	box-shadow:0 0 15px #eee;
}
.category-items > .fields.col20.size-item .region .meta-label,
.category-items > .fields.col20.size-item .region .meta-badge{
	height:auto;
}
.category-items > .fields.col20.size-item .region .category-item{
	margin-bottom:20px;
}
@media screen and (max-width: 768px) {
	.category-items > .fields.col20.size-item .region .category-item{
		margin-bottom:10px;
	}
}
@media screen and (max-width: 480px) {
	.category-items > .fields.col20.size-item .region .category-item{
		margin-bottom:10px;
	}
	.category-items > .fields.col20.size-item .region .category-item-image a.item-image-box {
		left:50%;
		transform:translateX(-50%);
	}
}