@charset "UTF-8";

/*----------------------------------*/
.infoicon.row {
	justify-content: flex-start;
}
.infoicon > li {
	margin-bottom: 30px;
}

.infoicon > li a {
	height: 100%;
	display: block;
	background: #E6F1F4;
	text-align: center;
	padding: 20px;
	border-radius: 5px;
	border: solid 5px #E6F1F4;
	box-sizing:border-box;
}
.infoicon > li a:hover {
	text-decoration:none;
	background: #fff;
	border: solid 5px #E6F1F4;
	box-sizing:border-box;
}
#info .infoicon h3:hover {
	text-decoration:none;
}
.infoicon li img {
	margin: 20px;
}
.infoicon > li a.saraya,.infoicon > li a.family,.infoicon > li a.medical {
	padding: 15px 25px;
	color: #fff;
	background: #3B77B5;
	font-weight: bold;
	position: relative;
	border: solid 3px #3B77B5;
	box-sizing:border-box;
}
.infoicon > li a:hover.saraya,.infoicon > li a:hover.family,.infoicon > li a:hover.medical {
	background: #fff;
	color: #3B77B5;
}
.infoicon > li a.saraya:after,.infoicon > li a.family:after,.infoicon > li a.medical:after {
	font-family: FontAwesome;
	content: '\f105';
	position: absolute;
	top: 50%;
	right: 15px;
	z-index: 0;
	transform: translate(0, -50%);
}
@media screen and (min-width: 992px) {
	.infoicon li img {
		width: 40%;
	}
}
@media screen and (max-width: 991px)and (min-width: 768px) {
	.infoicon li img {
		width: 30%;
	}
}
@media screen and (max-width: 767px) {
	.infoicon li img {
		width: 50%;
	}
}


/* お問い合わせ
----------------------------------*/
#info h1 {
	margin: 40px 0;
	font-weight: bold;
}
#info h2 {
	margin: 20px 0;
	padding-bottom: 10px;
	border-bottom: solid 1px #999;
	color: #3B77B5;
	font-weight: bold;
	font-size: 1.5rem;
}
#info .infoicon h3 {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #3B77B5;
	font-weight: bold;
	text-decoration: underline;
}


.infoicon > li > a > ul > li {
	font-size: .8rem;
	text-align: left;
	line-height: 1.8;
	color: #000;
	word-break: break-all;
	line-break: strict;
	padding-left: .9rem;
	text-indent: -0.9rem;
}
.infoicon > li > a > ul > li:before {
	content: '● ';
	color: #3B77B5;
}

.infoicon > li > a > p {
	font-size: 12px;
	text-align: left;
}
.tel {
	margin: 40px 0;
}
.tel > div {
	margin-bottom: 20px;
}
#info .tel h3 {
	background: #eee;
	padding: 10px 15px;
	margin-bottom: 10px;
}
.tel p {
	display: inline-block;
	font-size: 2rem;
}

@media screen and (max-width: 767px) {
	.col-6 {
		padding-right: 5px;
	    padding-left: 5px;
    }
	.infoicon {
		padding-right: 10px;
	    padding-left: 10px;
	}
    .infoicon > li {
		margin-bottom: 10px;
	}
}

/*共通
----------------------------------*/
a {color: #000;}

/* ページトップ */
#pageTop {
  z-index: 999;
}
/* 注意文 */
.info-lead	{
	margin-bottom: 40px;
}
.info-lead	a {
	color: #3B77B5;
	text-decoration: underline;
}
@media screen and (min-width: 1200px){
	.container {
		width: 980px;
	}
}
@media screen and (min-width: 768px){
	.text-sp-br br,.text-pc-none {
		display: none;
	}
	/* ページトップ */
	#pageTop {
	  position: fixed;
	  bottom: 10px;
	  right: 10px;
	}

	#pageTop a {
	  display: block;
	  z-index: 999;
	  padding: 15px 10px;
	  background-color: #3B77B5;
	  color: #fff;
	  font-weight: bold;
	  text-decoration: none;
	  text-align: center;
	  border-radius: 10px;
	  font-size: .6rem;
	}
	 #pageTop a i {
	  font-size: 1.5rem;
	  display: block;
	  margin-bottom: 10px;
	}
	#pageTop a:hover {
	  text-decoration: none;
	  opacity: 0.7;
	}
}
@media screen and (max-width: 767px){
	p,a,li,dt,dd,th,td,div {font-size: 0.875rem;}
	.text-pc-br br,.text-sp-none {
		display: none;
	}

	/* ページトップ */
	#pageTop {
	  position: fixed;
	  bottom: 0px;
	  right: 0px;
	}
	#pageTop a {
	  display: block;
	  z-index: 999;
	  padding: 20px;
	  background-color: #3B77B5;
	  color: #fff;
	  font-weight: bold;
	  text-decoration: none;
	  text-align: center;
	  font-size: .6rem;
	  border-radius: 10px 0 0 0;
	}
	#pageTop a span {
		display: none;
	}
	 #pageTop a i {
	  font-size: 1.5rem;
	  display: block;
	}
}

