@charset "UTF-8";

*{margin:0;padding:0;box-sizing: border-box;}


:root {
  --key-color-01: #ff7f27;
}


p,span,li,h1,h2,h3,h4,dt,dd,table,textarea,input,form{
font-family: "メイリオ","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", "Helvetica", "Arial", sans-serif;
}

/* i{line-height:1em;} */
/* automaticaly follow by class .fa etc. of awesome fonts ? */ 


/* avoide inline on old browser */
article, aside, footer, header, nav, section {display: block;}



dt,dd,p,span,strong,li{
color: #444;
}

strong{}

img{border:0;vertical-align: middle;}


#maincontents a:link,#maincontents a:visited,#subcontents a:link{
color: #620;
text-decoration: none;
}

#maincontents a:hover {
color: #c64;
text-decoration: underline;
}

#maincontents a:active{
text-decoration: none;
}

body{
font-size: 16px;
background: #000;
padding-top:0!important; /* adsenseアンカー広告で押し下げられないように */
}

#page{width:100%; height:100%; background: url("img/all_back.png") repeat;
overflow:hidden;  /* これがないとモバイルで右に隙間ができる */
} 


/*--------*/
/* ヘッダ */
/*--------*/
#header{width:100%;background: #ffffff;text-align: center;height:160px;}

#headin{width:1116px; margin:0 auto;text-align: left;padding-top: 18px; position:relative;}

#headin a img{margin-bottom:20px;} /* このmarginでメニューとの距離をとっている */

#headin a img:hover{opacity:0.8;}


#head_sns{
float:right;
padding-top:10px;
margin-left:20px;
}



/* ======= */
/* メニュー */
/* ====== */


/* モバイルメニュートグルスイッチ */
.menu-toggle{width:40px; color:#444;/* padding:0 20px 0;*/ margin:10px 20px 0 0; float:right;font-size:40px;}
.menu-toggle:hover{color:#777;cursor:pointer;}
.toggle-on{display:none;}


/****************/
/* グローバルナビ */
/****************/
#global-nav-wrap{width:100%;}

#global-nav{display:block;} /* 大きい時は常に表示 */

#global-nav li{
text-align : center; /* border-bottom:3px solid #e67e22; */
position: relative;
width:14%;
float:left;
display:block;
border-right:1px #fff solid;
}

#global-nav li a{
font-size:14px;
color:#bbb;
width:100%;
display:block;
padding:10px 0;
background:url("img/nav_back.png") repeat;
text-decoration:none;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
height:41px;
}

#global-nav li a:hover{ /*background:#f63;*/ background:var(--key-color-01);  color:#fff;}

.gnav-small{width:50px!important;}
.gnav-small a {font-size:21px!important;padding-top:7px!important;}

.menu-toggle{display:none;}


/* ====  ヘッダサブナビゲーション ==== */
#head-sub-nav{
list-style-type:none;
display:block; /*出現！*/
position: absolute;
top: 12px;right: 0px;}

#head-sub-nav li{display:inline;}

#head-sub-nav li a{
padding-left:10px;
margin:0 0 0 1.5em; 
color: #620;
text-decoration: none;
background: url(img/list.png) no-repeat 0px center ;
}

#head-sub-nav li a:hover{text-decoration: underline;}


/* ====  ヘッダ検索 ==== */

#head-search{
margin-top:4px;
padding:0;
text-align:left;
display:block; 
position: absolute;
top: 40px;right: 0px;
width:262px;
}

/* googleが勝手に入れるpadding打消し */
.cse .gsc-control-cse, .gsc-control-cse{padding:0!important;} 
input.gsc-input {font-size:12px!important;}

.gsc-search-button button{
  /* background-color: #f63; */ 
  background-color: var(--key-color-01);
  border: 0;
  padding:11px 18px;
  cursor:pointer;
}



/* == 枠 == */
#wrap{
width:1116px;
margin:0
auto;
}


/* == トップ画像インフォ == */
/* inex to english 2file nomi nanode inline ka kanou izure */
#top_info{
width:1116px;
height:300px;
margin:0 0 20px 0;
background: url("img/top_info.jpg");
background-size:cover;
}

#top_info h1{
font-size:28px;
color:#fff;
background:#333;
opacity:0.8;
padding:0 0 0 5px;
text-shadow: 1px 1px 0 #000;
}

#top_discription{
margin:40px;
width:63%;
/* height:80%; */
color:#000;
background:#fff;
opacity:0.8;
padding:10px;
}

