@charset "UTF-8";


/* コメントはこの形式のみくさいので注意         */
/* 下に書いた物の方が優先される                 */

/* 陰はあっち */
/* 角丸はあっち */
/* こいつは基本的に、色と質感を決める */


/* ============================================ */
/* リセット                                     */
/* 下に書いたものが優先されるので、ここに書く   */
/* -------------------------------------------- */
/* 拾ってきたやつ                               */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}
/* とにかくwebkitが勝手な事しまくるんだよ！    */
/* なのでこいつらは自分で殺す                  */
p,h1,h2,h3,h4,h5,h6{
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}
/* ============================================ */
/* フォント関係                                 */
/* フォントファミリーや文字修飾や色など         */
/* -------------------------------------------- */
/* 本文 */
.myFrame{
	font-family: serif;	/* 明朝体 */
}

/* -------------------------------------------- */
/* ヘッダー関連 */
h2{
	font-family: sans-serif;	/* ゴシック体 */
    font-weight: bold;	/* webkitが勝手にやってる */
	color:#30F080;	/*光るミドリ*/
	color:#64f0a8;	/*サイドを堕とした*/

}
h3{
	font-family: sans-serif;	/* ゴシック体 */
    font-weight: bold;	/* webkitが勝手にやってる */
	color:#000000;
}
h6{
	display:none;	/*見せない*/
}
/* -------------------------------------------- */
/* ボタン表面の文字 */
.btn_0 p, .btn_1 p{
	font-family: sans-serif;
	font-weight: bold;
	color:#333333;
}
/* -------------------------------------------- */
/* コンテンツカード関連 */
/* newとかの添え字 */
.card_content .soeji{
	font-weight:bold;
	font-family: sans-serif;	/*ゴシック体*/
	color:#FF0000;
}
/* タイトル */
.card_content .title{
	font-weight:bold;
	font-family: sans-serif;	/*ゴシック体*/
	color:#0f0f0f;
}
.card_content .media{
	font-family: sans-serif;	/*ゴシック体*/
	color:#999999;
}
.card_content .genre{
	font-family: sans-serif;	/*ゴシック体*/
	color:#0f0f0f;
}
.card_content .commentary{
	font-family: serif;	/* 明朝体 */
	color:#000000;
}
/* -------------------------------------------- */
/* フッター */
footer > aside{
	color:#999999;
}
footer > section > div h2{
	color:#FFFFFF;
}
footer > section > div{
	color:#FFFFFF;
}
/* -------------------------------------------- */
/* ○○を受賞しました */
.reward{
	font-family: sans-serif;	/* ゴシック体 */
    font-weight: bold;	/* webkitが勝手にやってる */
}
/* ============================================ */
/* 汎用品                                       */
/* 下に書いた物の方が優先されるので、ここに書く */
/* -------------------------------------------- */
/*	ボタン。幅や配置については、下で上書きして調節せい */

/* サブナビに使っている… */
.btn_0{
	background:#ffffff;
  -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}
/* ナビゲーションドロワーとかに使ってる */
.btn_1{
	background:#aaaaaa;
  -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
	border : solid 2px #afafaf ;
	text-shadow: 1px 1px 8px rgba(255, 255, 255, 0.2);
}
/*	セクション2 */
h2{
	background: #2F2F2F;
	background;	#34373c;	/*imgur*/
}
/* セクション3 */
.myFrame{
	background:#EEEEEE;
}
/* ============================================ */
/* ボディのマージンパディングをゼロにすることがたいへんに重要 */
/* ページの基調色もここに設定 */
body{
	margin:0;
	padding:0;
	background:#FCFCFB;
}

/* ============================================ */
/* ヘッダー                                     */
/* デジメスとナビゲーションドロワーはここに入る */
/* -------------------------------------------- */
/* ヘッダ部分の全体。headerタグ                 */
header {
	background: #2F2F2F;	/*もともとはこの色を使っていた*/
	background;	#34373c;	/*imgurというサイトからパクった*/
}
/* ============================================ */
/* ナビゲーションドロワー                       */
/* -------------------------------------------- */
/* ============================================ */
/* 段組1                                        */
/* -------------------------------------------- */
/* コンテンツカード */
.card_content{
	background:#FFFFFF;
}
/* ============================================ */
/* 段組2                                        */
/* -------------------------------------------- */
/* コンテンツカード横長 */
.dangumi2 .dan .card_content{
	background:#FFFFFF;
}
/* ============================================ */
/* 段組3                                        */
/* -------------------------------------------- */
/* コンテンツカード */
.dangumi3>.dan .card_content{
	font-family: sans-serif;	/* ゴシック体 */
}
.dangumi3>.dan:first-child .card_content{
	color:#005500;
	background:#ddffee;
}
.dangumi3>.dan:nth-child(2) .card_content{
	color:#444477;
	background:#f0f8ff;
}
.dangumi3>.dan:nth-child(3) .card_content{
	color:#774400;
	background:#fff8ee;
}
/* ============================================ */
/*	下端のサブナビゲーション                    */
/* -------------------------------------------- */
/* ============================================ */
/* フッター                                     */
/* -------------------------------------------- */

