/*
Theme Name:		Welcart Basic Child
Description:	Welcart Basic Child is child theme for Welcart Basic.
Author:			WElcart Inc.
Author URI:		https://www.welcart.com/
Template:		welcart_basic
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			responsive-layout, basic-child, two-columns, right-sidebar. left-sidebar
*/
h1.site-title img,
div.site-title img {
	width: 120px;　/* -- 100px -- */
	height: 110px;　/* -- 90px -- */
}/* -- サイトアイコンが巨大化しないようにした！ -- */
h1.site-title, div.site-title {
    width: 55%;
    margin: 0;
    padding: 10px 0px 10px;/*元は1em 0 .5em　ここでサイト画像を上に移動した */
    float: left;
    font-size: 16px;/*元は2.857142em */
    text-align: left;
  }
/* -- .site-description -- */
.site-description {
 width: 65%; /* -- 55% -- */
 height: auto;
 min-height: auto;
 padding: 1.25em 0 0;
 float:; /* -- left -- */
 background: none;
 color: #262626;
 font-weight: bold;
 line-height: 130%;
 font-size: 12px;	
}
div.search-box {
               display: none;
               }

/*
グローバルメニューの編集
*/

/*マウスオーバーしていない時*/
@media screen and (min-width: 62.5em) {
  header #site-navigation input#panel.on-off + div.nav-menu-open, header #site-navigation input#panel.on-off:checked + div.nav-menu-open, header #site-navigation input#panel.on-off + div.header-nav-container {
    display: block;
    height: auto;
    overflow: inherit;
    background-color: #d1c0a5;　/*元は　#131313（黒色）ジュエリーサイト色へ変更*/
  }
}

/*マウスオーバーしている時*/
@media screen and (min-width: 62.5em) {
  #site-navigation li a:hover {
                               background-color: #565656;
                               color: #fff;
  } /*元は　#565656（灰色）→#a61536（ジュエリーサイト色/赤っぽい灰色）へ変更*/
}
/*グローバルメニューの区切り線*/
@media screen and (min-width: 62.5em) {
  #site-navigation ul li:first-child {
    border-left: 1px solid #b29e7f; /*元は　#666（灰色）ジュエリーサイト色へ変更*/
  }
}
@media screen and (min-width: 62.5em) {
  #site-navigation li {
    border-right: 1px solid #b29e7f; /*元は　#666（灰色）ジュエリーサイト色へ変更*/
  }
}
/*グローバルメニューの文字色*/
@media screen and (min-width: 62.5em) {
  #site-navigation li a {
    display: block;
    margin-bottom: 0;
    padding: 1em 1.42857em;
    border-bottom: none;
    font-weight: 700;
    line-height: 100%;
    color: #333;; /*元は　#fff→#333（濃い灰色）   #ffcc33（黄色）*/
  }
}

/*現在地の背景色と文字色*/
@media screen and (min-width: 62.5em) {
  #site-navigation li.current-menu-item > a, #site-navigation li.current-menu-ancestor > a, #site-navigation li li.current-menu-item > a, #site-navigation li li.current-menu-ancestor > a, #site-navigation li.current-menu-ancestor > a:hover {
    background-color: #a61536; /*元は　#565656（灰色）→ジュエリーサイト色へ変更*/
    color: #fff;
  }
}

/*グローバルメニューの子項目を編集する*/

#site-navigation ul ul {
		top: 42px; /*元の44pxを42pxへ変更したら、子項目の上の隙間がなくなった　*/
		left: -1px;
		border: 1px solid #b29e7f;
		background-color: #ebe3dd;
}
#site-navigation ul.sub-menu li:not(:last-child) {
		border-bottom: 1px solid #b29e7f;
}

/*マウスオーバーしていない時*/
@media screen and (min-width: 62.5em) {
  #site-navigation ul ul li a {
    padding: 0 .714286em;
    background-color: #ebe3dd;
    color: #333;
    line-height: 44px;
  }
}/*親メニューのマウスオーバーで背景が白色から赤っぽい灰色に変更できた*/

/* マウスオーバーした時の背景色・文字色　*/
header #site-navigation ul ul :hover > a {
		background-color: #565656;
		color: #fff;
}/*　#565656（デフォルトの灰色） #a61536（ジュエリーサイト色・エンジ色） #f6f6f6（薄い灰色） */



/*ここから製品情報のテーブル用ＣＳＳ*/
/*元は　*/

