/**
 * 共通デザイン定義
 * 全体を通じて利用する基本フォントは統一
 */
body {
    margin : 0px;
	font-family : font-family\:Avenir , Georgia , serif , "Open Sans" , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "MS PGothic" , sans-serif;
	line-height : 1.4;
    min-height : 100vh;
}

/**
 * 
 * https://zenn.dev/knknk98/articles/10b2f071ad2bc1
 */
.container {
    display : flex;
    flex-direction : column;
    width : 100vw;
    height : 100vh;
}

/**
 * ヘッダ部
 * 表示ページの対象アイコンと固定してアピールしたい内容を表示
 */
header {
    top : 0;
    left : 0;
    width : 100vw;
	line-height : 3.0rem;
    background : rgba( 0 , 0 , 0 , 1.0 );
	color : #A0A0A0;
    z-index : 8;
}
main {
    position : relative;
    padding-bottom : 4.0rem;
    box-sizing : border-box;
    flex : 1;
    overflow-y : auto;
}
/**
 * https://magazine.techacademy.jp/magazine/19410
 */
footer {
	color : #A0A0A0;
    position : absolute;
    bottom : 1vh;
    width : 99vw;
}

.headline-icon {
    width : 64px;
    height : 64px;
}

/** google playリンク */
.download-badge {
    width : 12.0rem;
    margin-right : 1.0rem;
}
.request-badge {
    height : 3.0rem;
    background-color: white;
    margin-top: 0.8rem;
    margin-bottom : 0.8rem;
}
.request-badge:hover {
    animation-name : blink;
    animation-duration : 1.0s;
    animation-timing-function : linear;
    animation-fill-mode : forwards;
    animation-iteration-count : infinite;
}
@keyframes blink {
      0% { background-color : darkgray; }
     50% { background-color : yellow; }
    100% { background-color : darkgray; }
}

/** SNSアイコン */
.icon-sns {
    margin : 1.0rem 1.0rem 1.0rem 1.0rem;
    width : 1.8rem;
}
.icon-sns-tiktok {
    margin : 0.6rem 0.6rem 0.6rem 0.6rem;
    width : 2.5rem;
}
.icon-sns-youtube {
    margin : 0.8rem 0.6rem 0.8rem 0.6rem;
    width : 2.8rem;
}

/**
 * 見出し1
 * 幅フルサイズ筒状のデザイン
 * 文字色は黒字白抜き
 */
