@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
  
  

  

  /* デフォルトでは非表示 */
  .mobile-only {
    display: none;
  }
  /* 画面幅が800px以下（およそスマホ表示）でのみ表示 */
  @media (max-width: 800px) {
    .mobile-only {
      display: block;
      width: 100%;
      max-width: 800px;
      margin: 10px 0;
          padding: 10px;
       background: whitesmoke;
    }
  }



  .affiliate-link {
  display: block;
  margin: 2.5em 0;
  text-align: center;
}

.affiliate-link a {
  display: inline-block;
  padding: 12px 18px;
  background: #ff9900;
  color: #000;
  font-weight: bold;
  border-radius: 6px;
}

/* ===== トピックス：カード一覧（3列） ===== */
.topics-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 14px 0 34px;
}

/* タブレット：2列 */
@media (max-width: 1024px){
  .topics-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホ：1列 */
@media (max-width: 640px){
  .topics-cards{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== カード本体 ===== */
.topic-card{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.topic-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
}

.topic-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ===== サムネ（比率固定で一覧が揃う） ===== */
.topic-card__thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}

.topic-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== テキスト ===== */
.topic-card__body{
  padding: 14px 16px 16px;
}

.topic-card__title{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
}

.topic-card__excerpt{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,.62);
  margin: 0;
}





h4 > .amazon-item-box {
    float: left;
    padding: 0px 15px 15px 0px;
    box-sizing: border-box;
}


.amazon-item-box {
  padding: 22px 25px;
  width: 94%;
  margin: 0 auto 1.6em;
  border: 3px solid #dfdfdf;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}
 
.amazon-item-box {
  position: relative;
}
/*
Font Awesome適用下でコメントアウトすると
ボックス右下にAmazonアイコンが表示されます*/
/*
.amazon-item-box::after {
  font-family: FontAwesome;
  content: "";
  padding-right: 3px;
  position: absolute;
  bottom: 0;
  right: 6px;
  font-size: 24px;
  color: #ccc;
}
*/
 
.amazon-item-error.cf {
  display: block;
  line-height: 1.2;
}
 
.amazon-item-thumb {
  width: 160px;
  min-width: 160px;
  margin: 0 auto 5px;
  float: none !important;
}
 
.amazon-item-thumb * {
  display: block;
}
 
.amazon-item-thumb > a > img {
  margin: 0 auto;
}
 
.amazon-item-content {
  line-height: 125%;
  width: 100%;
}
 
.amazon-item-snippet {
  font-size: 0.8em;
  margin-top: 6px;
}
 
.amazon-item-buttons a {
  width: 90%;
  display: block;
  margin: 0px auto 8px;
  padding: 10px 1px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
 
.amazon-item-buttons a:hover {
  opacity: 0.6;
}
 
.amazon-item-buttons {
  margin-top: 1em;
}
 
@media screen and (min-width: 768px) {
  .amazon-item-box {
    text-align: left;
    display: flex;
    font-size: inherit !important;
  }
 
  .amazon-item-thumb {
    vertical-align: top;
    box-sizing: border-box;
    min-width: auto !important;
  }
 
  .amazon-item-content {
    line-height: 125%;
    vertical-align: top;
    box-sizing: border-box;
    padding-left: 25px;
    width: 100%;
  }
 
  .amazon-item-buttons {
    display: flex;
    flex-wrap: wrap;
  }
 
  .amazon-item-buttons a {
    width: auto;
    text-align: center;
    margin: 0;
    border-radius: 3px;
  }
 
  .amazon-item-buttons a img {
    position: absolute;
    bottom: 0;
    right: 0;
  }
 
  .amazon-item-buttons > * {
    width: 31.5%;
    margin: 2px;
    box-sizing: border-box;
  }
}
.shoplinkamazon a {
  background: #f79901;
}
 
.shoplinkrakuten a {
  background: #bf0000;
}
 
.shoplinkyahoo a {
  background: #e60033;
  position: relative;
}



.wp-block-group.clearfix.is-layout-flow{
        display: flex;
    flex-direction: column;
}

.wp-block-group.clearfix.is-layout-flow:after{
    display:block;
    clear:both;
    display:block;
}




.sidebar-scroll{
    padding:50px 0px;
}



h4.wp-block-heading.has-cocoon-white-color.has-cocoon-black-background-color.has-text-color.has-background{
     margin-top:40px;
    
}

h2.wp-block-heading.has-cocoon-white-color.has-cocoon-black-background-color.has-text-color.has-background{
      margin-top:40px;
}





.article h3 {
    border-left: none !important; 
    border-right: none !important; 
    border-top: none !important; 
    border-bottom: none !important; 
    font-size: 16px;
    padding: 0px 0px;
}




.article h2{
    argin: 25px 0px !important;
    padding: 0;
    padding: 5px 0px 5px 10px;
    border-left: 10px solid black;
    background: none;
    font-size:18px;
}


.toc {
    border:none !important;
    border-top: 1px dotted black !important;
    /* border: 1px solid var(--cocoon-basic-border-color); */
    padding: 30px 1.6em !important;
    border-bottom: 1px dotted black !important;
    display: inherit !important;
    margin: 35px 0px !important;
}

.toc-title{
text-align:left;
}



.entry-content>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {

    line-height: 30px;
    font-size: 14px;
}


img.music-image1.item{
     margin:30px 0px; 
}

.sale-box{
width:100%;
}

body .is-layout-flex {
    gap: 15px !important;
}

is-layout-constrained {
    margin:0px ;
}

body .is-layout-constrained > * + *{
    margin:7px 0px 10px 0px !important;
}

body{
     font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body .is-layout-flow > * + * {
    margin: 10px 0px !important;
}


.innerbox {
    display: block;
    float: left;
    padding: 5px 0px;
    margin: 0 !important;
}

.new-entry-card.widget-entry-card.e-card.cf{
        background: whitesmoke;
    padding: 5px;
    box-sizing: border-box;
    margin: 10px 0px;
}

.test_sticky{
    display:none;
}


.marketing-padding{
    padding:10px;
}

.kiji-padding{
    padding:10px;
}

.Top-text{
padding:10px !important;
margin:10px 0px 15px !important;

}


.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

.itunes-link{
    padding: 10px 25px;
    background: red;
    color: white;
    font-weight: bolx;
    font-weight: bold;
    border-radius: 5px;
    float: left;
    margin: 0px 0px 0px 20px;
    }

.music-link{
    padding: 10px 30px;
    background: orange;
    color: white;
    border-radius: 5px;
    font-weight: bold;
     float: left;
}


.format{
      padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
   margin: 5px auto !important;
    overflow: auto;
    background: whitesmoke;
    display: inline-block;
        }
        
.records{
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
   margin: 0 !important;
    overflow: auto;
    background: whitesmoke;
    display: inline-block;
    margin: 5px 10px 10px 0px !important;
}

.star{
    
    
    margin: 0px 0px 10px 0px !important;
        padding: 5px !important;
        font-size: 14px !important;
}
    
.title-name{
  padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    /*overflow: auto;*/
   margin: 0 !important;
    display: inline-block;  
}

.artist{
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    overflow: auto;
    margin: 0px auto 10px !important;

}




img.music-image {
  
    /*width:265px;
    height:auto;*/
        float: left;
    padding: 0px 40px 20px 0px;
    box-sizing: border-box;
    width:200px;
    height:auto;
    
   
}  

img.music-image1 {
    float: left;
    padding: 0px 25px 5px 0px;
    box-sizing: border-box;
    width: 150px;
    height: auto;
    margin:23px 0px 0px 0px;
}

.amazon-title{
        padding: 10px 20px;
    background: orange;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 13px;
    border-radius: 5px;
    background: #242c3c;
    border: 2px solid  #242c3c;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
     font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
     margin: 0px 10px 0px 0px;
    text-decoration: none;
}

.rakuten-title{
        padding: 10px 20px;
    background: red;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 13px;
    border-radius: 5px;
    background: #b20400 ;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #b20400 ;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
    margin: 0px 10px 0px 0px;
    text-decoration: none;
}


.yahoo-title{
        padding: 10px 20px;
    background: red;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 13px;
    border-radius: 5px;
    background: #fc7419 ;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid  #fc7419;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
    margin: 0px 10px 0px 0px;
    text-decoration: none;
}



.product-title{
    padding:0px 0px 10px 0px;
    font-size:18px;
    font-weight:bold;
        font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;<br />
   margin:10px 0px !important;
   }

.boxout {
    float:left;
}

.tags{
    float:right;
}

.tags p{
    float:left;
}

.tags > div > p{
    margin:8px 0px 8px 0px !important;
}


.product-boxx{
    padding:10px 20px 20px;
    box-sizing:border-box;
   border: 2px double #CCC;
   position: relative;
    display: block;
    box-shadow: 2px 3px 9px -5px rgb(0 0 0 / 25%);
   
}

.product-boxx::after{
    display:block;
    clear:both;
    content:"";
}




.amazon-banner::after{
    display:block;
    clear:both;
    content:"";
}

.amazon-banner{
    margin:25px 0px 20px 0px;
}


.entry-categories-tags{
margin:20px 0px 0px 0px;
}

.product-main-box::after{
    content:"";
    display:block;
    clear:both;
}

.product-box{
 float:left;
 width:25%;
}


h2.has-white-color.has-orange-background-color.has-text-color.has-background{
    margin: 25px 0px !important;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  
  
  .top-fix{
position:fixed !important;
bottom: !important;
}




#arrow {
display: block;
    padding: 3px 15px;
    border: 1px solid lightgrey;
    border-radius: 0px 0px 10px 10px;
    border-top: none;
  
}

#arrowbox {
width:100%;
height:auto
 display: block;
 padding:0;
 margin:0;
}

.classname {
  display: none !important;
}



  
  
  body .is-layout-flow > * + * {
    margin: 10px 0px !important;
}
  
  h2.has-white-color.has-orange-background-color.has-text-color.has-background{
    margin: 25px 0px !important;
}

     .test_sticky{
    display:block !important;
	position: sticky;
	top: 0px;
	z-index: 2;
	background: rgba(255,255,255,0.9);
}

	.sample_menu_parent {
		cursor: pointer;
		}
	.sample_menu_parent::before {
		content: '\f077';
		font-family: 'Font Awesome 5 Free';
		 font-weight: 900;
		display: inline-block;
		transition: .4s;
		color: #604c3f;
     font-size: 15px;
    width: 45px;
    text-align: center;
		background: #fff;
		border-bottom: 2px solid #604c3f;
		border-left: 2px solid #604c3f;
		border-right: 2px solid #604c3f;
		border-radius: 0px 0px 5px 5px;
		margin: 0 0 0 5px;
		padding: 2px 0;
		}
	.sample_menu_parent.active::before {
		content: '\f078';
		font-family: 'Font Awesome 5 Free';
		 font-weight: 900;
		color: #604c3f;
      font-size: 15px;
    width: 45px;
    text-align: center;
		background: #fff;
		border-bottom: 2px solid #604c3f;
		border-left: 2px solid #604c3f;
		border-right: 2px solid #604c3f;
 		border-radius: 0px 0px 5px 5px;
		margin: 0 0 0 5px;
		padding: 2px 0;
		}
	.sample_menu_child {
		height: 0;
		opacity: 0;
		visibility: hidden;
		transition: .4s;
		}
	.sample_menu_child.active {
		height: auto;
		opacity: 1;
		visibility: visible;
		background: rgba(255,255,255,0.9)
		}
.sample_menu_child.active {
    height: auto;
    opacity: 1;
    visibility: visible;
    background: rgba(255,255,255,0.9);
}

.sample_menu_child {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}

  
  
     .clearfix:after{
    content:"";
    display:block;
    clear:both;
}
    
img.music-image {
    float: left;
    padding: 0px 40px 20px 0px;
    box-sizing: border-box;
    width:200px;
    height:auto;
}  

/*img.music-image1 {
    float: left;
    padding: 0px 15px 0px 0px;
    box-sizing: border-box;
    width: 110px;
    height: auto;
}*/

/*img.music-image1 {
    float: left;
    padding: 0px 15px 10px 0px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
}*/

.amazon-title{
        padding: 10px 23px;
    background: orange;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 13px;
    border-radius: 5px;
    background:  #242c3c;
    border: 2px solid  #242c3c;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
     font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-decoration:none;
    margin:0px 10px 0px 0px;
}

.rakuten-title{
        padding: 10px 23px;
    background: red;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 13px;
    border-radius: 5px;
    background: #b20400 !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #b20400 !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
    text-decoration:none;
    margin:0px 10px 0px 0px;
}


.yahoo-title{
        padding: 10px 23px;
    background: red;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 13px;
    border-radius: 5px;
    background: #fc7419 !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #fc7419 !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
    text-decoration:none;
    margin:0px 10px 0px 0px;
}



.product-title{
    margin:10px 0px !important;
    font-size:18px;
    font-weight:bold;
        font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}




}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  
     .top-fix{
position:fixed;
top: 0px;
z-index:9999;
}




#arrow {
display: block;
    padding: 3px 15px;
    border: 1px solid lightgrey;
    border-radius: 0px 0px 10px 10px;
    border-top: none;

}

#arrowbox {
width:100%;
height:70px;
 display: block;
 padding:0;
 margin:0;
background-image: linear-gradient( to right, rgb(158,143,254) 0%, rgb(113,202,255) 100% );
}