table {
	border: #2D0F09 1px solid;
	border-collapse: collapse;
	font-size: 11px;
	width: 100%;
	color: #262626;	
} /*元は#F6ECEF（薄い灰色）だがウィジェットのカレンダーの数字に反映していまい、数字がみえなくなってしまたので色を変えた　*/
table th.t_top {
	border: #A84673 1px dashed;
	background-color: #35140C;
	text-align: left;
	padding: 10px;
	font: bold;
} 
table td.t_line01 {
	border: #A84673 1px dashed;
	background-color: #601A32;
	vertical-align: top;
	text-align: left;
	padding: 10px;
}
table td.t_line02 {
	border: #A84673 1px dashed;
	background-color: #752241;
	vertical-align: top;
	text-align: left;
	padding: 10px;
}
.box_dl dl {
	margin: 0px;
	border: 7px #EEEEEE solid;
}
.box_dl dt {
	float: left;
	width: 300px; /*120px;から300pxへ変更*/
	padding-left: 5px;
	margin: 20px auto;
	font-weight: bold;
	line-height: 100%; /*150%*/ 
	font-size: 14px;
	          } 
.box_dl dd {
	clear: both;
	padding: 15px 5px 15px 85px;
	margin: 0;
	line-height: 100%; /*150%*/
	border-bottom: 3px #CCCCCC solid;
    background-color: #DBEAF9;       
}
/*ここまで*/				
body {
     font: 14px/19px arial, sans-serif;
     color: #333;
     font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
     line-height: 1.7; /1.7 1.7へ変更することで、グローバルメニューの子項目が上に被らなくなった！**/	
     }
h3 {
    font-size: 18px;    /* 22px */
    line-height: 20px;    /* 38px */
}
h1, h2, h3, h4, h5, h6 {
    color: #444;
    font-family:  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  /* PT Sans,sans-serif */
    font-weight: 500;
    margin: 0px 0px 10px 0px;
} 
a:hover img {
	opacity: 1.0;
} /* 0.8から1.0へ変更して透明度を消す設定に変更*/
.single_post dl	{
	padding:0;
	margin:25px 0 0 10px;
	text-align:left;
}
.single_post dl dt{
	padding-left:15px; /*12px*/
	line-height:1.4;
	margin: 20px 0px 15px 0px;
}
.single_post dl dd{
	padding-left:25px; /*15px*/
	line-height:1.5; /*1.4*/
	margin-bottom: 15px;		
}
.single_post ol li{
	padding: 0;
	line-height:1.5; /*1.4*/
	margin-bottom: 10px;		
	background: none;
}
.single_post ul li{
	padding: 0;
	line-height:1.5; /*1.4*/
	margin-bottom: 10px;		
	background: none;
	list-style:none; /*ここでリスト表示のマークが出なくしている！*/
}
.checked	{
	padding: 3px 0 0 30px;
	line-height:1.5; /*1.4*/
	margin-bottom: 10px;		
	background: url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/08/check.gif) no-repeat 0px 0px;
	list-style:none;
}
.check	{
	padding: 0px 0 0 30px;
	line-height:1.5; /*1.4*/
	margin-bottom: 20px;		
	background: url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/08/check.gif) no-repeat 0px 0px;
	list-style:none;
}
.komejirusi	{
	padding: 0px 0px 0px 15px;
	line-height:1.5; /*1.4*/
	margin-left: -20px;	
	margin-bottom: 0px;		
	background: url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2019/12/komejirusi.jpg) no-repeat 0px 5px;
	list-style:none;
}
.dt_bl	{background:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/06/dt_bg-bl.png) no-repeat 0 2px;
		}
.dt_bl02{background:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/06/dt_bg-bl02.png) no-repeat 0 2px;
		}
.dt_wh	{background:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/06/dt_bg-wh.png) no-repeat 0 7px;
		}											
.dt_caution	{background:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/11/caution.png) no-repeat -1px 1px;
			padding-left: 40px;
		}
.dt_ball	{padding-left: 40px;
background:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/11/SnapCrab_NoName_2014-11-19_3-13-45_No-00.png) no-repeat 0 1px;
		}
/* 削除すると四葉の箇条書きが崩れる*/
dl dt{
	font-size: 18px;
	color:#000;
	padding-left:15px; /*12px*/
	line-height:1.4; 
	margin: 20px 0px 15px 0px !important;
}/* 反映されていないので、!importantを追記して優先順位をあげた→反映された*/
dl dd{
	font-size: 16px;
	padding-left:25px; /*15px 25px*/
	line-height:1.5; /*1.4*/
	margin-bottom: 15px !important;		
}/* 反映されていないので、!importantを追記して優先順位をあげた→反映された*/
.note {
      color: #5b1b0a; /*こげ茶の文字色を指定*/
	  background-image:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2015/11/note.jpg);
	  padding: 10px 10px 0px 20px;
	  box-shadow: 5px 5px 5px #999;
	  } 