/* ============================================ */

/* ============================================ */
/* 会社案内のところで作った汎用品               */
/* -------------------------------------------- */
/* テキストリンクの丸ボタン的修飾 */
.textLink_A,.textLink_B{
	/* ボーダーは内側に */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	/* リンクの下線は切る */
	text-decoration:none;
	background:#ffffff;
}
.textLink_A:link ,.textLink_B:link{ color: #000000; }
.textLink_A:visited,.textLink_B:visited { color: #444444; }
.textLink_A:hover,.textLink_B:hover { color: #aa0000; }
.textLink_A:active,.textLink_B:hover { color: #ff8000; }
/* -------------------------------------------- */
/* メッセンジャー風画面 */
.fukidashi_L{
	font-family: sans-serif;	/* ゴシック体 */
    font-weight: bold;
	background:#ffffff;
	color:#555555;
}
.fukidashi_R{
	font-family: sans-serif;	/* ゴシック体 */
    font-weight: bold;
	background:#64f0a8;
	color:#225533
}
/* -------------------------------------------- */
/* 乞食の写真 */
#greeting_image{
	display:block;
	width:60%;
	object-fit: contain;	/*これで縦横比が整合するようだ*/
	margin:auto;
}
/* 乞食の写真プロフィール */
#image_profile{
	display:block;
	position:relative;
	width:30%;
	object-fit: contain;	/*これで縦横比が整合するようだ*/
	background:#ff0000;
	float: right;
}
/* 会社情報のとこのトレードマーク */
#image_tradeMark{
	display:block;
	margin-left: 15%;
	width:30%;
	object-fit: contain;	/*これで縦横比が整合するようだ*/
}
/* 代表者略歴のところのテーブル2 */
#sakuhinrireki{
   clear: both;
}
/* ============================================ */
/* 小五郎のところで作った汎用品                 */
/* -------------------------------------------- */
/* クラスとは別に、IDもつけて、JavaScriptからはそのIDで参照すること */
/* 複数のflashによる変数かぶりを回避するため */
/* -------------------------------------------- */
/* プリローダーのアニメーションGIFを入れるコンテナ */
.preload_div{
	position:relative;	/*画像を絶対値配置するため*/
	height:100%;
	width: 100%;
	background:#ff0000;
	background:none;
}
/* その中のイメージ */
.preload_div>img{
	position:absolute;
	width: 20%;
	object-fit: contain;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}


/* -------------------------------------------- */
/* サウンドのトグルボタン */
/* サイトで拾ってきた。めっちゃ修飾 */
/* 考え方としては、チェックボックス自体は表示も修飾もなんもせず、*/
/* それにとりつけたラベルを、チェックされたときとされてないときの絵を用意し */
/* トランジションで両者を結ぶ、という理屈だと思う。*/
/* なんでラベルにするかというと、クリックしてチェックボックスを動作させたいから */
/* 前に作ったナビゲーションドロワーと同じ理屈だね */
/* これはあとで、汎用ＣＳＳに持ってくか？　サイズがどうなるかだなぁ */
/* ------------------------ */
/* チェックボックス本体は隠し */
.toggleCheck {
  display: none;
}
/* 後続のラベルと、前後の疑似要素には２秒のトランジションを設定 */
.toggleCheck+label,
.toggleCheck+label::before,
.toggleCheck+label::after {
  -webkit-transition: all .2s;
  transition: all .2s;
}
/* ------------------------ */
/* ラベルは角丸矩形を描く */
.toggleCheck+label {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 48px;
  border-radius: 24px;
  cursor: pointer;
  background-color: #eee;
	width:9vw;
	width:8vw;
	height:4vw;
	border-radius: 2vw;
	background-color: #FCFCFB;	/*OFFのときのカラーやね*/
-ms-box-shadow:0px 0px 8px 3px #ccc inset;
-moz-box-shadow:0px 0px 8px 3px #ccc inset;
-webkit-box-shadow:0px 0px 8px 3px #ccc inset;
-o-box-shadow:0px 0px 8px 3px #ccc inset;
	box-shadow:0px 0px 8px 3px #ccc inset;
	background:none;
}
/* チェックされたインプットのラベル */
/* つまりonのとき色を変えるってことだ */
.toggleCheck:checked+label {
/*  background-color: #3498db;
	background-color: #00ff00; */

}
/* ------------------------ */
/* ラベルのアフター要素でつまみ off時 */
.toggleCheck+label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 44px;
  height: 44px;
  background-color: #fff;
  border-radius: 50%;
	top: 0.1vw;
	left:0.1vw;
	width:3.8vw;
	height:3.8vw;
	background-color: #FCFCFB;