.classname {
  display: none !important;
}

  
img.music-image1.item{
     margin:30px 0px; 
}

  
  main.main, div.sidebar{
    padding: 10px !important;
}

  
  h2.has-white-color.has-orange-background-color.has-text-color.has-background{
    margin: 10px !important;
}

body .is-layout-flow > * + * {
    margin: 10px 0px !important;
}

  
  .tags{
    float:right;
}

.tags p{
    float:left;
    
}

.tags > div > p{
    margin:8px 0px 8px 0px !important;
}

.boxout {
    float:left;
}

.product-boxx{
    padding:10px 15px 20px;
    position: relative;
    display: block;
    box-sizing:border-box;
       border: 2px double #CCC;
    box-shadow: 2px 3px 9px -5px rgb(0 0 0 / 25%);
}

.product-boxx::after{
    display:block;
    clear:both;
    content:"";
}

    
    .records{
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
   margin: 0 !important;
    overflow: auto;
    background: whitesmoke;
    display: inline-block;
    margin: 5px 0px 10px !important;
}
    
    .itunes-link{
    padding: 15px 15px;
    background: red;
    color: white;
    font-weight: bolx;
    font-weight: bold;
    border-radius: 5px;
    float: left;
    margin: 0px 0px 0px 20px;
    font-size:14px;
    }
    
    .clearfix:after{
    content:"";
    display:block;
    clear:both;
}
    
    .music-link{
    padding: 15px 15px;
    background: orange;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    margin:0px 0px 0px 0px;
     float: left;
     font-size:14px;
}
    
    img.music-image {
    float: none;
    padding: 15px  0px !important;
    box-sizing: border-box;
    width: 65% !important;
}  