.waku	{
		padding: 5px 5px 10px 10px; margin-bottom: 20px; 
		border: 3px solid #2B4B65; 
		border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 
		background: url('https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/06/content500-bg.jpg') repeat-x;
		}
.aeon_waku {
	        padding:10px;border: 3px solid #2c84dc;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin-top: -25px;background: url('https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/06/content500-bg.jpg') repeat-x;
}
h2.point	{
		background-color: #98c70e;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: auto 0px;
	    border-left-style:none
}								
.row a:link	{
				font-size: 10px;
				color: #fff;
				}	
.row a:hover	{
				font-size: 10px;
				color: #EB8400;
				}					
.border	{
		background: none repeat scroll 0 0 #F3F3F3;
    	border: 1px solid #E1E1E1;
    	padding: 3px 2px;
		box-shadow: 5px 5px 5px #999;
		}					
.border02	{
		background: none repeat scroll 0 0 #F3F3F3;
    	border: 1px solid #E1E1E1;
    	padding: 3px 2px;
		box-shadow: 5px 5px 5px #0000A0;
		}

h2.midashi01	{
			border-width:0px 0px 2px 5px;
			border-left-color:#FF1FAA;
			border-bottom-color:#c0c0c0;
			border-style:solid;
			padding-left:10px;
			line-height: 1.1;
			font-size: 20px;
			font-weight: bold;
			margin-top: 10px;
			}
h3.midashi01	{
			border-width:0px 0px 2px 5px;
			border-left-color:#FF1FAA;
			border-bottom-color:#c0c0c0;
			border-style:solid;
			padding-left:10px;
			line-height: 1.1;
			font-size: 20px;
			font-weight: bold;
			margin-top: 10px;
			}
.midashi02	{
			border-width:0px 0px 2px 5px;
			border-left-color:#FF1FAA;
			border-bottom-color:#4347A2;
			border-style:solid;
			padding-left:10px;
			line-height: 1.1;
			}						
.koushiki	{
			font-size: 18px;
			font-weight: bold;
			color: #333;
			}
.f-info	{
		margin: 50px 0px 10px 0px;
		font-size: 14px;
		color: #fff; 
		background-color: #000;
		}
.caution	{
			background-color: #FFFBCC;
			padding: 10px;
			margin: 40px auto;
			}
/*.single-title {
    float: left;
    font-size: 20px; 
    line-height: 20px;
    color: #AF1010;
	font-weight: 700;
    padding: 0;
    margin-bottom: 10px;
}*/
.entry-title {
    font-size: 20px; /*18px */
    line-height: 20px;   /*22px */
    color: #AF1010;
	font-weight: 700;
    padding: 0;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);  /*ページタイトルに影を付ける*/
}
#front-page-title  {
    font-size: 20px; /*18px */
    line-height: 20px;   /*22px */
    color: #AF1010;
	font-weight: 700;
    padding: 0;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);  /*トップページタイトルに影を付ける*/
}
/*これがないと、サイドバーの「インフォメーション」でリンク文字が青色になってしまう*/
.widget .arrow a {
    display: block;
    overflow: hidden;
    /*background: url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/06/listCategoryArticle.gif)  no-repeat;
	background-position: left center; */
	border-bottom: 1px solid #ddd;
	line-height:1.5;
	margin: 20px 0px 0px 0px;
	color: #555;
}					
.widget .arrow a:hover {
	                    color: #CAA53C;/* オレンジ色　#F28822  gold #CAA53C */
}
              
.red	{
		color: #f00;
		}                    
.pink	{
		color: #f0f;
		}
.pink02	{
		color: #f569a8;
		}
.blue	{
		color: #00f;
		} 
.yellow	{
		color: #ff0;
		} 
.white	{
		color: #fff;
		} 
.gray	{
		color: #333;
		}
.s10	{
		font-size: 10px;
		}		                    
.s12	{
		font-size: 12px;
		}
.s14	{
		font-size: 14px;
	}											
.s16	{
		font-size: 16px;
		}
.s18	{
		font-size: 18px;
		}			
.s20	{
		font-size: 20px;
		}
.s22	{
		font-size: 22px;font-weight: 700;
		}
