iframe {
  width: 100%;
  aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
}

/*************************************************
  hr 各種
*************************************************/
hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc);
}

hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

hr.style-seven {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;    
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

/*************************************************
  背景
*************************************************/
.bgclr1 {
	background-color:#eeeeee;
}
/*************************************************
  font 関係
*************************************************/
.font_up {
	background-color:#ff1493;
	color:#ffffff;
	font-weight:bold;
}

.font_red {
	color:#ff0000;
}

.font_b {
	font-weight:bold;
}

.font_sm {
	font-size:85%;
}

.font_sm2 {
	font-size:0.95em;
}

.font_bg1 {
	font-size:150%;
}

.font_bg2 {
	font-size:120%;
}

.border1 {
	border-bottom:3px solid #f7d745;
}

/****************************************
   フッター
****************************************/
div.footercss {
	background-color:#2aabd2;
	padding:5px;
	color:#ffffff;
	font-size:90%;
}

footer {
 clear: both;
 background-color: #444;
 bottom: 0px;
 padding: 15px 5px 0 5px;;
 color: #fff;
 font-size: 12px;
}

footer .navbar-nav li a {
 text-align: center;
 color: #fff;
 padding-left: 0.5em;
 text-decoration: underline;
}

footer .navbar-nav li a:hover {
 color: #dcdcdc;
}

.copyright{
 text-align: center;
 font-size: 90%
}

.copyright a {
 color: #fff;
 padding-left: 0.5em;
}

/****************************************
   TOPに戻る
****************************************/

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
.page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
.page-top a:hover {
    text-decoration: none;
    background: #999;
}
.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
.page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
.page-top a:hover {
    text-decoration: none;
    background: #999;
}

#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}
 
/********************************************************************/
 
#pagetop a {
    display: block;
    background: #666;
    color: #fff;
    width: 60px;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}
 
#pagetop a:hover {
    background: #999;
    text-decoration: none;
}

/****************************************
 リンク画像のマウスオーバーで半透明化
 opacity:0.8、opacity=80は透明度80％を意味
  <img src="画像パス" class="mouselink">
****************************************/
a img.mouselink{
background:none!important;
}
 
a:hover img.mouselink{
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}



details summary {
      display: block; /* デフォルトの矢印（リストマーカー）を上書き */
      /* または */
      /* display: block; */ /* display: block で矢印を上書きして消します */
    }