@charset "utf-8";
/*---------------------------------------
common 
----------------------------------------*/
body {
	overflow: hidden;
}

h2 {
	font-size: 138%;
	text-align: center;
	padding: 10.66% 0;
	letter-spacing: 0.125em;
}

h2 span {
	display: block;
}

h3 {
	margin: 0 auto;
    padding: 2.66% 0;
    display: block;
    width: 91.38%;
    background-color: #8C8787;
    text-align: center;
    z-index: 10;
    position: relative;
    color: #FFF;
    font-weight: 500;
	letter-spacing: 0.15em;
}
h3::before {
content: "";
    width: 100%;
    border-top: 20px solid #FFF;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: 5;
    box-sizing: border-box;
}
.flowBox-heading::after {
    padding: 2.5vw 0;
    content: "\00a0";
    display: block;
    width: 100%;
    background-color: #706B6B;
    position: absolute;
    top: -2.5em;
    z-index: 0;
    position: relative;
}

.flowBox-heading span {
  display:block;
  font-weight: 500;
}

/*---------------------------------------
header 
----------------------------------------*/
.header-logo {
	margin: 2% 0 0 4%;
}

.header-logo img {
	width: 22.8%;
}

/*---------------------------------------
catch
----------------------------------------*/
.catch-wrapper {
	background-color: #B9B3B3;
	padding: 1.08% 0;
}
.catch-message {
	width: 91.46%;
	font-size: 64.7%;
	margin: auto;
	text-align: center;
    color: #fff;
}