.s24	{
		font-size: 24px;font-weight: 700;
		}
.s26	{
		font-size: 26px;font-weight: 700;
		}		
.s28	{
		font-size: 28px;font-weight: 700;
		}
.s30	{
		font-size: 30px;font-weight: 700;
		}		
.s32	{
		font-size: 32px;font-weight: 700;
		}				
.s36	{
		font-size: 36px;font-weight: 700;
		}		
.s48	{
		font-size: 48px;font-weight: 700;
		}
.s72	{
		font-size: 72px;font-weight: 700;
		}
.bold   {
		font-weight: 700;
		}										
.center	{
		text-align: center;
		}
.right	{
		text-align: right;
		}
.left	{
		text-align: left;
		}
.mid	{
		vertical-align: middle;
		}/*無効*/										        			
.japan	{
		background: url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2017/11/bg_japan.jpg) repeat-y ;
		padding: 10px 30px 10px 50px;
		color: #000;
		}
		/*http://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/11/e777a9b6078804608b1e4273bbdfa6a7.jpg*/ 
		/*http://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2014/11/8e1b944f4389bdaab6f11d5bc83190c8.jpg*/	
.luxury_card	{
		background: url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2017/12/bg_luxury_card.jpg) repeat-y ;
		padding: 10px 30px 10px 50px;
		color: #000;
		}												
.dot_waku	{
			border: dotted 2px #c25c09; /* #c25c09 #ccc */
			padding: 10px;
			}
.dashed_waku	{
			     border: dashed 3px #999;
			     padding: 10px; /* 20pxから10pxへ変更した */
			    }  								                          									
.kage {
      text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
      }
.kokuban {
background-image:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2018/03/kokuban00.jpg);
      	 background-repeat: no-repeat;
      	 background-position: center;
	     padding-left:15px; 
      	 } 
.kokuban ul li {
                font-size: 16px; 
	            line-height:1.4;
	            margin-bottom: 15px;
	            list-style:none; /*ここでリスト表示のマークが出なくしている！*/
}
.kokuban ul li a {
                  text-decoration: none;
}
.kokuban02 {
background-image:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2021/01/kokuban-main.jpg);
      	 background-repeat: repeat-y;
      	 background-position: center;
	     padding:10px 10px 0px 15px; 
	     margin: 0px;
      	 } 
.kokuban02 ul li {
                font-size: 16px; 
	            line-height:1.6;
	            padding:0px 10px 0px 5px;
	            margin: 0px;
	            list-style:none; /*ここでリスト表示のマークが出なくしている！*/
}
.kokuban02 ul li a {
                  text-decoration: none;
}
.kokuban03 {
background-image:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2021/12/green-kokuban.jpg);
      	 background-repeat: repeat-y;
      	 background-position: center;
	     padding:10px 10px 0px 15px; 
	     margin: 0px;
      	 } 
.kokuban03 ul li {
                font-size: 16px; 
	            line-height:1.6;
	            padding:0px 10px 0px 5px;
	            margin: 0px;
	            list-style:none; /*ここでリスト表示のマークが出なくしている！*/
}
.kokuban03 ul li a {
                  text-decoration: none;
}
.kokuban04 {
background-image:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2021/12/green-kokuban-380px.jpg);
      	 background-repeat: repeat-y;
      	 background-position: center;
	     padding:10px 10px 0px 15px; 
	     margin: 0px;
      	 } 
.kokuban04 ul li {
                font-size: 16px; 
	            line-height:1.6;
	            padding:0px 10px 0px 5px;
	            margin: 0px;
	            list-style:none; /*ここでリスト表示のマークが出なくしている！*/
}
.kokuban04 ul li a {
                  text-decoration: none;
}
div#core.grid {
	          margin-bottom: 0;
}
div#copyright {
	          background-image:url(https://xn--m9jq9c8ita8c3dvbk95a9fm481b.jp/wp-content/uploads/2019/11/footer.jpg);	
              background-repeat: no-repeat;
              background-position: center;
              }
.copy {
	  font-weight:bold;
	  color: #000;
	  font-size: 16px; /*文字色のみ反映しない*/
}
/*これがないと、サイドバーのサムネの表示が崩れる*/			 
#side li a, #col3 li a {
                       padding: 0px;
                       }
/*サイドバーのタイトル部分*/	
.side-title    {
	            text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);  /*ページタイトルに影を付ける*/   
	            text-align: center; 
                }