#top_discription h2{
font-size:18px;
font-weight:bold;
margin:0 0 1em 0;
}

#top_discription p{
font-size:16px;
font-weight:bold;
}

#top_discription p a{
font-weight:normal;
font-size:12px;
color: #620;
text-decoration: none;
}

#top_more{}

#top_more p{font-size:20px;}

#top_more p a{
font-size:18px;
/*background:#DF7401;*/
background:linear-gradient(-6deg, #fe9700, #cd1900);
margin-left:640px;
width:180px;
padding:0.5em 1em;
text-decoration:none;
font-weight:bold;
color:#eee;
text-align:center;
}

#top_more p a:hover{background:#555;color:#DF7401;}
#top_more p i{}


/* == メインコンテンツ == */
#maincontents{
width:800px;
margin-top:0px;
float:left;
text-align: left;
}

.wback{background:#fff;padding:10px 0 26px 0;}

#maincontents h1 {font-size: 30px;color: #333;/*text-shadow: 1px 1px 0 #ddd;*/margin:5px 0 5px 10px;}

/* each page concept image */
.cover-img-wrap{width:100%;margin:0px auto;padding:0 10px;}
.cover-img{width:100%;}


/* == パンくずリスト == */

#breadcrumbs{margin:6px 0 10px 10px;font-size:14px;display:block;}

#breadcrumbs li{
color:#666;
line-height: 2em;
display:block;
float:left;
padding:0 10px 0 15px;
background: url(img/bread.png) no-repeat left center ;
}

#breadcrumbs li.first{
padding:0 10px 0 0;
background: none;
}

#breadcrumbs li a{color:#666!important;}

