@charset "UTF-8";

@media print, screen and (min-width:1200px) {

#kvWrap {
position: relative;
width: 100%;
border-top: 107px solid #fff;
overflow: hidden;
}

#kvWrap img {
width: 100%;
}

#kvNote {
position: absolute;
width: 45%;
font-size: 1.4rem;
text-align: justify;
left: 8.5%;
bottom: 32%;
z-index: 1;
}

.btn {
position: relative;
font-family: var(--font-primary);
width: 370px;
height: 70px;
font-size: 2rem;
font-weight: 700;
text-align: left;
padding: 0 0 3px 30px;
cursor: pointer;
border-radius: 10px;
transition: .3s;
overflow: hidden;
}

.btn span {
position: relative;
z-index: 3;
}

.btn::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
right: 30px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 3;
}

.bgleft:before {
background: #00477A;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.bgleft:hover:before{
transform-origin: left top;
transform: scale(1, 1);
}

.btnSimulation {
position: absolute;
background-color: #E85555;
font-family: var(--font-primary);
color: #fff;
border: 1px solid #E85555;
left: 8.5%;
bottom: 18%;
}

.btnSimulation::after {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}

.btnSimulation:hover {
color: #E85555;
}

.btnSimulation:hover.btn::after {
border-top: 2px solid #E85555;
border-right: 2px solid #E85555;
right: 25px;
}

.bgleftSimu:before {
background: #fff;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.bgleftSimu:hover:before{
transform-origin: left top;
transform: scale(1, 1);
}

.btnService {
background-color: #fff;
font-family: var(--font-primary);
color: #00477A;
border: 1px solid #fff;
}

.btnService:hover {
color: #fff;
}

.btnService::after {
border-top: 2px solid #00477A;
border-right: 2px solid #00477A;
}

.btnService:hover.btn::after {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 25px;
}

#indexServiceWrap {
background: url("../img/index_service_bg.jpg") no-repeat center;
background-size: cover;
width: 96%;
margin: 100px auto;
padding: 120px 30px 80px 30px;
border-radius: 20px;
}

.indexServiceFlex {
position: relative;
width: 1200px;
margin: 0 auto;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
}

.indexService {
position: relative;
width: 340px;
color: #fff;
}

.indexService .number {
position: absolute;
width: 80px;
margin: auto;
left: 0;
right: 0;
top: -26px;
z-index: 1;
}

.indexService img {
width: 300px;
margin-bottom: 20px;
}

.indexService h2 {
height: 70px;
font-size: 2.2rem;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
line-height: 1.5;
}

.indexService h2 span {
font-size: 1.2rem;
font-weight: 400;
display: block;
margin-top: 3px;
}

.indexService p {
text-align: justify;
margin-bottom: 0;
}

.greenTitle {
position: relative;
background: url("../img/icon_title.png") no-repeat left 3px;
background-size: 15px;
font-size: 1.4rem;
font-weight: 700;
text-align: left;
margin-bottom: 30px;
padding-left: 22px;
letter-spacing: 0;
line-height: 1.5;
}

.greenTitle span {
font-size: 4.4rem;
display: block;
margin-left: -28px;
}

#newsWrapFlex {
width: 1200px;
text-align: justify;
margin: 0 auto;
padding: 80px 0;
display: flex;
justify-content: space-between;
}

#newsWrapFlexCo {
width: 1200px;
text-align: justify;
margin: 0 auto;
margin-bottom: 60px;
padding: 0;
display: flex;
justify-content: space-between;
}

#newsL {
width: 250px;
}

.tabWrap li {
position: relative;
color: #95979E;
display: table;
cursor: pointer; 
line-height: 40px;
white-space: nowrap;
transition: .3s;
}

.tabWrap li a {
color: #95979E;
}

.tabWrap li a:hover,
.tabWrap li:hover {
font-weight: 700;
color: var(--themeColor);
text-decoration: none;
}

.tabWrap li span {
padding-left: 26px;
}

.tabWrap li::before {
position: absolute;
background-color: #95979E;
width: 16px;
height: 2px;
content: "";
margin: auto;
border-radius: 10px;
left: 0;
top: 0;
bottom: 0;
transition: .3s;
}

.tabWrap li:hover::before {
background-color: var(--themeColor);
height: 3px;
}

.tabWrap li.select a,
.tabWrap li.select {
font-weight: 700;
color: var(--themeColor);
}

.tabWrap li.select::before {
position: absolute;
background-color: var(--themeColor);
width: 16px;
height: 3px;
content: "";
margin: auto;
border-radius: 10px;
left: 0;
top: 0;
bottom: 0;
}

.btnS {
position: relative;
background-color: #00477A;
font-family:  var(--font-primary);
width: 178px;
height: 48px;
font-size: 1.6rem;
font-weight: 700;
text-align: left;
color: #fff;
margin-top: 30px;
padding: 0 0 3px 15px;
cursor: pointer;
border-radius: 5px;
border: 1px solid #00477A;
transition: .3s;
overflow: hidden;
}

.btnS span {
position: relative;
z-index: 3;
}

.btnS:hover {
color: #00477A;
}

.btnS::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 15px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 3;
}

.btnS:hover::after {
border-top: 2px solid #00477A;
border-right: 2px solid #00477A;
right: 12px;
}

.bgleftWh:before {
background: #fff;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.bgleftWh:hover:before{
transform-origin: left top;
transform: scale(1, 1);
}

.hide {
display: none;
}

#newsR {
width: 850px;
border-top: 1px solid #95979E;
}

.newsList {
border-bottom: 1px solid #95979E;
}

.newsList a {
padding: 30px 0;
display: block;
text-decoration: none;
transition: .3s;
}

.newsList:hover {
background-color: #fff;
}

.newsList a:hover {
padding: 30px;
}

.newsDaCaFlex {
margin-bottom: 3px;
display: flex;
justify-content: flex-start;
}

.newsCategory {
position: relative;
display: table;
height: 32px;
font-size: 1.2rem;
margin-left: 10px;
padding: 0 20px;
border: 1px solid #00477A;
border-radius: 100px;
line-height: 28px;
top: -4px;
}

#indexWrap {
background-color: #fff;
background-size: cover;
width: 96%;
margin: 100px auto;
padding: 90px 0;
border-radius: 20px;
}

#indexWrap .inner {
position: relative;
width: 1200px;
margin: 0 auto;
padding: 0;
}

#reasonFlex {
margin: 50px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.reason {
background-color: #F0F7FC;
width: 570px;
text-align: center;
margin-bottom: 60px;
padding: 40px 30px;
border-radius: 5px;
}

.reason .number {
font-size: 1.4rem;
font-weight: 700;
color: #00477A;
margin-bottom: 10px;
}

.reason .copy {
background-color: #00477A;
width: auto;
height: 28px;
font-size: 1.4rem;
font-weight: 700;
display: table;
margin: 0 auto;
color: #fff;
padding: 0 20px;
line-height: 26px;
}

.reason h3 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.5;
}

.reason h3 span {
color: #E85555;
}

.reasonImg {
height: 140px;
display: table;
margin: 0 auto;
}

.reasonImg .reasonInner {
width: auto;
height: 90px;
display: table-cell;
vertical-align: middle;
}

.reasonImg .reasonInner img {
height: 90px;
}

.reasonTxt {
width: auto;
text-align: justify;
display: table;
margin: 0 auto;
}

.caseStudyFlex {
margin-top: 50px;
display: flex;
justify-content: space-between;
}

.caseStudyL {
position: relative;
width: 550px;
}

.caseStudyL img {
width: 100%;
height: 348px;
object-fit: cover;
border-radius: 7px;
}

.companyLogo {
position: relative;
background-color: #fff;
width: 208px;
height: 64px;
margin: 0 auto;
padding: 15px 25px;
border-radius: 5px;
z-index: 1;
top: -20px;
}