/* Search Form　1px → 3px　反映しない */
.search-field {
	border: 3px solid #bbb;
}
button.is-search-submit {cursor:pointer;
}/* Ivory Search 手形のポインターへ変更した */
button.is-search-submit span:hover {opacity:0.7; }

/*時間表示下のマージンを35px から　5pxへ削る*/
.meta, .post .meta {margin-bottom: 0px;
	               padding-bottom:0px;
}
.rt-reading-time {
	              font-size:12px;
	              margin-bottom: 35px;
                 }
/*新プラグイン（Rich Table of Contents）の目次のタイトルを編集*/
.rtoc-mokuji-content #rtoc-mokuji-title.rtoc_center span {
font-size:16px;/*目次の編集*/
text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);  /*ページタイトルに影を付ける*/
font-weight:bold;	
}
#rtoc-mokuji-wrapper {
	               margin-bottom: 100px;
                  }
div#rtoc-mokuji-title.rtoc_center {
  margin: -20px 0px; /*元は40px 64px 16px　上　左右　下*/	
}
/*開閉ボタンの編集*/
.rtoc-mokuji-content.rtoc_close #rtoc-mokuji-title .rtoc_open_close, .rtoc-mokuji-content.rtoc_open #rtoc-mokuji-title .rtoc_open_close {
                               color: #fff;　/*元は#707070*/
                               background-color: #000;　/*元は#f2f2f2*/
}
/*ここまでが新プラグイン（Rich Table of Contents）の編集*/
/*ここからが旧プラグイン（Easy Table of Contents）、目次のタイトルを編集*/
#ez-toc-container {
	               margin-bottom: 100px;
                  }
div#ez-toc-container p.ez-toc-title {
	           font-size:14px;
	           padding: 0px 0px 25px 0px;
	           text-align:center;
	           color: #5b1b0a; /*こげ茶の文字色を指定*/
               }
/*スポイラーの余白を編集*/
div.su-spoiler-content.su-u-clearfix.su-u-trim {
	                                            padding: 0px 5px 0px 0px;
                                               }

/*目次の開閉ボックスを下げる
.ez-toc-title, .ez-toc-title-toggle {
	                                 margin-top: -35px;
                                     }
*/
/* 目次に戻るリンクを機能させる */
.toc_container {
    height: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
}
/* 目次に戻るリンクのスタイル */
.back-toc {
    margin: 25px 0; /* 上下の余白 */
	text-align: right;  /* 目次へ戻るを右寄せにする */
}
.back-toc a {
    color: #00f; /* 文字色を青色にした */
    text-decoration: none; /* 下線を消す */
}
.back-toc .fa {
    color: #ccc; /* 矢印を灰色にした */
}
.chaobi {
	    color: #000;background-color: #ead56b;
}
/* 最上部のアコーディオン */
.details {
  color: #287E39;
  font-size: 16px;	/* 当サイトにはプロモーションが含まれています */
  line-height: 2;
  border: 0px; /* 1px solid #B9F9B2 */
  width: 100%; /* 80% */
  margin: 0px 0px 35px 0px; /*記事タイトルとの隙間（3番目）　 0 auto 20px */
  &__summary {
    position: relative;
    display: block;
    background: #F3FFF3;
    cursor: pointer;
    margin: 0;
    padding: 10px 40px 0px 16px; /* 10px 40px 10px 16px */
    &::-webkit-details-marker {
      display: none;
    }
    &::before {
      display: block;
      content: "";
      box-sizing: border-box;
      position: absolute;
      top: calc(50% - 6px);
      right: 16px;
      width: 6px;
      height: 6px;
      border: 6px solid transparent;
      border-left: 6px solid #287E39;
      transition: all 0.4s ease-out;
      transform-origin: 3px 6px;
      transform: rotate(90deg);
      .details[open] & {
        transform: rotate(-90deg);
      }
    }
  }
  &__content {
    overflow: hidden;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    > * {
      margin: 0;
      padding-top: 16px;
      &:last-child {
        padding-bottom: 16px;
      }
    }
  }
}
summary:before:hover {
  cursor: pointer; /* カーソルを指マークに */
  /*background-color: #EFEFEF;*/
}
 /*アコーディオンを装飾するCSS */
summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* 10px 10px 10px 30px アイコンの余白を開ける */
  transition: 0.2s; /* 0.2s */
}
summary::-webkit-details-marker {
  display: none;　/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {	
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #990000; /* アイコンの背景色 #1da1ff */	
}
summary:after {
  background-color: #990000; /* アイコンの背景色 #1da1ff */		 
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;	
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #fff;
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */	
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}