/* == 通常ボックス == */
.box1{
/* width:800px; */
width:100%; 
margin: 0 auto 15px auto;
padding:0 10px 5px;
background: #fff;}

/* H2 一旦変更してみる */
/*
.box1 h2{padding:2px 0 0px 6px;margin: 20px 0 10px 0;font-size: 18px;color:#555;border-left: 6px solid #f63;border-bottom: 1px dashed #bbb;}
*/

.box1 h2{padding:18px 16px 15px;margin: 50px 0 10px 0;font-size: 20px;color:#444;background:#ffedc3;}

.box1 h3{/*padding:9px 0 0 10px;*/color:#409835;font-size:17px;margin:24px 0 4px 8px;}

.box1 p{padding:0 10px 0 10px;margin:0 0 10px 0;line-height:1.8em;font-size: 16px;}

.box1 li,.box1 dt,.box1 dd{font-size: 16px;}


/* box1リスト系 */
.box1 ul,.box1 dl{
padding: 3px 0 5px 12px;
margin: 0;
}

.box1 ul{margin:0 0 10px 0;}

.box1 li{
list-style-type: none; 
line-height: 1.5em;
margin: 0 0 6px 0;
padding: 0 0 0 12px;
background: url(img/list.png) no-repeat 0px center ;
}

/* 入れ子リストは、親liに.none-mark */
.box1 li.none-mark{background: none;}
.box1 li.none-mark ul{padding-left:5px;}

.box1 dt{
list-style-type: none; 
line-height: 1.5em;
margin: 0 0 0px 0;
padding: 0 0 0 12px;
background: url(img/list.png) no-repeat 0px center;
display:list-item;
/* font-weight:bold; */
}

.box1 dd{
list-style-type: none; 
line-height: 1.5em;
margin: 0 20px 10px 5px;
padding: 5px;
display:list-item;
}


/* == ポイントボックス == */
.point-box1{background: #f3f3f3;padding:15px 10px;position:relative;}
.point-box1 h2 {color:#555;background: #f3f3f3;margin:0;padding:0.5em;}
.point-box1 p {margin:0;}
.point-box1:after {
right: 0;top: 0;position: absolute;
content: "";border-width: 0 18px 18px 0;
border-style: solid;
border-color: #fff #fff #e5e5e5;box-shadow: -1px 1px 1px rgb(0 0 0 / 16%);
}




/* ニコニコリンク貼り付け */
.nikoniko{
float:left;
width:300px;
margin:0 10px 20px 0;
}

/* ニコニコプレイヤー */
.niconico_player{width:500px;height:auto;margin:20px 0 40px 0;}

.niconico_player2{height:auto;margin:0px auto 0px auto;text-align:center;} /* indexでyoutubeと並べて使う */


/*フレックス配置の親ボックス */
.flex_box01{display:flex;justify-content: space-between;}

.flex_box01 div{
margin:0px 10px 26px;
/* border:5px solid #1ab8bf; */
background:linear-gradient(#ffffff, #e5e4e4);
width:100%;
box-sizing:border-box;
flex-grow:1;
}

.flex_box01 div:hover{background:linear-gradient(#f0fafa, #8df7ed);}

.flex_box01 h2{padding:0.4em 0.2em 0.4em 0.8em;font-size:20px;color:#fff;margin-bottom:6px;background:#a5a5a5;}

.flex_box01 div p{padding:0.5em;}


/* FANBOX告知 */
/* streaming */

.streaming{}
.fanbox{min-height:10em;}



/* ニュース */
#newsbox{}

#newsbox dl{padding-left:0;}

#newsbox dt{
display:block;
float: left;
clear: left;
font-weight: bold;
width:18em;
padding:0.2em 0px 0.2em 20px;
border-bottom: 0px solid #aaa;
background:none;
font-size:14px;
line-height:2.0em;
}

#newsbox dd{
display:block;
padding: 0.2em 0 0.2em 19em;
border-bottom: 1px solid #aaa;
font-size:14px;
line-height:2.0em;
margin:0;
}



/*************/
/*  Ad 関連  */
/*************/

.ad_link_responsive{
padding: 12px 18px;
height:auto;
margin:8px auto;
} /* 廃止予定 */

.ad_main_top_display{
padding: 0px 10px;
height:auto;
min-height:280px;
margin:20px auto 48px;
/* background:#558; */
}

.ad_kijinai{
padding: 0 15px 24px;
margin-top:32px;
}

/* adダブル */
.ad_double{/* max-height:350px; */ min-height:300px!important; margin:28px 0;border-top: dashed #aaaaaa 1px;padding-top:28px;}
.ad_double_left{width:400px;height:300px;/*background:#ff0;*/float:left;margin:0 auto;}
.ad_double_left_innner{width:360px;height:300px;margin:0 auto;/*background:#555;*/}
.ad_double_right{width:400px;height:300px;/*background:#f00;*/float:right;margin:0 auto;}
.ad_double_right_innner{width:360px;height:300px;margin:0 auto;/*background:#555;*/}

/* adマルチ */
.ad_multi01{
padding: 0px 10px;
margin-top:16px;
height:auto;
}



/* a8.net */
.a8_300_250{width:300px;height:250px;margin:10px auto 20px;}
.a8-side{margin:20px auto;}
/* .a8_text{margin:20px 0!important;} */


/* リンクボックス jsと連動して動作*/
.linkbox p{line-height:1.2em;}

/* リンクボックス2汎用 */
/* 空aを一つ内在させて動作 */
.linkbox2 {position:relative;}

.linkbox2 a {
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}

.linkbox2:hover {cursor:pointer;opacity: 0.9;}



/* ===== タブ ======= */
.tab{width:100%;margin-top:20px;}
.tab ul{list-style-type:none;width:100%;}
.tab li{text-align:center;line-height:40px;float:left;background: url("img/nav_back.png") repeat;width: 152px;height:40px;margin-right:1px;overflow:hidden;}
.tab li a{font-size:14px;display:block;width: 100%;height:40px;font-weight:bold;color:#d7bfab!important;}
.tab li a:hover, li.tab_now a{
 width:100%;height:40px;/*background: url(img/tab_rollover.png);*/
 /* color:#f60 !important; */
 color:var(--key-color-01) !important;
 text-decoration: none !important;
 background:#fff;
 }


/*----------------*/
/* サイドコンテンツ */
/*---------------*/
#subcontents{
width: 300px;
float:right;
margin-top:0px;
}

.sub_wback{background: #fff;padding:5px 0 5px 0;margin-bottom:20px;}


/* ==== サイドアド ====*/

/* 旧250px廃止？  */
#sub_ad{width: 250px;margin-top:20px;float:right;}
#sub_ad_top{width:300px;margin:20px auto 20px;background: #fff;height:250px;}
#sub_ad_res_index{width:300px; margin:0 auto 20px;background: #fff;height:250px;} /* 上マージンなし */
#sub_ad_right_bottom{height:auto;}

#fb {
margin:10px 0;
background:#fff;
}

.twitter_wrap{
margin:20px 0;
background:#fff;
}


/* サイドボックスグレー */
.box_l{
margin: 10px 10px 10px 10px;
overflow: hidden;
background: #f3f3f3;
}

.box_l h2 {
font-size: 16px;
padding: 6px 0 6px 6px;
/*color: #f63; */
color: var(--key-color-01);
font-weight: bold;
text-align: left;
}

/*  サイドナビ　*/
.box_l ul {
list-style-type: none;
padding: 0;
}

.box_l ul li {
display: list-item;
color: #444;
font-weight: normal;
text-align: left;
font-size: 14px;
padding: 0px;
}

.box_l ul li a {
color: #444;
font-size: 14px;
font-weight: normal;
text-decoration: none;
padding: 10px 0 10px 20px;
display: block;
background: url(img/list.png) no-repeat 5px center;
}

.box_l ul li a:hover { 
color: #ffffff !important; /* visitedが採用されないように */
text-decoration: none;
/* background-color: #ff8833; */
background-color: var(--key-color-01);
}


/* 音楽素材サイドメニュー */
.side_big_title{ 
background: url("img/nav_back.png");
/*color:  #f63; */ 
color: var(--key-color-01);
font-size:14px;
font-weight:bold;
text-align:center;
height:auto;
padding:5px 0;
}

/* サイドYouTubeと機材 */
.youtube-side, .kizai-side{
padding:0px 0;
margin:0 auto 20px;
max-width: 300px;
}

.youtube-side a, .kizai-side a {display:block;height:100px;line-height: 100px;}

.youtube-side{background:#ff7862;}
.kizai-side{background:#1ab8bf;}

.youtube-side p a{}

.youtube-side p, .kizai-side p{
font-size:18px;
color:#fff;
text-align: center;
}

.youtube-side:hover, .kizai-side:hover {opacity:0.8;}



/*-----------------*/
/*    フッター     */
/*-----------------*/
#footer{width:100%;background: url("img/foot_back.png") repeat;margin-top:20px;}

#copyright{width:1116px;margin:0 auto;padding:20px 0 20px 0;}
#copyright p{text-align:left;}

#foot_massage{width:340px;float:left;padding:0 0 0 30px;}
#foot_massage p{color:#888;}
#foot_massage p a{color:#888;}

#footnav{ width:1116px; margin:0 auto;}

.f_navi	{
width:183px;
text-align: left;
padding: 0px 0 0 20px;
float: left;
}

.f_navi h3{
color: #309030;
font-size: 16px;
font-weight:bold;
margin: 10px 0 0 0;
padding: 0;
}

.f_navi li{
display: list-item;
list-style-type: none;
background: url(img/f_dot.png) no-repeat 4px center;
padding: 0 0 0 9px;
}

.f_navi li a{
font-family: "Arial", sans-serif;
font-weight: normal;
color: #888;
padding: 0 5px;
display: inline;
list-style-position: outside;
line-height: 18px;
}

.f_navi ul li a:hover{
color: #ff6600;
text-decoration: none;
line-height: 18px;
}

#footlogo img{float:left;}
#footlogo img:hover{opacity:0.8;}

/* 削除予定 */
#foot_ad
{
width:468px;
height:60px;
border:0px #888 solid;
margin:0 auto 20px auto;
}

/* 新foot ad */
.foot_ad_wrap{width:100%;/*height:280px;*/padding:0 10px;margin:30px auto 0;}
.foot_ad_res{width:100%;height:200px;margin-bottom:16px;}


/* トップページへ */
.to-page-top-wrapper{max-width:1116px;height:48px;line-height:48px;position:relative;margin:0 auto;}

.to-page-top{
background:linear-gradient(-6deg, #fe9700, #cd1900);
text-align:center;
font-size:24px;
width:80px;
position:absolute;
right:10px;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
}

.to-page-top:hover{
background:#d12200;
cursor:pointer;
}

.to-page-top a{
display:block;
color:#ddd;
width:100%;
height:42px;
padding-top:0px;
}


/* ============= clearfix  */

.clearfix:after {
content: ".";  /* 新しい要素を作る */
display: block;  /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

/* IE6とMacIE用ハック*/
* html .clearfix{
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}


/* ============= New */
.new{
font-weight: bold;
/* color: #ff0000; */
color:var(--key-color-01);
margin-left: 8px;
font-size: 80%;
}

/* ============= 追加情報 */
/*  ブロック要素内で右にalign｡矢印画像自動挿入。追加情報リンクに */
.more{
font-size:16px;
margin: 0;
background: url(img/more.png) no-repeat right center ;
text-align: right;
line-height:1.5em!important;}

.more a{padding:0 5px;}
.more a:hover{background:#ff7f27;text-decoration: none !important;color:#fff !important;}
p.more{	padding-right:12px;margin-right:5px;}


/* ============= 汎用クラス */

/* 色 */
.red{color:#f00;}
.orange{color:#f63;}
.pink{color:pink;}

.fleft{float:left!important;}
.fright{float:right!important;}

.non-top-margin{margin-top:0!important;}
.non-bottom-margin{margin-bottom:0!important;}

/* フォント */
.bold{font-weight: bold;}

/* == 汎用ボタン == */
.btn1{
cursor:pointer;
background:#f96;
padding:0.25em 1em;
text-align:center;
margin:10px 0px 0 0;
width:100px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
}

.btn1:hover{
cursor:pointer;
background:#e85;
}


/* 注意ボックス */
.caution{
border:1px solid #fdd;
background: #ffa;
margin-bottom:40px;
}
.caution h2{
/* padding:0.5em 0 1em 1em; */
margin:0;
border:0;
color:#f55;
font-size:17px;
background: none;
}

.caution h3{
padding:0.5em 0 1em 1em;
}

.caution strong{
color:red;
}


/*　メモボックス01　*/
.memo01{/*background:#fef5fe;*/border:#b1fff6 8px solid;box-sizing: border-box;margin:0px;padding:16px 10px;}
.memo01 h2{background:none;padding:0 0 0 8px;margin:0.2em 0 0.5em 0px;}
.memo01 p{background:none;padding-left:8px;margin:0 0 0 0px;}
.memo01 a:link,.memo01 a:visited{text-decoration: underline!important;color:#81cfc6!important;font-weight: bold;}


/* 蛍光ペン */
.keiko_yellow {
　　background: linear-gradient(transparent 80%,#fff070 50%);
　　font-weight: bold;
　　color: #000;
}


/* 表示切り替えスイッチ系 */

.hideswitch,.showswitch{color:#d22;cursor:pointer;}
.hide{border: 3px dashed #ccc;}

.toggleswitch{cursor:pointer;}
.toggleswitch:hover{color:#c64;	text-decoration: underline;}
span.toggleswitch{color:#620;}

dd.hide,p.hide{padding:15px 10px 15px 10px;margin:0 5px 10px 0px;}
div.hide{padding:15px 0 0 0;margin:0 0 0 15px;}


.shadow,#sub_ad,#sub_ad_top,#sub_ad_right_bottom,.sub_wback,.wback{
box-shadow: 1px 1px 5px #555;
-moz-box-shadow: 1px 1px 5px #555;
-webkit-box-shadow: 1px 1px 5px #555;
-ms-box-shadow: 1px 1px 5px #555;}


/* 横長アイコンul liセレクタ */
.iconselect{margin-bottom:48px;}
.iconselect ul{padding:0 10px;}

.iconselect ul li{
height:50px;
margin:0 0 5px 55px;
border: 1px solid #ccf;
padding:5px 0 5px 10px;
line-height:1.2em;
list-style-type:none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
background:none;
margin:0 0 5px 0;
padding:0;
}

.iconselect ul li img{
float:left;
list-style-type:none;
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-ms-border-radius: 4px 0 0 4px;
}

.iconselect ul li:hover{border-color:#ddd;background:#ddd;cursor:pointer;}

.iconselect ul li p{padding:4px 0 0 60px;font-size:12px;}

.iconselect a{color:#e40 !important;font-weight:bold;}
.iconselect a:hover{text-decoration : none !important;}

/* li.big とすると、アイコンセレクタ拡張。大きくする。 */
.iconselect ul li.big{height:200px;border: 2px solid #f88;}

.iconselect ul li.big p{padding-left:10px; font-size:18px;line-height:2em;}

.iconselect ul li.big img{float:right;}


/* 正方形新アイコンul liセレクタ */
/* is3へ切り替えたら削除でOK */
/*
.iconselect2 ul{margin:0 0 20px 10px;padding:0;}

.iconselect2 ul li{
padding:0;
height:100px;
width:100px;
float:left;
margin:0 11px 20px 0;
list-style-type:none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
-ms-border-radius: 4px 4px 4px 4px;
}

.iconselect2 ul li:hover{border-color:#ddd;cursor:pointer;opacity:0.8;}

.iconselect2 ul li p{margin:0;padding:0.5em 0 0 0.5em;
    text-shadow: 1px 1px 1px #000,
    -1px 1px 1px #000,
    1px -1px 1px #000,
    -1px -1px 1px #000;
}

.iconselect2 ul li p a{color:#fff!important;}

#is_bgm{background: url("img/icon_bgm.jpg") no-repeat;}
#is_jingle{background: url("img/icon_jingle.jpg") no-repeat;}
#is_chip{background: url("img/icon_chip.jpg") no-repeat;}
#is_score{background: url("img/icon_score.jpg") no-repeat;}
#is_yuttari{background: url("img/icon_yuttari.jpg") no-repeat;}
#is_genki{background: url("img/icon_genki.jpg") no-repeat;}
#is_cool{background: url("img/icon_cool.jpg") no-repeat;}
#is_dark{background: url("img/icon_dark.jpg") no-repeat;}
#is_radio{background: url("img/icon_radio.jpg") no-repeat;}
#is_game{background: url("img/icon_game.jpg") no-repeat;}
#is_movie{background: url("img/icon_movie.jpg") no-repeat;}
#is_midi{background: url("img/icon_midi.jpg") no-repeat;}
#is_jazz{background: url("img/icon_jazz.jpg") no-repeat;}
#is_piano{background: url("img/icon_piano.jpg") no-repeat;}
#is_se{background: url("img/icon_se.jpg") no-repeat;}
*/


/* アイコンセレクタ3 2019.2 */

.iconselect3{
box-sizing: border-box; /* paddingはboxの内側へ */
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
}


.iconselect3 > div{width:195px;padding:5px;}
.iconselect3 > div:hover{opacity:0.8;}
.iconselect3 > div > a:hover {text-decoration:none!important;}
.iconselect3 > div > a > div{width:100%;  background-color:#eee; height:100px;margin:0 auto;padding:10px;}
.iconselect3 span{
color:#fff;
text-shadow: 1px 1px 1px #000,
 -1px 1px 1px #000,
  1px -1px 1px #000,
 -1px -1px 1px #000;
}

#is3_bgm{background: url("img/is3_bgm.jpg") no-repeat;/*background-size:cover;*/}
#is3_jingle{background: url("img/is3_jingle.jpg") no-repeat;}
#is3_chip{background: url("img/is3_chip.jpg") no-repeat;}
#is3_score{background: url("img/is3_score.jpg") no-repeat;}
#is3_yuttari{background: url("img/is3_yuttari.jpg") no-repeat;}
#is3_genki{background: url("img/is3_genki.jpg") no-repeat;}
#is3_cool{background: url("img/is3_cool.jpg") no-repeat;}
#is3_dark{background: url("img/is3_dark.jpg") no-repeat;}
#is3_hot{background: url("img/is3_hot.jpg") no-repeat;}
#is3_radio{background: url("img/is3_radio.jpg") no-repeat;}
#is3_game{background: url("img/is3_game.jpg") no-repeat;}
#is3_movie{background: url("img/is3_movie.jpg") no-repeat;}
#is3_midi{background: url("img/is3_midi.jpg") no-repeat;}
#is3_jazz{background: url("img/is3_jazz.jpg") no-repeat;}
#is3_piano{background: url("img/is3_piano.jpg") no-repeat;}
#is3_se{background: url("img/is3_se.jpg") no-repeat;}
#is3_wahu{background: url("img/is3_wahu.jpg") no-repeat;}
#is3_piko{background: url("img/is3_piko.jpg") no-repeat;}
#is3_ambi{background: url("img/is3_ambi.jpg") no-repeat;}


.icon_link1{}
.icon_link1:hover{opacity: 0.8;transition: 0.4s;}
.icon_link1 a{display:table;max-width: 500px;background: #fff;border:solid #eee 3px;margin:16px 0;text-decoration:none!important;transition: 0.4s;}
.il1_img{width:100px;height:100px;display: table-cell;vertical-align: middle;}
.icon_link1 a:hover{background: #eee;}
.il1_p{display: table-cell;vertical-align: middle;}
.il1_p p{color:#666;font-weight:bold;padding:0.5em 2em;}
.il1_p p:hover{}


/* 料金表　新　 */
.paypal_form_wrap{background-color: #f0f0f0;padding:1px 0 12px 0;margin:28px 0;}
.paypal_form_wrap h3{padding:0px 0 0 0!important;margin:6px 0 0 6px!important;}

.paypal_form {padding:4px 0 0 12px;}
.paypal_form h4{margin:18px 0 6px 0;color:#ef693f;}
.paypal_os1{width:400px;}
.paypal_btn{margin:24px 0 0 0;}


/*------------------------*/
/* グラフィカル利用規約 2    */
/*------------------------*/
#visual-rules-wrap{width:100%;padding:0 5px;}
.visual-rules-inner{width:50%;float:left;padding:5px;}
.visual-rules-item{width:100%;height:150px;background:#f3f3f3;padding:15px;}
.visual-rules-icon{font-size:30px;float:left;margin-right:16px;color:#55803a;text-shadow: 1px 1px 0 #fff;}
.visual-rules-item h3{margin:5px 0 10px;font-size:23px;color:#333;}
.fa-exclamation-triangle,.fa-ban{/*color:#f63;*/ color:var(--key-color-01);}

#equipment h3{background:#ddd;padding:2px 0 2px 8px;margin-bottom:1em;}


/* YouTubeサンプル用 */
.youtube-sample
{
text-align: left;
padding:5px 0;
width:50%;
float:left;
}

.youtube-wrap
{
position: relative;
width: 100%;
/*padding-top: 56.25%;*/
}

.youtube-wrap iframe 
{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

.youtube-wrap img{
width: 100% !important;
height: 100% !important;
}

/* 再生ボタン */
.youtube-play-btn{position:absolute;top:35%;left:41%;}
.youtube-play-btn span{font-size:67px;color:#2e2e2e;opacity:0.8;}

.youtube-wrap img:hover + .youtube-play-btn span {color:red;opacity:1;transition: 0.2s;}
.youtube-play-btn span:hover{color:red;opacity:1;transition: 0.2s;} 


/* チャンネル登録 */
.youtube-subscribe{
width:48%;
float:left;
text-align:center;
}

.channel-touroku{
margin:24px 0 25px!important;
font-weight:bold;
font-size:18px!important;
}

.subscrib_link{margin-top:20px!important;}
.subscrib_link a{padding:0.5em;/*background:red;*/color:#fff!important;background:var(--key-color-01);}
.subscrib_link a:hover{opacity:0.8;transition: 0.2s;}


/* ================== */
/* =    サイズ対応    = */
/* ================== */


/* ============================================================================= */
/* ================ 1000pxを切ったら（サイドバーが下に回る段階）====================== */
/* ============================================================================= */

@media only screen and (max-width: 1000px){

/* == ヘッダ < 1000px == */
#header{height:auto;}
#headin{width:100%;}
#headin a img{margin-left:18px;}

/* ==== メインナビ < 1000px ==== */
.menu-toggle{display:block;}
.toggle-on{display:block!important;} /*下のglobal-navのdisplay:noneより優先させないといけない */

#global-nav{display:none;}

#global-nav li{
width:100%; 
/* text-align : center;  */
border-bottom:2px solid #ffffff;
border-right:0px; /* 消しとかないと1px画面外に出てしまう */
position: relative;
}

#global-nav li a{ max-width:500px;width:90%;display:block;padding:11px 0;font-size:15px;margin:0 auto;}
 /* #global-nav li a:hover{background:#e67e22;color:#fff;} */

.gnav-small { /*max-width:500px;*/width:100%!important;/*display:block;padding:14px 0;font-size:15px;margin:0 auto;*/}

/* ==== サブナビ < 1000px ==== */  /* ひとまず非表示で対応中 */
#head-sub-nav{
width:100%;
float:left;
position: relative;
margin:0 auto;
display:none;
}

#head-sub-nav ul{
overflow:hidden;  /* floatのみの内包のulの高さを出す */
height:42px;
}

#head-sub-nav li{
width:25%;
float:left;
margin-right:2em;
}

#head-sub-nav li a{
width:25%;
}

/* = 検索ボックス < 1000px = */
#head-search{
margin:24px auto;
width:90%;
max-width:500px;
display:none;
position: static; /* 初期値、topなどの位置指定を無効に */
}

input[type="text"] {}
input[type="submit"] {}
input[type="submit"]:hover {}


/* = メインコンテンツ < 1000px = */
#wrap{width:auto;margin:0 auto;}

#maincontents{width:100%;max-width:800px;float:none;margin:0 auto;}
#maincontents img{max-width:100%;height:auto;}
#maincontents h1{}


.box1{/*width:100%;*/}
p.more{margin-top:1em;}


#top_info{width:100%;height:auto;padding-bottom:1px;}
#top_discription{width:88%;margin:20px auto;}
#top_more p a{display:block;width:70%;margin:10px auto;}

/* 横長アイコンセレクタ */
.iconselect ul li{height:80px;}
.iconselect ul li img{width:80px;}
.iconselect ul li p{padding-left:85px;padding-right:2px;}

/* グラフィカル利用規約 */
#new-rules td h3{/*font-size:18px;*/ /*margin-bottom:1em;*/}
#new-rules h3 i{padding-bottom:12px;}
#new-rules td p{padding-left:0;}


/* = サイドコンテンツ < 1000px = */
#subcontents{width:100%;max-width:800px;float:none;margin:0 auto;text-align:center;}

/* ad関連サイズ対応 */
/* 影を消してwidthをauto、min-heightを設定 */    
#sub_ad_top, #sub_ad_res_index, #sub_ad_right_bottom{
width:auto;margin:20px auto;background:none; min-height:255px; /* 2021-04-26 for CLS Problem / 2022-09-09 345→255px　 */
box-shadow: 0px 0px 0px #333;
-moz-box-shadow: 0px 0px 0px #333;
-webkit-box-shadow: 0px 0px 0px #333;
-ms-box-shadow: 0px 0px 0px #333;}

.ad_main_top_display, .foot_ad_res, .ad_double{min-height:300px!important;} /* 2021-04-26 for CLS Problem */

.ad_double_left{float:none;width:100%;}
.ad_double_right{display:none;}

/* 影をなくす  なぜか分けてあったが上にまとめた　問題ないか？ */
/*
#sub_ad_right_bottom{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-ms-box-shadow: none;
}
*/


/* サイドメニュー行広げる */
.side_big_title{font-size:16px;padding:16px 0;}
.box_l h2{padding:10px 0 10px 8px;}
.box_l ul li a{padding:10px 0 10px 24px;} 
.box_l ul li {border-top:#ddd 1px solid;} 


/* = フッタ < 1000px = */
#footnav{width:100%;}
#copyright{width:95%;}

#footlogo{display:none;}
.f_navi h3{margin-top:25px;}
#foot_massage{width:80%;padding:30px 0 0 20px;}


.to-page-top-wrapper{width:100%;/*margin-bottom:0;*/}
.to-page-top{
width:100%;
/* height:30px; */
position:absolute;
right:0px;
}
.to-page-top a{background:#333;height:56px;padding-top:6px;/*color:#f63;*/ color:var(--key-color-01);}
.to-page-top a:hover{/*background:#f63;*/ background:var(--key-color-01); color:#333;}


.a8_300_250{margin-top:20px;}

.youtube-side, .kizai-side{max-width:95%;}

} /* End of 1000px */



/* ============================================================= */
/* ========= 800px以下（メインコンテンツが切れ始めるところ）=========== */
/* ============================================================= */
@media only screen and (max-width: 820px){

.box1 p,.box1 dl,.box1 ul{padding-left:8px;}
/* dd.hide{margin-left:0;} */

.tab li{width:24%;}

/* グラフィカル利用規約 2 */
#visual-rules-wrap{}
.visual-rules-inner{width:100%;float:none;}
.visual-rules-item{height:auto;}

.youtube-subscribe{width:97%;}
.youtube-sample{width:100%;max-width:500px;float:none;margin:0 auto;}

.nikoniko{float:none;margin:15px auto;}
.niconico_player{width:100%;margin-left:auto;margin-right:auto;}


.ad_main_top_display{/* padding: 12px 8px;*/ min-height:415px; /* 効かない */} 
.ad_link_responsive{padding: 12px 8px;} /* 廃止予定 */


.flex_box01{ flex-direction: column; margin-bottom:20px; padding:0 10px;}
.flex_box01 div {margin:4px 0 6px;}

/* End of max-width 820px */


/* ============================================================ */
/* ===================  620px以下 スマホサイズ =================== */
/* ============================================================ */

@media only screen and (max-width: 620px){
/* MusMus Player */
.iconselect3 > div{margin:4px auto;width:50%;}

#top_info{
background-image: none; 
/* background-color: #46699d;  */
opacity:0.9;
box-shadow: 1px 1px 5px #333;
-moz-box-shadow: 1px 1px 5px #333;
-webkit-box-shadow: 1px 1px 5px #333;
-ms-box-shadow: 1px 1px 5px #333;
background:var(--key-color-01);
}

#newsbox dl{padding-left:12px;}
#newsbox dt{line-height:1.5em;padding:18px 2px 0;float:none;}
#newsbox dd{line-height:1.5em;padding:8px 2px 12px;}

.ad_main_top_display{} 
.ad_multi01{/* max-height:415px; */ display:none;} /* 高さ設定しても乗り越えてくるので消す */

}

/*--------------------*/
/* サイズ対応ここまで */
/*--------------------*/


/*
* {border: 1px solid #ccf;}
*/