@charset 'UTF-8';

#wrap{
overflow: hidden;
}
.contents{
padding: 0;
}
.contents .contents_wrap {
max-width: none;
}
.contents .contents_inner {
padding: 0;
}

@media screen and (max-width:767px){
#footer {
padding-top: 0;
}
}

/*===========================================
h1Block
===========================================*/
.h1Block{
padding: 0 20px;
}
.h1Block .h1Block_wrap{
max-width: 1000px;
margin: auto;
}
.h1Block .h1Block_inner{
padding: 3% 0;
}

@media screen and (max-width:767px){
.h1Block .h1Block_inner{
padding: 7.5% 0;
}
}

/*===========================================
mv
===========================================*/
.mv{
padding: 0 20px;
background: url(/customer/image/index_mv_01.jpg) center no-repeat;
background-size: cover;
}
.mv .mv_wrap{
max-width: 1000px;
min-height: 400px;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: auto;
}
.mv .mv_inner{
flex-basis: 500px;
}
.mv .txt > *{
line-height: 2;
font-weight: bold;
}
.mv .anchor{
margin-top: 2em;
}
.mv .anchor .ttl{
border: 2px solid #E30934;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0.5em 0;
background: #E30934;
}
.mv .anchor .ttl > *{
font-size: 2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.mv .anchor .list{
border: 2px solid #E30934;
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1em;
background: #fff;
}
.mv .anchor .list ul{
display: flex;
justify-content: space-around;
}
.mv .anchor .list a{
position: relative;
display: block;
padding-bottom: 10px;
color: #E30934;
text-align: center;
}
.mv .anchor .list a:after{
transform: rotate(135deg);
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid #E30934;
border-right: 2px solid #E30934;
}
.mv .anchor .list li img{
width: 74px;
margin-bottom: 0.5em;
}
@media screen and (max-width:767px){
.mv{
background: #fff;
}
.mv .mv_wrap{
min-height: auto;
}
.mv .anchor{
margin-top: 3em;
}
.mv .anchor .ttl > *{
font-size: 1.8rem;
}
.mv .anchor .list{
padding: 1em 0;
}
.mv .anchor .list li img{
width: 72px;
}
}

/*===========================================
info
===========================================*/
.info{
position: relative;
padding: 0 20px;
}
.info .info_wrap{
max-width: 1000px;
margin: auto;
}
.info .info_inner{
position: relative;
padding: 3% 0 0 0;
}
/*
.info .info_inner:before,
.info .info_inner:after,
.info .info_bg:before,
.info .info_bg:after{
content: '';
display: block;
position: absolute;
background: center no-repeat;
background-size: contain;
}
.info .info_inner:before{
transform: translateX(-100%);
top: -160px;
left: -100px;
width: 372px;
height: 372px;
background-image: url(/customer/image/index_bg04_1.png);
}

.info .info_inner:after{
transform: translateX(200%);
top: 0;
right: 0;
width: 233px;
height: 233px;
background-image: url(/customer/image/index_bg04_2.png);
}
.info .info_bg:before{
transform: translateX(-100%);
width: 253px;
height: 253px;
left: -30px;
bottom: -80px;
background-image: url(/customer/image/index_bg04_3.png);
}
.info .info_bg:after{
transform: translateX(90%);
bottom: -100px;
right: 0;
width: 308px;
height: 308px;
background-image: url(/customer/image/index_bg04_4.png);
  z-index: 0;
}
*/
.info .info_block{
position: relative;
z-index: 1;
}
.info .info_block .mod_ttl_02:first-child{
margin-top: 0;
}
.info .table .ttl{
width: 6em;
font-weight: bold;
}
.info .list{
margin-top: 2em;
border: none;
}
.info .list .mod_list_faq_ttl{
border: none;
}
.info .list .mod_list_faq_ttl + .mod_list_faq_ttl{
margin-top: 1em;
}
.info .list .mod_list_faq_ttl a{
padding-top: 0;
padding-bottom: 0;
padding-left: 75px;
font-size: 1.6rem;
}
.info .list .mod_list_faq_ttl a:before{
top: -0.15em;
}
.info .list .mod_list_faq_ttl a:after{
content: "";
display: block;
position: absolute;
top: 0.55em;
left: 55px;
margin: auto;
transform: rotate(45deg);
width: 8px;
height: 8px;
border-top: 2px solid #e30934;
border-right: 2px solid #e30934;
}
.info .btn{
width: 100%;
max-width: 300px;
margin: 2em auto 0 auto;
}
.info .cus_com {
        padding: 3em 0 6em 0;
}
.info .cus_com .mod_flex{
    margin-top: 2em;
}
.info .cus_com .mod_flex .img_sec{
    flex-basis: 292px;
}
.info .cus_com .mod_flex .txt_sec{
    flex-basis: calc((100% - 334px));
}
.info .info_HDI.mod_flex .img_sec{
    flex-basis: 200px;
    margin-right: 20px;
}
.info .info_HDI.mod_flex .txt_sec{
    flex-basis: calc((100% - 240px));
}
.info .mod_itemList_2_1 .info_HDI.mod_flex{
  align-items: center; 
  margin-top: 20px;
 }


.info .cus_com .ttl > p{
font-size: 2rem;
font-weight: bold;
  margin-top: 1em;
}
.info .cus_com .ttl span{
font-size: 1.6rem;
margin-left: 0.5em;
}
@media screen and (max-width:767px){
.info .cus_com {
        padding-bottom: 0;
}  
  .info .cus_com .mod_flex .img_sec{
    flex-basis: 100%;
}
.info .cus_com .mod_flex .txt_sec{
    flex-basis: 100%;
}
.info .info_HDI.mod_flex .img_sec{
  flex-basis: 60%;
  margin: 0;
}
.info .info_HDI.mod_flex .txt_sec{
  flex-basis: 100%;
}
.info .mod_itemList_2_1 .info_HDI.mod_flex{
 justify-content: center; 
}


.info .info_block .mod_ttl_02:first-child{
margin-top: 1em;
}
.info .info_inner{
padding: 2em 0 6em 0;
}
/*
.info .info_inner:before,
.info .info_inner:after,
.info .info_bg:before,
.info .info_bg:after{
content: normal;
}
*/
.info .table .ttl{
font-weight: normal;
}
.info .list .mod_list_faq_ttl a{
padding-left: 65px;
font-size: 1.5rem;
}
.info .list .mod_list_faq_ttl a:after {
left: 45px;
}
.info .table .txt{
margin-top: 0.5em;
padding: 0;
}
}

/*===========================================
contact
===========================================*/
.contact{
padding: 0 20px;
background-color: #fff;
background: 
url(/customer/image/index_bg_01.png) center repeat,
linear-gradient(90deg, rgba(227,9,52,0.06) 0%, rgba(239,141,24,0.06) 100%);
}
.contact .contact_wrap{
max-width: 1000px;
margin: auto;
}
.contact .contact_inner{
padding: 6% 0;
}
.contact .mod_flex > *{
background: #fff;
}
.contact .comu_sec .mod_flex > *{
background: transparent;
}
.contact .mod_box{
position: relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 1.5em;
z-index: 1;
}
.contact .ttl > *{
font-size: 2.8rem;
font-weight: bold;
text-align: center;
}
.contact .mod_ttl_04{
margin-top: 0.5em;
}
.contact .mod_ttl > *{
font-size: 1.6rem;
}
.contact .ttl02 > *{
position: relative;
padding-left: 65px;
font-size: 2.8rem;
}
.contact .ttl02 img{
position: absolute;
width: 55px;
height: 34px;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
.contact .note{
margin-top: 1em;
}
.contact .note li{
font-size: 1.4rem;
}
.contact .mod_itemList_2_1{
margin-top: 5%;
}
.contact .tel {
position: relative;
box-shadow: 5px 5px 10px 0 rgba(235,69,69,0.05);
}
.contact .tel:after,
.contact .mail:after,
.contact .post:after{
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #E6E6E6;
}
.contact .tel .txt{
margin-top: 1em;
text-align: center;
}
.contact .tel .txt > *{
display: inline-block;
text-align: left;
}
.contact .tel .no{
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-shrink: 1;
margin: 1em auto 0 auto;
}
.contact .tel .no > *{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.contact .tel .no p{
font-size: 1.4rem;
}
.contact .tel .no p:first-child{
width: 8.5em;
padding-right: 0.5em;
white-space: nowrap;
text-align: left;
}
.contact .tel .no a{
color: #E30934;
text-decoration: none;
}
.contact .tel .no strong{
position: relative;
padding-left: 50px;
font-size: 3.2rem;
line-height: 1.6;
color: #E30934;
font-weight: bold;
white-space: nowrap;
letter-spacing: -2px;
}
.contact .tel .no strong:after{
content: '';
display: block;
position: absolute;
width: 52px;
height: 30px;
top: 0;
bottom: 0;
left: auto;
right: auto;
margin: auto;
background: url(/customer/image/icon_free.svg) center no-repeat;
background-size: contain;
}
.contact .mail {
position: relative;
box-shadow: 5px 5px 10px 0 rgba(235,69,69,0.05);
}
.contact .mail .txt{
margin-top: 0.5em;
text-align: center;
}
.contact .mail .txt span{
font-size: 1.4rem;
font-weight: normal;
}
.contact .mail .btn + .txt{
margin-top: 2.5em;
}
.contact .mail .btn{
margin-top: 1em;
}
.contact .post{
position: relative;
margin-top: 40px;
padding-bottom: 1em;
background: #fff;
box-shadow: 5px 5px 10px 0 rgba(235,69,69,0.05);
}
.contact .post .mod_itemList_2_1 {
position: relative;
margin-top: 0;
z-index: 1;
}
.contact .post .txt{
margin-top: 0.5em;
}
.contact .post .box{
margin-left: 2em;
border: none;
padding: 1em 20px;
}
.contact .tel .ttl02 > *:before{
background-image: url(/customer/image/icon_tel.svg);
}
.contact .mail .ttl02 > *:before{
background-image: url(/customer/image/icon_mail.svg);
}
.contact .post .ttl02 > *:before{
background-image: url(/customer/image/icon_post.svg);
}

@media screen and (max-width:767px){
.contact{
background-size: 40px, 100%;
}
.contact .contact_inner{
padding: 3em 0 5em 0;
}
.contact .note{
margin-top: 2em;
}
.contact .mod_itemList_2_1{
margin-top: 2em;
}
.contact .mod_itemList_2_1 .mod_flex > *:nth-of-type(n + 2) {
margin-top: 20px;
}
.contact .ttl02 > *{
font-size: 3rem;
}
.contact .mod_ttl > *{
font-size: 1.5rem;
}
.contact .tel .txt > *{
font-size: 1.2rem;
}
.contact .tel .no{
display: block;
}
.contact .tel .no > * {
display: block;
}
.contact .tel .no > * + *{
margin-top: 0.5em;
}
.contact .tel .no p {
display: block;
}
.contact .tel .no p:first-child {
text-align: left;
}
.contact .tel .no strong{
font-size: 3rem;
line-height: 1.4;
}
.contact .tel .note {
margin-top: 1em;
}
.contact .post{
margin-top: 20px;
}
.contact .post .box{
margin-left: 0;
}
}
/*===========================================
relation
===========================================*/
.relation{
position: relative;
padding: 0 20px;
}
.relation:before,
.relation:after{
content: '';
display: block;
position: absolute;
background: center no-repeat;
background-size: contain;
}
.relation:before{
right: 0;
top: 0;
width: 318px;
height: 317px;
background-image: url(/customer/image/index_bg_02.png);
}
.relation:after{
left: 0;
bottom: 0;
width: 376px;
padding-top: 317px;
background-image: url(/customer/image/index_bg_03.png);
}
.relation .relation_wrap{
max-width: 1000px;
margin: auto;
}
.relation .relation_inner{
position: relative;
padding: 5% 0 100px 0;
z-index: 1;
}
.relation .mod_itemList_3_2 a{
display: block;
}
.relation .mod_itemList_3_2 img{
margin-bottom: 0.5em;
}
.relation .box{
padding: 20px;
border-color: #E30934;
background: #fff;
}
.relation .communication{
margin-top: 3em;
}
.relation .communication .ttl > p{
font-size: 2rem;
font-weight: bold;
}
.mod_data .ttl > p{
font-size: 2rem;
font-weight: bold;
text-align: left;
}
.relation .communication .ttl span{
font-size: 1.6rem;
margin-left: 0.5em;
}
.relation .communication .btn{
max-width: 300px;
margin: 1em auto 0 auto;
}
.relation .cos_voice .flex_area{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;  
  padding-top: 1em;
  margin-bottom: 5em;
}
.relation .cos_voice .img_sec{
    flex-basis: 184px;
    margin-left: 20px;
    margin-right: 20px;
}
.relation .cos_voice .txt_sec{
  flex-basis: calc((100% - 468px));
  margin-top: 1.5em;
}
.relation .cos_voice .btn{
  width: 100%;
  max-width: 300px;
  margin: 2em auto 0 auto;
}
.relation .cos_voice_h2{
    font-size: 2.8rem;
    font-weight: bold;
}
.relation .cos_voice_h2 h2::before{
    content: '';
    display: inline-block;
    background: url(../image/icon_cos_voice.png) no-repeat left center;
    background-size: 50px;
    width: 65px;
    height: 1.5em;
image-rendering: -webkit-optimize-contrast;
}
.relation .cos_voice_h2 h2{
    font-size: 2.8rem;
    font-weight: bold;
}
@media screen and (max-width:767px){

.relation .cos_voice .img_sec{
    flex-basis: 50%;
    margin-left: 0;
    margin-right: 0;
}
.relation .cos_voice .txt_sec{
  flex-basis: 100%;
}  
.relation:before{
width: 144px;
height: 144px;
}
.relation:after{
width: 160px;
padding-top: 144px;
}
.relation .relation_inner{
padding: 5em 0 100px 0;
}
.relation .box {
padding: 10px;
}
.relation .mod_data{
padding: 0.5em 1em 1.5em 1em;
}
.relation .mod_itemList_3_2 .mod_flex > *:nth-of-type(n + 3){
margin-top: 3em;
}
.relation .mod_itemList_3_2 .mod_flex > *:nth-of-type(2n + 1){
margin-right: 20px;
}
.relation .communication .txt{
margin-top: 0.5em;
}
.relation .communication .btn{
margin-top: 2em;
}
}
.contact .comu_sec .mod_flex{
  background-color: transparent;
}
.communication {
  z-index: 3;
  position: relative;
    margin: 6.25em 0 6.25em 0;    
}


/*  3カラム→2カラム調整 */
.mod_itemList_3_2 .mod_flex.customer_flex{
  justify-content: center;
  }