/*	INDEX
-------------------------------------------------
	RESET
	BASE
	HEADER
	NAVIGATION
	CONTENT
	SIDE BAR
	WIDGET
	FOOTER
	COMMENT TEMPLATE
	MISC
	HACK
*/

@charset "utf-8";
/*	BASE
-------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  color: #333333;
  line-height: 1.5;
  font-size: 16px;
  font-family: "Yu Gothic", YuGothic, "メイリオ", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3",
    Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}

body {
}

header {
  background-color: #b4f0f5;
  padding: 1em;
}
.header_container {
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.header_container .hc_left,
.header_container .hc_right {
  width: 160px;
}
.header_container .hc_left img,
.header_container .hc_right img {
  width: 100%;
  height: auto;
}

.header_container .hc_center {
  font-family: serif;
  text-align: center;
  font-weight: bold;
  margin: 0 1rem;
}

.header_container .hc_center h1 {
  color: #fff;
  font-size: 3rem;
  background-color: #35bac5;
  padding: 1rem 4rem;
  margin: 0;
  border-radius: 100px;
}
.header_container .hc_center h1 span {
  color: #f8e568;
}
.header_container .hc_center div {
  font-size: 2.4rem;
  color: #35bac5;
}
.header_container .hc_center div span {
  font-size: 3rem;
  color: #2c686d;
}

main {
  padding: 0 1em;
}
.main_container {
  max-width: 1200px;
  padding: 2em;
  margin: -3em auto 0;
  border-radius: 20px 20px 0 0;
  background-color: #fff;
}



/*トップぺージ、検索ページ*/
.top_page,
.search_page{
	max-width:900px;
	margin:0 auto;
}
.top_page div,
.search_page div{
	text-align:center;
	margin:0 0 1rem;
	margin:0 0 2rem;
}
.top_page .top_section{
	padding:4rem 0 1rem;
	margin:0;
}
.top_page .finish_mess{
	color:#ff2626;
	font-size:2rem;
	font-weight:bold;
}
.prepare_mess{
	font-size:2rem;
	font-weight:bold;
	text-align:center;
}

.search_page .result_mess{
}
.top_page form,
.search_page form{text-align:center;}

.top_page input,
.search_page input{
	font-size:1rem;
	max-width:480px;
	width:100%;
	padding:0.4rem;
	margin:0 auto 1rem;
}





/*アンケートフォーム*/
.question_set {
  margin: 0 0 4em;
}

.img_sign img {
  width: 100%;
  height: auto;
}
.question_title {
  font-size: 1.2rem;
  background-image: url(./images/line.png);
  background-repeat: no-repeat;
  background-position-y: bottom;
  padding-bottom: 10px;
  margin: 0 0 1.4rem;
}
.question_title span {
  font-weight: bold;
  font-size: 2.4rem;
  color: #35bac5;
  margin-right: 0.4rem;
}
.question_text {
  margin: 0 1em 1em;
}
.question_wrap {
  padding: 0 1em;
}
.question_wrap .question_list {
  list-style: none;
  padding: 0;
}
.question_items {
  margin: 0 0 0.5em;
}

.question_items.qi_cb,
.question_items.qi_rb {
  background-color: #b4f0f5;
}
.question_items.qi_cb input,
.question_items.qi_rb input {
  display: none;
}

.question_items.qi_cb label,
.question_items.qi_rb label {
  display: block;
  width: 100%;
  padding: 0.5em;
  cursor: pointer;
  font-weight: bold;
}

.question_items.qi_cb input[type="checkbox"]:checked + label,
.question_items.qi_rb input[type="radio"]:checked + label {
  background-color: #35bac5;
  color: #fff;
}
.question_items.qi_tb {
  margin: 0 0 1em;
}
.question_items.qi_tb input[type="text"] {
  font-size: 1rem;
  margin: 0 0.5em;
  padding: 0.2em;
  width: 3em;
  vertical-align: bottom;
}

.btn_wrap {
  padding: 1em;
  display: flex;
  justify-content: center;
}

.btn_wrap a.btn:link,
.btn_wrap a.btn:visited,
.btn_wrap button {
  text-align: center;
  display: block;
  max-width: 60%;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  margin: 0 2em;
  background-color: #f7c5ef;
  font-weight: bold;
  text-decoration:none;
  border-radius: 0.4rem;
  border: 2px solid #f7c5ef;
  cursor: pointer;
}
.btn_wrap button.checker_btn {
	background-color:#ace9ac;
	border-color:#ace9ac;
}

.btn_wrap a.btn:hover,
.btn_wrap a.btn:active,
.btn_wrap button:hover {
  background-color: #e4007f;
  color: #fff;
  border-color: #990055;
}
.btn_wrap button.checker_btn:hover {
	color:#fff;
	background-color:#008800;
	border-color:#008800;
}

.btn_wrap button:disabled {
  background-color: #aaa;
  color: #333;
  border-color: #aaa;
  cursor: initial;
  opacity: 0.6;
}

.btn_wrap.confirm_btn_wrap button {
  max-width: 40%;
}
.btn_wrap.confirm_btn_wrap button.return_btn {
  background-color: #ddd;
  border-color: #ccc;
}
.btn_wrap.confirm_btn_wrap button.return_btn:hover {
  background-color: #bbb;
  color: #fff;
  border-color: #bbb;
}

.question_counter {
  position: sticky;
  position: fixed;
  bottom: 2em;
  right: 2em;
  width: 100px;
  height: 100px;
  margin-left: auto;
}
.question_counter .counter_wrap {
  position: relative;
}
.question_counter img {
  width: 100%;
  height: auto;
}
.question_counter .counter_item {
  text-align: center;
  color: #896a4e;
  position: absolute;
  width: 80px;
  height: 30px;
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: #fff;
}
.question_counter .counter_item span {
  font-size: 1.2rem;
  font-weight: bold;
}

