@charset "utf-8";
body{margin:50px 0 0 0;padding:0;position:relative;}
i{margin-right:7px;}
input , textarea , select {font-size:16px !important;border: 1px solid #B9C9CE;border-radius:5px;box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);box-sizing:border-box;background:#fff;}
input , textarea{padding: 8px 0.8em;}
select{position:relative;padding: 6px 20px 6px 0.8em;}
a:hover{-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}

/* プレースホルダー */
input:-webkit-input-placeholder { color:#aaa; }
input:-moz-placeholder { color:#aaa; }
input:-moz-placeholder { color:#aaa; }
textarea:-webkit-input-placeholder { color:#aaa; }
textarea:-moz-placeholder { color:#aaa; }
textarea:-moz-placeholder { color:#aaa; }

/* 入力欄にフォーカスした時、プレースホルダーを非表示にする。 */
input:focus:-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
textarea:focus:-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

#header_icon_wrap{width:100%;margin:0 auto;height:auto;max-width:640px;/*position: fixed;transform: translate(-50%, 0);top:0;left:0;background:rgba(255,255,255,.9);z-index: 9;*/}
#header_icon_wrap:after{clear:both;display:block;content:"";}
#content_wrap{width:100%;max-width:960px;margin:0 auto;}
#header_wrap{position:relative;margin-top:70px;}
#header_wrap:after{clear:both;display:block;content:"";}
#header_icon{width:100%;height:auto;display:block;margin:0 auto;padding-bottom:45.3125%;}
.icon_top{background:url(../img/top_img.jpg) no-repeat;background-size:100% 100%;}
#header_message{padding:0;margin:0 auto 20px;text-align:center;line-height:18px;font-size:12px;color:#999;}

#header_menu_wrap{background-color: #f1f4f6;border-top: 1px solid #d9dde3;border-bottom: 1px solid #d9dde3;}
#menu_area01{margin:0 auto;padding:0;width:100%;max-width:960px;}
#menu_area01:after{content:"";clear:both;display:block;}
#menu_area01 li{list-style:none;width:50%;box-sizing:border-box;float:left;border-right: 1px solid #d9dde3;}
#menu_area01 li:first-child{border-left: 1px solid #d9dde3;}
#menu_area01 li a{font-size:14px;display:block;padding:10px 0;text-align:center;text-decoration:none;font-weight:bold;color:#666;text-shadow: #fff 1px 1px;}
#menu_area01 li a:hover{background-color: #d9dde3;}

#top_message_wrap{width:100%;max-width:640px;margin:10px auto;}
#top_message{width:100%;height:0;padding-bottom:39.0625%;background:url(../img/top_message.png) no-repeat;background-size:100%;}

#soudan_list{width:100%;max-width:960px;margin:10px auto;min-height:600px;}
#soudan_list:after{content:"";clear:both;display:block;}
.soudan_block{float:left;width:48%;margin:1%;border:1px solid #eee;box-sizing:border-box;min-height:7em;}
.soudan_block:after{display:block;content:"";clear:both;}
.soudan_block:hover{cursor:pointer;background-color:#eee;}
.soudan_left{float:left;width:35%;box-sizing:border-box;padding:10px;}
.user_thumb{width:100%;height:100%;border-radius:50%;border:1px solid #eee;box-sizing:border-box;}
.soudan_body{float:left;box-sizing:border-box;padding:10px;width:65%;}
.soudan_body div{padding:0 0 6px;font-size: 14px;line-height:18px;}
.soudan_title{word-wrap:break-word;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-weight:bold;background: #00B900;color: #fff;padding: 10px !important;border-radius: 5px;}
.send_btn{width: 65%;border: 1px solid #ddd;border-radius: 10px;background: #ff7f50;color: #fff;font-weight: bold;text-align: center;margin:10px auto 0;font-size: 14px !important;letter-spacing: 3px;padding:10px 0 !important;}
.send_btn:hover{background: #ff4500;}

#modal_user_thumb{width:50px;border-radius:50%;border:1px solid #eee;box-sizing:border-box;float:left;}
#modal_user_prof{float:left;}
#modal_soudan_text{word-wrap:break-word;text-overflow: ellipsis;overflow: hidden;line-height:21px;}
#modal_soudan_text_area{position: relative;display: inline-block;border-radius: 15px;background:#fff;padding: 15px 15px 10px;margin: 15px 0;box-sizing:border-box;}
#modal_soudan_text_area:before{content: "";position: absolute;top: -20px;left: 50%;margin-left: -15px;border: 10px solid transparent;border-bottom: 10px solid #fff;}

.clr{clear:both;content:"";display:block;}

#message_form{overflow: auto;max-height: 80vh;padding:0px 10px;box-sizing: border-box;text-align:center;}
#message_form input[type=text]{min-width:250px;}
#message_form textarea{min-width:250px;resize:none;height:4em;}
#message_form select{min-width:100px;}
#doui_txt{font-size:12px;color:#aaa;}

/* モーダルCSS */
.modalArea {display: none;position: fixed;z-index: 10001; top: 0;left: 0;width: 100%;height: 100%;}
.modalBg {width: 100%;height: 100%;background-color: rgba(30,30,30,0.8);}
.modalWrapper {position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 90%;max-width: 450px;max-height:90vh;padding: 20px;background-color: #fff;box-sizing: border-box;border-radius:10px;}
.closeModal {position: absolute;top: 0.5rem;right: 0.5rem;cursor: pointer;font-weight:bold;font-size: 21px;background: #fff;box-sizing:content-box;width:21px;height:21px;}
#openModal {position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}

.regist_label{margin:15px 0 5px;}
.regist_label:before{content:"\f150";font-family: "Font Awesome 5 Free";padding:3px;color:#71c681;}
.regist_label:after{content:"\f150";font-family: "Font Awesome 5 Free";padding:3px;color:#71c681;}

#modal_user_wrap{background:#ffeeee;border-radius:5px;padding: 10px 5px 5px;}
#modal_top_area{margin:0 auto;display:inline-block;}
#modal_user_name{margin:5px;text-align:left;}
#modal_user_area{margin:5px;text-align:left;}

#modal_send_wrap{display:none;position:relative;}
#modal_title{background:url(../img/modal_title.png) no-repeat;width:100%;height:0;padding-bottom:15%;background-size:100%;}

#modal_send_title{background:#00b900;color:#fff;border:0 solid #fff;margin:15px 0 10px;border-radius:10px;padding: 10px 20px;cursor: pointer;}
#reg{background:#00b900;color:#fff;border:0 solid #fff;margin:15px 0;border-radius:10px;padding: 10px 20px;cursor: pointer;}

#footer_wrap{width:100%;background:#eee;border-top:1px solid #ddd;padding:10px 0;margin-top:70px;padding-bottom:50px;}
#footer_menu{width:100%;max-width:640px;margin:0 auto;padding:0;}
#footer_menu:after{clear:both;content:"";display:block;}
#footer_menu li{float:left;width:33%;list-style:none;}
#footer_menu li a{font-size:12px;color:#aaa;width:100%;line-height:30px;display:block;text-align:center;box-sizing:border-box;padding:0 10px;text-decoration:none;}
#footer_menu li a:hover{background:#ccc;color:#fff;}
#footer_menu li:nth-child(n+2){border-left:1px solid #ccc;}

#search_area_wrap{width:100%;max-width:300px;margin:10px auto 5px;padding:5px 0;box-sizing:border-box;text-align:center;background:#71D271;border-radius:10px;box-shadow: #aaa 1px 1px;}
.font-white{color:#fff;font-weight: bold;}

.reload_btn{font-size: 13px;display:inline-block;width:26px;height:26px;border-radius:13px;line-height: 26px;cursor: pointer;background:#fff;color:#7f7fff;font-family: 'Font Awesome 5 Free';font-weight: 900;margin-left:5px;box-sizing:content-box;}
#fixed_reload{display:none;position:fixed;bottom:70px;right:0;height:65px;border-radius:5px 0 0 5px;background:#71D271;z-index:8;padding-right:10px;box-sizing:content-box;}
#fixed_top{font-size: 13px;display:inline-block;width:26px;height:26px;border-radius:13px;line-height: 26px;cursor: pointer;background:#fff;color:#7f7fff;font-family: 'Font Awesome 5 Free';font-weight: 900;margin:7px 0 0 7px;padding:5px;text-align: center;box-sizing:content-box;}
.fixed_btn{margin:7px 0 0 7px;padding:5px;text-align: center;}
#fixed_history{font-size: 13px;display:inline-block;width:26px;height:26px;border-radius:13px;line-height: 26px;cursor: pointer;background:#fff;color:#7f7fff;font-family: 'Font Awesome 5 Free';font-weight: 900;margin:7px 0 0 7px;padding:5px;text-align: center;box-sizing:content-box;}
.icon_label{color:#fff;font-size:10px;line-height: 12px;}

/* ローディング */
#overlay{position: fixed;top: 0;z-index: 100;width: 100vw;height:100vh;display: none;background: rgba(0,0,0,0.6);}
.cv-spinner {height: 100vh;display: flex;justify-content: center;align-items: center;}
.spinner {width: 40px;height: 40px;border: 4px #ddd solid;border-top: 4px #2e93e6 solid;border-radius: 50%;animation: sp-anime 0.8s infinite linear;}
.is-hide{display:none;}
@keyframes sp-anime {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

#history_list{display:none;overflow: auto;max-height: 80vh;padding:0px 10px;box-sizing: border-box;}
#history_list:before{background:url(../img/modal_history_title.png) no-repeat;width:100%;height:0;padding-bottom:15%;background-size:100%;display: block;content: "";}
#history_list:after{display:block;content:"最新の20件のみ表示";text-align:center;font-size:12px;color:#aaa;margin:10px auto;}
.history_block:after{content:"";clear:both;display:block;}
.history_block:not(:last-child){border-bottom:1px solid #eee;}
.soudan_history_left{width:20% !important;padding: 5px;}
.soudan_history_body{width:50% !important;}
.soudan_history_send_btn{float:left;width:30% !important;line-height: 40px;margin: 15px auto;box-sizing: border-box;}

#new_list_get{display:none;text-align:center;padding:15px 10px;width:100%;max-width:200px;margin:10px auto;background:#eee;color:#333;cursor: pointer;box-sizing:border-box;}
#new_list_get_end{display:none;text-align:center;padding:15px 10px;width:100%;max-width:300px;margin:10px auto;color:#333;box-sizing:border-box;font-size: 14px;line-height: 21px;}

#caution_message{display:block;width:100%;margin:15px auto;padding:10px;font-size:14px;line-height:21px;background:#f6f6f6;border-radius:5px;box-sizing:border-box;}
#caution_message b{color:#f66;}

.validation{box-shadow: inset 0 1px 5px rgba(255,0,0,0.5);border-color: #f00;}

/*! BootstrapMsg v1.0.5 | Copyright (c) 2016-present Duc Doan (ducdhm@gmail.com) */
#msg_wrap{position:fixed;z-index:9999999998;width: 100vw;height: 100vh;background-color: rgba(30,30,30,0.9);top:0;left:0;display:none;}
#msg{position:fixed;z-index:9999999999;opacity:0;width:100vw;max-width:400px;top:-100%;left:50%;transform:translateX(-50%);transition:all .3s ease-in-out;overflow:hidden;line-height:24px;box-sizing:border-box;}
#msg i{font-size:21px;margin-bottom:10px;vertical-align:middle;/*width:1em;*/text-align:center;display:block;}
#msg span{font-size:14px}
#msg .msg-progress{position:absolute;margin:0;padding:0;border-width:2px 0;bottom:0;left:0;width:0;border-radius:0}
#msg.showed{top:20%;left:50%;opacity:1;transform: translateY(-50%);transform: translateX(-50%);-webkit-transform: translateY(-50%);-webkit-transform: translateX(-50%);}
#msg.alert-no-icon i{display:none}

/* 訪問者カウンター用 */
#visitor_count{display:block;position:fixed;bottom:0;left:0;margin:0 auto;width:100%;/*height:auto;*/transform: translateY(40px);transition: all 1s;opacity: 0;z-index:10000;height:45px;overflow:hidden;}
#pxisitor_count p{line-height:45px;font-size:14pt;text-align:center;margin:0;overflow: hidden;}
#visit1{height:45px;background:rgba(0,0,0,.7);color:#fff;padding:5px 0;margin:0;box-sizing:border-box;text-align:center;}
#visitor1{font-size:18pt;color:#ff0;font-weight:bold;}
#visit2{height:45px;background:rgba(255,255,255,.8);color:#000;padding:5px 0;margin:0;box-sizing:border-box;text-align:center;}
#visitor2{font-size:18pt;color:#f00;font-weight:bold;}

.user_area{width: 50%;float: left;}
.soudan_date{width: 50%;float: left;}

#mail_caution{font-size:12px;color:#faa;display:block;max-width:300px;line-height:16px;margin:5px auto;}

/* 点滅 */
.blinking{-webkit-animation:blink 1s ease-in-out infinite alternate;-moz-animation:blink 1s ease-in-out infinite alternate;animation:blink 1s ease-in-out infinite alternate;}
@-webkit-keyframes blink{0% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes blink{0% {opacity:0;}100% {opacity:1;}}
@keyframes blink{0% {opacity:0;}100% {opacity:1;}}

@media (min-width:1200px){#msg{width:90vh;max-width:400px}}
@media (max-width:479px){#msg{width:90vh;max-width:300px}}

@media screen and (max-width:640px) {
	#fixed_reload{/*bottom:100px;*/height:55px !important;padding-right: 5px;}
	.modalWrapper {max-height:95vh;}
	#message_form{max-height:85vh;}
	.soudan_block{float:left;width:100%;margin:0 auto;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;border-bottom:none;box-sizing:border-box;}
	.soudan_block:last-child{border-bottom:1px solid #eee;}
	.soudan_left{max-width:120px;height:auto;}
	.soudan_left{padding:10px 5px;}
	.soudan_body{padding:10px 5px;}
	#message_form{padding:0 10px 0 5px;}
	#message_form input[type=text]{min-width:90%;}
	#message_form textarea{min-width:90%;}
	.modalWrapper{padding:10px;}
	#modal_soudan_text_area{padding: 15px 15px 10px;}
	.send_btn{padding:5px 0 !important;letter-spacing: 0;}
	#footer_wrap{padding:5px 0 50px;margin-top:30px;}
	.soudan_history_send_btn{line-height: 20px;font-size: 10px !important;}
	#fixed_top{width: 24px;height: 24px;font-size: 12px;border-radius: 12px;line-height: 24px;margin: 5px 0 0 7px;padding: 3px;}
	.reload_btn{width: 24px;height: 24px;font-size: 12px;border-radius: 12px;line-height: 24px;margin: 5px 0 0 7px;padding: 3px;}
	#fixed_history{width: 24px;height: 24px;font-size: 12px;border-radius: 12px;line-height: 24px;margin: 5px 0 0 7px;padding: 3px;}
	#caution_message{font-size:10px;padding:10px;line-height:18px;}
}