/* フォーム
----------------------------------*/
/* フォーム見出し */
#info h3 {
	font-size:1.2rem;
	font-weight: bold;
}
/* 注意事項 */
#info ol {
	list-style-type: decimal;
	margin: 40px 0 40px 1rem;
}
#info ol li {
	margin-bottom: 10px;
}

/* 確認ボタン */
.kakunin {
	color: #fff;
	line-height: 1.15;
	border: none;
	background: #3B77B5;
	border: solid 3px #3B77B5;
	padding: 20px;
    border-radius: 25px;
	letter-spacing: 3px;
}
#info .kakunin:after {
	font-family: FontAwesome;
	content: '\f105';
	margin-left: 15px;
}
.kakunin:hover {
	border: solid 3px #3B77B5;
	background: #fff;
	color: #3B77B5;
}
/* 必須マーク */
span.must {
	display: inline-block;
	background: #F9AF17;
	padding: 3px 7px;
	color: #fff;
	margin: 0 5px;
	font-size: .8rem;
	letter-spacing: 2px;
}
/* 項目 */
#info label {
	background: #eee;
	display: block;
}
.form-group input[type=checkbox],.form-group input[type=radio] {
    margin-right: 7px;
}
.form-control:focus {
	background-color: rgb(250, 255, 189);
	color: #000;
}

/* Chrome, Safari */
.form-control::-webkit-input-placeholder{
    color: #bbb;
}

/* Firefox */
.form-control::-moz-placeholder{
    color: #bbb;
}

/* Firefox 18以前 */
.form-control:-moz-placeholder{
    color: #bbb;
}

/* IE */
.form-control:-ms-input-placeholder{
    color: #bbb;
}

/* IE */
input:-ms-input-placeholder{
    color: #bbb;
}

/* --選択時に表示する項目-- */