footer {
}

/*アンケート結果ページ*/
.chart_wrap {
  margin: 0 0 2rem;
}

.chart_item {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.chart_label_pc span {
  position: absolute;
  left: 53%;
  font-size: 0.8rem;
}
.chart_label_pc span.cl-3 {
  top: 80px;
}
.chart_label_pc span.cl-2 {
  top: 140px;
}
.chart_label_pc span.cl-1 {
  top: 200px;
}


.score_wrap{
  margin: 0 0 2rem;
  padding:2rem 0;
  text-align:center;
}

.score_item{
	position:relative;
	padding:5rem 4rem;
}
.score_item.red{background-color:#ff2626;}
.score_item.orange{background-color:#ff8800;}
.score_item.green{background-color:#008800;}

.score_item_wrap{
	background-color:rgba(255,255,255,0.8);
	padding:1rem;
	min-width:520px;
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.score_title{font-size:2rem;font-weight:bold;margin-right:1rem;}
.score_num{font-size:3rem;font-weight:bold;}
.score_item.red .score_num{color:#ff2626;}
.score_item.orange .score_num{color:#ff8800;}
.score_item.green .score_num{color:#008800;}
.score_item.black .score_num {color:#333333;}
.score_unit{font-size:2rem;font-weight:bold;margin-left:0.5rem;}

.result_wrap {
  margin: 0 0 2rem;
}
.result_message {
  padding: 2rem;
  border-radius: 1rem;
  background-color: #d7f1f3;
}

.case_wrap {
  margin: 0 0 2rem;
}
.case_article {
  padding: 2rem;
  margin: 0 0 2rem;
  border-radius: 1rem;
  background-color: #e9fdff;
}
.case_article h3 {
  margin-bottom: 1rem;
}

/*申し込みフォーム*/
form table {
  width: 80%;
  max-width: 720px;
  margin: 0 auto 2em;
  border-collapse: collapse;
}
form table tr {
}
form table th,
form table td {
  text-align: left;
  padding: 2em 1em;
  border-bottom: 1px solid #ccc;
}

form table th {
  width: 240px;
  width: 280px;
}
form table th .label_comment{font-size:0.8rem;}

form table td {
  width: calc(100% - 240px);
  width: calc(100% - 280px);
}
form table td input,
form table td textarea {
  padding: 0.5em;
  font-size: 1rem;
  width: 100%;
  border: 1px solid #ccc;
}

.hissu {
  color: #fff;
  font-size: 0.8em;
  font-weight: normal;
  display: inline-block;
  padding: 0em 0.5em;
  margin: 0 0.5em;
  background-color: #ff2626;
}

.notice_comment {
  color: #ff2626;
  text-align: center;
  padding: 2em;
  margin-bottom: 2em;
}

.completion_comment {
  text-align: center;
}
.completion_comment h3 {
  margin-bottom: 2em;
}
.completion_comment p {
  margin-bottom: 0.5em;
}
.check_comment {
  color: #ff2626;
  padding: 1em;
  text-align: center;
  display: none;
}
.validation_message {
  display: none;
  color: #ff2626;
  margin-top: 0.2rem;
}

.wrap_th {
  display: flex;
  align-items: center;
}

.text-align-center {
  text-align: center;
}

.error_mess{
	color:#ff2626;
	font-weight:bold;
	text-align:center;
	padding:4rem 1rem;
}


/*送付先リスト*/
.main_container.shipping_container{max-width:100%;}
.dlbtn_wrap {
  text-align: right;
  margin: 2em 0;
}

.dlbtn_wrap button {
  padding: 0.5rem;
}
.shipping_list {
  width: 100%;

  border-collapse: collapse;
}
.shipping_list th,
.shipping_list td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  font-size:0.8rem;
  word-break: break-all;
}

.shipping_list th {font-size: 0.8rem;}
.shipping_list th.slc_01{width:4rem;}
.shipping_list th.slc_02{width:4rem;}
.shipping_list th.slc_03{width:10rem;}
.shipping_list th.slc_04{width:;}
.shipping_list th.slc_05{width:;}
.shipping_list th.slc_06{width:;}
.shipping_list th.slc_07{width:;}
.shipping_list th.slc_08{width:;}
.shipping_list th.slc_09{width:;}
.shipping_list th.slc_10{width:;}
.shipping_list th.slc_11{width:;}
.shipping_list th.slc_12{width:10rem;}
.shipping_list th.slc_13{width:;}
.shipping_list th.slc_14{width:;}
.shipping_list th.slc_15{width:;}
.shipping_list th.slc_16{width:;}
@media (min-width: 881px) {
  .pc_none {
    display: none !important;
  }
.question_items.qi_cb label:hover,
.question_items.qi_rb label:hover{
  background-color: #35bac5;
  color: #fff;
}

}
@media (max-width: 880px) {
  .sp_none {
    display: none !important;
  }
  .header_container .hc_center h1 {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    margin: 0 0 0.5rem;
  }
  .header_container .hc_center div {
    font-size: 1rem;
  }
  .header_container .hc_center div span {
    font-size: 1.5rem;
    margin: 0 0.2rem;
  }
  .header_container .hc_left,
  .header_container .hc_right {
    width: 15%;
  }
  main {
    padding: 0 1em 120px;
  }
  .main_container {
    padding: 1em;
    margin: -1em auto 0;
  }
  .btn_wrap button {
    width: 80%;
    padding: 1em;
  }
  .chart_label_sp {
    text-align: center;
  }
  .chart_label_sp span {
    margin: 0 0.5em;
  }
}