@charset "Shift_JIS";



/*===========================
基本CSS
=============================*/
#audio_app{font-family: 'Noto Sans JP', Meiryo ,'メイリオ',sans-serif; padding-bottom: 5%; max-width: 1384px;}
#audio_app a{text-decoration:none; color: inherit !important;}
#audio_app img{width:100%;}
#audio_app .pc_none{display:none !important;}
#audio_app {background-color: #fff;}



/* 看板
========================= */
#audio_app .title{width: 100%;}
#audio_app .title h1{background-color: #9b9b9b;}



/* 看板下線
========================= */
#audio_app .l-section-top {
	position: relative;
}

#audio_app .c-scrolldown {
	width: 2px;
	height: 5vw;
	position: absolute;
	top: -3vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	overflow: hidden;
}
#audio_app .c-scrolldown .c-line {
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(to bottom, #454648 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 100% 200%;
	animation: scrolldown 2s cubic-bezier(0.76, 0, 0.3, 1) forwards ;
	/* animation: scrolldown 2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; */
}
@keyframes scrolldown {
	0% {
		background-position: 0 -5vw;
	}
	75% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 5vw;
	}
}



/*各セクション
=============================*/
#audio_app .anchor{max-width: 900px; margin: 8% auto;text-align: center;}

#audio_app .anchor .col_3{
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 1% auto 3% auto;
}

#audio_app .anchor .col_3 li{
    width: calc((100% - 10%)/3);
    position: relative;
    margin: 1% 1.5%;
    color: #454648;
    border-radius: 10px;
    text-align: center;
    transition: 0.5s;
}

#audio_app .anchor .col_3 li a{font-size: 18px; display: block; padding: 14% 0;font-weight: bold;}
/* #audio_app .anchor .col_3 li:hover{ color: #454648; background-color: #dedfe1;border: solid 3px #dedfe1;transition: 0.5s;} */
#audio_app .anchor .col_3 li:hover{ transition: 0.5s;transform: scale(1.05);} 

#audio_app .anchor .col_3 .audio_nav , 
#audio_app .anchor .col_3 .other_nav{
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-color: hsla(220, 5%, 88%, 0.7);
    background-blend-mode: lighten;
}
#audio_app .anchor .col_3 .audio_nav:nth-child(1){background-image: url(../IMAGE/audio_app/menu_1.jpg);}
#audio_app .anchor .col_3 .audio_nav:nth-child(2){background-image: url(../IMAGE/audio_app/menu_2.jpg);}
#audio_app .anchor .col_3 .audio_nav:nth-child(3){background-image: url(../IMAGE/audio_app/menu_3.jpg);}
#audio_app .anchor .col_3 .other_nav:nth-child(1){background-image: url(../IMAGE/audio_app/menu_4.jpg);}
#audio_app .anchor .col_3 .other_nav:nth-child(2){background-image: url(../IMAGE/audio_app/menu_6.jpg);}
#audio_app .anchor .col_3 .other_nav:nth-child(3){background-image: url(../IMAGE/audio_app/menu_7.jpg);}



/*見出し
=======================*/
#audio_app h2 {
    width: 100%;
    font-size: 27px;
    font-weight: 600;
    color: #444549;
    margin: 0 auto 5% auto;
    position: relative;
    padding: 1% 0;
    border-bottom: 3px solid #444549;
    text-align: center;
}

#audio_app .anchor h3{
    font-size: 21px;
    font-weight: bold; 
    text-align: center;
    color: #444549;
}

#audio_app .anchor h3.blue{
    border-bottom: 3px solid #89abc6;
    display: inline-block;
}

#audio_app .anchor h3.yellow{
    border-bottom: 3px solid #c5b152;
    display: inline-block;
}

#audio_app .anchor h3.point{
    width: 100%;
    margin: -20px auto;
    text-underline-offset:10px;
    text-decoration: underline wavy #444549;
    text-decoration-thickness: 3px;
}



/*モーダルウィンドウ
=======================*/

/**モーダルウィンドウボタン**/
#audio_app .modal_btn{
    width: 100%;
    margin: 5% auto;
}

#audio_app .modal_btn ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#audio_app .modal_btn ul li{
    width: calc((100% - 8%)/4);
    margin: 1%;
    cursor: pointer;
    position: relative;
	overflow: hidden;
    padding-bottom: 1.5%;
}

