@charset "utf-8";
/* CSS Document */

#main_v{
	background:url(../img/main_v_bg.jpg) center center no-repeat;
}

#main_v .inner_wide {
  
  max-width:1324px;
  position:relative;
  margin:0 auto;
}



#main_v h2{
	color:#FFF;
	text-shadow: 0em 0.1em 0.3em #000,-0em -0em 0.3em #000;
	padding:2em 0 0 0.8em;
	margin-bottom:0.7em;
}


#main_v .btn_red {
    text-align: left;
	padding:0em 0 4.4em 1em;
}
#main_v .btn_red a {
    font-size: 1.8rem;
    color: #FFF;
    padding: 1em 2.5em;
	background-color:#f17700;
}
#main_v .btn_red a:hover{
	opacity:0.85;
    outline: 0;
  outline-offset: 0;
}

#main_v .btn_red a:hover:after {
    border-top: 0.15em solid #fff;
    border-right: 0.15em solid #fff;
}


#main_v .btn_ch {
  text-align: left;
  position:absolute;
  right:0;
  bottom:0;
}
#main_v .btn_ch a {
    font-size: 1.6rem;
    color: #FFF;
    padding: 1em 2.5em;
	  background-color: rgba(87, 86, 86, 0.8);
    transition: 0.5s;
    display: inline-block;
    position: relative;  
}

#main_v .btn_ch a:after {

content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.25em;
    right: 1em;
    width: 0.35em;
    height: 0.35em;
    border-top: 0.15em solid #FFF;
    border-right: 0.15em solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#main_v .btn_ch a:hover{
	background-color: rgba(87, 86, 86, 1);
}

footer .copy {
padding-top: 5rem;
}


/*----------------
チャットボット
------------------*/

  #_ChatWindow {
  
    z-index:9998;
    
    } 
#_ChatHeader {
  background-color: #d6a987;
}
#_ChatHeader_MenuIcon,
#_ChatHeader_CloseIcon {
  color: #464341;
  font-size: 2.4rem;
}
#_ChatHeader .MuiTypography-subtitle1 {
  font-size: 1.6rem;
  color: #fff;
}
#_ChatHeader .MuiAppBar-root {
  padding: 0;
  align-items: center;
  height: auto;
}
#_ChatHeader .MuiSvgIcon-root {
  font-size: 2.4rem;
}
#_ChatHeader .MuiToolbar-dense {
  width: 100%;
}
#_ChatHeader #_ChatHeaderIcon {
  margin-right: 0.8rem;
}
#_ChatContent {
  color: #3c3c3c;
  background: #f2e9d8;
}
#_ChatContent ._ChatWindowContent_BOT_CONTENT,
#_ChatContent ._ChatWindowContent_OP_CONTENT {
  background-color: #dbceb7;
  margin: 0.8rem 0.8rem 0;
  padding: 0.8rem;
  border-radius: 0.4rem;
}
#_ChatContent ._ChatWindowContent_BOT_CONTENT_TEXT,
#_ChatContent ._ChatWindowContent_OP_CONTENT_TEXT {
  padding: 0.4rem;
  padding-left: 0.8rem;
}
#_ChatContent ._ChatWindowContent_CS_TEXT,
#_ChatContent ._ChatWindowList {
  background-color: #fff;
}
#_ChatContent ._ChatWindowContent_CS_TEXT {
  padding: 0.8rem;
  border-radius: 0.4rem;
}
#_ChatContent ._ChatWindowContent_CS_TEXT + div {
  border-left-color: #fff;
}
#_ChatContent ._ChatWindowContent_BOT_TEXT,
#_ChatContent ._ChatWindowContent_OP_TEXT {
  padding: 0.4rem 0.4rem 0.4rem 0.8rem;
}
#_ChatContent ._ChatWindowContent_CHIP_SPAN {
  font-size: 1.6rem
}
#_ChatContent .MuiChip-clickable {
  padding-top: 0.48rem;
  padding-bottom: 0.48rem;
}
#_ChatContent ._ChatWindowContent_POST_DATE_TIME {
  font-size: 0.8rem;
}
#_ChatWindowUserInputRoot {
  border-top: 2px solid #d6a987;
}
#_ChatWindowUserInputRoot #_ChatWindowUserInputSendButton {
  color: #d6a987;
}
#_ChatWindowUserInputRoot #_ChatWindowUserInputSendButton .MuiSvgIcon-root {
  font-size: 2.4rem;
}
#_ChatWindowUserInputRoot ._ChatWindowUserInputContainer::after {
  border-bottom: 2px solid #d6a987;
}
#_ChatWindowUserInputRoot .MuiInputBase-root {
  font-size: 1.6rem;
}

