@charset "utf-8";
/*▼reset css▼*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	line-height: 1;
	background:transparent;}

/*行の高さをフォントサイズと同じにしています*/
/*body { line-height:1;}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {list-style:none;}

/*引用符の表示が出ないようにしています*/
blockquote, q { quotes:none;}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none;}

body {margin: 0; padding: 0;
	width: 100%;
}
/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins { background-color:#ff9; color:#000; text-decoration:none;}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}

/*テキストに打ち消し線が付くようにしています*/
del { text-decoration: line-through;}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table { border-collapse:collapse; border-spacing:0;}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
	display:block;
	height:1px;
	border:0;  
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select { vertical-align:middle;}
ol, ul { list-style: none;}

/*画像を縦に並べたときに余白が出てしまわないように*/
img { vertical-align: top; font-size:0; line-height: 0;}



/*-------------------------
一般設定
--------------------------*/
body {    
  	display:block;    
    background-color: #ffffff;    
    font-size: 12px;
	color:#000000;
	font-family: "Times New Roman";
	font-weight: normal;
 height: 100%;       /* 1 */}

img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;}

li{padding: 0px 7px;}
p{line-height: 1.8em; padding: 8px 0px;}
h1{font-size: 16px; padding: 10px 0px; color: white;}/*タイトル1*/
h2{font-size: 16px; padding-bottom:10px; color:#222222;}/*タイトル2*/
h4{padding-top: 16px; padding-bottom:10px;}/*コメント*/

a { display: block;
    color: #000000;
    text-decoration: none;
    }
 
/*----------------------------
wrpper
------------------------------*/
#wrapper { 
    margin: auto 0;
    background-color: azure;
    justify-content: center;    
    overflow: hidden;/*レスポンシブの左余白のはみ出た部分を消す*/
 }


/*--------------------header--*/
header{
    background-color: #08bca6;
    text-align: center;
    color: #ffffff;}

#imgcontroal{ max-width: 9%; max-height: 9%;}
.contents_header {text-align: center;}
.headerbar_container {margin: 60px auto 55px auto; }
.logo_container {height: 162px;	text-align: center;}

/*---------------------main--*/
.wrap {/*setcionを横並び*/
    max-width: 320px;
    max-height: 2000px;
    margin: auto;
    display: flex;  
    display: -webkit-flex;
    flex-flow: column nowrap;
    -webkit-justify-content: center;
    justify-content: center;
}


section {/*setcionの中の要素を横並び*/  
      margin:5px 10px;    
      padding: 10px;
      display: flex;    
      -webkit-flex-direction: column;    
      background: #ffffff;
      border-radius: 10px; /*実線に丸角つける*/
      border: solid 1px #c4c4c4 ;  
    }

.sectionvote {/*setcionの中の要素を横並び*/  
      padding: 10px;
      display: flex;    
      -webkit-flex-direction: column;    
      background: #ffffff;
      border-radius: 10px; /*実線に丸角つける*/
      border: solid 1px #c4c4c4 ;  
    }

.img {
  padding: 30px 0;
  text-align: center;
  order: -1;
  max-width: 100%;
  height: auto;}


/*投稿一覧を見る*/
#index{ width:100px;
    margin: 15px 0px;
    padding: 5px 15px;
    margin-left: auto;}

.explan {
    text-align:center;
    color: black;
}


/*投票数、残数、like数*/
a:visited{
    color: #c4c4c4;
}

a.disabled:visited{
    color: white;
}

.category{ margin-top: -18px;}
.category2{
    color: black;
}
.center {
  -webkit-justify-content: center;
  justify-content: center;
  padding:50px 0px;
  color: #08bca6;
  display: flex;
  display: -webkit-flex;    
  list-style: none;
}

.inline {
  text-align: center;
}

.inline li{
    display: inline-block;
    padding: 5px 5px;
}

.inline li a{
    padding: 10px;
}

.inline2 {
  display: flex;
  display: -webkit-flex;    
  margin: 0;
  padding: 0;
  list-style: none;
}

/*grahp start-------------*/
.btn {
    width: 240px;
    float: left;
    padding:30px 0px;
    }

.votecount{
    float: right;
    width: 10%;
    text-align: right;
    margin: 10px 0px;
}

.clear {clear: inherit;}


/*各質問に対して1:1のclass指定*/
.group1{
    height: 70px;
    padding-top: 15px;
}

.group2{
    height: 70px;
}

.group3{
    height: 70px;
}

.group4{
    height: 70px;
}



/*float 解除*/
.clear {clear:both;}


/*------------page btn--*/
#page-top {
    position: fixed;
    bottom: 80px;
    right: 0px;
    font-size: 250%; 
}
#page-top a {
    background: #08bca6;
    text-decoration: none;
    color: #fff;
    width: 50px;
    text-align: center;
    display: block;
}

#page-top a:hover {
    text-decoration: none;
    background: #08bca6;
}

/*--------------------footer--*/
#footer_container{
	display:flex;
	box-sizing: border-box;
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
	align-items: flex-end;}

#footer {
	font-family: "Times New Roman"; text-align: right; font-size: 0.9rem;
	opacity: 0.9;
	/*margin-top:50px;*/
    text-align: center;
    background-color:#08bca6;
    color: #ffffff;}

#footer p { padding: 10px 0px; }