-ms-box-shadow:3px 0px 8px 1px #ccc;
-moz-box-shadow:3px 0px 8px 1px #ccc;
-webkit-box-shadow:3px 0px 8px 1px #ccc;
-o-box-shadow:3px 0px 8px 1px #ccc;
	box-shadow:3px 0px 8px 1px #ccc;
}
/* チェックされたインプットのラベルのアフター要素 つまみ*/
.toggleCheck:checked+label::after {
  left: 54px;
  background-color: #f7f7f7;
	left: 4.1vw;
/*	background-color: #ff0000;*/
-ms-box-shadow:-3px 0px 8px 1px #ccc;
-moz-box-shadow:-3px 0px 8px 1px #ccc;
-webkit-box-shadow:-3px 0px 8px 1px #ccc;
-o-box-shadow:-3px 0px 8px 1px #ccc;
	box-shadow:-3px 0px 8px 1px #ccc;
}
/* ------------------------ */
/* ラベルのビフォア要素でOffの文字 */
.toggleCheck+label::before {
  display: block;
  content: attr(data-off-label) /*表示するテキストを指定します。*/;
  position: absolute;
  top: 14px;
  right: 7px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #aaa;
	font-size:1rem;
	font-weight: bold;	/* webkitが勝手にやってる */
	top: 1vw;
	right: 1.2vw;
	color: #bb5566;
}
/* チェックされたインプットのラベルのビフォア要素 onの文字ってことだな */
.toggleCheck:checked+label::before {
  content: attr(data-on-label);
  left: 7px;
  right: auto;
  color: #fff;
	font-size:1rem;
	font-weight: bold;	/* webkitが勝手にやってる */
	top: 1vw;
	left: 1.2vw;
	color: #556688;
}
/* -------------------------------------------- */

/* ============================================ */
/* モーダルウインドウ関連                       */
/* -------------------------------------------- */
/* modalの第一階層ディブのターゲット疑似クラス */
/* つまりopen01とかのシリーズがターゲットになったとき */
/* :target擬似クラスはCSS3で追加されたセレクタです。 */
/* つまりおそらくは、modalディブの「中の」いずれかのディブが*/
/* リンクターゲットにされたとき、ということだろう */
#modal>div:target {
	/* アニメーションを設定 ここは切ろうと思えば切れる*/
