@charset "UTF-8";

.header_title h1::before{content: "CALL CENTER";font-size: 3.75rem;color: #fff;width: 100%;text-align: center;line-height: 1.7;font-weight: bold;font-family: 'Shippori Mincho', serif;position: relative;opacity: 0.3;display: block;}

#general,#mobile-ip,#tourism,#demand,#freedial{scroll-margin-top: 100px;}

.contents_callcenter .wrapper{max-width: 1080px;}
.cont_callcenter{padding-bottom: 20px;}

.area_first{text-align: center;font-family: 'Shippori Mincho',serif;font-size: 1.5625rem;padding-top: 73px;padding-bottom: 75px;padding-right: 20px;padding-left: 20px;}
.area_first span{display: block;font-family: 'Noto Sans JP',sans-serif;font-size: 0.9375rem;margin-top: 20px;}

.cont_callcenter section:not(.callcenter_system){padding-bottom: 50px;}
.cont_callcenter section:not(.callcenter_system) h2 {font-size: 1.5625rem;font-family: 'Shippori Mincho', serif;text-align: center;margin-bottom: 40px;padding-bottom: 20px;position: relative;}
.cont_callcenter section:not(.callcenter_system) h2::after{content: "";display: block;width: 70px;height: 1.6px;background: #C89E45;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}

.callcenter_system{padding-bottom: 70px;}
.callcenter_system .wrapper{background: #FFF9F0;padding: 40px;max-width: 1080px;}
.callcenter_system .wrapper .cont{display: flex;gap: 0 40px;align-items: center;}
.callcenter_system .wrapper .cont h2{max-width: 300px;width: 100%;}
.callcenter_system .wrapper .cont h2 img{width: 100%;}
.callcenter_system .wrapper .cont h3{font-weight: 500;margin-bottom: 10px;}
.callcenter_system .wrapper .cont .text{font-size: 0.9375rem;line-height: 1.7;}
.callcenter_system .wrapper .cont .text span{display: block;margin-top: 10px;text-align: right;font-size: 0.8125rem;}

.contents_callcenter h3{font-size: 1.25rem;} 

.tel_list{margin-top: 20px;margin-bottom: 30px;}
.tel_list li{display: grid;grid-template-columns: 60% 40%;height: 56px;align-items: center;}
.tel_list li:nth-of-type(odd){background: rgb(0 104 136 / .1);}
.tel_list li .areaname{font-size: 1.25rem;color: #006888;line-height: 22px;padding:0 40px;}

.tel_type2 .tel_list li .areaname{text-align: left;padding-left: 20px;}
.tel_list li .areaname span.icon{font-size: 0.8125rem;display: inline-block;background: #00405C;padding: 0 10px;color: #FFF;margin-left: 15px;border-radius: 5px;letter-spacing: 0;}

.tel_list li .tel{color: #006888;font-weight: 500;font-size: 1.25rem;font-weight:bold;text-align: center;}
.tel_list li .tel a{text-decoration: none;color: #006888;}

.callcenter_general h3{text-align: center;color: #fff;border-radius: 100vh;line-height: 46px;margin: 0 auto 35px;position: relative;width: 70%;}
.callcenter_general .tel_type1 h3{background: #D36E7E;}
.callcenter_general .tel_type2 h3{background: #72AF2C;}
.callcenter_general .tel_type1 .tel{padding-left: 50px;}
.callcenter_general h3::after{content: "";width: 42px;height: 38px;display: block;clip-path: polygon(100% 0, 0 0, 50% 100%);position: absolute;bottom: -17px;left: 50%;transform: translateX(-50%);z-index: -1;}
.callcenter_general .tel_type1 h3::after{background: #D36E7E;}
.callcenter_general .tel_type2 h3::after{background: #72AF2C;}
.callcenter_general .tel_type2{padding-top: 20px;}
.callcenter_general .tel_type2 .tel span{position: relative;display: inline-block;padding-left: 50px;}
.callcenter_general .tel_type2 .tel span::before{content: "";display: block;width: 36px;height: 20px;background: url(../img/freedial.svg) no-repeat;background-size: cover;position: absolute;left: 0px;top: 5px;}

.callcenter_demand .tel_list li .areaname{display: flex;align-items: center;justify-content: space-between;}
.tel_type1 .note{font-size: 0.9375rem;font-weight: 500;padding-top: 20px; border-top: 1px dotted #CCC;}

.tel_list li .areaname br{display: none;}

.app_list{display: flex;max-width: 680px;margin: 0 auto;align-items: center;}
.app_list p{width: 50%;}

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

    .cont_callcenter{padding-bottom: 0;}
    .header_title h1{margin-top: -5px;}
    .header_title h1::before{font-size: 2.25rem;top: 5px;}
    .area_first{font-size: 1.25rem;padding-top: 35px;padding-bottom: 30px;}
    .area_first span{font-size: 0.875rem;}

    .callcenter_system{padding-bottom: 35px;}
    .callcenter_system .wrapper{padding: 40px 20px;}
    .callcenter_system .wrapper .cont{flex-direction: column;gap: 20px 0;}

    .callcenter_general h3{line-height: 1.3;font-size: 1.125rem;padding: 15px 30px 14px;width: auto;}
    .callcenter_system .wrapper .cont .text span{font-size: 0.6875rem;}

    .cont_callcenter section:not(.callcenter_system){padding-bottom: 30px;}
    .cont_callcenter section:not(.callcenter_system) h2{font-size: 1.25rem;margin-bottom: 20px;}

    .tel_list li{display: flex;justify-content: space-between;padding-right: 20px;padding-left: 20px;}
    .tel_list li .areaname{font-size: 0.9375rem;padding: 0;letter-spacing: 0;}

    .callcenter_demand .tel_list li .areaname{justify-content: start;}
    .tel_list li .areaname span.icon{font-size: 0.625rem;display: inline-block;padding: 0 10px;letter-spacing: 0;}
    .callcenter_general .tel_type1 .tel{padding-left: 0;text-align: right;}
    .tel_type1 .note{font-size: 0.75rem;}

    .tel_type2 .tel_list li{flex-direction: column;height: auto;}
    .tel_type2 .tel_list li .areaname,.tel_type2 .tel_list .tel{width: 100%;}
    .tel_type2 .tel_list li .areaname{padding-top: 15px;padding-right: 0;padding-left: 0;font-size: 0.9375rem;}
    .tel_type2 .tel_list .tel{padding: 5px 0 10px;text-align: left;}

}

@media screen and (max-width:500px) {
    .callcenter_demand .tel_list li .areaname{flex-direction: column;}
    .tel_list li .areaname span.icon{margin-left: 0;}
    .tel_list li .areaname br{display: block;}
}

@media screen and (min-width:768px) and (max-width:1080px) {

}

@media screen and (min-width:1081px) {

}