.companyLogo img {
width: auto;
max-height: 40px;
object-fit: contain;}

.caseStudyR {
width: 570px;
text-align: justify;
}

.caseStudyR h3 {
font-size: 1.7rem;
font-weight: 700;
}

.reduction {
background-color: #f3f3f3;
font-weight: 700;
margin: 25px auto;
padding: 8px 20px 15px 20px;
display: flex;
justify-content: space-between;
border-radius: 5px;
line-height: 40px;
}

.reductionL {
background: url("../img/case_study_ele.png") no-repeat left 7px;
background-size: 40px;
width: 50%;
padding-left: 46px;
}

.reductionR {
background: url("../img/case_study_co2.png") no-repeat left 5px;
background-size: 40px;
width: 50%;
padding-left: 46px;
}

.reductionL span,
.reductionR span {
position: relative;
font-size: 2.8rem;
color: #00AEC4;
margin-left: 8px;
top: 5px;
}

.reductionL i,
.reductionR i {
font-size: 1.8rem;
}

#bottomWrapFlex {
width: 1200px;
text-align: justify;
margin: 0 auto;
padding: 40px 0 140px;
display: flex;
justify-content: space-between;
}

.bottomContents {
background-color: #fff;
width: 368px;
text-align: left;
padding: 44px;
border-radius: 10px;
}

.bottomContents .bcImg {
width: 80px;
height: 80px;
margin: 0 auto;
margin-bottom: 20px;
}

.bottomContents .bcImg img {
width: 100%;
}

.btnW {
position: relative;
background-color: #00477A;
font-family:  var(--font-primary);
width: 100%;
height: 48px;
font-size: 1.6rem;
font-weight: 700;
text-align: left;
color: #fff;
margin-top: 30px;
padding: 0 0 3px 20px;
cursor: pointer;
border-radius: 5px;
border: 1px solid #00477A;
transition: .3s;
overflow: hidden;
}

.btnW span {
position: relative;
z-index: 3;
}

.btnW:hover {
color: #00477A;
}

.btnW::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 15px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 3;
}

.btnW:hover::after {
border-top: 2px solid #00477A;
border-right: 2px solid #00477A;
right: 12px;
}

/**/

#warpTitle {
position: relative;
background: url("../img/title_bg.jpg") no-repeat center;
background-size: cover;
width: 100%;
height: 327px;
border-top: 107px solid #fff;
}

#warpTitle #warpTitleInner {
position: absolute;
background: url("../img/icon_title.png") no-repeat left 3px;
background-size: 15px;
width: 1200px;
font-size: 1.4rem;
font-weight: 700;
text-align: left;
padding-left: 22px;
margin: 0 auto;
letter-spacing: 0;
line-height: 1.5;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

#warpTitle #warpTitleInner span {
font-size: 4.4rem;
display: block;
margin-left: -28px;
}

#breadcrumb {
width: 1200px;
text-align: left;
margin: 0 auto;
margin-bottom: 80px;
padding: 20px 0;
}

#breadcrumb a {
text-decoration: none;
transition: .3s;
}

#breadcrumb a:hover {
opacity: .5;
}

.subTitle {
position: relative;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
padding-left: 24px;
line-height: 1;
}

.subTitle::before {
position: absolute;
background-color: #00477A;
width: 16px;
height: 3px;
content: "";
margin: auto;
border-radius: 10px;
left: 0;
top: 0;
bottom: 0;
}

.subTitle span {
color: #E85555;
}

.subTitle2 {
font-size: 1.7rem;
font-weight: 700;
margin-top: 60px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}

.wrapWh {
position: relative;
background-color: #fff;
width: 1200px;
text-align: left;
margin: 0 auto;
margin-bottom: 120px;
padding: 80px 100px;
border-radius: 10px;
}

.commonTitle {
position: relative;
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 60px;
padding-top: 20px;
line-height: 1.5;
}

.commonTitle::before {
position: absolute;
background-color: #00477A;
width: 30px;
height: 3px;
content: "";
margin: auto;
left: 0;
right: 0;
top: 0px;
}

.commonTitle i {
color: #00AEC4;
}

.commonTitle span {
font-size: 3.3rem;
display: block;
}

.commonTitle u {
color: #E85555;
text-decoration: none;
}

.commonTitle sup {
font-size: 1.2rem;
}

.commonTitle sub {
font-size: 1.2rem;
}

.commonTitle em {
font-size: 1.2rem;
font-weight: 400;
}

.commonTitleNote {
font-size: 1.2rem;
font-weight: 400;
margin-top: -50px;
margin-bottom: 60px;
line-height: 1.6;
}

.wrap {
width: 1200px;
text-align: justify;
margin: 0 auto;
padding: 30px 0;
}

.wrapS {
width: 1000px;
text-align: justify;
margin: 0 auto;
padding: 30px 0;
}

.commonFlex {
position: relative;
display: flex;
justify-content: space-between;
}

.alignItemCe {
align-items: center;
}

/*SERVICE*/

.wrapWh .subTitle {
left: 0;
}

#reductionResults {
position: relative;
width: 197px;
margin: 0 auto;
top: 12px;
z-index: 1;
}

#reductionBgImg {
position: absolute;
width: 226px;
z-index: 1;
top: -90px;
right: 30px;
}

#reductionImg {
width: 854px;
margin: 60px auto;
margin-bottom: 0;
}

#reductionTxt {
position: absolute;
font-size: 1.2rem;
z-index: 1;
left: 160px;
bottom: 66px;
}

.wrapS .subTitle {
left: 0;
}

#planL {
width: 368px;
text-align: justify;
margin: 40px 0 80px;
}

.planMarker {
display: inline-block;
}

#planMarker01,
#planMarker02,
#planMarker03 {
background-color: #95979E;
height: 30px;
color: #fff;
font-weight: 700;
display: inline-block;
margin-right: 5px;
padding: 0 10px;
border-radius: 3px;
line-height: 28px;
}

#planMarker01 {
background-color: #95979E;
}

#planMarker02 {
background-color: #46474A;
}

#planMarker03 {
background-color: #FF9D00;
}

#planR {
width: 570px;
margin: 40px 0 80px;
}

.planTxt {
margin-top: 40px;
}

#planImg01 {
width: 950px;
margin: 40px auto;
margin-bottom: 7px;
}

#planImg02 {
width: 790px;
margin: 40px auto;
margin-bottom: 100px;
}

#planTxtS {
width: 760px;
font-size: 1.2rem;
text-align: right;
margin: 0 auto;
margin-bottom: 100px;
}

#fixedPlanImg {
width: 580px;
margin: 0 auto;
}

#jepxBgImg {
position: absolute;
width: 160px;
z-index: -1;
top: -120px;
left: 150px;
}

#fixedPlanBgImg {
position: absolute;
width: 82px;
z-index: -1;
top: -120px;
left: 200px;
}

#carbonNeutralTitle {
font-size: 2.2rem;
font-weight: 700;
text-align: center;
margin-bottom: 40px;
}

#carbonNeutralTitle span {
color: #E85555;
}

#carbonNeutralImg {
position: absolute;
width: 120px;
z-index: -1;
right: 110px;
top: -114px;
}

.carbonNeutral {
background-color: #fff;
width: 305px;
margin-bottom: 20px;
border-radius: 5px;
}

.carbonNeutral h4 {
background-color: #00477A;
width: 100%;
height: 59px;
font-size: 1.7rem;
font-weight: 700;
color: #fff;
text-align: center;
border-radius: 5px 5px 0 0;
line-height: 56px;
}

.carbonNeutralArrow {
width: 32px;
text-align: center;
margin: 12px auto;
margin-bottom: 0;
}

.carbonNeutral dl {
padding: 10px 22px 20px;
line-height: 1.5;
}

.carbonNeutral dt {
float: left;
padding: 8px 0;
}

.carbonNeutral dd {
padding: 10px 0 10px 24px;
}