/*
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
*/
	/* 以下２つは必要 */
	/* 透明度を1(0～1) */
    opacity: 1;
	/* ブロック要素 */
    display:block;
}
/* -------------------------------------------- */
/* これは何？ */
/* なくても動作する。ないとフェードがなくなる */
/* CSS3 ModalWindow SET */
/* -------------------------- */
/* このmodalFadeInってのは、上のターゲット疑似クラスのとこで定義してるんだわ。*/
/*
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}*/
/* -------------------------------------------- */
/* ターゲットの指し先 */
/* モーダルで出てくる画面全体そのものだ　*/
/* モーダルウインドウを配置する領域全体全体 */
/* ターゲットリンクは、こいつの可視不可視を切替え*/
/* 黒バックやウインドウはこいつに載る、という感じだと思う*/
/* なお、これをアブソルートにすると、スクロールがトップにいってしまう。*/
/* 当然だけど*/
/* なので、お手本と違い、アブソルートにしない */
#open00,
#open01,
#open02,
#open03,
#open04,
#open05,
#open06,
#open07,
#open08,
#open09,
#open10,
#open11 {
    display: none; /*最初隠しておく*/
	text-align:center;

}
/* -------------------------------------------- */
/* この上にスティッキーにした要素を載せて画面上に固定する　*/
/* スティッキーは、親要素の中でのみスティックするので、 */
/* こいつは絶対値の全画面、つまり論理座標すべてを覆う */
.sticky_base{
    position: absolute;	/* これがないと表示されない */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* 実際にスティックさせる、画面いっぱいぶんの領域 */
/* こいつ自体は表示せず、さらにこの中に入れた要素を */
/* 実際のスティッカーとして追従させる */
.sticky_screen{
	position: -webkit-sticky; /* safari対応 */
	position: sticky;
	top: 0;　/* 上端から10pxのところで固定 */
    left: 0;
    width: 100%;
	height:100vh;
	background:#ff0000;
	background:none;
	z-index: 9000;	/*この階層でないとこれは効かないみたい */
}
/* スティッカーの上に載せて画面を覆う、*/
/* 半透明の黒 */
/* 押すと画面を閉じる */
.half_black{
	display:block;
	width:100%;
	height:100vh;
	background:rgba(0,0,0, 0.8); /* これなら子要素は半透明にならない */
}

/* -------------------------------------------- */



/* ============================================ */
/* スライダー関連                               */
/* -------------------------------------------- */
/* スライダー外枠 */
.slider {
	display: flex;
	overflow-x: auto;
	margin:auto;
	width: 95%;
	/* スマホのフリックをスムーズにするための記述 */
	-webkit-overflow-scrolling: touch;	/*なくても可。スマホ対応*/
}
/* 個々のスライド項目 */
.slide {
	flex-shrink: 0;
	width: 16%;
	width: 20%;
	background:#ff0000;
	background:none;
}
.slide img{
	width: 99%;	/*隙間開けるため*/
	object-fit: contain;	/*これで縦横比が整合するようだ*/
}

/* ============================================ */
/* 広告関連                                     */
/* -------------------------------------------- */
#ad_left{
	text-align:center;
}
/* ============================================ */
/* フラッシュ                                   */
/* -------------------------------------------- */
#wrapper_flash{
	text-align:center;
}

/* ============================================ */
/* アコーデオン                                 */
/* -------------------------------------------- */
/*ボックス全体*/
.accordion {
    margin: 0 0;
    padding: 0;
	width:100%;
}
/*ラベルで作ったヘッダー部分*/
.accordion label {
    display: block;
    margin: 0.1rem 0;
    padding : 0.5rem 0;
    background :#34373c;	/*imgur*/
    font-weight: bold;
	color:#64f0a8;	/*蛍光緑*/
    cursor :pointer;
    transition: all 0.5s;
}
/*ラベルホバー時*/
.accordion label:hover {
    background :#34373c;	/*imgur*/
}
/*チェックボックスは隠す*/
.accordion input {
    display: none;
}
/*折りたたみで隠れる中身を非表示にしておく*/
.accordion .accordionContent {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*クリックで中身表示*/
/*プラスは隣接セレクタ。.accordionCheckBox:checkedの隣にあるaccordionContentクラスということ*/
.accordionCheckBox:checked + .accordionContent {
    height: auto;
    padding: 5px;
    opacity: 1;
}

/* ============================================ */
/* アコーデオンと取説の内部世界                       */
/* -------------------------------------------- */
/* ○○の遊び方 */
#howToTitle{
    display: block;
	width:100%;
    background :none;
	text-align:center;
	/*padding: 0.8rem 0;*/
	margin:auto;
	margin-bottom:0;
}
#howToTitle h1{
    display: inline;
    display: block;
	line-height:3rem;
	margin-top:0.2rem;
	font-family: sans-serif;	/* ゴシック体 */
    font-weight: bold;
	color:#333333;
	background:none;
	font-size:1.2rem;
}
/* ラベル部分の文字 */
.accordion h2 {
	font-size:1.0rem;
	background:none;
	margin:auto;
}
/* 中のカラムはマージンを修正　*/
.accordion .myFrame {
	margin-bottom:0;
	width:96%;
}

/* 中のカラムの中の小項目　*/
.accordion .myFrame h3 {
	font-size:1.0rem;
	margin-left:0;
}
/* 中のカラムの中の小項目の中の太字 */
.accordion .myFrame .futoji {
	font-weight: bold;
}
/* 中のカラムの中のリスト */
.accordion .myFrame ul {
	list-style-type: square;
	margin-left:2rem;
}