/*中身を非表示にしておく*/
.hidden_box .sub_hidden_show {

	background: #fff;
	border-radius: 4px;
}
.hidden_box .sub_hidden_show,.hidden_box .sub_sub_hidden_show {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
		font-size: .875rem;
}
#info .hidden_box .sub_hidden_show .form-sub > div {
	margin-bottom:
}
#info .hidden_box .sub_hidden_show .form-sub label {
	padding: 10px;

}
/*クリックで中身表示*/
.hidden_box input#sub_hidden:checked ~ .sub_hidden_show {
	padding: 20px;
	margin-top: 20px;
    height: auto;
    opacity: 1;
}
.hidden_box input#sub_sub_hidden:checked ~ .sub_sub_hidden_show {
    height: auto;
    opacity: 1;
}
@media screen and (max-width: 768px) {
	.hidden_box .sub_hidden_show {border: #eee solid 4px;}
}

@media screen and (min-width: 768px) {
	/* フォームナビ */
	.info-nav li a:after {
		font-family: FontAwesome;
		content: '\f105';
		margin-left: 7px;
		color: #3B77B5;
	}
	/* PCお問い合わせ中ページナビ */
	.info-nav .collapse {
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	.info-nav button {
		display: none;
	}
	.info-nav {
		margin-bottom: 40px;
		font-size: 80%;
	}
	.info-nav ul {
		display: flex;
		align-items: center;
	}

	.info-nav ul li {
		width: calc( calc( 100% / 4 ) - 12px );
		margin-bottom: 12px;
		position: relative;
	}
	.info-nav ul li a {
		height: 100%;
	    padding: 10px 15px 10px 60px;
	    display: block;
	    background: #E6F1F4;
	    border-radius: 5px;
	}
	.info-nav ul li a:hover {
	    background: #3B77B5;
	    color: #fff;
	    text-decoration: none;
	}
	.info-nav li a:hover:after{
  		color: #fff;
	}
	.info-nav ul li a.infotop:before {
		color: #3B77B5;
		font-size: 2.1rem;
		position: absolute;
		top: 5px;
		left: 11px;
		font-family: FontAwesome;
		content: '\f05a';
	}
	.info-nav ul li a.speech:before {
		color: #3B77B5;
		font-size: 2.1rem;
		position: absolute;
		top: 3px;
		left: 11px;
		font-family: FontAwesome;
		content: '\f075';
	}
	.info-nav ul li a.family:before {
		color: #3B77B5;
		font-size: 2.1rem;
		position: absolute;
		top: 3px;
		left: 11px;
		font-family: FontAwesome;
		content: '\f015';
	}
	.info-nav ul li a.medical:before {
		color: #3B77B5;
		font-size: 2.1rem;
		position: absolute;
		top: 3px;
		left: 11px;
		font-family: FontAwesome;
		content: '\f0fa';
	}
	.info-nav ul li a.infotop:hover:before,.info-nav ul li a.speech:hover:before,.info-nav ul li a.family:hover:before,.info-nav ul li a.medical:hover:before {
		color: #fff;
	}
	.info-nav ul li a.products {
		background-image: url("images/icon_shohin.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.products:hover {
		background-image: url("images/icon_shohin-w.svg");
	}
	.info-nav ul li a.estimate {
		background-image: url("images/icon_mitsumori.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.estimate:hover {
		background-image: url("images/icon_mitsumori-w.svg");
	}
	.info-nav ul li a.repair {
		background-image: url("images/icon_shuri.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.repair:hover {
		background-image: url("images/icon_shuri-w.svg");
	}
	.info-nav ul li a.document {
		background-image: url("images/icon_shiryo.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.document:hover {
		background-image: url("images/icon_shiryo-w.svg");
	}
	.info-nav ul li a.site {
		background-image: url("images/icon_member.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.site:hover {
		background-image: url("images/icon_member-w.svg");
	}
	.info-nav ul li a.service {
		background-image: url("images/icon_service.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.service:hover {
		background-image: url("images/icon_service-w.svg");
	}
	.info-nav ul li a.faq {
		background-image: url("images/icon_yokuaru.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.faq:hover {
		background-image: url("images/icon_yokuaru-w.svg");
	}
	.info-nav ul li a.other {
		background-image: url("images/icon_sonota.svg");
		background-repeat: no-repeat;
		background-size: 35px auto;
		background-position: 10px center;
	}
	.info-nav ul li a.other:hover {
		background-image: url("images/icon_sonota-w.svg");
	}




	/* 見出し */
	#info h3 {
		margin-bottom: 20px;
	}
	/* 項目 */
	.form-group {
		background: #eee;
		padding: 20px;
		margin-bottom: 5px;
		border-radius: 5px;
	}
	.form-group .row {
		align-items: center;
	}
	#info label {
		margin-bottom: 0;
	}
	/* 確認ボタン */
	#info .kakunin {
		font-size: 1.5rem;
		width: 40%;
		padding:20px;
	    border-radius: 40px;
	}
}

@media screen and (max-width: 768px) {
	/* お問い合わせナビ */
	.info-nav .menu-trigger {
		width: 100%;
   	}
	.info-nav button {
		line-height: 1.15;
		border: none;
		background: #3B77B6;
		padding: 10px;
	    border-radius: 5px;
	    color: #fff;
	}
	.info-nav button:after {
		font-family: FontAwesome;
		content: '\f107';
		margin-left: 5px;
	}
	button:focus {
		outline: #eee;
	}
	.info-nav li {
		border-bottom : solid 1px #ededed;
		position: relative;
	}

	.info-nav li a {
		position: relative;
		display: block;
		padding: 15px;
	}
	.info-nav li a:after {
		position: absolute;
		font-family: FontAwesome;
		content: '\f105';
		color: #3B77B5;
		right: 15px;
	}
	.info-nav li a:hover {
		color: #3B77B5;
		background-color: #E6F1F4;
		text-decoration: none;
	}
	/* 項目 */
	#info label {
		margin: 40px 0 20px;
		padding: 10px;
	}
	/* 項目 */
	#info label br {
		display: none;
	}
	/* 確認ボタン */
	.kakunin {
		font-size: 1.2rem;
		width: 60%;
	}
}


/* よくある質問
----------------------------------*/
/* よくある質問ナビ */
.faq-nav {
	margin-bottom: 60px;
}
.faq-nav li {
	color: #3B77B5;
	margin-bottom: 10px;
	display: block;
}
.faq-nav li:before {
	font-family: FontAwesome;
	content: '\f059';
	margin-right: 7px;
	color: #3B77B5;
}

/* よくある質問コンテンツ */
.faq-conts {
	margin-bottom: 60px;
}
.faq-conts h3 {
	background: #eee;
    padding: 10px 15px;
}
.faq-conts dl {
	margin-bottom: 60px;
}
.faq-conts dl dt {
	margin-bottom: 10px;
	font-size: 1.2rem;
	color: #3B77B5;
}
.faq-conts dl dt:before {
	font-family: FontAwesome;
	content: '\f059';
	margin-right: 7px;
	font-size: 2rem;
}
.faq-conts dl dd {
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: solid #eee 2px;
}


/* 他ページへの振り分け */
.info-link div {
	padding: 20px;
	border-radius: 4px;
	background: #eee;
	height: 100%;
}
.info-link div p {text-align: center;}
.info-link li {padding-bottom:  6px;}


/* お知らせ */
#box-oshirase {
    font-weight: bold;
    color: #F33;
    background-color: #FFECEC;
    padding: 10px 15px;
	margin-top: 30px;
    margin-bottom: 30px;
	font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
	#box-oshirase {text-align: center;}
}
@media screen and (max-width: 767px) {
	#box-oshirase {text-align: left;}
}