.imagebox{
    text-align:center;
   margin:0px !important;
}


img.music-image {
    float: none;
    padding: 0px 15px 0px 0px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
}


.amazon-title{
        padding: 10px 20px;
    background: orange;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 11px;
    border-radius: none;
    background:  #242c3c;
    border: 2px solid  #242c3c;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
   font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
   text-decoration:none;
    margin:0px 10px 0px 0px;
}

.rakuten-title{
        padding: 10px 20px;
    background: red;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 11px;
    border-radius: none;
    background: #b20400 !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #b20400 !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
    text-decoration:none;
    margin:0px 10px 0px 0px;
}


.yahoo-title{
        padding: 10px 20px;
    background: red;
    color: white;
    font-weight: bold;
    list-style-type: none;
    font-size: 11px;
    border-radius: none;
    background: #fc7419 !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #fc7419 !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%);
    text-decoration:none;
    margin:0px 10px 0px 0px;
}


.product-title{
    font-size:14px;
    font-weight:bold;
        font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        padding:0 auto !important;
        margin:0px auto 10px ; 
}



    
        .product-main-box::after{
    content:"";
    display:block;
    clear:both;
}

.product-box{
 float:left;
 width:100%;
}


}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


@media screen and (min-width:481px) and ( max-width:834px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
img.music-image1 {
    float: left;
    padding: 0px 20px 0px 0px;
    box-sizing: border-box;
    width: 120px;
    height: auto;
    margin:35px 0px 0px 0px !important;
}

body .is-layout-flex {
    gap: 10px !important;
}



}