.carbonNeutral dd span {
font-weight: 700;
color: #00AEC4;
}

/*Simulation*/

#wrapSimulation {
background-color: #fff;
width: 1000px;
font-size: 1.7rem;
font-weight: 700;
margin: 0 auto;
margin-top: 120px;
padding: 60px;
border-radius: 10px;
}

#wrapSimulation h2 {
background: url("../img/service/simulation_icon.png") no-repeat top center;
background-size: 46px;
font-size: 1.7rem;
color: #00AEC4;
margin-bottom: 60px;
padding-top: 60px;
line-height: 1.5;
}

#wrapSimulation h2 u {
position: relative;
text-decoration: none;
}

#wrapSimulation h2 u::before {
position: absolute;
background-color: #00AEC4;
width: 18px;
height: 2px;
content: "";
transform: rotate(65deg);
left: -20px;
top: 13px;
}

#wrapSimulation h2 u::after {
position: absolute;
background-color: #00AEC4;
width: 18px;
height: 2px;
content: "";
transform: rotate(-65deg);
right: -20px;
top: 12px;
}

#wrapSimulation h2 span {
font-size: 3.3rem;
display: block;
color: var(--themeColor);
}

.wrapSimulationS {
width: 394px;
text-align: left;
margin: 0 auto;
}

#wrapSimulation p {
margin-bottom: 10px;
}

.selectSimulation {
background-color: #fff;
font-family: var(--font-primary);
width: 100%;
height: 48px;
color: var(--themeColor);
font-size: 1.6rem;
margin-bottom: 40px;
padding: 0 10px;
border: 2px solid var(--themeColor);
}

.inputSimulation {
background-color: #fff;
font-family:  var(--font-primary);
width: 100%;
height: 48px;
font-size: 1.6rem;
padding: 0 10px;
}

.btnEasySimulation {
background-color: #00477A;
font-family: var(--font-primary);
width: 202px;
height: 48px;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
text-align: center;
margin: 10px auto;
margin-top: 60px;
padding-bottom: 2px;
cursor: pointer;
border: 1px solid #00477A;
border-radius: 5px;
transition: .3s;
overflow: hidden;
}

.btnEasySimulation span {
position: relative;
z-index: 3;
}

.btnEasySimulation:hover {
background-color: #fff;
color: #00477A;
}

#simulationArrow {
width: 44px;
margin: 0 auto;
}

#simulationResult {
position: relative;
background-color: #EDF3F7;
width: 100%;
font-size: 2.2rem;
font-weight: 700;
padding: 60px 40px 40px;
border-radius: 5px;
}

#simulationResult::before {
position: absolute;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 40px solid #fff;
content: "";
margin: auto;
z-index: 1;
left: 0;
right: 0;
top: 0;
}

.result-yen {
display: inline-block;
}

.yen-num {
display: inline-block;
line-height: 1.5;
}

.yen-num span {
position: relative;
font-size: 4.4rem;
color: #E85555;
top: 2px;
}

#simulationBottom {
position: relative;
width: 1000px;
margin: 0 auto;
margin-bottom: 120px;
padding-top: 70px;
}

#simulationBottom::before {
position: absolute;
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-top: 60px solid #fff;
content: "";
margin: auto;
z-index: 1;
left: 0;
right: 0;
top: 0;
}

#simulationBottom .inner {
background: url("../img/service/img14.png") no-repeat bottom right;
background-size: 84px;
width: 430px;
font-size: 1.7rem;
font-weight: 700;
text-align: left;
margin: 0 auto;
padding: 30px 0 20px;
}

#simulationBottomTxt {
width: 100%;
font-size: 1.3rem;
font-weight: 400;
text-align: justify;
margin-top: 30px;
}

#simulationBottomTxt dt {
float: left;
}

#simulationBottomTxt dd {
padding: 0 0 0 16px;
}

#feeReduction {
background: url("../img/service/simulation_icon2.png") no-repeat left;
background-size: 30px;
padding-left: 36px;
}

.btnQuotationW {
position: relative;
background-color: #E85555;
font-family: var(--font-primary);
width: 488px;
height: 70px;
font-size: 2rem;
font-weight: 700;
text-align: left;
color: #fff;
padding: 0 30px;
cursor: pointer;
border: 1px solid #E85555;
border-radius: 8px;
transition: .3s;
overflow: hidden;
}

.btnQuotationW span {
position: relative;
z-index: 3;
}

.btnQuotationW::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 30px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 3;
}

.btnQuotationW:hover {
color: #E85555;
}

.btnQuotationW:hover::after {
border-top: 2px solid #E85555;
border-right: 2px solid #E85555;
right: 25px;
}

.commonSubTitle {
font-size: 1.7rem;
font-weight: 700;
margin-top: -30px;
margin-bottom: 15px;
}

.serviceCoverage {
background-color: #fff;
width: 480px;
margin: 40px 0 100px;
border-radius: 10px;
}

.serviceCoverage h4 {
font-size: 1.7rem;
font-weight: 700;
color: #fff;
padding: 20px;
text-align: center;
border-radius: 10px 10px 0 0;
}

.greenBg {
background-color: #80CE4A;
}

.purpleBg {
background-color: #947DD9;
}

.serviceCoverageFlex {
width: 100%;
padding: 26px 30px 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

.serviceCoverageImg {
width: 48%;
text-align: center;
}

.serviceCoverageImg img {
width: 78%;
margin: 0 auto;
}

.serviceCoverageTxt {
width: 48%;
text-align: left;
}

.serviceCoverageTxt h5 {
font-weight: 700;
}

.serviceCoverageTxt p {
margin-bottom: 20px;
}

.green {
color: #80CE4A;
}

.purple {
color: #947DD9;
}

#structure {
margin: 50px 0 80px;
}

.serviceFlow {
background-color: #fff;
width: 230px;
margin-bottom: 120px;
border-radius: 10px;
line-height: 1.6;
}

.serviceFlowTitle {
position: relative;
background-color: #00477A;
color: #fff;
font-weight: 700;
padding: 18px;
border-radius: 10px 10px 0 0;
}

.serviceFlowTitle::after {
position: absolute;
width: 0;
height: 0;
content: "";
border-left: 8px solid #00477A;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
right: -8px;
top: 40px;
}

.serviceFlowTitle04 {
background-color: #F7C200;
color: #00477A;
font-weight: 700;
padding: 18px;
border-radius: 10px 10px 0 0;
}

.serviceFlowTitle .number,
.serviceFlowTitle04 .number {
background-color: #fff;
width: 50px;
height: 28px;
color: #00477A;
margin: 0 auto;
margin-bottom: 12px;
}

.serviceFlowTitle h3,
.serviceFlowTitle04 h3 {
font-size: 1.7rem;
line-height: 1;
}

.serviceFlowImg {
width: 130px;
height: 200px;
margin: 0 auto;
display: table;
}

.serviceFlowImg .inner {
display: table-cell;
vertical-align: middle;
}

.serviceFlowTxt {
text-align: justify;
padding: 15px;
}

.serviceFlowTxt dl {
font-size: 1.2rem;
margin-top: 8px;
line-height: 1.5;
}

.serviceFlowTxt dt {
float: left;
}

.serviceFlowTxt dd {
padding: 0 0 0 12px;
}

.faqWrap {
background-color: #fff;
text-align: justify;
margin-bottom: 40px;
padding: 30px 36px 34px 26px;
border-radius: 10px;
}

.faqWrap:last-child {
margin-bottom: 100px;
}

.faqFlex {
display: flex;
justify-content: space-between;
align-items: center;
}

.qL {
width: 30px;
font-size: 2.2rem;
font-weight: 700;
text-align: center;
color: #00477A;
padding-left: 5px;
}

.qR {
width: 890px;
font-weight: 700;
padding-right: 10px;
}

.faqLine {
margin: 15px auto;
margin-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}

