@charset "utf-8";

@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
  
/* 「opacity」を適用する箇所 */
body {
    animation-duration: 1s;
    animation-name: opacity;
    animation-iteration-count: 1;
    font-family: Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    color: #333;
}

a {
    transition: .4s;
    -webkit-transition: .4s;
    color: #666;
}

header {
    border-top: 4px solid #59bada;
	border-bottom: 4px solid #59bada;
    margin: 10px;
    height: 100px;
}

footer {
    background: #333;
    color: #fff;
    height: 25px;
    margin: 100px auto 0;
}

#copyright{
    margin: 0 auto;
    width: 40%;
    text-align: center;
}

#copyright a{
    color:#fff;
}

h1 a{
	position: absolute;
	font-size: 3rem;
	font-weight: bold;
	color: #59bada;
	text-decoration: none;
	top: 30px;
}

h1 a:hover{
	text-decoration: none;
}

h1 a .subTitle{
	font-size:2rem;
	text-shadow:none;
}

#guide {
	float: right;
	width: 350px;
	border-radius: 6px;
	padding: 5px;
    text-align: center;
    margin: 10px;
    background: linear-gradient(90deg, #fae, transparent);
    transition: .4s;
}

#guide a{
    text-decoration: none;
    transition: .4s;
}

#guide:hover{
	box-shadow: 0 0 0px 1px rgba(200,200,200,1);
}

.guide-sub {
	letter-spacing: 0.2em;
    font-size: 20px;
    margin: 0 auto;
}

.guide-sub span {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
}

/* 新規スレッドの画像 */
.threadList h3{
    display: flex;
}
.threadList h3 div{
    width: 100px;
    height: 30px;
    color: #000000;
    font-size: 10px;
    border: solid 2px #59da73;
    border-radius: 5px;
    background-color: rgba(255,255,255,1);
}
.threadList h3 div:hover{
    border: solid 2px #00b300;
    background-color: rgba(226, 226, 226, 0.6);
}
.threadList h3 .pen{
    text-decoration: none;
}
.threadList h3 div img{
    display: inline;
    width: 25%;
}
/* -------------------------------- */


.pagingArea{
	margin: 0px auto 10px;
	display: table;
    padding: 10px;
    
}

.pagingArea .current,
.pagingArea .paging{
	box-shadow: 2px 2px 2px 0px;
	border-radius: 20px;
	padding: 3px 10px;
	background: linear-gradient(#f0f8ff,  #7cfc00);
	text-decoration: none;
	font-weight: bold;
}

.pagingArea .current{
	background: linear-gradient(#d6ffd6,#1e90ff);
}

.pagingArea .paging:hover{
	color: #FFF;
}

/* スレッド一覧 */
.thread-side,
.thread {
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1) inset;
    background-repeat: no-repeat;
	background-position: right;
	background-size:20%;
	margin-bottom: 20px;
}

.thread {
    border: 4px solid #dcdcdc;
}

.thread-side{
    background-size:60%;
}

.thread h4 {
    font-size: 28px;
    color: #a21e1e;
}

.thread p {
    padding: 0px 0px 10px;
}

.thread-side a.transmission,
.thread a.transmission{
	background-color:rgba(255,255,255,0.6);
	padding: 25px;
	display: block;
}

.thread-side a.transmission{
	padding: 20px 15px;
}

.thread a.transmission h4{
	text-decoration: none;
	display: inline-block;
}

.thread-side a.transmission p,
.thread a.transmission p{
	text-decoration: none;
    font-weight: bold;
    width: 80%;
}

.thread-side a.transmission p:hover,
.thread a.transmission p:hover{
    text-decoration: none;
}

.thread-side a.transmission:hover,
.thread a.transmission:hover{
	background-color:rgba(255,255,255,0);
	display: block;
	color:#000;
	font-weight: 900;
}

.thread-side a.transmission:hover{
	background-size: 150px;
	
}

.thread-side a.transmission h4,
.thread a.transmission h4{
	font-weight: bold;
}

.thread-side a.transmission h4{
    font-size: 1rem;
}
.thread-side a.transmission p{
    font-size: 0.7rem;
}

/* スレッド詳細ページ */
.threadDetail{
    margin: 50px 0px 10px;
}

#responseList {
	margin: 0 auto 10px;
	padding-top: 10px;
	padding-bottom: 30px;
	display: table;
	width: 100%;
}

#responseList img{
    width:100px;
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#responseList hr{
    overflow: hidden;
    margin: 0;
}

#responseList .response{
	margin-bottom: 20px;
}

#responseList .response{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}

#responseList .response:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}

#responseList .response p {
    margin: 0; 
    padding: 5px;
    font-weight: bold;
    line-height: 1.8;
}

#responseList .response p.name {
	padding-top: 10px;
	line-height: 130%;
}

.radio-inline{
    display: inline;
}
.radio{
    margin-left: 30px;
}

/* --入力フォーム-- */
#inputForm {
    margin-top: 0px;
    box-shadow: 0px 0px 10px 2px #ace;
    padding: 15px;
    background: linear-gradient(to right,#ffa,#cff);
}

#inputForm .icon{
    height: auto;
    width: 13%;
}

label{
    font-weight: bold;
}

#name{
    width: 30%;
}

#pass{
    width: 10%;
}

.new {
	font-size: 10px;
	text-align: center;
	display: block;
	width: 90px;
	padding-top: 10px;
	position: absolute;
	right: -20px;
	top: -20px;
	transform: rotate(45deg) translate(22px);
	color: #FFF;
	background: #F00;
}

/* icon */
.container{
    width: 100%;
}
.image_area {
    position: relative;
  }

  img {
        display: block;
        max-width: 100%;
  }

  .preview {
        overflow: hidden;
        width: 160px; 
        height: 160px;
        margin: 10px;
        border: 1px solid red;
  }

  .modal-lg{
        max-width: 1000px !important;
  }

  .overlay {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    height: 0;
    transition: .5s ease;
    width: 100%;
  }

  .image_area:hover .overlay {
    height: 50%;
    cursor: pointer;
  }

  .text {
    color: #333;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  

  /* body {
padding: 30px;
margin: 0 auto;
width: 50%;
} */
textarea {
width: 90%;
height: 60px;
}
.file-up {
margin-bottom: 10px;
}
.submit {
text-align: right;
}
.btn {
display: inline-block;
border-radius: 3px;
font-size: 18px;
background: #67c5ff;
border: 2px solid #67c5ff;
padding: 5px 10px;
color: #fff;
cursor: pointer;
}

@media (max-width: 576px) {
    header{
        height: 70px;
    }
    h1 a{
        font-size: 1.8rem;
        left: 10px;
    }
    h1 a .subTitle{
        /* display: none; */
        font-size: 10px;
    }
    #guide{
        display: none;
    }
    .thread{
        width: 100%;
    }
    .container-fluid,
    .container{
        padding-left: 1px;
        padding-right: 1px; 
    }

    .threadList h3 div{
        width: 80px;
        height: 22px;
        font-size: 8px;
    }
    .threadList h3 div img{
        width: 20%;
    }
}