#_ChatMenuRoot{
  background:rgba(242,233,216,0.93);
}

#_ChatMenuRoot .MuiTypography-root {
  font-size: 1.6rem;
}
  
/* 丸いボタン */
  
 #_ChatButton {
    right: 8rem;
    bottom: 1.8rem;
    position: fixed;
  }
  #_ChatButton .MuiSvgIcon-root{
 font-size:2.5rem;   
  }
  
  #_ChatButton .MuiFab-root
  {
 width: 54px;
    height: 54px;   
  }
  
#_ChatButton > button {
 background-color: #d7a989;
}

 #_ChatButton.fixed {
  
    bottom: 4.5rem;

  }

/* メッセージアイコン色を変更 */
#_ChatButton svg {
 color: #464341;
}
.chat .layer{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:99;
  background:rgba(000,0,0,0.6);
  color:#ffffff;
  font-size:2rem;
  text-align:center;
  padding:2rem;
  display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
/*.chat {
pointer-events:none;
  }*/

._ChatWindowContent_BOT_TEXT :link{
color:#0060cc;
text-decoration: underline;
}
._ChatWindowContent_BOT_TEXT a{  
color:#0060cc;
}

/* アイコンを指定*/
#_ChatButton {
background:url("../img/chat_chara.png?20210305") 0 0 no-repeat;
background-size:contain;

}
/* デフォルトのアイコンを透明 */
#_ChatButton > button {
opacity: 0;
/* アイコンの微調整 */
width: 208px!important;
height: 132px!important;
}
/* メニュー非表示 */
._ChatWindowMode_BOT #_ChatMenuItem_ModeSwitch {
  display: none;
}


/*----------------
相談室からのお知らせ
------------------*/
#news_common p.announce{
   color:black;
   padding-top: 0;
}

#news_common p.announce:nth-child(n+3){
  border-top: 1px solid #ccc9c9;
  padding: 1em 0 0 0;
  margin-top:1em;
}

#news_common p.announce:last-child{
  padding-bottom:0;

}

#news_common p.announce > a{
    text-decoration: underline;
}

/*----------------
よくいただくご質問 
------------------*/
#faq{
	padding-top:3rem;
	margin-bottom:5rem;
}

#faq .btn a {
    color: #FFF;
    display: block;
    padding: 1.15em 2.5em 1.15em 2.5em;
    line-height: 1;
    border-radius: 3em;
    background-color: #f17700;
    position: relative;
    transition-duration: 0.3s;
    white-space: nowrap;
}

#faq .btn a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.35em;
    right: 1em;
    width: 0.35em;
    height: 0.35em;
    border-top: 0.15em solid #FFF;
    border-right: 0.15em solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


#faq .btn a:hover{
opacity:0.7;
}

#faq .form{
	background-color:#f1eee9;
	text-align:center;
	padding:2.5rem 0;
}
#faq .form .wrap{
	display:inline-block;
}
#faq .form .form_content{
	display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
	flex-wrap:nowrap;
	border-radius:0.3em;
	overflow:hidden;
}
#faq .form .form_content .form-control {
    height: 5.1rem;
    padding: 0 0 0 1em;
    border: none;
    outline: none;
    font-size: 1.7rem;
    width: 30em;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: normal;
}
#faq .form .form_content .form-control::placeholder {
   color: #b1b0b0;
   font-weight:normal;
}

#faq .form .form_content input.btn-item {
    background: url(../img/icon_search.png) 0 0 /contain no-repeat;
    width: 6rem;
    height: 5.1rem;
    background-color: #FFF;
    border-radius: 0px;
    border: none;
    font-size: 0px;
    cursor: pointer;
}

#faq ul.faq-list{
	margin-bottom:3rem;
	margin-top:1rem;
	border-top:1px solid #ccc9c9;
}
#faq ul.faq-list li a{
	display:block;
	color:#3c3c3c;
	padding:1em 3em 1em 0;
	border-bottom:1px solid #ccc9c9;
	position:relative;
	margin-left:0px;
	font-size:1.6rem;
}
#faq ul.faq-list li a:hover{
	color:#3c3c3c;
	text-decoration:none;
}
#faq ul.faq-list li a:hover .link-item{
	text-decoration:underline;
}