.aL {
width: 30px;
font-size: 2.2rem;
font-weight: 700;
text-align: center;
color: #00AEC4;
padding-left: 5px;
}

.aR {
width: 890px;
padding-right: 10px;
}

#termsAndConditions {
margin-top: -30px;
margin-bottom: 10px;
}

/*carbon*/

.carbonImg {
width: 299px;
margin: 20px 0;
}

.carbonTxt {
width: 653px;
margin: 20px 0;
}

.carbonTxt p {
margin-bottom: 0;
}

.carbonTitle {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 20px;
}

.carbonCircle {
background-color: #f6f6f6;
width: 200px;
height: 200px;
font-weight: 700;
margin-top: 60px;
border-radius: 200px;
line-height: 198px;
}

.carbonCircle:nth-of-type(2),
.carbonCircle:nth-of-type(3) {
margin-left: -50px;
}

.carbonArrow {
width: 0;
height: 0;
margin-top: 60px;
border-left: 40px solid #d9d9d9;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}

.carbon {
background-color: #F0F7FC;
width: 337px;
height: 109px;
font-weight: 700;
margin-top: 60px;
line-height: 107px;
}

.carbonImgWrap {
width: 905px;
margin: 60px auto;
margin-bottom: 80px;
}

.carbonThree {
width: 300px;
text-align: justify;
}

.carbonThree h4 {
font-size: 1.7rem;
font-weight: 700;
margin: 15px auto;
}

.carbonThree span {
font-weight: 700;
color: #00AEC4;
}

.moreover {
position: relative;
background-color: #FDEBEB;
width: 695px;
height: 125px;
font-size: 1.7rem;
font-weight: 700;
text-align: center;
margin: 0 auto;
margin-top: 60px;
padding: 14px;
line-height: 2.4;
border-radius: 5px;
}

.moreover::after {
position: absolute;
width: 0;
height: 0;
content: "";
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 18px solid #FDEBEB;
margin: auto;
left: 0;
right: 0;
bottom: -18px;
}

.moreover span {
font-size: 2.2rem;
}

.moreover .dotTxt {
padding-top: .3em;
background-position: top left -2px;
background-repeat: repeat-x;
background-size: 1.04em .3em;
background-image: radial-gradient(.10em .10em at center center,#002133,#002133 100%,transparent);
}

.assignmentWrap {
position: relative;
background-color: #fff;
text-align: center;
margin-top: 80px;
border-radius: 5px;
}

.assignmentWrap:last-child {
margin-bottom: 120px;
}

.assignmentCircle {
position: absolute;
background-color: #002133;
width: 90px;
height: 90px;
font-size: 1.7rem;
font-weight: 700;
color: #fff;
padding-top: 16px;
border-radius: 90px;
margin: auto;
line-height: 1.1;
left: 0;
right: 0;
top: -45px;
}

.assignmentCircle span {
font-size: 3.3rem;
display: block;
}

.assignmentWrap h3 {
background-color: #95979E;
height: 116px;
font-size: 2.2rem;
font-weight: 700;
color: #fff;
text-align: center;
border-radius: 5px 5px 0 0;
line-height: 150px;
}

.assignmentWrap .inner {
width: 800px;
text-align: justify;
margin:  0 auto;
padding: 40px 0;
}

.assignmentSolution {
background-color: #F0F7FC;
width: 304px;
height: 94px;
font-weight: 700;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}

.assignmentSolution span {
display: block;
}

.assignmentWrap h4 {
font-size: 2.2rem;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}

#decarbonizationTxt {
text-align: center;
margin: 60px auto;
margin-top: -20px;
}

.decarbonization {
background-color: #fff;
width: 560px;
margin-bottom: 100px;
}

.decarbonization h3 {
background-color: #00477A;
width: 100%;
height: 73px;
font-size: 1.7rem;
font-weight: 700;
text-align: center;
color: #fff;
line-height: 71px;
}

.decarbonization .inner {
padding: 32px 36px;
}

.decarbonizationImgL {
width: 300px;
text-align: center;
margin: 0 auto;
}

.decarbonizationImgR {
width: 378px;
text-align: center;
margin: 0 auto;
}

.solutionL {
background-color: #95979E;
width: 280px;
font-size: 1.7rem;
font-weight: 700;
color: #fff;
text-align: center;
padding: 50px 30px;
}

.solutionL h3 {
background-color: #002133;
width: 82px;
height: 72px;
margin: 0 auto;
margin-bottom: 10px;
padding-top: 12px;
line-height: 1.2;
}

.solutionL span {
font-size: 2.2rem;
display: block;
}

.solutionR {
background-color: #fff;
width: 630px;
margin-bottom: 30px;
padding: 30px;
}

.solutionFlex {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
}

.solutionR .solutionTitle {
background-color: #F0F7FC;
font-weight: 700;
color: #00477A; 
display: table;
padding: 5px 10px;
border-radius: 5px;
}

.solutionR h4 {
font-weight: 700;
color: #00477A; 
display: block;
padding: 5px 10px;
}

.solutionLast {
margin-bottom: 100px;
}

#planL2 {
width: 368px;
text-align: justify;
margin: 40px 0 0;
}

#planR2 {
width: 570px;
margin: 40px 0 0;
}

#planR h4,
#planR2 h4 {
font-weight: 700;
display: table;
border-bottom: 2px solid var(--themeColor);
line-height: 1.5;
}

.lowcostImg {
text-align: center;
margin: 60px auto;
margin-bottom: 80px;
}

.btnCarbon {
font-family: var(--font-primary);
width: 266px;
margin: 0 auto;
margin-top: -80px;
}

/*case_study*/

.wrapAllWh {
background-color: #fff;
width: 100%;
margin-bottom: 80px;
padding-bottom: 40px;
}

.searchWrap {
margin: 40px auto;
margin-bottom: 10px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.searchWrap li {
font-size: 1.6rem;
text-align: center;
margin: 0 10px 10px 0;
display: table;
border: 1px solid #00477A;
line-height: 1;
transition: .3s;
}

.searchWrap li:hover {
background-color: #00477A;
}

.searchWrap li a {
display: block;
padding: 5px 15px 7px 15px;
transition: .3s;
}

.searchWrap li a:hover {
color: #fff;
text-decoration: none;
}

.searchBtn {
width: 202px;
margin: 0 auto;
}

/*
.searchandfilter input[type="submit"] {
position: relative;
background-color: #00477A;
font-family:  var(--font-primary);
width: 202px;
height: 48px;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 0 0 3px;
border-radius: 5px;
border: 1px solid #00477A;
cursor: pointer;
transition: .3s;
}

.searchandfilter input[type="submit"]:hover {
background-color: #fff;
color: #00477A;
}
*/

#wrapCaseStudy {
position: relative;
width: 1200px;
text-align: justify;
margin: 0 auto;
}

#wrapCaseStudy .subTitle {
margin-bottom: 40px;
left: 0;
}