h1 {
    background : linear-gradient( 180deg , #202030 , 10% , #DFDFEF , #EFEFFF , 75% , #101020 );
    margin : 0.0rem;
    padding : 0.5rem 0.0rem 0.5rem 2.0rem;
	white-space: nowrap;
	overflow-x : auto;
    font-size : 2.0rem;
	font-family : Lucida Calligraphy , Poor Richard , MingLiU_HKSCS-ExtB , Yu Gothic UI Semibold , HG丸ｺﾞｼｯｸM-PRO , Footlight MT Light , Freestyle Script , font-family\:Avenir , serif , Georgia , "Open Sans" , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "MS PGothic" , sans-serif;
    color : #FFFFFF;
    text-shadow :
        0 0 0.1rem #000000 ,
        0 0 0.1rem #000000 ,
        0 0 0.1rem #000000 ,
        0 0 0.1rem #000000 ,
        0 0 0.1rem #000000;
}

/**
 * 見出し2
 * 左端に開閉アイコン
 * クリック時に内容を開閉させる
 */
h2 {
	position			:	relative;
	margin				:	40px 0 0 0;
	padding				:	2px 5px 2px 50px;
	font-size			:	24px;
	color				:	#444444;
	border-radius		:	20px 20px 20px 20px;
}

h2:before {
	content				:	"+";
	font-size			:	30px;
	font-weight			:	normal;
	text-align			:	center;
	display				:	inline-block;
	position			:	absolute;
	width				:	40px;
	height				:	40px;
	line-height			:	40px;
	left				:	0.0em;
	top					:	-8%;
	padding				:	0em;
	border				:	solid 3px white; 
	border-radius		:	50%;
	color				:	white;
}

h2:not(.h_invisible) {
	background			:	#FFDDAA;
}
h2.h_invisible {
	background			:	#DDDDDD;
}
h2:not(.h_invisible):before {
	background			:	#FFAA33;
}

h2.h_invisible:before {
	background			:	#AAAAAA;
}

/**
 * 見出し3
 * 単純な見出しとして利用する
 */
h3 {
	font-family : font-family\:Avenir , Georgia , "游ゴシック" , serif , "Open Sans" , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "MS PGothic" , sans-serif;
    padding-left : 1.0rem;
    font-size : 2.0rem;
 }
 /** スマートフォン/タブレット向け設定 */
@media screen and ( max-width : 960px ) {
    main {
        padding-bottom : 9.0rem;
    }
    /* 明朝調フォントで平仮名の一部がかすれる問題が出たため差し替え */
    h3 ,
    h4 {
        font-family : font-family\:Avenir , Georgia , "游ゴシック";
    }
}

/**
 * タグ
 * 別段意味はないがキーワードになるような文言を冒頭に羅列しておく
 */
/** タグ単体 : 計上や文字の定義 */
.tag {
    font-size: 1.0rem;
	font-family : font-family\:Avenir , Georgia , "游ゴシック" , serif , "Open Sans" , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "MS PGothic" , sans-serif;
    line-height : 1.0rem;
    transition :
        box-shadow 0.2s ease-out ,
        transform 2s ease-out;
    box-shadow : 0 2.0rem 2.0rem 0 rgba( 32 , 32 , 32 , 1.0 );
    margin : 1.0rem 0.5rem 0.0rem 0.5rem;
    padding : 0.6rem 0.8rem 0.6rem 2.0rem;
    clip-path : polygon(
        2.0rem 0 ,
        100% 0 ,
        100% 100% ,
        2.0rem 100% ,
        0.5rem 55% ,
        0.5rem 45%
    );
    white-space : pre;
    background : #E0E0E0;
    z-index : 0;
}
/** タグ表示エリア : タグ間の定義 */
.tag-area {
    line-height : 3.6rem;
    line-break : strict;
    word-wrap : break-word;
    filter : drop-shadow( 0.5rem 0.5rem 0.5rem rgba( 0 , 0 , 0 , 0.5 ) );
    z-index : 0;
}


/**
 * 説明部定義
 */
 /** エリア : 範囲内の定義 (現状はcyclone向け背景色) */
 .explanation-area {
    color : #000000;
    font-size : 1.3rem;
    min-width : 440px;
    width : 95%;
    margin : 2.0rem 0.0rem 2.0rem 0.0rem;
    padding : 1.0rem 0.8rem 1.0rem 0.8rem;
}
/** 説明文ブロック : 画像の利用等でデザインを切り替える単位で入れる */
.explanation-area > div {
    display : flex;
    padding : 1.0rem 2.0rem 1.0rem 2.0rem;
}
.explanation-area > p {
    padding : 1.0rem 2.0rem 1.0rem 2.0rem;
}
/** 説明文 : 横並びに画像と文面を並べる際に挿し込む */
.explanation-area > div > div {
    display : flex;
    vertical-align : middle;
    align-items : center;
}
div.reverse {
    flex-direction : row-reverse;
}

/** 説明画像 : 説明文に並べる画像のエリア */
.explanation-area > div > img {
    margin : 0.0rem 1.5rem 0.0rem 1.5rem;
    min-width : 20.0rem;
    max-width : 30.0rem;
    height : 100%;
    max-height : 100%;
}
/** 説明内テーブル */
.explanation-area > table {
    font-size : 88%;
    padding : 0.8rem 0.4rem 1.0rem 0.4rem;
}
/** スマートフォン向け設定 */
@media screen and ( max-width : 600px ) {
    .explanation-area {
        min-width : 99%;
        width : 99%;
        margin : 0;
    }
    /* 説明と画像の横並びをキャンセル */
    .explanation-area > div {
        display : block;
        padding : 1.0rem 1.0rem 1.0rem 1.0rem;
    }
    .explanation-area > div > div {
        display : block;
    }
    .explanation-area > div > img {
        min-width : 50%;
        max-width : 70%;
        height : 80%;
    }
}

/** 注釈 */
.annotation {
    display : flex;
    font-size : 80%;
}
.annotation > div {
    margin : 0 5.0rem 0.8rem 1.0rem;
}


/** テーブル定義 */

 /** 奇数行 */
table tr:nth-child( even ) {
    background : #EEEEFF;
}
/** 偶数行 */
table tr:nth-child( odd ) :not( th ) {
    background : #DDDDFF;
}

 /** テーブル見出し */
th {
    background : #9090C0;
    color : #F0F0F0;
}

tr > td {
    padding : 1.0rem;
}


/** 中央寄せ */
.centering {
    text-align : center;
}

/** 縦書き */
.vertical {
    -ms-writing-mode : tb-rl;
        writing-mode : vertical-rl;
}

/* 文字色設定 */
.good {
    color : #20D020;
    font-weight : 700;
    
}
.bad {
    color : red;
    font-weight : 700;
}
.attention {
    color : #E07070;
    font-weight : 700;
}

/* 表示/非表示切り替え用定義 */
.hidden {
    display : none;
}

/**
 * ブラウザスクロールバーのデザインカスタマイズ
 * 参考 : https://designup.jp/css-scrollbar.html#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
 * 色変更アニメーション : https://stackoverflow.com/questions/19230289/use-transition-on-webkit-scrollbar
 */
.use-scroll::-webkit-scrollbar {
    display : block;
    width : 0.6rem;
    height : 0.4rem;
    border-radius : 0.1rem;
}
:hover::-webkit-scrollbar {
    display : block;
}
::-webkit-scrollbar-thumb {
    background-color : rgba( 96 , 96 , 224 , 0.0 );
    border-radius : 1.5rem;
    -webkit-transition : all 0.5s 0s ease;
            transition : all 0.5s 0s ease;
}
:hover::-webkit-scrollbar-thumb {
    background-color : rgba( 96 , 96 , 224 , 1.0 );
}

::-webkit-scrollbar {
    display : none;
}

.use-scroll-y::-webkit-scrollbar {
    overflow-x : hidden;
    overflow-y : scroll;
    width : 0.6rem;
    height : 0.4rem;
    border-radius : 0.1rem;
}

/**
 * 内部要素を右端へ寄せる
 * viewごと右に寄せたい場合はこの定義を含んだdivで囲む
 */
div.align-right {
    text-align : right;
    flex-grow : 1;
}
div.align-center {
    text-align : center;
    flex-grow : 1;
}


/**
 * flex : 要素を横並びに配置
 * 参考 : https://www.asobou.co.jp/blog/web/flex-box
 */
.flex {
    display : flex;
    width : fit-content;
    width : 100%;
}

/**
 * メタリック背景 (平面)
 */
.metalic {
    background-image : -webkit-linear-gradient(
      135deg ,
      #505050   0% ,
      #909090  20% ,
      #FFFFFF  36% ,
      #D8DCDC  64% ,
      #606060 100% );
    background-image : linear-gradient(
      -45deg ,
      #505050   0% ,
      #909090  20% ,
      #FFFFFF  36% ,
      #DCDCDC  64% ,
      #606060 100% );
    border-top :    0.2rem solid #D8DCDC;
    border-right :  0.2rem solid #606060;
    border-bottom : 0.2rem solid #303030;
    border-left :   0.2rem solid #909090;
    font-weight : 800;
    color : #000000;
    text-shadow :
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF;
    z-index : 0;
}

/**
 * メタリック背景 (球体)
 */
.metalic-sphere {
    background : radial-gradient( farthest-corner at 35% 35% , #FFFFFF , #B0B0B0 , #484848 , #303030 );
    border-top :    0.2rem solid #D8DCDC;
    border-right :  0.2rem solid #606060;
    border-bottom : 0.2rem solid #303030;
    border-left :   0.2rem solid #909090;
    font-weight : 800;
    color : #000000;
    text-shadow :
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF ,
      0 0 0.7rem #FFFFFF;
}

@keyframes animation_card {
    0% {
        opacity : 1;
        transform : translateY( 0 );
        width : 40%;
    }
    100% {
        opacity : 1;
        transform : translateY( 0 );
        width : 80%;
    }
}