/* bootstrap Disable css */
a {
    color:inherit;
    text-decoration:none;
}
a:hover {
    color:inherit;
    text-decoration:none;
}

/* global settings */
html {
  font-size: 18px;
}
@media (max-width:  800px)  {
  html {
    font-size: 15px;
  }
}




/* main area */
main {
    margin:0 1rem;
}
.category_header{
    color:white;
    margin:0.25rem 0;
    font-weight:bold;
}
.data_preview_area {
    /* 横スクロールと5等分を両立させるため、display:flexを無効化させる*/
    /*
    display:flex;
    */
    
    /*margin:0.5rem 0;*/
	margin:0 auto;
	width:100%;

    /* TIPS:overflow-x:autoとwhite-space:nowrapで横スクロールを作ることができる。 */
    overflow-x:auto;
    white-space:nowrap;

    /* 【2021年4月25日追記】TIPS:連続した英字もはみ出さないように強制的に改行 */
    word-break: break-all;
	padding-left:17%
}
.data_preview_frame {
   /*width:calc(100% / 3); */

    /* 横スクロールと5等分を両立させるため、display:inline-blockを指定。*/
    display:inline-block;

    /* 【2021年4月25日追記】TIPS:white-spaceの値は子要素に受け継がれるのでnormalで初期化、vertical-aling:middleでコンテンツの配置位置を合わせる。*/
    white-space:normal;
    vertical-align:top;
	margin-bottom:20px;
}
.data_preview_content {
    /* TIPS:コンテンツの高さ*/
    height:auto;

    margin:0 1.5rem;
    background:none;

    font-size:1.5rem;
    font-weight:bold;
	text-align:center;

    /* 【2021年4月25日:追記】TIPS:コンテンツをはみ出した場合、以降は非表示 */
    overflow-y:hidden;
}

.data_preview_content img {max-width:auto;}

/* Control Area */

.preview_control_area {

    /* 1.ボタンを両端に配置するため、エリアの左上を相対位置とする。*/
    position:relative;
	/*margin-bottom:60px;*/
	width:90%;
	margin:0 auto;
}
.previous_button {

    /* 2.配置を上から50%、左端の場所にして、この要素の高さ50%分をY軸方向にマイナス移動する */ 
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);

}
.next_button {
    
    /* 2.配置を上から50%、右端の場所にして、この要素の高さ50%分をY軸方向にマイナス移動する */ 
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}
.control_button {

    /* ボタンの装飾 */
    background:white;
    border:solid 0.1rem black;
    border-radius:0.25rem;
    padding:0.5rem;
    margin:0 0.25rem;
    cursor:pointer;

    opacity:0.25;

    /* TIPS: ホバーしたときの装飾変化に0.2秒時間をかける。これで簡単なアニメーションができる。*/
    transition:0.2s;
}
.control_button:hover {
    background:black;
    color:white;

    opacity:0.8;

    /* TIPS: ホバーしたときの装飾変化に0.2秒時間をかける。これで簡単なアニメーションができる。*/
    transition:0.2s;
}


@media only screen and (max-width: 1400px) {
	/*.data_preview_frame {width:calc(100% / 2); }*/
}
@media only screen and (max-width: 1200px) {
	.data_preview_area {padding-left:0;}
}
@media only screen and (max-width: 980px) {
	/*.data_preview_frame {width:calc(100% / 1); }*/
}