.caseStudy,
.usefulCo {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.caseStudy li,
.usefulCo li {
background-color: #fff;
width: 364px;
text-align: justify;
margin: 0 54px 54px 0;
border-radius: 8px;
}

.caseStudy li:nth-of-type(3n),
.usefulCo li:nth-of-type(3n) {
margin-right: 0;
}

.caseStudy li a:hover,
.usefulCo li a:hover {
text-decoration: none;
}

.caseStudy li a .caseStudyPhoto,
.usefulCo li a .usefulCoPhoto {
width: 364px;
height: 229px;
overflow: hidden;
border-radius: 8px 8px 0 0;
}

.caseStudy li a .caseStudyPhoto img,
.usefulCo li a .usefulCoPhoto img {
width: 100%;
height: 229px;
object-fit: cover;
transition: .3s ease-in-out;
}

.caseStudy li a:hover .caseStudyPhoto img,
.usefulCo li a:hover .usefulCoPhoto img {
transform: scale(1.06);
}

.caseStudy li .caseStudyLogo,
.usefulCo li .usefulCoLogo {
width: auto;
height: 40px;
margin: 24px 0 18px;
padding: 0 25px;
transition: .3s ease-in-out;
}

.caseStudy li .caseStudyLogo img,
.usefulCo li .usefulCoLogo img {
width: auto;
height: 100%;
}

.caseStudy li .caseStudyTitle,
.usefulCo li .usefulCoTitle {
font-weight: 700;
margin: 20px 0 0;
padding: 0 25px;
transition: .3s ease-in-out;
}

.caseStudy li .caseStudyCompany {
margin: 17px 0 20px;
padding: 0 25px;
transition: .3s ease-in-out;
}

.usefulCo li .usefulCoDate {
font-size: 1.4rem;
color: #95979E;
margin: 8px 0 12px;
padding: 0 25px;
transition: .3s ease-in-out;
}

.caseStudy li a:hover .caseStudyTitle,
.caseStudy li a:hover .caseStudyLogo,
.caseStudy li a:hover .caseStudyCompany,
.caseStudy li a:hover .caseStudyTagFlex,
.usefulCo li a:hover .usefulCoTitle,
.usefulCo li a:hover .usefulCoLogo,
.usefulCo li a:hover .usefulCoDate,
.usefulCo li a:hover .usefulCoTagFlex {
opacity: .5;
}

.caseStudy li .caseStudyTagFlex,
.usefulCo li .usefulCoTagFlex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
transition: .3s ease-in-out;
padding: 0 25px 25px;
}

.caseStudy li .caseStudyTagFlex .caseStudyTag,
.usefulCo li .usefulCoTagFlex .usefulCoTag {
font-size: 1.2rem;
margin: 0 5px 5px 0;
padding: 3px 10px 5px 10px;
display: table;
border: 1px solid #00477A;
line-height: 1;
}

.caseStudyPn {
clear: both;
}

.caseStudyPn .wp-pagenavi {
width: 100%;
text-align: center;
margin: 30px auto;
margin-top: 10px;
margin-bottom: 5px;
}

.caseStudyPn .wp-pagenavi a {
color: #00477A;
}

.caseStudyPn .wp-pagenavi a, .wp-pagenavi span {
width: 50px;
height: 50px;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
margin: 0 8px;
display: inline-block;
border: 1px solid #00477A;
border-radius: 8px;
line-height: 42px;
}

.caseStudyPn .wp-pagenavi a:hover,
.wp-pagenavi span.current {
background-color: #00477A;
color: #fff;
}

.caseStudyPn .wp-pagenavi .previouspostslink,
.caseStudyPn .wp-pagenavi .nextpostslink {
position: relative;
text-indent: -10000px;
border: 0 !important;
}

.caseStudyPn .wp-pagenavi .previouspostslink::before,
.caseStudyPn .wp-pagenavi .nextpostslink::before {
position: absolute;
width: 25px;
height: 25px;
content: "";
border-top: solid 2.5px #00477A;
border-right: solid 2.5px #00477A;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.caseStudyPn .wp-pagenavi .previouspostslink::before {
transform: rotate(-135deg);
left: 10px;
}

.caseStudyPn .wp-pagenavi .nextpostslink::before {
transform: rotate(45deg);
right: 10px;
}

.caseStudyPn .wp-pagenavi a:hover.previouspostslink,
.caseStudyPn .wp-pagenavi a:hover.nextpostslink {
background-color: transparent;
}

.caseStudyPn .wp-pagenavi .pages,
.caseStudyPn .wp-pagenavi .first,
.caseStudyPn .wp-pagenavi .last {
display: none;
}

#wrapPost {
position: relative;
width: 1000px;
text-align: justify;
margin: 0 auto;
}

#wrapPost #postTitle {
font-size: 3.3rem;
font-weight: 700;
line-height: 1.4;
}

.caseStudyCompanyCo {
font-size: 2.2rem;
font-weight: 700;
margin: 30px auto;
}

.caseStudyTagFlexCo {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.caseStudyTagFlexCo .caseStudyTag {
font-size: 1.6rem;
margin: 0 10px 0 0;
display: table;
border: 1px solid #00477A;
line-height: 1;
transition: .3s;
}

.caseStudyTagFlexCo .caseStudyTag:hover {
background-color: #00477A;
}

.caseStudyTagFlexCo .caseStudyTag a {
display: block;
padding: 5px 15px 7px 15px;
transition: .3s;
}

.caseStudyTagFlexCo .caseStudyTag a:hover {
color: #fff;
text-decoration: none;
}

#wrapPostWh {
background-color: #fff;
margin: 40px auto;
margin-bottom: 60px;
border-radius: 10px 10px 0 0;
}

.caseStudyPhotoCo {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 10px 10px 0 0;
display: inline-block;
}

.caseStudyPhotoCo img {
width: 100%;
height: auto;
object-fit: cover;
}

.caseStudyPhotoCo .movieVideo {
position: relative;
width: 100%;
height: auto;
object-fit: cover;
z-index: 0;
}

.caseStudyPhotoCo .playBtn {
position: absolute;
display: block;
width: 80px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
cursor: pointer;
z-index: 1;
filter: drop-shadow(0 0 4px #666)
}

.caseStudyPhotoCo .playBtn.playActive {
display: none;
}

#wrapPostWh .inner {
width: 100%;
padding: 60px;
}

.postGrayWrap {
background-color: #f6f6f6;
margin: 0 auto;
margin-bottom: 60px;
padding: 40px;
border-radius: 8px;
}

.caseStudyBlue {
background-color: #EDF3F7;
margin-bottom: 80px;
padding: 50px;
border-radius: 8px;
}

.caseStudyBlueL,
.caseStudyBlueR {
width: 100%;
}

.caseStudyBlueTitle {
position: relative;
font-size: 2.2rem !important;
font-weight: 700 !important;
margin: 0 0 15px !important;;
padding-left: 24px !important;
line-height: 1 !important;
border: 0 !important;
}

.caseStudyBlueTitle::before {
position: absolute;
background-color: #00477A;
width: 16px;
height: 3px;
content: "";
margin: auto;
border-radius: 10px;
left: 0;
top: 0;
bottom: 0;
}

.reductionLCo,
.reductionRCo {
width: 100%;
font-weight: 700;
text-align: center;
margin-top: 15px;
padding: 10px 20px 20px 46px;
border-radius: 5px;
}

.reductionLCo {
background: #fff url("../img/case_study_ele.png") no-repeat 60px center;
background-size: 40px;
}

.reductionRCo {
background: #fff url("../img/case_study_co2.png") no-repeat 60px center;
background-size: 40px;
}

.reductionLCo span,
.reductionRCo span {
position: relative;
font-size: 2.8rem;
color: #00AEC4;
margin-left: 8px;
top: 4px;
}

.reductionLCo i,
.reductionRCo i {
font-size: 1.8rem;
}

#wrapPostWh .inner h2,
#wrapPostWhL .inner h2 {
font-size: 2.6rem;
font-weight: 700;
margin: 40px 0 30px;
padding-bottom: 15px;
border-bottom: 3px solid #00477A;
line-height: 1.5;
}

.postInterview {
position: relative;
background-color: #f6f6f6;
width: 730px;
min-height: 120px;
margin-bottom: 40px;
padding: 28px 32px;
border-radius: 5px;
}

.postInterview::after {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 15px solid #f6f6f6;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
right: -15px;
top: 46px;
}

.postInterviewWide {
position: relative;
background-color: #f6f6f6;
width: 100%;
margin-bottom: 40px;
padding: 28px 32px;
border-radius: 5px;
}

.postInterviewPhoto {
width: 120px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}

.postInterviewPhoto img {
width: 100%;
height: 120px;
object-fit: cover;
margin-bottom: 10px;
border-radius: 150px;
}