@media screen and (max-width: 480px) {
    
      .item{
 margin:15px 0px !important;   
}
    
    body .is-layout-flex {
    gap: 1px !important;
}

.is-layout-constrained {
    margin:0px !important;
}
    
      h2.has-white-color.has-orange-background-color.has-text-color.has-background{
    margin: 10px 0px !important;
}

body .is-layout-flow > * + * {
    margin: 10px 0px !important;
}
	
	       .product-main-box::after{
    content:"";
    display:block;
    clear:both;
}

.product-box{
 float:left;
 width:50%;
}



/*img.music-image1 {
    float: none;
    padding:0px !important;
    width: 90%;
    height: auto;
}*/

.product-title::after {
    content: "";
    display: block;
    clear: both;
}


.product-title {
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    padding: 0 auto !important;
    margin: 0px auto 0px !important;
}


img.music-image1 {
    float: left;
    padding: 5px 15px 5px 0px;
    box-sizing: border-box;
    width: 85px;
    height: auto;
    margin:0px 0px 0px 0px;
}

.boxout {
    float:left;
}

.tags{
    float:none !important;
}

.tags p{
    float:left !important;
    margin:0px 0px !important;
}

.tags > div > p{
    margin:8px 0px 8px 0px !important;
}


.product-boxx {
    padding: 15px 7px 15px !important;
    box-sizing: border-box;
    position: relative;
    display: block;
    border: 2px double #CCC !important;
    box-shadow: 2px 3px 9px -5px rgb(0 0 0 / 25%);
}

.product-boxx::after{
    display:block;
    clear:both;
    content:"";
}


.amazon-title {
    padding: 7px 5px !important;
    
    background: orange !important; 
    color: white !important;
    font-weight: bold !important; 
    list-style-type: none;
    font-size: 11px !important;
    border-radius: none !important;
    background: #242c3c !important;
    border: 2px solid #242c3c !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%) !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-decoration: none !important;
    margin: 0px 6px 0px 0px !important;
}

.rakuten-title {
     padding: 7px 5px !important;
    background: red !important;
    color: white !important;
    font-weight: bold !important;
    list-style-type: none !important;
    font-size: 11px !important;
    border-radius: none !important;
    background: #b20400 !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #b20400 !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%) !important;
    text-decoration: none !important;
    margin: 0px 6px 0px 0px !important;
}


.yahoo-title {
     padding: 7px 5px !important;
    background: red !important;
    color: white !important;
    font-weight: bold !important;
    list-style-type: none !important;
    font-size: 11px; !important
    border-radius: none !important;
    background: #fc7419 !important;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    border: 2px solid #fc7419 !important;
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 25%) !important;
    text-decoration: none !important;
    margin: 0px 0px 0px 0px !important;
}



}


@media screen and (min-width:1024px) {
/* ここにPC向けのCSS指定 */
    .top-fix{
position:fixed;
bottom: 0px;
display:none;
}

}


@media screen and (min-width:835px) and ( max-width:1023px){
    
    
    .top-fix{
position:fixed;
top: 0px;
z-index:9999;
}




#arrow {
display: block;
    padding: 3px 15px;
    border: 1px solid lightgrey;
    border-radius: 0px 0px 10px 10px;
    border-top: none;

}

#arrowbox {
width:100%;
height:70px;
 display: block;
padding:0;
margin:0;
background-image: linear-gradient( to right, rgb(158,143,254) 0%, rgb(113,202,255) 100% );
}

.classname {
  display: none !important;
}
    
    
img.music-image1.item{
     margin:30px 0px; 
}


        .product-main-box::after{
    content:"";
    display:block;
    clear:both;
}

.product-box{
 float:left;
 width:25%;
}
}