#faq ul.faq-list li a span.icon-new,
#faq ul.faq-list li a span.icon-important,
#faq ul.faq-list li a span.icon-recommend,
#faq ul.faq-list li a span.icon-update{
	font-size:1.3rem;
	color:#EB0100;
	border:solid 0.1rem;
	padding:0 0.7em;
	margin-left:0.5em;
	position:relative;
	top:-0.1em;
	text-decoration:none;
}
#faq ul.faq-list li a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.2em;
    right: 0.7em;
    width: 0.45em;
    height: 0.45em;
    border-top: 0.1em solid #EB0100;
    border-right: 0.1em solid #EB0100;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#faq .btn_red a {
    background-color: #FFF;
    border:solid 2px #ff0909;
	color:#ff0909;
	padding: 0.7em 5em;
}
#faq .btn_red a:after {
    border-top: 0.15em solid #ff0909;
    border-right: 0.15em solid #ff0909;
}



/*----------------
大切なお知らせ 
------------------*/
#news{
	padding:2rem 0 1rem 0;
}
#news .btn{
	width:13em;
	padding:0.3em 0 0.3em 1.5em;
	text-indent:0px;
	position:relative;
	right:auto;	
}
#news .btn:hover{
	opacity:0.7;
	cursor:pointer;
}
#news .btn:before, #news .btn:after {
  left: 4em;
  margin-top:-0.15em;
  width: 1em;
  height: 1em;
  border-top: 0.3em solid #3c3c3c;
}

#news .btn.close:after {
  left: 3em;
  margin-top:-0.65em;
}


#news_common{
	margin-top:2rem;
	margin-bottom:2rem;
}


/*----------------
お電話　メール　お手紙
------------------*/
main h3{
	font-size:3rem;
	padding-left:1.3em;
	position:relative;
	margin-bottom:0.7em;
}
main h3:before {
    position: absolute;
    width: 1.13335em;
    height: 1.2em;
    content: "";
    background: url(../img/icon_faq.png) 0 0 /contain no-repeat;
    left: 0em;
    top: 50%;
    margin-top: -0.6em;
}
main h3.tel:before {
    background: url(../img/icon_tel.png) 0 0 /contain no-repeat;
}
#contact{
	background-color:#f1eee9;
	padding:3rem 0;
	margin-bottom:4.5rem;
}
#contact .inner.flex{
	/*align-items:stretch;*/
}
#contact .left{
	width:49%;
}
#contact .left .tel{
	background-color:#FFF;
	padding: 2rem 2rem 6.9rem 2rem;
	margin-bottom:2rem;
}
#contact .left .number{
	text-align:center;
}
#contact .left .number div{
	display:inline-block;
	text-align:left;
}

#contact .left .number div p:first-child{
	text-align:center;
}

#contact .left .number div p a{
	font-size:4rem;
	color:#EB0100;
	pointer-events:none;
	font-weight:bold;
	white-space:nowrap;
}
#contact .left .number div p a img{
	margin-right:0.2em;
}
#contact .left .number div p:last-child{
  margin-bottom:1em;
}
#contact .left .number div .caption{
	font-size:1.4rem;
	display:block;
	padding-left:1em;
	text-indent:-1em;
	margin-top:0.5em;
}
#contact .left .number + p{
	margin:1.5em 0;
}
#contact .left .caption li{
	font-size:1.4rem;
	padding-left:1em;
	text-indent:-1em;
}

#contact .left .caption li a{
text-decoration: underline;
}

#contact .left .caption li a:hover{
text-decoration: none;
}

#contact .right{
	width:49%;
	flex-direction:column;
}
#contact .mail{
	background-color:#FFF;
	padding:2rem;
	width:100%;
	height:47.5%;
margin-bottom: 2.5rem;
}

#contact .mail span{
	color: #EB0100;
    margin-top: 1.5rem;
    display: inline-block;
}
#contact .mail span .bold{
    margin-top: 0rem;
}


#contact .mail h3:before {
    background: url(../img/icon_mail.png) 0 0 /contain no-repeat;
}
#contact .mail .btn_red a{
	font-size:1.6rem;
	padding: 1em 0em;
	width:19em;
}

#contact .mail p{
text-align:center;
margin-top: 1.5rem;
}

#contact .right .chat{
	background-color:#FFF;
	padding:2rem;
	width:100%;
	height:47.5%;
margin-bottom: 2.5rem;
  position:relative;
  overflow:hidden;
}