#wrapPostWh .inner h3,
#wrapPostWhL .inner h3 {
font-size: 2.2rem;
font-weight: 700;
margin: 30px 0;
padding: 0 0 5px 15px;
border-left: 3px solid #00477A;
line-height: 1.5;
}

.postCompanyWrap {
background-color: #f6f6f6;
margin: 60px auto;
padding: 40px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}

.postCompanyWrap .postCompanyL {
background-color: #fff;
width: 170px;
padding: 20px;
border-radius: 8px;
}

.postCompanyWrap .postCompanyR {
width: 590px;
}

.postCompanyWrap .postCompanyR h4 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1;
}

.postCompanyWrap .postCompanyR dt {
float: left;
font-weight: 700;
}

.postCompanyWrap .postCompanyR dd {
padding: 0 0 0 100px;
}

#freeDownloadWrap {
font-weight: 700;
color: #E85555;
text-align: center;
}

.btnFreeDownload {
position: relative;
background-color: #E85555;
font-family: var(--font-primary);
width: 456px;
height: 56px;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
color: #fff;
margin: 10px 0 20px;
padding-bottom: 5px;
cursor: pointer;
border: 1px solid #E85555;
border-radius: 10px;
transition: .3s;
}

.btnFreeDownload:hover {
background-color: #fff;
color: #E85555;
}

#relatedStoriesBtn {
width: 234px;
margin: 0 auto;
margin-top: -20px;
}

#postCtaWrap {
width: 100%;
margin: 0 auto;
margin-bottom: 80px;
}

#postCtaWrap h4 {
font-weight: 700;
}

.btnContact {
position: relative;
background-color: #e8546a;
font-family: var(--font-primary);
width: 310px;
height: 70px;
font-size: 2rem;
font-weight: 700;
text-align: left;
color: #fff;
margin-top: 20px;
padding: 0 30px;
cursor: pointer;
border: 1px solid #e8546a;
border-radius: 8px;
transition: .3s;
overflow: hidden;
}

.btnContact span {
position: relative;
z-index: 3;
}

.btnContact::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 30px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 3;
}

.btnContact:hover {
color: #e8546a;
}

.btnContact:hover::after {
border-top: 2px solid #e8546a;
border-right: 2px solid #e8546a;
right: 25px;
}

/*useful_content*/

#wrapPostW {
position: relative;
width: 1200px;
text-align: justify;
margin: 0 auto;
display: flex;
justify-content: space-between;
}

#wrapPostWL {
width: 850px;
}

.usefulPostDate {
color: #95979E;
}

#wrapPostW #postTitle {
font-size: 3.3rem;
font-weight: 700;
margin-bottom: 40px;
line-height: 1.4;
}

#wrapPostWhL {
background-color: #fff;
margin: 40px auto;
margin-bottom: 0;
}

#wrapPostWhL .inner {
width: 100%;
padding: 50px 50px 5px;
}

#toc_container {
background-color: #f6f6f6;
margin: 0 auto;
margin-bottom: 40px;
padding: 36px 40px 40px;
border-radius: 8px;
}

#toc_container ul {
list-style: none;
}

.toc_title {
font-size: 2.2rem;
font-weight: 700;
text-align: center;
line-height: 1;
}

.toc_list {
border-bottom: 1px solid #ddd;
}

.toc_list li {
padding: 15px 0;
border-top: 1px solid #ddd;
}

.toc_list li a {
transition: .3s;
}

.toc_list li a:hover {
text-decoration: none;
opacity: .5;
}

.toc_list ul {
padding-top: 15px;
}

.toc_list ul li {
position: relative;
padding: 15px 0 15px 18px;
border-top: 1px solid #ddd;
}

.toc_list ul li a::before {
position: absolute;
background-color: #00477A;
width: 9px;
height: 2px;
content: "";
margin: auto;
left: 0;
top: 0;
bottom: 0;
}

.toc_list ul li:last-child {
padding: 15px 0 0 18px;
}

.toc_list ul li:last-child a::before {
left: 0;
top: 15px;
bottom: 0;
}

.wp-block-list li {
list-style: none;
display: flex;
align-items: baseline;
}
 
.wp-block-list li::before {
content: "・";
list-style: disc;
margin: 0 8px 0 0;
}

.btnSimulationCo {
position: relative;
background-color: #E85555;
font-family: var(--font-primary);
color: #fff;
margin: 0 auto;
margin-top: 20px;
border: 1px solid #E85555;
}

.btnSimulationCo::after {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}

.btnSimulationCo:hover {
color: #E85555;
}

.btnSimulationCo:hover.btn::after {
border-top: 2px solid #E85555;
border-right: 2px solid #E85555;
right: 25px;
}

#wrapPostWR {
width: 260px;
}

#wrapPostWR h4 {
font-size: 2.2rem;
font-weight: 700;
margin: 10px 0 30px;
padding: 0 0 5px 15px;
border-left: 3px solid #00477A;
line-height: 1.5;
}

.sidePickUp li {
background-color: #fff;
width: 260px;
text-align: justify;
margin-bottom: 30px;
padding-bottom: 20px;
border-radius: 8px 8px 0 0;
}

.sidePickUp a:hover {
text-decoration: none;
}

.sidePickUpPhoto {
width: 260px;
height: 163px;
overflow: hidden;
border-radius: 8px 8px 0 0;
}

.sidePickUpPhoto img {
width: 100%;
height: 163px;
object-fit: cover;
transition: .3s ease-in-out;
}

.sidePickUp li a:hover .sidePickUpPhoto img {
transform: scale(1.06);
}

.sidePickUp li .sidePickUpTitle {
margin: 18px 0 0;
padding: 0 20px;
transition: .3s ease-in-out;
}

.sidePickUp li .sidePickUpDate {
font-size: 1.4rem;
color: #95979E;
margin: 8px 0 0;
padding: 0 20px;
transition: .3s ease-in-out;
}

.sidePickUp li a:hover .sidePickUpTitle,
.sidePickUp li a:hover .sidePickUpDate {
opacity: .5;
}

.shareWrap {
width: 430px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
margin: 100px auto;
}

.btnSns {
background-color: #00477A;
font-family: var(--font-primary);
width: 210px;
height: 48px;
margin-top: 15px;
border-radius: 5px;
}

.btnSns a {
font-size: 1.6rem;
color: #fff;
display: block;
line-height: 46px;
}

.btnSns a:hover {
text-decoration: none;
}

.btnSns a i {
position: relative;
font-size: 2.8rem;
margin-right: 10px;
top: 3px;
}

.postAuthor {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 25px;
line-height: 1;
}

.authorPhoto {
width: 115px;
}

.authorPhoto img {
width: 100%;
height: 136px;
object-fit: cover;
border-radius: 10px;
}

.author {
width: 530px;
}

.author h5 {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 10px;
}

.btnLogin {
position: relative;
background: #E85555 url("../img/btn_login.png") no-repeat 132px center;
background-size: 18.33px;
font-family:  var(--font-primary);
width: 450px;
height: 73px;
font-size: 1.7rem;
font-weight: 700;
text-align: center;
color: #fff;
margin: 0 auto;
margin-bottom: 10px;
padding: 0 0 3px 16px;
cursor: pointer;
border-radius: 5px;
border: 1px solid #E85555;;
transition: .3s;
}

.btnLogin:hover {
background: #fff url("../img/btn_login_h.png") no-repeat 132px center;
background-size: 18.33px;
color: #E85555;
z-index: 3;
}

#myPageImg {
position: absolute;
background: url("../img/my_page/my_page_img.png") no-repeat;
background-size: 231px;
width: 231px;
height: 162px;
bottom: -2px;
right: 90px;
}

#myPageFlex {
width: 1050px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.myPageIntoro {
background-color: #fff;
width: 500px;
text-align: left;
margin-bottom: 50px;
padding: 42px 40px 45px;
border-radius: 10px;
}

