@charset "UTF-8";
.pagetitle {margin:40px 0 0; font-size:32px; color:#012b5d; padding:5px 0 3px; letter-spacing: 10px; text-align:center; border-left: solid 10px #cc9901; background:#fcf6e6}

ul.pagebtn {text-align: center}
ul.pagebtn li {display:inline-block; margin:0 5px}
ul.pagebtn li .btn {width:300px !important; height:45px; font-size:18px}

.slider_wrap {margin:0 auto 40px}
.single-item div {text-align:center; margin-bottom:10px;}
.single-item div img {max-width: 800px; padding:0; margin:0 auto}
.single-item div p.f_cap {margin:0; padding:0}
.single-item .slick-prev:before,.single-item .slick-next:before {font-size:40px!important}

.slider_thumb {padding: 5px 50px 5px 65px; background:#555}
.slider_thumb .slick-slide {opacity: 0.5;}
.slider_thumb .slick-slide img {width:150px;border:solid 3px #E5E5E5; box-sizing: border-box;}
.slider_thumb .slick-current {opacity: 1;}
.slider_thumb .slick-current img {border:solid 3px #F00; box-sizing: border-box;}
.slider_thumb .slick-prev{left:-20px;}	
.slider_thumb .slick-next{right:-20px;}
.slider_thumb .slick-prev:before,.slider_thumb .slick-next:before {color:#FFF; font-size:25px;opacity: .80;}

/*flexslider版
#slider ul.slides li {text-align:center;}
#slider ul.slides li img {max-width: 800px; padding:0; margin:0 auto}
#slider ul.slides li p.f_cap {margin:0; padding:0}*/

.youtube {background:#E5E5E5; padding-top: 20px}
.youtube ul {margin:0; padding:0; font-size:0; text-align: center;}
.youtube ul li {display: inline-block; width:480px; margin:0px 10px 20px;}
.youtube ul li p {margin:0; padding:0; font-size:17px}
.youtube iframe {width: 480px; height: 270px}

/* 活動記録 */
#activity dl span {display: inline-block; padding:0 10px; margin-right:15px; background:#f2e5bc}
#activity dl span a {text-decoration:none}
#activity dl {margin:5px 15px 0px 15px; text-align:left; font-size:17px; padding-bottom:8px;border-top:solid 1px #CCC}
#activity dl dt{
	font-weight:bold;
	padding: 15px 0 15px 50px;
	float:left;
	width:300px;
	}
#activity dl dd{
margin:0;
padding: 15px 20px 15px 350px;
display:block;
color:#333;
border-bottom:solid 1px #CCC
}
#activity ul.pagebtn {margin-top:40px;}

/* 火縄銃の発砲演舞 */

/* ワークショップ */
#workshop p.ws_txt {margin:20px auto 40px}

/* 隊員紹介 */
#members {margin-top: -100px; padding-top:100px;}
#members ul { text-align:left; font-size:0; margin:50px 0 40px}
#members ul li { display: inline-block; width:210px; height:245px; margin:0 30px 40px 10px; box-shadow: 4px 4px 6px #CCC; position:relative; text-align: center}
#members ul li img {position:absolute; z-index:2; display: block; width:100%;}
#members ul li img:hover {opacity: 0;-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;}
#members ul li span {display:block; width:100%; height:100%; padding:20px 0 0; background:#333; color:#FFF; font-size:15px; position:absolute; z-index:1; box-sizing: border-box;}
#members ul li strong {display: block; font-size:18px}

/* BeReal */
#bereal {}
#bereal .single-item div p.f_cap {text-align:left; margin:20px 0 0; font-size:15px}
#bereal .single-item div p.f_cap strong {text-align: center; display:block; font-size:20px; padding-bottom: 10px}
#bereal .slider_thumb {margin:20px 0; padding: 5px 50px 5px 65px; background:#E5E5E5}
	
/* お問い合わせ */
#contact .contents {text-align: center}
#contact h3 {margin:30px auto 0; color:#7d151b}
#contact table {width:960px; border-top: dotted 1px #999999; border-collapse:collapse; margin:0 auto 40px;}
#contact table th {border-bottom: dotted 1px #999999; width:200px; background:#d7e9f4; padding: 15px 0px 15px 15px; font-weight:normal; text-align:left;}
#contact table td {border-bottom: dotted 1px #999999; padding: 15px 0 15px 15px; text-align:left}
#contact table th span.need {float:right; margin-right:10px; background-color:#FA3D3F; color:#FFF; display:block; width:46px; text-align:center; font-size:14px;}
#contact table input{font-size:18px; width:400px}
#contact table textarea {font-size:15px; width:600px}
input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
	background: #ffaeb6;
	border: none;
	padding: 10px 0;
	font-size:18px;
	letter-spacing:2px;
	width: 300px;
	margin: 0 20px
}
input[type="submit"]:hover,input[type="submit"].re:hover{background-color: #f9c500;}
input[type="submit"].re {background:#CCC}
#contact .inline {display: inline-block}
#contact .error em {color:#ff0000; background:#ffff00;font-style: normal}

@media screen and (max-width: 767px) {
.pagetitle {margin:75px 0 20px; font-size:18px; padding:4px 0 2px 15px; letter-spacing:3px; text-align:left;}
	
ul.pagebtn {text-align:left}
ul.pagebtn li {display:inline-block; font-size:0; width:47%; margin:0 1% 10px; padding:0;}
ul.pagebtn li .btn {width:100% !important; height:calc(100vw * 0.08 - 7px); background-size:100% 100%; margin:0; padding:0;}
ul.pagebtn li .btn a {font-size:14px; letter-spacing:0; padding-top:calc(100vw * 0.025 - 10px)}
	
.slider_wrap {margin:20px auto 50px}
.single-item div {margin-bottom:5px;}
.single-item div img {width:100%;}
.single-item div p.f_cap {padding:5px 0 0;}
.single-item .slick-prev:before,.single-item .slick-next:before {font-size:30px!important}

.slider_thumb {padding: 5px 30px 5px 30px;}
.slider_thumb .slick-slide img {border:solid 2px #E5E5E5;}
.slider_thumb .slick-current img {border:solid 2px #F00;}
.slider_thumb .slick-prev{left:-35px;}	
.slider_thumb .slick-next{right:-35px;}
.slider_thumb .slick-prev:before,.slider_thumb .slick-next:before {font-size:20px;}

.youtube {padding:10px 0; margin: 0}
.youtube ul li {display:block; width:100%; margin:0; padding:0 15px 20px; box-sizing: border-box;}
.youtube ul li p {font-size:15px}
.youtube iframe {width:100%; height:calc(100vw * 0.5)}

/* 活動記録 */
#activity {margin-bottom: 80px}
#activity dl {margin:3px 0 0px 0; padding:0 5px; text-align:left; font-size:16px; line-height:1.2em;}
#activity dl dt{
	font-size:16px;
	padding: 10px 0 3px 10px;
	width:100%;
	}
#activity dl dd{padding: 0px 0 15px 10px;}
#activity ul.pagebtn {margin-top:40px; text-align: center}
	
/* 火縄銃の発砲演舞 */

/* ワークショップ */
#workshop p.ws_txt {margin:0}

/* BeReal */
#bereal .single-item div p.f_cap {font-size:14px}
#bereal .single-item div p.f_cap strong {font-size:18px;}
	
/* 隊員紹介 */
#members ul {margin:30px 0 40px}
#members ul li {width:44%; height:calc(100vw * 0.44 *1.16 - 20px); margin:0 3% 20px; box-shadow: 2px 2px 3px #CCC;}
#members ul li img {}
#members ul li img:active {opacity: 0;-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;}
#members ul li span {padding:30% 0 0; font-size:14px; line-height:1.5em}
#members ul li strong {font-size:16px; padding:3px 0}

/* お問い合わせ */
#contact {margin-bottom:70px}
#contact .contents {text-align:left}
#contact h3 {margin:20px auto 10px; text-align: center}
#contact table {width:100%; margin:20px auto 40px;}
#contact table th {width:100%; display:block; padding:5px 10px 3px;}
#contact table td {width:100%; display:block; padding:10px 10px 20px; text-align:left}
#contact table th span.need {float:none; margin-left:10px; display:inline-block; width:46px; text-align:center;}
#contact table input{font-size:18px; width:90%}
#contact table textarea {font-size:15px; width:100%}
	
input[type="submit"] {
	padding: 10px 20px;
	font-size:16px;
	letter-spacing:0px;
	width:180px;
	margin: 0 10px 30px
}
	#contact .center {text-align: center;}

}