/*---------------------------------------
main 
----------------------------------------*/
.mainpanel {
	margin: 0 auto;
}
.mainpanel-wrapper {
	padding: 6% 8.6%;
	position: relative;
}
.mainpanel-wrapper img{
	width: 22.14%;
    height: auto;
    position: absolute;
    top: 48%;
    right: 7%;
}
.mainpanel-lead {
	margin:0 auto;
	text-align:center;
	font-size: 88%;
	font-weight: 700;
	letter-spacing: 0.4em;
}
.mainpanel-lead{
  position:relative;
  margin-bottom: 4%;
}
.mainpanel-lead::before {
  content:"";
  display:block;
  background-color:#333333;

  width:0.26%;
  height:3.3em;
  position:absolute;
  left:3%;
  top:0;
  transform: rotate(-25deg);
}
.mainpanel-lead::after {
  content:"";
  display:block;
  background-color:#333333;
  width:0.26%;
  height:3.3em;
  position:absolute;
  right:3%;
  top:0;
  transform: rotate(25deg);
}
.mainpanel-lead span {
  display:block;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.mainpanel .mainpanel-head p {
	font-size: 94%;
	font-weight: 700;
	color: #FFFFFF;
	background-color: #E40E19;
	border-radius: 3px;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 0.2em;
}

.mainpanel h1 {
	font-size: 223%;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	margin: 4% 0 0;
}

.mainpanel h1 span {
	display: block;
	font-weight: 700;
}
.mainpanel h1 span:first-child {
	color: #E40E19;
}


.mainpanel .mainpanel-merit {
	background-color: #FFD1D5;
}

.mainpanel .mainpanel-merit li {
    background-color: #FFDFE1;
    margin: 0 auto 1.33% auto;
    transform: skew(-35deg);
    width: 92%;
	letter-spacing: 0.125em;
	padding:1%;
}

.mainpanel .mainpanel-merit li p {
	color: #000;
	font-weight: 700;
	text-align: center;
	transform: skew(35deg);
	font-size: 82%;
}

.mainpanel .mainpanel-merit li p em {
	color: #E40E19;
	font-size: 120%;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/*---------------------------------------
acArea 
----------------------------------------*/
.acArea {
	margin: 7.33% 0;
	width: 100%;
	text-align: center;
}

.acArea .acArea-fd {
	margin: 0 auto;
	padding: 4.6% 4.7%;
	border-radius: 8px;
	display: block;
	width: 91.46%;
	background-color: #E40E19;
	box-sizing: border-box;
	box-shadow: 0 0.4em 0 0 #A40B13;
}

.acArea .acArea-fd:active {
	position: relative;
	top: 0.3em;
	box-shadow: none;
}

.acArea-fd .acArea-tellBlock {
	margin-bottom: 1%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.acArea .acArea-fd-free {
	color: #E40E19;
	font-weight: 700;
	font-size: 115%;
	border-radius: 6px;
	margin-right: 4.4%;
	padding: 0.6% 2.3%;
	background-color:#FFFFFF;
}

.acArea .acArea-fd-tell {
	width: 84%;
}

.acArea-fd-procedure{
	font-size: 115%;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.1rem;
}

.acArea-fd .acArea-tellBlock span {
	margin-bottom: 2%;
	display: block;
	color: #FFF;
	letter-spacing: 0.12em;
}

.acArea-fd .acArea-tellBlock img {
	width: 98%;
}

.acArea .acArea-fd .businessHours {
	font-size: 79%;
	text-align: center;
	text-decoration: none;
	color: #1F1F1F
}

.acArea .acArea-fd .businessHours span {
	font-weight: 700;
}

.acArea .acArea-buttom {
	margin: 6% 0 0;
}

.acArea-buttomBox{
	display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.acArea .acArea-buttom .acArea-buttomBox a {
	font-size: 100%;
	color: #FFFFFF;
	background-color: #B9B3B3;
	width: 91.46%;
	margin: 0 auto 2%;
	border-radius: 8px;
	border: solid 2px #B9B3B3;
	box-shadow:0 0.2em 0 0 #8C8787;
	display: block;
	padding: 1.66% 0;
	box-sizing: border-box;
	letter-spacing: 0.12em;
	display: flex;
    flex-direction: column;
}

.acArea .acArea-buttom .acArea-buttomBox a.acArea-buttomBox-other-inquiry {
	font-size: 100%;
	color: #FFFFFF;
	background-color: #B9B3B3;
	width: 91.46%;
	margin: 0 auto 2%;
	border-radius: 8px;
	border: solid 2px #B9B3B3;
	box-shadow:0 0.3em 0 0 #8C8787;
	display: block;
	padding: 1.66% 0;
	box-sizing: border-box;
	letter-spacing: 0.12em;
	display: flex;
    flex-direction: column;
}

.acArea .acArea-buttom .acArea-buttomBox a:active {
	position: relative;
	top: 0.3em;
	box-shadow: none;
}

.acArea .acArea-buttom .acArea-buttomBox a span {
	color: #FFF;
	font-weight: 700;
	font-size: 88%;
	border-radius: 6px;
	margin-right: 6%;
	padding: 0.6% 2.3%;
	background-color:#E88605;
	letter-spacing: 0.04em;
}

.acArea .acArea-buttom p,
.acArea .acArea-buttom .noteTxt {
	font-size: 75%;
	letter-spacing: 0.18em;
}

.acArea .acArea-buttom .acArea-buttomBox a span.caution {
    background: none;
    color: #FFFFFF;
    font-weight: normal;
    font-size: 65%;
}

.acArea.add-arrow {
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_stroke.png) center bottom no-repeat;
    background-size: 92% auto;
    padding: 0 0 22%;
}
/*---------------------------------------
solutionArea 
----------------------------------------*/
.solutionArea {
	background-color: #F5F5F5;
	width: 100%;
	overflow: hidden;
}
.solutionArea li {
	width: 91.46%;
	margin: 0 auto 7.33%;
	background-color: #FFF;
}

.solutionArea li .solutionArea-problem {
	background-color: #8C8787;
	padding: 6.66% 0;
	position: relative;
}

.solutionArea li .solutionArea-problem::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.94em;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-color: #8C8787 transparent transparent transparent;
  border-width: 1em 11em 0 11em;
}

.solutionArea li .solutionArea-problem p {
	font-weight: 700;
	color: #FFF;
	text-align: center;
	letter-spacing: 0.125em;
}

.solutionArea li .solutionArea-solution {
	margin: 10% 0 0 4%;
	position: relative;
}

.solutionArea li .solutionArea-solution img {
	position: absolute;
    right: -2%;
    bottom: 0;
    width: 27.63%;
}

.solutionArea li:nth-child(2) .solutionArea-solution img {
	right: -8%;
    top: -8%;
    width: 32%;
}

.solutionArea li .solutionArea-solution .solutionArea-solutionhead {
	font-size: 138%;
	letter-spacing: 0.05em;
}

.solutionArea li .solutionArea-solution .solutionArea-solutionhead span {
	display: inline-block;
	background-color: #FFDFE1;
	font-weight: 700;
	margin: 0 0 2% 0;
	padding: 0 1.66%;
}

.solutionArea li .solutionArea-solution p {
	width:70%;
	padding: 1.66% 0 8.06% 1.6%;
}

/*---------------------------------------
flowArea 
----------------------------------------*/
.flowArea .flowBox-offer ol {
	margin-top: -10%;
}

.flowArea .flowBox-offer li {
    background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_stroke.png) center bottom no-repeat;
    background-size: 92% auto;
	padding: 0 0 7%;
}

.flowArea .flowBox-offer li:last-child {
	background:none;
	padding:0;
}

.flowArea .flowBox-offer li .flowBlock-number img {
	width: 26.26%;
	margin: 7%  auto 10.66%;
	display: block;
}

.flowArea .flowBox-offer li .flowBlock-content01 {
	margin-bottom: 10%;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-tel,
.flowArea .flowBox-offer li .flowBlock-content01 .offer-web {
	border-bottom:0.5em solid #FFDFE1;
	font-size: 138%;
	text-align: center;
	letter-spacing: 0.125em;
	width: 83.33%;
	margin: 0 auto;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-tel span {
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_tel.png) no-repeat 7% 20%;
	background-size: 10.8% auto;
    margin: 0 0 -12% 0;
    display: block;
    width: 82.93%;
    height: 3em;
    padding-left: 12.39%;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-web span {
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_monitor.png) no-repeat 6% 24%;
	background-size: 12.4% auto;
	margin: 0 0 -12% 0;
    display: block;
    width: 82.93%;
    height: 3em;
    padding-left: 14.39%;
}

.flowArea .flowBox-offer li .flowBlock-content01 p {
	width: 83.33%;
	margin: 5% auto 4%;
}

.flowArea .flowBox-offer li .flowBlock-content02 p {
	width: 46.66%;
	float: right;
	margin: 0 10.66% 10.66% 0;
}

.flowArea .flowBox-offer li .flowBlock-content02 img {
	width: 42.13%;
	margin: 0 0 10.66% -5%;
}

.flowArea .flowBox-offer li .flowBlock-content03 p {
	width: 46.66%;
	float: left;
	margin: 0 0 10.66% 8.73%;
}

.flowArea .flowBox-offer li .flowBlock-content03 img {
	width: 49.6%;
	margin: 0 -10% 10.66% 5%;
}

.flowArea .flowBox-offer li .flowBlock-content03 span {
	width: 82.93%;
	border: 2px solid #E40E19;
	display: block;
	text-align: center;
	margin: 0 auto 20%;
	color: #E40E19;
	font-weight: 700;
	padding: 1.66% 0;
	overflow: hidden;
}

.flowArea .flowBox-offerAfter {
	margin: 0 0 7.33% 0;
}

.flowArea .flowBox-offerAfter li {
	width: 44.4%;
	height: 44.4vw;
	border: 5px solid #E5E5E5;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	line-height: 1.5em;
	vertical-align: middle;
	margin: 6% 2% 0 0;
	box-sizing: border-box;
}

.flowArea .flowBox-offerAfter li img {
	background-color: #FFF;
	padding: 0 6%;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number01 {
	width: 40%;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number02 {
	width: 50%;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number03 {
	width: 50%;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number04 {
	width: 55%;
}

.flowArea .flowBox-offerAfter .flowBlock-moving {
	margin: 3% 0 24% 0;
	position: relative;
	text-align: center;
}

.flowArea .flowBox-offerAfter .flowBlock-moving::after {
    margin: 0 0 0 -1.8em;
    position: absolute;
    bottom: -2.5em;
    left: 50%;
    content: "";
    border-style: solid;
    border-width: 1.5em 1.8em 0 1.8em;
    border-color: #E40E19 transparent transparent transparent;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child {
	margin-bottom:0;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child::after {
	display: none;
}

.flowBlock-moving-heading {
    display: block;
    background-color: #D5EBF2;
    width: 23.5em;
    margin: 0 auto 6%;
    font-weight: 700;
    position: relative;
    height: 3em;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child .flowBlock-moving-heading {
    background-color: #FFDFE1;
}

.flowArea .flowBox-offerAfter .flowBlock-moving span {
	font-size: 182%;
	font-weight: 700;
	position: absolute;
	top: -27%;
	left: 34%;
	display: block;
	margin-top: 0%;
}

.flowArea .flowBox-offerAfter .flowBlock-moving span::before {
	content: "";
	position: absolute;
	left: -110%;
	bottom: 75%;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 0 6.5em 8vw 6.5em;
	border-color: transparent transparent #D5EBF2 transparent;
}
.flowArea .flowBox-offerAfter .flowBlock-moving:last-child span::before {
	border-color: transparent transparent #FFDFE1 transparent;
}

.flowArea .flowBox-offerAfter .flowBlock-moving li .flowBlock-number {
	position: relative;
	top:-13%;
}

/*---------------------------------------
faqArea
----------------------------------------*/
.faqArea {
	background-color: #F5F5F5;
	padding-bottom: 7.33%;
}


.faqArea ul{
	margin:0 4.26%;
}
.faqArea .faqBox-q{
	margin-bottom:5%;
	padding-right:15.74%;
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_faq_Q.png) no-repeat right 10%;
	background-size:10.2%;
}
.faqArea li p{
	padding: 4% 5.2%;
	border-radius : 8px;
	text-align: justify;
} 
.faqArea .faqBox-q p{
	background: #FFFFFF;
	position: relative;
	line-height:1.6;
	font-size:107%;
}
.faqArea .faqBox-q p:after{
	content: '';
    width: 0;
    border: .44em solid transparent;
    border-left: .75em solid #FFFFFF;
    position: absolute;
    right: -6%;
    top: 18%;
}
.faqArea .faqBox-a {
	margin-bottom:8%;
	padding-left:15.74%;
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_faq_A.png)no-repeat left 12%;
	background-size:9.2%;
}
.faqArea .faqBox-a p{
	background: #FFDFE1;
	position: relative;
}
.faqArea .faqBox-a p:after{
	content: '';
    width: 0;
    border: .44em solid transparent;
    border-right: .75em solid #FFDFE1;
    position: absolute;
    left: -6%;
    top: 19.8%;
}


/*---------------------------------------
footer
----------------------------------------*/

footer .iso {
	margin: 0 auto 0;
	padding: 6% 4% 6% 5%;
	border-top: 2px solid #C0C0C0;
	border-bottom: 2px solid #C0C0C0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
    align-items: center;
    justify-content: space-between;
}
footer .iso-image {
	width: 32%;
}
footer .iso-image img {
	display: block;
	width: 100%;
	height: auto;
}
footer .iso-text {
	width: 58%;
	font-size: 87%;
	line-height: 1.5;
	color: #666;
}
footer .iso-text strong {
	margin: 0 0 5.6%;
	display: block;
	vertical-align: top;
	line-height: 1.2;
	font-size: 130%;
	font-weight: 700;
	box-sizing: border-box;
	color: #1f1f1f;
}

footer ul {
	font-size: 115%
}
	
footer ul > li {
	border-bottom: solid 1px #C0C0C0;
}

footer ul > li > a {
	padding: 4%;
	display: block;
	width: 100%;
	background-image: url("https://img.phoenix.webcrew.co.jp/17650/denki/images/link_arrow.png");
	background-repeat: no-repeat;
	background-position: top 50% right 15%;
	background-size: 3%;
	text-decoration: none;
	color: #1f1f1f;
}

footer ul > li > a:visited {
	color: #1f1f1f;
}

footer .copyright {
	padding:8.1% 0 5.3%;
	display:block;
	width:100%;
	color:#1f1f1f;
	font-size:80%;
	text-align:center;
	background-color: #f5f5f5;
}

/*---------------------------------------
floatingArea
----------------------------------------*/
.floatingArea {
	display: none;
}

.modal-content.modal-to-step,
.modal-content.modal-cancellation,
.modal-content.modal-other-inquiry,
.modal-content.modal-to-step-other-btn-clicked{
	display: none;
}
.modal-content.modal-to-step.on,
.modal-content.modal-cancellation.on,
.modal-content.modal-other-inquiry.on,
.modal-content.modal-to-step-other-btn-clicked.on{
	display:flex;
}

#modal-overlay {
    z-index: 1001;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.75);
	display: none;
}
#modal-overlay.on {
	display: block;
}


.modal-content {
    width: 90%;
    top: 50%;
    left: 50%;
    padding: 0rem;
    background: #fff;
    position: fixed;
    z-index: 1002;
	min-height: 50vw;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border-radius: 6px;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	gap: 1rem;
}

.modal-content-preface{
	font-size: 91%;
    font-weight: 700;
	text-align: center;
}

.btn-to-td{
	font-size: 100%;
    color: #E40E19;
    font-weight: 500;
    background-color: #FFDFE1;
    width: 90%;
    height: 12vw;
    border-radius: 10px;
    box-shadow: 0 0.2rem 0 0 #E40E19;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #E40E19;
	
	
}#E40E19
.btn-to-td:active{
	position:relative;
	top:4px;
	box-shadow: none;
}

.modal-to-step img{
	width: 100%;
}
.modal-to-step .floatingArea-fd{
	width: 90%;
}
.modal-to-step .businessHours{
	text-align: center;
	font-size:90%;
}
.modal-to-step .businessHours span{
	font-weight: 700;
}
.modal-to-step .modal-case-list{
    width: 90%;
    height: 25vw;
    background: #FFDFE1;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-to-step .modal-case-list li{
	list-style-type: disc;
    font-size:100%;
    font-weight: 700;
    color: #333333;
}
.btn-to-step-area{
	width: 90%;
	display: flex;
	flex-direction: column;
    align-items: center;
    gap: 10px;
}
.btn-to-step-modal-note{
	font-size: 80%;
}

.modal-to-step .btn-to-step-modal{
    font-size: 106%;
    color: #E40E19;
    font-weight: 500;
	background: #FFDFE1;
    width: 100%;
    height: 12vw;
    border-radius: 10px;
    box-shadow: 0 4px 0 0 #E40E19;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #E40E19;
}
.modal-to-step .btn-to-step-modal:active{
	position: relative;
	top:4px;
	box-shadow: none;
}

.modal-to-step .btn-to-step-modal span{
	background-color: #E40E19;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 88%;
    border-radius: 5px;
    margin-right: 15px;
    padding: 2px 5px;
}

.modal-content.modal-to-step{
	padding: 4vw 0;
}

.modal-content.modal-to-step .acArea-fd{
	margin: 0 auto;
    padding: 2.6% 4.7%;
    border-radius: 8px;
    display: block;
    width: 91.46%;
    background-color: #E40E19;
    box-sizing: border-box;
    box-shadow: 0 0.3em 0 0 #A40B13;
}

.modal-content.modal-to-step .acArea-fd-free {
	color: #E40E19;
    font-weight: 700;
    font-size: 100%;
	text-align: center;
    border-radius: 6px;
    margin-right: 2.4%;
    padding: 0.6% 2.3%;
    background-color: #FFFFFF;
    width: 18vw;
}

.modal-content.modal-to-step .businessHours {
    font-size: 79%;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
}

.modal-content.modal-to-step .acArea-tellBlock span{
	letter-spacing: 0em;
}



@media screen and (min-width:751px) {
/*---------------------------------------
common
----------------------------------------*/
body {
	min-width:980px;
}

h2 {
	font-size: 288%;
	text-align: center;
	letter-spacing: 0.125em;
	padding: 77px 0;
}

h2 span {
	display: inline-block;
}

h3 {
	margin: 0 auto;
	padding: 5px 0;
	display: block;
	width: 946px;
	background-color: #8C8787;
	text-align: center;
	z-index: 10;
	position: relative;
	color: #FFF;
	font-weight: 500;
	font-size: 175%;
	letter-spacing: 0.15em;
}
h3::before {
	content: "";
	width: 100%;
	border-top: 20px solid #FFF;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: 5;
	box-sizing: border-box;
}
.flowBox-heading::after {
    padding: 15px 0;
    content: "\00a0";
    display: block;
    width: 980px;
    background-color: #706B6B;
    position: absolute;
    top: -2.5em;
    z-index: 0;
    position: relative;
}

.flowBox-heading span {
  display:inline-block;
  font-weight: 500;
}

p {
	margin-bottom: 0;
}


/*---------------------------------------
header 
----------------------------------------*/
header {
	width: 980px;
	margin: 0 auto;
}

.header-logo {
	margin: 5px 0 0 0;
}

.header-logo img {
	width: 120px;
	height: auto;
}
/*---------------------------------------
catch
----------------------------------------*/
.catch-wrapper {
	background-color: #B9B3B3;
	padding: 8px 0;
}
.catch-message {
    width: 980px;
	font-size: 94.2%;
	margin: auto;
	text-align: center;
    color: #fff;
}
/*---------------------------------------
main 
----------------------------------------*/
.mainpanel {
	background-color: #FFFFFF;
	margin: 0 auto;
}
.mainpanel-wrapper {
	padding: 40px 0;
    width: 980px;
    margin: 0 auto;
	position: relative;
}

.mainpanel-wrapper img{
	width: 180px;
	height: auto;
	position: absolute;
	top: -10px;
	right: -70px;
}

.mainpanel-lead {
	font-size: 138%;
	font-weight: 700;
	position: relative;
	margin: 0 0 25px 97px;
	text-align: left;
	letter-spacing: 0.22em;
}
.mainpanel-lead::before {
    content: "";
    display: block;
    width: 2px;
    height: 36px;
    position: absolute;
    left: -25px;
    top: 5px;
    transform: rotate(-30deg);
}
.mainpanel-lead::after {
	content: "";
	display: block;
	width: 2px;
	height: 36px;
	position: absolute;
	right: 140px;
	top: 5px;
	transform: rotate(30deg);
}

.mainpanel-lead span {
	display: inline-block;
	letter-spacing: 0.22em;
	font-weight: 700;
}

.mainpanel .mainpanel-head p {
    width: 780px;
    font-size: 188%;
    font-weight: 700;
    color: #FFFFFF;
    background-color: #E40E19;
    border-radius: 3px;
    text-align: center;
    letter-spacing: 0.5em;
    margin: 0 0 0 65px;
}

.mainpanel h1 {
	font-size: 338%;
	font-weight: 700;
	line-height: 1.4;
	margin: 8px 0 0 65px;
	letter-spacing: 0.038em;
}

.mainpanel h1 span {
	display: inline-block;
	font-weight: 700;
}

.mainpanel .mainpanel-merit {
	background-color: #FFD1D5;
	text-align: center;
}

.mainpanel .mainpanel-merit li {
    background-color: #FFDFE1;
	;
    margin: 0 80px 0 0;
    transform: skew(-35deg);
    width: 342px;
    padding: 0 0 0;
    display: inline-block;
    letter-spacing: 0;
    height: 89px;
}
.mainpanel .mainpanel-merit li:last-child {
	margin-right: 0;
}
.mainpanel .mainpanel-merit li p {
	color: #000;
	font-weight: 700;
	text-align: center;
	transform: skew(35deg);
	font-size: 113%;
	padding:13px 0;
}
.mainpanel .mainpanel-merit li p em {
	color: #333333;
	font-size: 120%;
	font-weight: 700;
	letter-spacing: 0.1em;
	display: block;
	margin-top: -5px;
}

/*---------------------------------------
acArea 
----------------------------------------*/
.acArea {
	display: none;
}
/*---------------------------------------
solutionArea 
----------------------------------------*/
.solutionArea {
	background-color: #F5F5F5;
	width: 100%;
	overflow: hidden;
}

.solutionArea ul {
    text-align: center;
    margin: 0 0 115px;
}

.solutionArea li {
	width: 458px;
	margin: 0 60px 0 0;
	background-color: #FFF;
	display: inline-block;
}

.solutionArea li:nth-child(even) {
    margin-right: 0;
}

.solutionArea li .solutionArea-problem {
	background-color: #8C8787;
	padding: 10px 0;
	position: relative;
}
.solutionArea li .solutionArea-problem > p {
	display: none;
}
.solutionArea li .solutionArea-problem::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-color: #8C8787 transparent transparent transparent;
  border-width: 20px 229px 0 229px;
}

.solutionArea li .solutionArea-problem p {
	font-weight: 700;
	color: #FFF;
	text-align: center;
	letter-spacing: 0.15em;
	font-size: 113%;
}

.solutionArea li .solutionArea-solution {
	margin: 50px 0 0 30px;
	position: relative;
	text-align: left;
}

.solutionArea li .solutionArea-solution img {
	position: absolute;
	right: -23px;
	bottom: 0;
	width: 120px;
}

.solutionArea li:nth-child(2) .solutionArea-solution img {
	right: -36px;
	top: -22px;
	width: 142px;
}

.solutionArea li .solutionArea-solution .solutionArea-solutionhead {
	font-size: 138%;
	letter-spacing: 0.05em;
}

.solutionArea li .solutionArea-solution .solutionArea-solutionhead span {
	display: inline-block;
	background-color: #FFDFE1;
	;
	font-weight: 700;
	margin: 0 0 5px 0;
	padding: 0 10px;
	font-size: 119%;
}

.solutionArea li .solutionArea-solution p {
	width: 308px;
	padding: 25px 0 50px 10px;
	font-size: 95%;
}

/*---------------------------------------
flowArea 
----------------------------------------*/
.flowArea {
    width: 980px;
    margin: 0 auto;
}

span.flowArea-h2 {
	margin-left: 50px;
}

.flowArea .flowBox-offer ol {
    display: flex;
    justify-content: space-between;
    margin: 0 0 100px;
}

.flowArea .flowBox-offer li {
    margin: 0 65px 0 0;
	background:none;
	padding: 0;
}

.flowArea .flowBox-offer li:last-child {
    margin-right: 0;
	padding: 0;
}

.flowArea .flowBox-offer li .flowBlock-number img {
	width: auto;
	height: 76px;
	margin: 0 auto;
	display: block;
}
.flowArea .flowBox-offer li:nth-child(2) .flowBlock-number img {
	height: 76px;
}
.flowArea .flowBox-offer li:nth-child(3) .flowBlock-number img {
	height: 76px;
}
.flowArea .flowBox-offer li .flowBlock-content01 {
    width: 284px;
    border: 5px solid #E5E5E5;
    box-sizing: border-box;
    height: 344px;
	margin: 0;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-tel,
.flowArea .flowBox-offer li .flowBlock-content01 .offer-web {
	border-bottom:12px solid #FFDFE1;
	font-size: 113%;
	text-align: center;
	letter-spacing: 0.125em;
	width: 220px;
	margin: 0 auto;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-tel {
	margin-top: 48px;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-tel span {
    margin: 0 0 -16px 10px;
	padding-left: 24px;
    display: block;
    background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_tel.png) no-repeat left 0;
    background-size: 30px auto;
    width: auto;
    height: 38px;
}

.flowArea .flowBox-offer li .flowBlock-content01 .offer-web span {
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_monitor.png) no-repeat left 4px;
	background-size: 46px auto;
    margin: 0 0 -40px 16px;
    display: block;
    width: 300px;
    height: 65px;
    padding-left: 10px;
}

.flowArea .flowBox-offer li .flowBlock-content01 p {
	width: 220px;
	margin: 30px auto;
}

.flowArea .flowBox-offer li .flowBlock-content02 {
    width: 284px;
    height: 344px;
    border: 5px solid #E5E5E5;
    box-sizing: border-box;
    position: relative;
}


.flowArea .flowBox-offer li .flowBlock-content02 p {
	width: 220px;
	float: none;
	margin: 50px auto 0;
}

.flowArea .flowBox-offer li .flowBlock-content02 img {
	width: 163px;
	margin: 0;
	position: absolute;
	bottom: -44px;
	left: -30px;
}

.flowArea .flowBox-offer li .flowBlock-content03 {
    width: 284px;
    height: 344px;
    border: 5px solid #E5E5E5;
    box-sizing: border-box;
    position: relative;
}

.flowArea .flowBox-offer li .flowBlock-content03 p {
	width: 220px;
	float: none;
	margin: 50px auto 0;
}

.flowArea .flowBox-offer li .flowBlock-content03 img {
	width: 214px;
	margin: 0;
	position: absolute;
	bottom: 15px;
	right: -10px;
}

.flowArea .flowBox-offer li .flowBlock-content03 span {
	width: 296px;
	background-color: #FFF;
	border: 2px solid #E40E19;
	display: block;
	text-align: center;
	margin: 0;
	color: #E40E19;
	font-weight: 700;
	padding: 1.66% 0;
	overflow: hidden;
	position: absolute;
	bottom: -43px;
	left: -14px;
}

.flowArea .flowBox-offerAfter {
	margin: 0;
}

.flowArea .flowBox-offerAfter ol {
    margin: 60px 0 0;
}

.flowArea .flowBox-offerAfter li {
	width: 218px;
	height: 218px;
	border: 5px solid #E5E5E5;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	line-height: 1.5em;
	vertical-align: middle;
	margin: 0 15px 0 0;
	box-sizing: border-box;
}

.flowArea .flowBox-offerAfter li:last-child {
	margin-right: 0;
}

.flowArea .flowBox-offerAfter li img {
	background-color: #FFF;
	padding: 0 10px;
}


.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number01 {
	width: 85px;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number02 {
	width: 107px;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number03 {
	width: 108px;
}

.flowArea .flowBox-offerAfter li .flowBlock-number .flowBlock-number04 {
	width: 123px;
}

.flowArea .flowBox-offerAfter .flowBlock-moving {
	margin: 40px 64px 100px 0;
	position: relative;
	text-align: center;
	display: inline-block;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child {
    margin-right: 0;
}

.flowArea .flowBox-offerAfter .flowBlock-moving::after {
    margin: 0 0 0 -20px;
    position: absolute;
    bottom: 90px;
    left: 500px;
    content: "";
    border-style: solid;
    border-width: 24px 24px 24px;
    border-color: transparent transparent transparent #E40E19;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child {
	margin-bottom:0;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child::after {
	display: none;
}

.flowBlock-moving-heading {
    display: block;
    background-color: #DDEEF8;
    width: 456px;
    margin: 0 auto;
    position: relative;
    height: 60px;
}
.flowArea .flowBox-offerAfter .flowBlock-moving:last-child .flowBlock-moving-heading {
    background-color: #FFDFE1;
}

.flowArea .flowBox-offerAfter .flowBlock-moving span {
	font-size: 182%;
	font-weight: 700;
	position: absolute;
	top: 2px;
	left: 175px;
	display: block;
	margin-top: -15px;
}

.flowArea .flowBox-offerAfter .flowBlock-moving span::before {
	content: "";
	position: absolute;
	left: -175px;
	bottom: 39px;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 0 229px 50px 229px;
	border-color: transparent transparent #DDEEF8 transparent;
}

.flowArea .flowBox-offerAfter .flowBlock-moving:last-child .flowBlock-moving-heading span::before {
	border-color: transparent transparent #FFDFE1 transparent;
}

.flowArea .flowBox-offerAfter .flowBlock-moving li .flowBlock-number {
	position: relative;
	top: -30px;
}

/*---------------------------------------
faqArea
----------------------------------------*/
.faqArea {
	padding-bottom: 0;
}
.faqArea .faqBox {
	margin:-111px 0 0;
	padding: 100px 0 72px;;
}
.faqArea ul {
	margin: 0 auto;
	width: 893px;
}
.faqArea .faqBox-q {
	margin: 0 0 10px 104px;
	padding-right: 103px;
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_faq_Q.png) no-repeat;
	background-size: 65px auto;
	background-position: right 0 top 10px; 
}
.faqArea .faqBox-a {
	margin: 0 103px 32px 0;
	padding-left: 104px;
	background: url(https://img.phoenix.webcrew.co.jp/17650/denki/images/denkilp_faq_A.png) no-repeat;
	background-size: 54px auto;
	background-position: top 14px left 4px;
}
.faqArea li p{
	padding: 27px 32px 30px;
	border-radius: 8px;
}
.faqArea .faqBox-q p{
	background-color: #fff;
}
.faqArea .faqBox-q p:after {
    content: '';
    width: 0;
    border: 10px solid transparent;
    border-left: 20px solid #FFFFFF;
    position: absolute;
    right: -27px;
    top: 32px;
}

.faqArea .faqBox-a p:after {
    content: '';
    width: 0;
    border: 10px solid transparent;
    border-right: 20px solid #FFDFE1;
    position: absolute;
    left: -27px;
    top: 32px;
}

/*---------------------------------------
floatingArea
----------------------------------------*/
.floatingArea {
	display: block;
	background: rgba(255,255,255,0.92);
	position: fixed;
	z-index: 1000;
	bottom: 0;
	width: 100%;
	padding: 16px 0;
}
.floatingArea .floatingArea-wrapper {
	width: 980px;
	margin: 0 auto;
}
.floatingArea .floatingArea-fd {
	width: 525px;
	float: left;
}

.floatingArea .floatingArea-fd img {
	width: 522px;
}

.floatingArea .floatingArea-buttom {

}

.floatingArea .floatingArea-fd .fd-number {
	margin: 10px 0 0 0;
}

.floatingArea .floatingArea-fd .businessHours {
	font-size: 113%;
	text-align: center;
	letter-spacing: 0.095em;
	margin-top: -5px;
}

.floatingArea .floatingArea-fd .businessHours span {
	font-weight: 700;
}

.floatingArea .floatingArea-fd .noteTxt {
	text-align: center;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox  {
	display: flex;
	justify-content: center;
	height: 79px;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a {
	font-size: 28px;
	color: #FFF;
	font-weight: 500;
	background-color: #E40E19;
	width: 580px;
	height: 92%;
	border-radius: 10px;
	box-shadow:0 7px 0 0 #A40B13;
	display: flex;
	justify-content: center;
	align-items: center;

}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a:active {
	position: relative;
	top: 8px;
	box-shadow: none;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a:hover {
	opacity: 0.8;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a span {
	background-color: #FFFFFF;
	color: #E40E19;
	font-weight: 700;
	font-size: 93%;
	border-radius: 5px;
	margin-right: 15px;
	padding: 0 16px;
}
.floatingArea .floatingArea-buttom .floatingArea-buttomBox .floatingArea-other-btns a span {
	color: #FFFFFF;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a span.caution{
	background: none;
	font-size: 52%;
	font-weight:normal;
}

.floatingArea .floatingArea-buttom p {
	margin: 15px 0 0 0;
	text-align: center;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox .floatingArea-other-btns{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a.btn-cancellation{
	font-size: 24px;
    color: #FFFFFF;
    font-weight: 500;
    background-color: #B9B3B3;
    width: 409px;
    height: 48px;
    border-radius: 10px;
    box-shadow: 0 4px 0 0 #8C8787;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #B9B3B3;
	flex-direction: column;
    height: 70px;
    line-height: 1.5rem;
}
.floatingArea .floatingArea-buttom .floatingArea-buttomBox a.btn-cancellation:active{
	position: relative;
	top: 4px;
	box-shadow: none;
}

.floatingArea .floatingArea-buttom .floatingArea-buttomBox a.btn-other-inquiry{
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 500;
    background-color: #B9B3B3;
	;
    width: 409px;
    height: 48px;
    border-radius: 10px;
    box-shadow: 0 4px 0 0 #8C8787;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	border: 2px solid #B9B3B3;
	height: 70px;
	line-height: 1.5rem;
}
.floatingArea .floatingArea-buttom .floatingArea-buttomBox a.btn-other-inquiry:active{
	position: relative;
	top: 4px;
	box-shadow: none;
}

/*---------------------------------------
footer
----------------------------------------*/
footer {
	margin-bottom: 195px;
}
footer .iso {
	margin: 0 auto;
	padding: 25px 0;
	border-top: 0px;
	border-bottom: 0px;
	width: 900px;
	box-sizing: border-box;
}
footer .iso-image {
	margin-left: 50px;
	width: 217px;
}
footer .iso-image img {
	display: block;
	height: auto;
}
footer .iso-text {
	width: 565px;
	font-size: 94%;
	line-height: 1.5;
	color: #1F1F1F;
}
footer .iso-text strong {
	margin: 0 0 10px;
	display: block;
	vertical-align: top;
	line-height: 1.2;
	font-weight: 500;
	box-sizing: border-box;
	color: #1F1F1F;
	font-size: 138%;
}

footer ul {
	padding: 46px 0;
	background-color: #333333;
	text-align: center;
	font-size: 113%;
}

footer ul > li {
	border-bottom: 0;
	display: inline-block; 
	padding: 0 25px;
}

footer ul > li > a {
	padding: 0;
	display: inline-block;
	background: none;
	color: #FFF;
}

footer ul > li > a:visited {
	color: #FFF;
}

footer ul > li > a:hover {
	text-decoration: underline;
}
	
footer .copyright {
	margin: 0 auto;
	padding: 22px 0;
	display: block;
	background-color: #f5f5f5;
	font-size: 107%;
	color: #1F1F1F;
	text-align: center;
}

.modal-content {
    width: 480px;
    padding: 20px 0;
    width: 500px;
	min-height: 208px;
	gap:24px;
}

.modal-content-preface{
	font-size: 18px;
    font-weight: 700;
}

.btn-to-td{
	font-size: 18px;
    width: 344px;
    height: 56px;
	background: #FFDFE1;
    box-shadow: 0 4px 0 0 #E40E19;
}

.modal-to-step img{
	width: 100%;
}
.modal-to-step .floatingArea-fd{
	width: 448px;
}
.modal-to-step .businessHours{
	font-size:15px;
}

.modal-to-step .modal-case-list{
    width: 344px;
    height: 88px;
}
.modal-to-step .modal-case-list li{
    font-size: 18px;
    font-weight: 700;
}
.btn-to-step-area{
	display: flex;
	flex-direction: column;
    align-items: center;
    gap: 10px;
}

.modal-to-step .btn-to-step-modal{
	font-size: 17px;
	width: 454px;
	height: 52px;
	background: #FFDFE1;
}

.modal-content.modal-to-step .acArea-fd-free{
	font-size: 150%;
	width: 80px;
}
}