.myPageIntoro .subTitle {
margin-bottom: 12px;
left: 0
}

.myPageIntoroImg {
text-align: center;
margin-top: 30px;
}

.myPageIntoroImg img {
width: auto;
height: 160px;
}

/**/

#contactTelFlex {
width: 1200px;
margin: 0 auto;
margin-bottom: 120px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}

#wrapWhContact {
position: relative;
background-color: #fff;
width: 750px;
text-align: left;
padding: 60px 50px;
border-radius: 10px;
}

#wrapWhTel {
position: relative;
background-color: #fff;
width: 410px;
text-align: left;
padding: 60px 50px;
border-radius: 10px;
}

.contactFlex {
width: 100%;
}

#contactL {
width: 100%;;
}

#contactR {
width: 100%;
}

.btnContactTel {
position: relative;
background-color: #00477A;
font-family:  var(--font-primary);
width: 100%;
height: 48px;
font-size: 1.6rem;
font-weight: 700;
text-align: left;
border-radius: 5px;
border: 1px solid #00477A;
transition: .3s;
overflow: hidden;
}

.btnContactTel span {
position: relative;
z-index: 3;
}

.btnContactTel:hover {
background-color: #fff;
}

.btnContactTel a {
position: relative;
color: #fff;
display: block;
padding: 8px 0 8px 20px;
text-decoration: none;
transition: .3s;
z-index: 3;
}

.btnContactTel a:hover {
color: #00477A;
}

.btnContactTel::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(135deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 20px;
top: -5px;
bottom: 0;
transition: .5s;
z-index: 3;
}

.btnContactTel:hover::after {
border-top: 2px solid #00477A;
border-right: 2px solid #00477A;
top: 0;
bottom: 0;
}

.formInput {
width: 100%;
margin: 40px auto;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.formInput p {
display: inline;
margin: 0;
}

.formInputTop {
width: 100%;
}

.formInputTop p {
display: inline;
margin: 0;
}

.formInputL {
width: 100%;
font-weight: 700;
padding: 20px 0 15px;
}

.formInputR {
position: relative;
width: 100%;
padding: 0 0 20px;
}

.radioService .wpcf7-radio .wpcf7-list-item {
display: block;
}

.wpcf7-form-control {
margin: 0;
}

.required {
background-color: #e83838;
width: 44px;
height: 28px;
font-size: 1.2rem;
color: #fff;
text-align: center;
display: inline-block;
margin-right: 12px;
border-radius: 3px;
line-height: 26px;
}

.any {
background-color: #95979e;
width: 44px;
height: 28px;
font-size: 1.2rem;
color: #fff;
text-align: center;
display: inline-block;
margin-right: 12px;
border-radius: 3px;
line-height: 26px;
}

label {
margin-right: 10px;
}

.wpcf7-list-item {
margin-left: 0;
display: block;
}

input[type="radio"] {
position: relative;
background-color: #f6f6f6;
width: 20px;
height: 20px;
margin-right: 5px;
border: 2px solid #95979e;
border-radius: 50%;
vertical-align: -4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

input[type="radio"]:checked {
background-color: #fff;
border: 2px solid var(--themeColor);
}

input[type="radio"]:checked:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--themeColor);
content: "";
}

select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.inputW,
.wpcf7-select {
position: relative;
background-color: #f6f6f6;
font-family:  var(--font-primary);
width: 100%;
height: 70px;
font-size: 1.6rem;
padding: 0 15px;
border: 0;
border-radius: 3px;
}

.wpcf7-arrow {
position: relative;
}

.wpcf7-arrow::after {
content: '';
position: absolute;
border: 4px solid #666;
border-bottom: 0;
border-left-color: transparent;
border-right-color: transparent;
top: calc(50% - 13px);
right: 20px;
width: 0;
height: 0;
z-index: 1;
}

.formInputRFlex {
width: 100%;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.inputS {
background-color: #f6f6f6;
font-family:  var(--font-primary);
width: 100px;
height: 70px;
font-size: 1.6rem;
padding: 0 15px;
border: 0;
border-radius: 3px;
}

textarea {
background-color: #f6f6f6;
font-family:  var(--font-primary);
width: 100%;
height: 200px;
font-size: 1.6rem;
padding: 15px;
border: 0;
border-radius: 3px;
}

#contactPrivacy {
background-color: #f6f6f6;
font-family:  var(--font-primary);
width: 100%;
height: 160px;
font-size: 1.4rem;
margin-bottom: 20px;
padding: 15px;
border: 0;
border-radius: 3px;
overflow-y: auto;
}

#contactPrivacy p {
display: block;
}

#contactPrivacy dl {
margin-top: 20px;
}

#contactPrivacy dt {
float: left;
font-weight: 700;
margin-bottom: 20px;
}

#contactPrivacy dd {
margin-bottom: 20px;
padding: 0 0 0 20px;
}

input[type="checkbox"] {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

input[type="checkbox"] {
position: relative;
cursor: pointer;
padding-left: 28px;
top: -6px;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after {
content: "";
display: block; 
position: absolute;
}
input[type="checkbox"]::before {
background-color: #fff;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: 2px solid var(--themeColor);
border-radius: 3px;
top: 50%;
left: 0;
}
input[type="checkbox"]::after {
border-bottom: 3px solid var(--themeColor);
border-left: 3px solid var(--themeColor);
opacity: 0;
height: 6px;
width: 11px;
transform: rotate(-45deg);
top: -4px;
left: 5px;
}
input[type="checkbox"]:checked::after {
opacity: 1;
}

.cf7-submit {
width: 100%;
text-align: center;
margin: 40px auto;
margin-bottom: 20px;
padding-bottom: 60px;
border-bottom: 1px solid #95979e;
display: flex;
justify-content: center;
}

.cf7-submit div {
position: relative;
width: 332px;
height: 70px;
margin: 0 5px;
}

.btnForm,
.btnSend,
.btnBack {
position: relative;
background-color: #00477A;
font-family:  var(--font-primary);
width: 332px;
height: 70px;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
text-align: left;
margin: 0 auto;
padding: 0 0 3px 20px;
border-radius: 5px;
border: 1px solid #00477A;
cursor: pointer;
transition: .3s;
}

.btnSend,
.btnBack {
text-align: center;
padding: 0 0 3px;
}

.btnForm:hover,
.btnSend:hover,
.btnBack:hover {
background-color: #fff;
color: #00477A;
}

.cf7-submit div::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 20px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 1;
}

.cf7-submit div:hover::after {
border-top: 2px solid #00477A;
border-right: 2px solid #00477A;
right: 15px;
}

.contactFlex .telFreedial {
background-color: #F0F7FC;
width: 100%;
font-size: 1.2rem;
padding: 20px 26px;
border-radius: 5px;
line-height: 1.3;
}

.contactFlex .telCall {
width: 100%;
font-size: 1.2rem;
padding: 20px 0 30px 10px;
line-height: 1.5;
}

.contactFlex .telFreedial h4,
.contactFlex .telCall h4 {
font-size: 1.4rem;
font-weight: 700;
}

.contactFlex .tel {
font-size: 3.8rem;
font-weight: 700;
margin-bottom: 5px;
line-height: 1.3;
}

.contactFlex .tel a {
text-decoration: none;
}

/**/

#corporate {
margin-top: 40px;
}

#corporate dt {
float: left;
font-weight: 700;
padding: 25px 0;
}

#corporate dd {
position: relative;
padding: 25px 0 25px 250px;
border-bottom: 1px solid #E5E5E5;
}

#corporate dd #tes {
position: absolute;
width: 50px;
margin: auto;
left: 620px;
top: 0;
bottom: 0;
}

/**/

#wrapQuotation {
background: url("../img/quotation_bg.jpg") no-repeat center;
background-size: cover;
width: 100%;
margin-top: 150px;
padding: 100px 0;
}

#quotationInenr {
width: 720px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