#contact .right .chat h3:before {
    background: url(../img/icon_chat.png) 0 0 /contain no-repeat;
}
#contact .right .chat h4{
    background: url(../img/chat_bg.jpg) 0 0 /cover no-repeat;
  font-size:2.8rem;
  text-align:center;
  padding:1em 0;
  text-align:center;
}
#contact .right .chat .btn_red a {
    font-size: 1.6rem;
	padding: 1em 0em;
	width:19em;
}
#contact .right .chat .caption{
	margin-top:0.5em;
}
#contact .right .chat .caption li{
	font-size:1.4rem;
	padding-left:1em;
	text-indent:-1em;
}
#contact .right .chat ul.link{
  background-color:#f9f1e3;
  padding-left:0.7em;
  padding-top:1em;
  justify-content: flex-start;
}
#contact .right .chat ul.link li{
  margin-right:0.5em;
  margin-bottom:1em;
}
#contact .right .chat ul.link li a{
  font-size:1.6rem;
  display:inline-block;
  padding-left:1.1em;
  background:url(../img/arrow.png) 0 center /1em no-repeat;
}
#contact .right .chat ul.link li a:hover{
  text-decoration: underline;
}
.chat_modal{
  width:750px;
}
.chat_modal h5{
  text-align:center;
  font-size:2.8rem;
  padding:1em 0;
}
.chat_modal img{
  vertical-align: bottom;
}
.chat_modal .bg{
  background-color:#FFF;
  border-bottom-left-radius:1em;
  border-bottom-right-radius:1em;
  padding-bottom:1.5em;
}
.chat_modal .bg div{
  background-color:#fcf6ec;
  padding:1.5em;
  border-radius:0.5em;

  width:94%;
  margin:0 auto;
}
.chat_modal .bg div.scroll{
  max-height:20em;
  overflow-y: scroll;
}
.chat_modal .bg .contact{
  padding:0px;
  width:100%;
}
.chat_modal .contact p{
  display:inline-block;
  margin-right:2em;
}
.chat_modal .contact p span.sup{
  font-size: 0.7em;
    position: relative;
    top: -0.4em;
}
.chat_modal .caption{
  font-weight:bold;
  padding:1em 0;
}
.chat_modal li{
  padding-left:2em;
  text-indent:-2em;
  margin-bottom:1em;
}
.chat_modal li:last-child{
  margin-bottom:0em;
}
.chat_modal .bg a{
  text-decoration:underline;
}
.chat_modal .bg a:hover{
  text-decoration:none;
}
.chat_modal .bg a span{
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.chat_modal li .small{
  font-size:1.4rem;
}
.chat_modal .ttl{
  font-weight:bold;
  margin-bottom:1.5em;
}
.chat_modal .ttl + ul{
  margin-bottom:1.5em;
}
.chat_modal .ttl + ul li{
  margin-bottom:0px;
}

#contact .right .text{
	margin-top:1em;
}
#contact .right .text span{
	color: #EB0100;
}

#contact .post{
	background-color:#FFF;
	padding: 2rem 2rem 4.2rem 2rem;
	width:100%;
	height:47.5%;
}
#contact .post h3{
  text-align:left;
}
#contact .post h3:before {
    background: url(../img/icon_post.png) 0 0 /contain no-repeat;
}
#contact .post.pc_display{
  text-align:center;
}
#contact .post.pc_display p{
  display:inline-block;
  text-align:left;
  font-size:2rem;
  margin-bottom: 3.4em;
  padding-top:2.1em;
}
#contact .caution{
	font-size:1.8rem;
	color:#EB0100;
	padding:0.4em 0.8em;
	border:solid 2px;
	background-color:#FFF;
	margin-bottom:2rem;
	font-weight:bold;
}

#contact .right .chat .ie_areat{display:none;}

@media all and (-ms-high-contrast:none){
*::-ms-backdrop,#contact .right .chat .btn_red{
display:none;
}
*::-ms-backdrop,#contact .right .chat .ie_areat{
display:block;  
padding: 1rem;
    border: solid 1px #EB0100;
    margin-top: -0.7rem;
    color: #EB0100;  
}
}


/*----------------
お客様の声に学びました
------------------*/
#voice h3:before {
    background: url(../img/icon_voice.png) 0 0 /contain no-repeat;
}

#voice ul{
	border-top:1px solid #d5d5d5;
	margin-bottom:3.5rem;
}
#voice li{
	border-bottom:1px solid #d5d5d5;
}
#voice li a{
	align-items:center;
	flex-wrap:nowrap;
	justify-content:flex-start;
	padding:1.5rem;
	padding-right:2rem;
	position:relative;
}
#voice li a:hover{
	text-decoration:underline;
}
#voice li a img{
	width:11rem;
	margin-right:2rem;
}
#voice li a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.28em;
    right: 0.5em;
    width: 0.3em;
    height: 0.3em;
    border-top: 0.15em solid #ff0a0a;
    border-right: 0.15em solid #ff0a0a;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#voice .btn_red a {
    background-color: #FFF;
    border:solid 2px #ff0909;
	color:#ff0909;
	padding: 0.7em 5em;
}
#voice .btn_red a:after {
    border-top: 0.15em solid #ff0909;
    border-right: 0.15em solid #ff0909;
}