#audio_app .modal_btn ul li .btn {
    background-image: url(../IMAGE/audio_app/plus.png);
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 0;
    left: 45%;
    background-repeat: no-repeat;
    background-size: 100%;
}

#audio_app .modal_btn ul .bg::before,
#audio_app .modal_btn ul .bg::after {
	content: "";
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	margin: auto;
	transition: .5s cubic-bezier(0.45, 0, 0.55, 1);
	opacity: 0;
}
#audio_app .modal_btn ul .bg::before {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 94%;
}
#audio_app .modal_btn ul .bg::after {
    content: "詳しく見る";
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	bottom: 0;
	right: 0;
}

#audio_app .modal_btn ul .bg:hover::before,
#audio_app .modal_btn ul .bg:hover::after {
	opacity: 1;
	transition: 0.5s
}


/*-----モーダルウィンドウ内容-----*/


/* モーダル全体(背景＋本体) */
.modal{ display: none; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 100;}
/* モーダル背景 */
.modal-bg{ position: absolute; height: 100vh; width: 100%; background: rgba(0, 0, 0, 0.8); cursor: pointer; z-index: 101; }
/* モーダル本体 */
.modal-content{ position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); overflow-y: hidden;  overflow-x: hidden;  height: auto; width: 750px; background: white;  z-index: 102;}
.modal-content02{ position: relative;width: 98%;padding: 1%;}
.modal-content02 ul{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.modal-content02 ul li{
    width: 48%;
    margin: 1%;
}

.modal-content02 ul li.modal-text dt{font-size: 20px;border-bottom: 2px solid #434448;padding-bottom: 1%;margin-bottom: 1%;}
.modal-content02 ul li.modal-text dd{font-size: 16px;text-align: left;}

.modal-content02 .js-modal-close{position: absolute; top: 1%; right: 1%; color: #333; cursor: pointer; z-index: 105;font-size: 20px;}



/*テーブル
=============================*/
#audio_app .item_box {
    width: 100%;
    padding: 0 0 2% 0;
    overflow: hidden;
    margin: 2% auto 0 auto;
    position: relative;
}

#audio_app .item_box .table{
    overflow-x: scroll;
    position: relative;
}

#audio_app .item_box .table.hide{
    height: 640px;
    overflow-y: hidden;
}

#audio_app .item_box .table.hide2{
    height: 590px;
    overflow-y: hidden;
}

#audio_app .item_box .table.hide3{
    height: 630px;
    overflow-y: hidden;
}

/*もっと見るボタン*/
#audio_app .show_more {
    position: absolute;
    bottom: 35px;
    left: 0px;
    width: calc(100% - 4px);
    height: 30px;
    padding: 30px 0;
    text-align: center;
    line-height: 30px;
    background: #fff;
    cursor: pointer;
    transition: bottom 0.5s;
    border: 2px solid #a6aaab;
    font-size: 25px;
    font-weight: bold;
    color: #46474c;
    z-index: 10;
}

#audio_app .show_more::before{top: 48%;right: 2%;transform: rotate(0deg);}
#audio_app .show_more::after{top: 48%;right: 2%;transform: rotate(90deg);}
#audio_app .show_more::before , #audio_app .show_more::after{
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #333;
}

#audio_app .item_box table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
	margin: 0 auto;
    table-layout: fixed;
}

#audio_app .item_box table th, td {
	padding: 1%;
    border: 1px solid #a6aaad;
    font-size: 16px;
    text-align: center;
    position: relative;
    color: #434448;
    font-weight: normal;
    word-wrap:normal;
}

#audio_app .item_box table th {
	width: 200px;
    border-left: none;
    position: sticky;
    left: 0;
    z-index: 10;
}

#audio_app .item_box table tr:nth-of-type(2n-1){background-color: #ebebeb;}
#audio_app .item_box table tr:nth-of-type(2n-1) th{background-color: #ebebeb;}
#audio_app .item_box table tr:nth-of-type(2n) th{background-color: #fff;}
#audio_app .item_box table tr:first-of-type {background-color: #f0efdb;}
#audio_app .item_box table tr:first-of-type th{background-color: #f0efdb;border-top: none;}
#audio_app .item_box table tr:first-of-type td{border-top: none;position: relative;}

#audio_app .item_box table td{
    width: 300px;
    line-height: 2;
}

#audio_app .item_box table th::before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
}

#audio_app .item_box table td:nth-last-child(n){border-right: none;}
#audio_app .item_box table tr:nth-of-type(2n){background-color: #fff;}
#audio_app .item_box table tr.mi th:nth-child(2){left: 100px;line-height: 2;}