#quotationInenr h2 {
position: relative;
background: url("../img/icon_title.png") no-repeat left 3px;
background-size: 15px;
font-size: 1.4rem;
font-weight: 700;
text-align: left;
margin-bottom: 10px;
padding-left: 22px;
letter-spacing: 0;
line-height: 1.5;
}

#quotationInenr h2 span {
font-size: 3.8rem;
display: block;
margin-left: -28px;
}

#quotationL {
font-weight: 700;
}

#quotationTxt span {
color: #E85555;
}

#quotationR {
width: 250px;
}

.btnQuotation {
position: relative;
background-color: #E85555;
font-family: var(--font-primary);
width: 310px;
height: 70px;
font-size: 2rem;
font-weight: 700;
text-align: left;
color: #fff;
margin-top: 60px;
padding: 0 30px;
cursor: pointer;
border: 1px solid #E85555;
border-radius: 8px;
transition: .3s;
overflow: hidden;
}

.btnQuotation span {
position: relative;
z-index: 3;
}

.btnQuotation::after {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-right: 2px solid #fff;
right: 30px;
top: 0;
bottom: 0;
transition: .5s;
z-index: 3;
}

.btnQuotation:hover {
color: #E85555;
}

.btnQuotation:hover::after {
border-top: 2px solid #E85555;
border-right: 2px solid #E85555;
right: 25px;
}

.backTop {
width: 332px;
margin: 0 auto;
}

/**/

footer {
position: relative;
background-color: #002133;
width: 100%;
padding: 80px 0 180px;
}

#footerWrap {
width: 1200px;
color: #fff;
margin: 0 auto;
}

#footerWrap a {
color: #fff;
text-decoration: none;
}

.footerFlex {
display: flex;
justify-content: space-between;
align-items: center;
}

.footerL {
font-weight: 700;
text-align: left;
}

.footerL img {
width: 200px;
margin-bottom: 15px;
}

.footerR ul {
text-align: right;
display: flex;
justify-content: flex-end;
}

.footerR ul li {
position: relative;
margin-left: 40px;
}

.footerR ul li a::after {
position: absolute;
bottom: -5px;
left: 0;
content: "";
width: 0;
border-bottom: solid 1px #fff;
transition: .5s;
transform: translateX(0%);
}

.footerR ul li a:hover::after {
width: 100%;
}

#footerLinksBottom {
font-size: 1.2rem;
}

#footerLinksBottom li a {
background: url("../img/icon_footer.png") no-repeat right;
background-size: 13px;
}

#footerLinksBottom li a {
padding-right: 20px;
}

#footerLine {
background-color: #fff;
width: 100%;
height: 1px;
margin-top: 40px;
margin-bottom: 20px;
}

#copyright {
font-size: 1rem;
}

#pagetop {
position: fixed;
background: #fff;
width: 46px;
height: 46px;
bottom: -60px;
right: 30px;
border-radius: 5px;
border: 1px solid #00477A;
transition: .3s;
z-index: 200;
}

#pagetop:hover {
background-color: #00477A;
}

#pagetop::before {
position: absolute;
width: 12px;
height: 12px;
content: "";
margin: auto;
border-top: 2px solid #00477A;
border-right: 2px solid #00477A;
transform: rotate(-45deg);
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#pagetop:hover::before {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}

#btnCta {
position: fixed;
width: 219px;
left: 25px;
bottom: 20px;
z-index: 1000;
}

.btnCta4 {
position: fixed;
width: 340px;
left: 25px;
bottom: 20px;
z-index: 1000;
transition: 1s;
}

.btnCta4.hideCta {
transform: translateY(122px);
}

.searchandfilterWrap {
position: relative;
width: 1200px;
font-size: 1.5rem;
text-align: left;
margin: 0 auto;
margin-top: -50px;
margin-bottom: 70px;
}

.toggle {
display: none;
}

.searchandfilterTitle {
position: relative;
background: #00aec4;
width: 100%;
font-size: 1.8rem;
font-weight: 700;
margin: 0 auto;
padding: 20px 54px;
display: block;
color: #fff;
cursor: pointer;
border-radius: 5px 5px 0 0;
z-index: 1;
}

.searchandfilterTitle::before{
content:"";
width: 12px;
height: 12px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
position: absolute;
top: calc( 42% - 3px );
right: 30px;
transform: rotate(135deg);
}

.searchandfilterTitle::after {
position: absolute;
font-family: 'Font Awesome 6 Free';
width: 20px;
content: "\f002";
font-weight: 900;
color: #fff;
margin: auto;
top: 20px;
left: 30px;
}

.searchandfilterTitle,
.searchContent {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}

.searchContent {
position: relative;
/*background-color: #f6f6f6;*/
background: #fff;
height: 0;
padding: 0 60px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 0 0 5px 5px;
top: -1px;
}

.toggle:checked + .searchandfilterTitle + .searchContent {
height: auto;
padding: 50px 60px 20px 60px;
transition: all .6s;
}

.toggle:checked + .searchandfilterTitle::before {
transform: rotate(-45deg) !important;
top: calc( 48% - 3px );
}

.searchandfilterWrap h4 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
}

.searchandfilterWrap ul {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.searchandfilterWrap ul li ul li {
margin-bottom: 10px;
padding-right: 10px;
}

.searchandfilterWrap ul li ul li:first-of-type {
display: none;
}

.searchandfilterWrap ul li ul li:last-child {
margin: 0;
}

.searchandfilterWrap ul li:last-child {
text-align: center;
margin: 0 auto;
}

.searchandfilterWrap input[type="submit"] {
position: relative;
background-color: #00aec4;
font-family:  var(--font-primary);
width: 250px;
height: 60px;
font-size: 1.6rem;
font-weight: 600;
color: #fff;
text-align: center;
margin: 20px auto;
margin-top: 0;
padding-bottom: 3px;
cursor: pointer;
display: inline-block;
border: 1px solid #00aec4;
border-radius: 5px;
transition: .3s;
}

.searchandfilterWrap input[type="submit"]:hover {
background-color: #fff;
color: #00aec4;
}

/*

.searchandfilterWrapFlex {
position: relative;
width: 1200px;
margin: 0 auto;
margin-top: -50px;
margin-bottom: 60px;
display: flex;
justify-content: space-between;
}

.searchandfilterWrap {
position: relative;
width: 590px;
margin: 0;
}

.searchandfilter ul {
display: flex;
justify-content: space-between;
}

.searchandfilter ul::before {
position: absolute;
content: "";
background: #00aec4;
height: calc(tan(15deg) * 60px / 2);
width: 15px;
margin: auto;
clip-path: polygon(0 0, 100% 0, 50% 100%);
top: 0;
bottom: 0;
left: 325px;
}

.searchandfilter ul select {
background-color: #fff;
font-family:  var(--font-primary);
width: 360px;
height: 60px;
font-size: 1.6rem;
color: var(--themeColor);
padding: 0 20px 2px;
border: 1px solid #00aec4;
border-radius: 5px 0 0 5px;
}

.searchandfilter input[type="submit"] {
position: relative;
background-color: #00aec4;
font-family:  var(--font-primary);
width: 230px;
height: 60px;
font-size: 1.6rem;
font-weight: 600;
color: #fff;
margin: 0;
padding-left: 20px;
padding-bottom: 3px;
cursor: pointer;
left: -10px;
border: 1px solid #00aec4;
border-radius: 0 5px 5px 0;
}

.searchandfilter ul::after {
position: absolute;
font-family: 'Font Awesome 6 Free';
width: 20px;
content: "\f002";
font-weight: 900;
color: #fff;
margin: auto;
top: 17px;
left: 0;
right: -230px;
}

*/

.alignright {
float: right;
margin: 0 0 50px 50px;
}

.alignleft {
float: left;
margin: 0 50px 50px 0;
}

.aligncenter {
display: block;
margin: 0 auto;
}

}