/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1150px){
	#contact .right .chat h4 {
    font-size: 2.3vw;
}
}





/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){
  
main#soudanshitsu {
    padding-top: 15vw;
}  
  
#main_v {
     background: url(../img/main_v_bg.jpg) 40% center/230% no-repeat;
  margin-bottom:13vw;
}
#main_v h2 {
    font-size: 2.5rem;
	padding: 1em 0 0em 0.5em;
}
#main_v .btn_red {
    padding: 0em 0 1.5em 0.5em;
}
#main_v .btn_red a {
    font-size: 1.6rem;
}

#main_v .btn_ch {
bottom:-10.9vw;
}
#main_v .btn_ch a {
    color:#888888;
    font-size: 1.5rem;
    padding: 0.6em 1.2em 0.6em 0.8em;
    background-color: rgba(87, 86, 86, 0);
}
#main_v .btn_ch a:after {
  right: 0.5em;
  border-top: 0.15em solid #888888;
  border-right: 0.15em solid #888888;
  }

#main_v .btn_ch a:hover {
  background-color: rgba(87, 86, 86, 0);
}  
  
/*----------------
チャットボット
------------------*/
#_ChatButton {
    right: 0rem;
    bottom: -4rem;
    position: fixed;
}
  
  
#_ChatButton > button {
    opacity: 0;
    width: 140px!important;
    height: 132px!important;
}  

/*----------------
よくいただくご質問
------------------*/
  
#faq .btn {
    text-align: right;
    width: 100%;
}  
  
#faq .btn a {
    display: inline-block;
}
  
#faq .form {
    margin-left: -1.2rem;
	margin-right:-1.2rem;
}
#faq .form .wrap{
	width:95%;
}
#faq .form .form_content .form-control {
    height: 11.9vw;
    font-size: 16px;
    width: 83%;
}
#faq .form .form_content input.btn-item {
    height: 11.9vw;
    width: 14vw;
}

  #faq ul.faq-list{
    
  margin-top: 2rem;  
    
  }
  
#faq ul.faq-list li a {
    padding: 1em 2em 1em 0;
}


/*----------------
大切なお知らせ 
------------------*/
#news{
	padding: 1rem 0 2rem 0;
}
#news dl{
	margin-top:0.3em;
}
#news .btn {
    width: 100%;
}
#news .btn:hover{
	opacity:1;
}
#news .btn:before, #news .btn:after {
    left: 9.5em;
    margin-top: -0.18em;
  	border-top: 0.3em solid;
  	width:1em;
}
#news .btn.close:after {
    left: 8.48em;
    margin-top: -0.65em;
}


/*----------------
お電話　メール　お手紙
------------------*/
main h3{
	font-size:2.6rem;
}
#contact .left {
    width: 100%;
}
#contact .left .tel {
    padding: 2rem;
		margin-bottom:1rem;
}
#contact .left .number div p:last-child{
  margin-bottom:0em;
}

  
#contact .right {
    width: 100%;
	display:block;
	
}
#contact .right .chat {
    margin-bottom:1rem;
}
#contact .mail {
    height: auto;
	margin-bottom:1rem;
}
#contact .post {
    height: auto;
}
#contact .left .number div p a {
    font-size: 3.5rem;
    pointer-events: auto;
}
#contact .left .number div p a img {
	width:1.35em;
}
  
  	#contact .right .chat h4 {
    font-size: 4.3vw;
}
  
  
#contact .right .chat h4{
    background: url(../img/chat_bg_sp.jpg) 0 0 /cover no-repeat;
  font-size:5.8vw;
  padding: 1.2em 0;
}  
  
  
  .chat_modal{
    width:100%;
}
  .chat_modal img{
    width:100%;
}
  .chat_modal h5 {
    font-size: 2rem;

}
  #chat_modal02.chat_modal .bg div {
    max-height: 20em;
    overflow-y: scroll;
}
    #chat_modal03.chat_modal .bg div {
    max-height: 20em;
    overflow-y: scroll;
}


/*----------------
お客様の声に学びました
------------------*/
#voice li a img {
    width: 7rem;
}

	
}

@media screen and (max-width:320px){

 #_ChatButton {
    right: 0rem;
    bottom: -2rem;
    position: fixed;
}
  
 #back-top {
    bottom: 9rem!important;
    right: 1rem;
} 
  
footer .copy {padding-top:4rem;}
  
}