/**********************
 201801 背景変更 CSS調整
 ************************/
article#highreso{font-size: 14px;}
article#highreso{color:#222;}
article#highreso a:hover{opacity: 0.7;}
/* 背景 */
body { background-image: url(https://mora.jp/pc/etc/img/highreso/bg01.jpg);}
header {height: 90px !important;}
.conts01{background-color:#eee;}
.conts01 .inner{padding-top: 10px;}
.conts01 .inner:after {border-top: 60px solid #eee; }
.conts02 {background-color: #000; }
.conts02 .inner:after {border-top: 60px solid #000; }
.conts03 {background-color: #ddd; }
.conts03 .inner:after {border-top: 60px solid #ddd; }
.conts04 {background-color: #F7B80E; }
.conts04 .inner:after {border-top: 60px solid #F7B80E; }
.conts05 {background-color: #000; }


/* 透過背景 IE8非対応*/
.conts01 {background-color: transparent; background: rgba(255, 255, 255, 0.7); }
#highreso_01 {padding:40px 0;}
#highreso_01 .inner {background-color: rgba(255, 255, 255, 0.77);}

/* ▼ 矢印 */
#highreso section {position: relative; }
.conts01 .inner:after, .conts02 .inner:after, .conts03 .inner:after {content:  none; }
.conts02:before, .conts03:before, .conts05:before{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; top: -3px; position: absolute; left: 46%; }
.conts02:before {border-top: 60px solid rgb(221, 223, 220); }
.conts03:before {border-top: 60px solid rgb(41, 43, 40); }


/*SNSボタン*/
.sp_snsArea iframe, .sp_snsArea a{display:inline-block;margin: 0px 30px;}
.sp_snsArea.snsright iframe {margin: 0;}


/*見出し 202312*/
.highresoHeading2 {position: relative; display: inline-block; padding: 0 55px; margin: 0 auto 15px; color: #081030; font-weight: normal; font-size: 24px;}
.highresoHeading2::before, .highresoHeading2::after {content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: #081030;}
.highresoHeading2--listen {position: relative; display: inline-block; padding: 0 55px; margin: 0 auto 15px; color: #f4c331; font-weight: normal; font-size: 24px;}
.highresoHeading2--listen::before, .highresoHeading2--listen::after {content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: #f4c331;}
.highresoHeading2--link {position: relative; display: inline-block; padding: 0 55px; margin: 0 auto 15px; color: #fff; font-weight: normal; font-size: 24px;}
.highresoHeading2--link::before, .highresoHeading2--link::after {content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: #fff;}
.highresoHeading3 {position:relative; display:inline-block; padding: 0 55px; margin: 0 auto 15px; color: #081030; font-weight: normal; font-size: 18px;}
.highresoHeading3::before, .highresoHeading3::after {content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: #081030;}
.highresoHeading2::before,
.highresoHeading2--listen::before, 
.highresoHeading2--link::before,
.highresoHeading2--listen::before, 
.highresoHeading3::before {left:0;}

.highresoHeading2::after,
.highresoHeading2--listen::after,
.highresoHeading2--link::after, 
.highresoHeading3::after {right:0;}

/* まず聴いてみる 202312*/
.txtBlock {width:90%; margin:0 auto;}
.txtBlock.white {color:#fff;}
.txtBlock p.intro {font-size: 16px;line-height:1.5;}
.txtBlock a.underline {text-decoration:underline; color:#fff;}
.txtBlock p.attention {font-size: 18px; margin-top: 20px; color:#f4c331; text-align:center;}
.txtBlock p.attentionTxt {font-size: 14px;}

/*関連情報*/
.kanren {clear: both; text-align: center; border-top: 1px solid #9E9E9E; padding-top: 30px; font-size: 0.9em; }
.kanren a {color: #454545; }
.kanren h3, .kanren h4 {font-weight: normal; }
.kanren >img {width: 100%; margin: 10px auto; }
.kanren p span.proviso {display:block; font-size: 12px; margin: 5px 0 20px;}


/* #highreso_01 */
/*大見出し*/
h1.title {margin:20px auto 30px;font-size: 2em;padding-top: 20px;}
/*h1.title img {width: 65px;margin-right:  20px;vertical-align: middle;}*/

/*ナビゲーション*/
ul.nav{margin-bottom: 5%;}
ul.nav li{list-style: none;display: inline-block;margin: 0 1%;}
ul.nav li a {padding: 10px;display: block;font-size:16px;border: 2px solid #08102f;border-radius: 5px;box-shadow: 1px 1px 3px #9E9E9E;}
/*ナビゲーション with dropdown 20240304*/
.navA { margin-bottom: 5%; display: flex; justify-content: space-between; padding: 0;box-sizing: border-box;} 
.navA-list {width: 100%; position: relative; /* Ensures dropdown is positioned relative to this container */}
.navA-list ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center;}
.navA-list ul li { position: relative; /* This makes the dropdown align relative to the list item */ width: auto; text-align: center; margin-right: 10px; background: #FFF; border: 2px solid #08102f; font-size: 16px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
.navA-list ul li:last-child { margin-right: 0;}
.navA-list ul li div, .navA-list ul li a {display: block; padding: 10px 20px; text-decoration: none; color: #08102f; background: #FFF; border-radius:5px;}
.navA-list ul li a {font-size: 16px;}
.navA-list ul li a:hover {opacity: 0.7;}
.navA .dropdown .drop-menu-list { display: none; position: absolute; margin-top: -2px; left: -2px; /* Aligns the dropdown directly under the dropdown button */ width: calc(100% - 40px); /* Matches the width of its parent */ z-index: 1; border: 2px solid #08102f; border-top: none; border-top-left-radius:0; border-top-right-radius:0; background: #eee; text-align: left;}
.navA .dropdown .drop-menu-list a { padding: 0 0 10px 0; background: #eee; margin: 0; border-bottom: 1px dotted #08102f; border-radius: 0;}
.navA .dropdown .drop-menu-list a:last-child { border-bottom: none; padding: 10px 0 0 0;}
.navA .dropdown:hover .drop-menu-list {display: block; /* Shows the dropdown on hover */}
.navA .arrow-down { margin-left:10px; display: inline-block; vertical-align: middle; color: #08102f; line-height: 1; width: 0.5em; height: 0.5em; border: 0.1em solid currentColor; border-left: 0; border-bottom: 0; box-sizing: border-box;transform: translateY(-25%) rotate(135deg);}
  
/* ハイレゾとは */
#highreso_01 .intro{width:80%;margin:0 auto;}
.intro img{width: 500px;margin: 40px 0;}
/* 音質について 202312追加 */
.soundQualityWrapper {display: flex; list-style:none; flex-wrap: wrap; width: 90%; margin:0 auto 20px;}
.soundQualityBlock {display: block; width: calc(100%/3 - 20px); margin: 0 auto; text-align:left;}
.soundQualityBlock img {width: 100%;}
.soundQualityBlock p {font-size: 16px!important;}

/*無料サンプルボタン 202502追加*/
/*AAC*/
.freeSampleButton-aac{
    margin:20px auto 40px;
    background-color: #B5B6B6;
    border-radius: 3px;
    box-shadow: 0 4px 0 #a0a0a0;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    display: block;
    padding: 8px;
    position: relative;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    width: 90%;
}

/*Lossless*/
.freeSampleButton-lossless{
    margin:20px auto 40px;
    background-color: #1265A4;
    border-radius: 3px;
    box-shadow: 0 4px 0 #0a3f66;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    display: block;
    padding: 8px;
    position: relative;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    width: 90%;
}

/*Hi-Res*/
.freeSampleButton-hires{
    margin:20px auto 40px;
    background-color: #E1A73B;
    border-radius: 3px;
    box-shadow: 0 4px 0 #c4902f;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    display: block;
    padding: 8px;
    position: relative;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    width: 90%;
}

.freeSampleButton-aac::after, .freeSampleButton-lossless::after, .freeSampleButton-hires::after{ content: ''; display: inline-block; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent #fff; display: inline-block; width: 0;
height: 0; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
}
.freeSampleButton-aac:active, .freeSampleButton-lossless:active, .freeSampleButton-hires:active { top: 4px; box-shadow: 0 0 0 #C62828;}

/* #highreso_03 */
.mainContestsA {margin:.0 20px 5%;width: 100%;overflow: hidden;text-align: left;}
.partsA{width:44%;float: left;height: 140px;margin: 0 3% 5%;position: relative;}
.partsA img {width: 30%; float: left; margin-right: 3%;box-shadow: 1px 1px 3px #9E9E9E;}
.container .inner p.partsATitle,.container .inner p.partsAArtist {line-height: 1.6; letter-spacing: 0.05em;}
.container .inner p.partsAArtist{font-weight: bold;}
.buyBtnBox {width: 45%; position: absolute; bottom: 0; right: 0;}
.container .inner p.buyBtn {display: block; position: relative; width: 100%; margin: 5px auto 0; text-align: center; font-size: 14px; border: 1px solid #08112e; border-radius: 3px; line-height: 25px;}
.buyBtn:hover{background-color: #eee; }
.buyBtn a {width: 100%; height: 100%; background: transparent url(https://mora.jp/pc/special/img/ie_bg.png) 0 0 repeat; display: block; top: 0; left: 0; position: absolute; }
.buyBtn.BASIC:before {content: "試聴・ダウンロード"; }
.buyBtnBox img {display: none; }
#highreso_03 a.more{padding: 1% 5%;border-radius: 5px;font-weight: bold;background-color:#2c2d2b;color:#fff;box-shadow: 1px 1px 3px #9E9E9E}
.container .inner a p.BrandLink{color:#666;font-size: 12px;clear:both;text-align: center;}

/* #highreso_04 */
div.settings ul{list-style: none; font-size: 18px;font-weight: bold;color: #fff;}
div.settings li{margin:2% 0;width: 50%;float: left;}
div.settings li span{font-size: 16px;}
div.settings li img{height: 90px;display: block;margin: 5% auto;}
section#highreso_04 ul.normal{clear: both;color:#666;width: 73%;margin: 0 auto;}
section#highreso_04 ul.normal li{text-align: left;list-style: initial;}
.container .conts04 .inner p{color: #666;font-weight: normal;}
ul.apps{margin:2% auto 5%;width:94%;}
ul.apps li{list-style: none;display:inline-block;margin:0 1% 1% 0;width:220px;height:170px;background-color: #fff;position:relative;}
ul.apps li img{height:90px;padding-top:25px;width: auto;}
.container .inner ul.apps li span{background-color:#bd921d;color:#fff;position: absolute;bottom: 0;width: 100%;line-height:16px;font-size: 12px;padding-top:4px;}

/* #highreso_05 */
ul.links a,#highreso_05 .faqguide_Btn a:before {color:#fff;line-height:1.6;font-size:16px;}
#highreso_05 .inner {padding-top:0!important;}
ul.links span {font-size: 12px !important; }
#highreso_05 .faqguide_Btn a:before { content: "\f152";top: 0; margin: 10px;font-family: FontAwesome;}
#highreso_05 h2:before, #highreso_05 h2:after {background-color: #fff !important; }
.links li {margin: 10px 0; width: 30%;}

/* パンナビ */
.panN {width:100%; height:100%; margin:0; padding:6px 0; background:#333; background:  rgba(0, 0, 0, 0.8);}
ul.pannavi {width: 990px;margin: 0 auto; padding:6px;}
.pannavi .pannaviItem {background-color: transparent; color:#ffffff;}
ul.pannavi li a { color:#fff;}

.special_adBox_resp{display: inline-block;width: 100%;margin: 20px auto;}
section#special_adBox_resp {width: 728px !important; height: 90px !important; border: 1px solid #eee;display: block; margin: auto; padding: 5px;}
.jack img {z-index: 10; }

/*タブ*/
#tabs{margin: 5% auto;}
#tabs div.tab {background-color: #fff;width: 90%;overflow: hidden;padding: 5%;color:#333;}
#tabs div.tab p {font-size:16px;}
.tab_title li{background-color:#f4c331;width: 15%;height: 45px;text-align: center;font-size: 17px;line-height: 45px;float: left;margin-right: 1%;list-style: none;}
li.active{background-color:#fff;}
li.active a{color: #081030;font-weight: bold;}
.tab_title li a {display: block;}
.container .inner ol.tab_sub li span{font-weight: normal;color: initial;font-size: 12px;}
article#highreso{color:#222;}
article#highreso a:hover{opacity: 0.7;}
.container .inner a p{line-height:initial;letter-spacing:initial;} 
ul.metaCaution,.container .inner p.metaCaution{color: #f00;}
ul.disclaimer, .kanren ul.metaCaution {list-style: none; margin: 2% 0; font-size: 12px; text-indent: -12px; padding-left: 12px; text-align:left; }
ul.disclaimer li {margin-bottom:10px;}
.container .inner div.intro span.proviso{width:100%;margin:0;}
ul.osusume li{display: inline-block; zoom: 1; width: 25%;margin:1%;}
ul.osusume li img{width: 100%;}

/*タブ共通*/
ul.settings {clear: both; display: table; table-layout: fixed; width: 100%;}
ul.settings h3{font-weight: normal;margin-bottom: 1%;}
ul.settings img.hires_logo{height:25px;width:auto;margin:0 5px;display: inline-block;vertical-align:top; }
.tab ul.settings li {display: table-cell; float: left; list-style: none; width: 32% !important;font-size: 20px; }
ul.settings li img{height: auto; display: block; margin: 0 auto;} 
.container ul.settings li>p {padding: 10px 0 0; }
.container .inner ul.settings li p {font-size: 0.7em; text-align: center; }
#highreso_02 .settings p>span {color: initial; font-size: 12px; margin: 10px 0;display:block; }
#tabs div.tab{position: relative;}
#tabs div.tab p.about {text-align:left;}
#tabs h2 {display: table; margin: 40px auto 20px; }
.intro.image {margin-bottom:30px; overflow: hidden; text-align: center;}
ul.metaCaution,.container .inner p.metaCaution{list-style: none;font-size: 12px;}
img.hiresDeviceList{width:100%;}
.container .inner #tab-3 div.intro span,.container .inner #tab-5 div.intro span{width: 100%;margin:0;}
#tab-4 ul.normal{width: 60%;text-indent: -2.5em;padding-left:1em;}
#tab-4 .kanren ul.metaCaution {margin: auto; width: 74%;}
#highreso_02 .inner > p,#highreso_02 .inner > p a {margin:0 auto 20px;  color:#fff;}
#highreso_02 .inner > p a.underline {text-decoration:underline;}
#highreso_02 .inner > p.caution {font-size:14px; color: #fff;}
#highreso_02 div.intro.image a {float: left; width: 30%; margin: 0 10%; }
#highreso_02 div.intro.image img {width: 100%; max-width: 250px; }
#highreso_02 #tab-3 .image a {display: block; width: 50%; margin: 0 25%; }
.container .inner div.intro span.proviso {width: 100%; margin: 0; font-size: 14px; }
#highreso_02 #tab-5 div.intro img {float: none; width: 90%; max-width: 250px; margin: 1% auto; padding: 2%; }

/*余白調整 202312*/
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt40 {margin-top: 40px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}

/*文字の位置調整 202312*/
.ta-left {text-align:left;}
.ta-center {text-align:center;}

/*区切り線 202312*/
.bt30 {border-top: 1px solid #9e9e9e; padding-top: 30px;}

/*アプリダウンロード*/
.container .intro.applink p {font-weight: bold; margin-bottom:10px;}
#highreso_02 div.intro.applink {margin-top: 30px; background:#f3f3f3; padding:20px;}
#highreso_02 div.intro.applink img {width: 155px !important;margin: 0;}
#highreso_02 div.applinkWrapper {display:flex; flex-wrap:wrap; align-items: center; justify-content: center;}
#highreso_02 div.applinkBlockPic {padding-right:10px;}
#highreso_02 div.applinkBlockTxt {padding-left: 10px; text-align:left;}


#tab-1 .settings li, #tab-2 .settings li, #tab-5 .settings li {padding: 0 8%; }
/* Windows,WALKMAN 緑ボタン　*/
.mgdl {background:#f3f3f3; padding:20px; margin-top:30px;}

.mgdl ul{text-align: center; list-style: none; margin: 2%;}
#tabs div.downloadBtn a {background-color: #067D78; width: 270px; margin: 10px auto; color: #eee; padding: 20px 15px; display: block; border-radius: 10px; }

/* パタパタ
#tabs div.hrSub {margin: 2% auto 4%; width: 50%; }
.container .hrSub_t span {cursor: pointer; display: inline; }
.hrSub_t span:before {content: "\f150"; margin: 0 10px 0 0; font-family: FontAwesome; font-size: 25px; line-height: 1; vertical-align: middle; }
#tabs div.hrSubOpen span:before {content: "\f151"; }
#tabs div.hrSub_c {display: none; border: #88CDDE solid 1px; padding: 5%; }
*/

/*microSD*/
div#microSD p,div#EXstrage p{font-size:14px; padding: 0;}
div#microSD p:nth-child(2),div#microSD p:nth-child(3),div#EXstrage p:nth-child(2),div#EXstrage p:nth-child(3){font-size:16px; }
.ex{margin: 15px 1%; list-style: none; text-align: center;} 
#microSD span,#EXstrage span{font-size:14px;}
.explain{float:left;width:78%;margin-right:2%;}
.sd_list li {display: inline-block; list-style:  none; font-size: 18px; }
.sd_list li a {display: block; padding: 0 15px; }

/*アプリ導線*/
.container .inner p.linkcomment{font-size: 14px;margin:0;}
#tabs div.apps {float: left; width: 33%; padding: 0; text-align: center; margin-bottom: 3%; font-size: 12px; }
#tabs div.apps img{height: 90px;}
#tabs div.apps ul{list-style: none;}
#tabs div.apps ul li.AppName{font-weight:bold;}
#tabs div.apps ul li.AppPrice,li.AppOs{font-size:0.8em;}
#tab-4 div.apps {padding: 0 7%;}

/*リンクボタン*/
#tabs div.faqguide_Btn {font-size: 16px; clear: both; text-align: left; margin: 20px 0; }
#tabs div.faqguide_Btn:before, #tabs div.faqguide_Btn02:before {content: "\f152"; margin-right: 10px; font-family: FontAwesome; color: #067d78; }
#tabs div.faqguide_Btn02 {font-size: 16px; clear: both; text-align: center; margin: 20px 0; }
.tab a {color: #067d78; } 
.tab a:hover{text-decoration: none;}
.container .inner a p.BrandLink{color:#666;font-size: 12px;clear:both;text-align: center;}

/*iOS*/
.explain{position: relative;width:100%;}
.explain p{width: 75%}
#highreso .explain img.image {width: 250px; float: right; }


/*Windows Mac　製品例*/
ul.settings.products{padding-top: 0;}
ul.settings.products li{width: 14%;}
ul.settings.products li img{width: 100%;height:auto;}
.container .inner ul.settings.products li p{font-size: 11px;}
ol.tab_sub {font-size: 16px; width: auto; margin: 20px auto 0; padding-left:20px; text-align:left; }
ol.tab_sub li {margin-bottom: 5px;}

/*用語説明*/
.termWrapper{margin: 4% 0 2%; padding: 2% 5% 3%;background-color:#fff;}
#about_dac {text-align: center;}
.termWrapper p.termTxt {font-size: 16px; text-align:left; margin-bottom: 15px; color:#333;}


/*ホームオーディオ*/
.tab#tab-6 ul.settings{padding-top:0;}
.tab#tab-6 ul.settings li img{width: 100%;height:auto;}
#tab-6 .settings li {float: none; }
#tab-6 .settings li img {max-width: 250px; }
.tab li:nth-child(2) {float: none; margin-right: 0; }/*共有CSSの打消し*/

/*20181002 崩れ修正*/
.tab >ul.disclaimer li {width: auto !important;float: none;height: auto !important;line-height: 1.8;}

/*201811 修正*/
ul.links {list-style: none; display:flex;}
.tab >ul >li:nth-child(2),.tab >ul >li:first-child { height: auto !important;}

/* moraでの配信形式 202312 */
.soundTable-container {position: relative; overflow-x: auto; white-space: nowrap; font-size: 16px;}
.soundTable {border-collapse: collapse; margin: 0 auto; width:90%;}
.soundTable th {text-align: center;}
.soundTable th span, .soundTable td span {font-size: 12px;
font-weight: normal; display:inline;}
.soundTable th, .soundTable td {padding: 10px; border: solid 1px #D9D9D9;}
.soundTable td {background:#fff;}
.soundTable td p.format {font-size:14px;}
.soundTable__header {color: #333333; font-weight: 700; background: #EDEDE7; }
.soundTable__header--row {background: #fff;}
.scroll-hint {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 700; line-height: 1.4; display: none; animation: scroll-hint-animation 2s infinite ease;}
@keyframes scroll-hint-animation {
    0% {transform: translate(-50%, -50%);}
    50% {transform: translate(-40%, -50%);}
    100% {transform: translate(-50%, -50%);}
}
.scroll-hint--show {display: block;}
.soundNotice {margin: 20px auto 0; width:90%;}
.soundNotice p.notice {font-size: 14px; margin-bottom:10px; text-align:left;}

/*ファイルサイズの目安*/
.fileSize ul {margin: 5px 1% 15px; text-align:left;}

/*windowsのサウンド設定 画像*/
.winSound ul {list-style:none;}
.winSound li {display:inline-block;width: 48%;vertical-align: top;}
.winSound li img {width:100%;}

/*macのサウンド設定 画像*/
.macSound ul {list-style:none;}
.macSound li {display:inline-block; margin:1%;width: 45%;vertical-align: top;}
.macSound li img {width:100%;}