#audio_app .item_box table td p{
    font-size: 16px;
    color: #6a9ac2;
    border-bottom: 2px solid #6a9ac2;
    position: relative;
    max-width: 150px;
    width: 100%;
    margin: 0 auto 1% auto;
    transition: 0.5s;
}

#audio_app .item_box table td img{
    max-width: 100%;
    margin: 0 auto;
    width: 80%;
}

#audio_app .icon img{width: 20%!important}
#audio_app .star img{width: 10%!important}
#audio_app span.kome{display: block;}

#audio_app .item_box table td a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#audio_app .item_box table td p::after{
    content: '';
    width: 5px;
    height: 5px;
    margin-top: -5px;
    border-top: solid 2px #6a9ac2;
    border-right: solid 2px #6a9ac2;
    transform: rotate(45deg);
    position: absolute;
    bottom: 30%;
    right: 2%;
    transition: 0.5s;
}

#audio_app .item_box table td:hover p{
    color: #EA0012;
    border-color: #EA0012;
    transition: 0.5s;
}

#audio_app .item_box table td:hover p::after{
    border-color: #EA0012;
    transition: 0.5s;
}



/*テーブル内点線ボーダー
=============================*/
#audio_app .middle-line {
    border-bottom: 2px dotted #9b9b9b;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

#audio_app .middle-line2 {
    border-bottom: 2px dotted #9b9b9b;
    width: 100%;
    margin: 0 auto;
    display: block;
}



/*接続互換性確認済みリスト
=============================*/
#audio_app .os{
    margin: 2% auto;
    width: 100%;
}
#audio_app .os h3{background-color: #6a97ba;color: #fff;padding: 2%;}
#audio_app .os_target{font-size: 18px;width: 95%;margin: 2% auto;}
#audio_app .os_subtitle{font-size: 20px;width: 98%;margin: 1% auto;border-bottom: 3px solid;padding-bottom: 1%;}

#audio_app .os_list ul{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
}

#audio_app .os_list ul li{
    width: calc((100% - 6%)/3);
    padding: 0 1% 1% 1%;
    border-right: 1px dotted #434448;
    height: 200px;
    margin-bottom: 2%;
}

#audio_app .os_list ul li:last-of-type{border-right: none;}
#audio_app .os_list ul li dl dt{border:1px solid #434448;padding: 3%;font-size: 18px;}
#audio_app .os_list ul li dl dd{margin: 5% auto;line-height: 2;}
#audio_app .extra{text-align: right;}
#audio_app .extra p{font-size: 12px;font-weight: normal;}



/*価格デザイン
=======================*/
#audio_app .price_icon{text-align: center;}
#audio_app .price_icon .spesicalprice{display: none;}
#audio_app .price_icon .buy_price .price{font-size: 20px;}
#audio_app .price_icon .buy_price .intax{display: none;}
#audio_app .price_icon .buy_price {display: inline-block;}



/*PC用ナビ
=======================*/
#pc_navi{ position: fixed; right: 0; top: 200px; width: 10vw;z-index: 99;}
#pc_navi ul { list-style:none}
#pc_navi ul li a{ display: block; 
    margin-bottom: 0;
    text-align: center; 
    font-size: 15px;
    padding: 12px 5px; 
    color: #6a97ba !important; 
    position: relative; 
    font-weight: bold;
    background-color: rgba(255,255,255,0.5);
}
#pc_navi ul li a { border-top: 2px solid #6a97ba;}
#pc_navi ul li:last-child a { border-bottom: 2px solid #6a97ba; }
#pc_navi ul li a:hover{
    color: #fff !important; 
    background-color: #6a97ba;
    -webkit-transition: 0.5s ease-in-out; 
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#pc_navi ul li.top a {background-color: #6a97ba; color: #fff !important; font-size: 18px;}



/*こちらもおすすめ
=======================*/
#audio_app .sonota_osusume {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

#audio_app .sonota_osusume h1{
    font-size: 30px;
    text-align: center;
    color: #2b2b2b;
    margin: 0 auto;
    position: relative;
    padding: 0 0 5px;
}

#audio_app .sonota_osusume .col_3{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#audio_app .sonota_osusume .col_3 li{
    width: calc((100% - 6%)/3);
    margin: 1%;
}

/*ポイント付与
=======================*/

#audio_app .point {
	display: inline-block;
    width: 30%!important
    
}