/* common */
.areaMain {font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;/*overflow-x: hidden;*/}
.areaMain .conwrap {margin: 0 auto;width: 100%;max-width:1000px;position: relative;padding-left: 15px;padding-right: 15px;}
.areaMain .conwrap.conwrap_s {max-width: 800px;}
#service img {max-width: 100%;width: 100%;}
.conwrap strong {font-weight: bold}

@media screen and (max-width: 736px){
.dis_pc {display: none}
}
@media screen and (min-width: 737px){
.dis_sp {display: none}
}

/* keyvisual */
.keyvisual_wrap {position: relative;width:100%;margin: 0 auto;background: url(../img/keyvisual.jpg) no-repeat right 0;background-size: contain;position: relative;max-width: 970px;height:500px;}
/*
.keyvisual_wrap::after {content: "";position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
*/
.keyvisual_inr {max-width: 970px;margin: 0 auto;position: relative;}
.keyvisual_hero {position: relative;z-index: 1}
.keyvisual_hero h1 {font-size: 4.0rem;padding: 1em 15px 0;line-height: 1.2}
.keyvisual_hero h2 {font-size: 1.5rem;padding: 1em 15px 0;font-weight: bold;}
.keyvisual_hero h3 {font-size: 1.4rem;padding: 2em  15px 0;}

@media screen and (max-width: 736px){
.keyvisual_wrap {position: relative;width:100%;margin: 0 auto;background: url(../img/keyvisual.jpg) no-repeat center top;background-size: cover;position: relative;height:320px;}
.keyvisual_hero h1,
.keyvisual_hero h2,
.keyvisual_hero h3{color: #fff;}

.keyvisual_hero h1 {4.0rem;padding: 1em 15px 0;}
.keyvisual_hero h2 {font-size: 1.5rem;padding: 2.5em 0 0;text-align: center}
.keyvisual_hero h3 {font-size: 1.4rem;padding: 1em 0 0;text-align: center}
}

/* #sec-message */
#sec-message{background: #eee;margin-bottom: 40px}
.message-wrap {display: flex;justify-content: space-between;}
.message-ph {width: 30%}
.message-ph img {vertical-align:top;}
.message-item {width:70%;padding: 10px 10%;}
.message-h2 {text-align: center;font-size: 2.4rem; font-weight: bold;margin-top: 1em}
.message-h3 {text-align: center;font-size:1.2rem;}
.message-p {margin-top: 1em}

@media screen and (max-width: 736px){
.message-ph {display: none}
.message-item {width:100%;padding: 10px 0 20px;}
.message-p {font-size:1.2rem;text-align: center}
}


/* #sec-service */
#sec-service {margin: 80px auto;}
.service-item-wrap {display: flex;justify-content: space-between}
.service-item {width: 23%;margin-right: calc(8% / 3);}
.service-item:last-child {margin-right: 0}
.h2_title-wrap {display: flex;justify-content: flex-start;align-items: flex-end;margin: 80px 0;}
.h2-en {font-size: 3.6rem;letter-spacing: 0.1em;position: relative;line-height: 1;white-space: nowrap}
.h2-en:before {content: "■";font-size:4.8rem;color:#D9D9D9;position: absolute;top:-25px;margin-left:-25px;z-index:-1}
.h3-jp {font-size: 1.2rem;padding-left:2em;display:inline-block;}

.service-item-h3 {font-size: 1.2rem;font-weight: bold;text-align: center;padding:1em 0;border-bottom: 1px solid #ccc;}
.service-item-tx {font-size: 0.9rem;padding-top: 1em;line-height: 1.8;}
.service-message {text-align: center;font-weight: bold;font-size: 2rem;margin-top: 2em}
.service-message-mazenta {color:#BF187A;border-bottom:2px dotted #BF187A}

@media screen and (max-width: 736px){
#sec-service {margin: 20px auto 40px;}
.service-item-wrap {display: flex;flex-wrap: wrap}
.service-item {width:100%;margin-right:0;}
.service-item-h3 {font-size: 1.6rem;padding:0.3em 0;}
.service-item-tx {font-size: 1.2rem;padding-bottom: 2em;}

.h2_title-wrap {display: flex;flex-wrap: wrap;margin: 80px 0 40px;}
.h2-en {width: 100%;white-space: nowrap}
.h3-jp {padding-top:1em;padding-left:0;}

.service-message {font-size:1.6rem;}
}

.triangle-wrap {width: 100%}
.triangle1{
  width: 0;margin: 10px auto;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 20px solid #F2F2F2;
}
.triangle2{
  width: 0;margin: 10px auto;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 20px solid #eeeeee;
}
.triangle3{
  width: 0;margin: 10px auto;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 20px solid #D9D9D9;
}


/* .sec-btn */
.sec-btn-wrap {padding:40px 0;}
.sec-btn-inr {display: flex;justify-content:space-around;max-width:970px;margin: auto;}
.btn_mazenta {width:16em;background:#BF187A;border-radius:20px;line-height:1em;padding:8px 0;text-align: center;font-weight: bold;position: relative}
.btn_mazenta a {display: block;color: #fff;text-align: center;}
.btn_mazenta2 {margin: 0.5em auto;background:#BF187A;border-radius:20px;line-height:1em;padding:8px 0;text-align: center;font-weight: bold;position: relative}
.btn_mazenta2 a {display: block;color: #fff;text-align: center;font-size: 1.3rem;}
.btn_gray {width:16em;background:#44546A;border-radius:20px;line-height:1em;padding:8px 0;text-align: center;font-weight: bold;position: relative}
.btn_gray a {display: block;color: #fff;text-align: center;}
.conwrap a:hover,.sec-btn .btn_gray a:hover,.btn_mazenta a:hover {text-decoration: none;}
.sec-btn-gray {background: #F2F2F2;}

@media screen and (max-width: 736px){
.btn_mazenta {width:44%;}
.btn_gray {width:44%;}
}


/* #sec-support */
#sec-support {margin: 80px auto 40px;}
.support-h4-ttl {font-weight: bold;font-size: 1.8rem;position: relative;padding-left:30px;margin-bottom: 0.3em;}
.support-h4-ttl1:before {content: "";background: url(../img/circle_mazenta.png) no-repeat;background-size: contain;width: 20px;height: 20px;display:inline-block;position: absolute;top:2px;left:0;}
.support-h4-ttl2:before {content: "";background: url(../img/circle_green.png) no-repeat;background-size: contain;width: 20px;height: 20px;display:inline-block;position: absolute;top:2px;left:0;}
.support-h4-ttl3:before {content: "";background: url(../img/circle_blue.png) no-repeat;background-size: contain;width: 20px;height: 20px;display:inline-block;position: absolute;top:2px;left:0;}
.support-h4-ttl1 {color: #BF187A}
.support-h4-ttl2 {color: #70AD47}
.support-h4-ttl3 {color: #4472C4}

.support-item {display: flex;justify-content: space-between;align-items: center;}
.support-item-ph,
.support-item-tx {width: 46%}

.support-item p {margin-bottom:2em;}

@media screen and (max-width: 736px){
.support-item {display: flex;flex-wrap: wrap}
.support-item-ph {margin-bottom: 40px;text-align: center}
.support-item-ph img {max-width:500px !important;}
.support-item-ph,
.support-item-tx {width: 100%}
}


/* #sec-solution */
#sec-solution {margin: 80px auto;padding-bottom:40px}
.h2_title-solution-wrap {display: flex;justify-content: flex-start;align-items: flex-end;margin: 80px 0 30px;}
.solution-item {display: flex;justify-content: space-between;position: relative;background: url(../img/bg_x-solution.jpg) no-repeat center top 30px / 60%;min-height:550px;}
.solution-left-wrap,.solution-right-wrap {width:26%}
details,details[open]{width:100%;}
details:not(:last-child) {margin-bottom: 20px;}
details summary {list-style: none;cursor: pointer;color: #242323;font-size:1.8rem;font-weight: bold;position: relative;margin-left: 24px;padding: 1em 1em 0;}
details summary span {border-bottom: 1px solid #ccc;width: 100%;display: block;padding-bottom: 0.5em;}
details summary::-webkit-details-marker {display: none;}
details summary::before {content: '▼';color: #BFBFBF;transform:rotate(-90deg);display:block;position:absolute;top:1em;left:-24px;font-size:1.8rem;}
details[open] summary::before {content: '▼';color: #BF187A;}
details[open] summary {background: #F2F2F2;}
details p {font-size: 1.3rem;width: 100%;}
details h4 {font-size: 1.4rem;font-weight: bold;padding-top: 0.8em}
.solution-info {background: #F2F2F2;margin-left: 24px;padding:0 1.2em 1.2em;}
.solution_info {margin-bottom: 40px;font-size: 1.2rem;}
.solution_info .sankaku-yoko {position: relative;width:1em;display:inline-block;margin: 0 0.3em}
.solution_info .sankaku-yoko::before {content: '▼';color: #BFBFBF;transform: rotate(-90deg);display: block;position: absolute;top:-12px;left:0;font-size:1.6rem;line-height: 1;}

@media screen and (max-width: 736px){
.h2_title-solution-wrap {display: flex;flex-wrap: wrap;margin: 80px 0 40px;}
.solution-item {display: flex;flex-wrap: wrap;background: url(../img/bg_x-solution.jpg) no-repeat center top 30px / 100%;min-height:550px;}
.solution-item::before {content: "";position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: rgba(255, 255, 255, 0.8);}
.solution-left-wrap,.solution-right-wrap {width:100%;z-index: 1}
details:last-child {margin-bottom: 20px;}
}


/* #sec-service-flow */
#sec-service-flow {margin: 80px auto;}
dl.service-flow-list {display: flex;flex-wrap: wrap;width:95%;margin: 0 2.5%}
dl.service-flow-list dt {width: 20%;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;text-align: center;font-weight: bold;}
dl.service-flow-list dd {width: 80%;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;}
dl.service-flow-list dt:nth-last-child(2),
dl.service-flow-list dd:nth-last-child(1) {border-bottom: none}
@media screen and (max-width: 736px){
dl.service-flow-list {width:100%;margin: 0}
dl.service-flow-list dt {text-align: left;width:7em;}
dl.service-flow-list dd {width:calc(100% - 7em);}
}


/* #sec-about-us */
#sec-about-us {margin: 80px auto;}
.about-us-item-wrap {display: flex;justify-content: space-between}
.about-us-item {width: 28%;margin:0 2.5%;}
.about-us-name-wrap {display: flex;justify-content:flex-start;align-items: flex-end;border-bottom: 1px solid #ccc;padding-bottom:0.5em;margin-bottom: 1em;}
.about-us-name {font-weight: bold;font-size: 1.6rem;line-height: 1.2;}
.about-us-name span {font-weight: normal;font-size: 1.2rem;display: block;}
.about-us-position {font-weight: bold;font-size: 1.8rem;padding-left: 1em;}
.about-us-ph {width:80%;max-width: 400px;margin:10px auto;}
.about-us-info {font-size: 1.3rem;line-height: 1.6;position: relative;margin-top: 1em;}
.about-us-info:before {content: "■";font-size:4rem;color:#D9D9D9;position: absolute;top:-24px;margin-left:-20px;z-index:-1}

@media screen and (max-width: 736px){
.about-us-item-wrap {display: flex;flex-wrap: wrap}
.about-us-item {width:100%;margin:0 0 80px;}
.about-us-item:last-child {margin:0;}
}


/* #sec-btm-contact */
.btm-title-wrap {display: flex;justify-content: flex-start;align-items:baseline;}
.btm-title-left {width: 50%;position: relative;text-align: center;}
.btm-title-left h2.btm-title-h2 {font-size: 2.6rem;font-weight: 800}
.btm-title-left h3.btm-title-h3 {font-size: 1.4rem;font-weight: 800}
.btm-title-right {width: 50%;font-size: 1.2rem;padding-left:2em;display:inline-block;}


#sec-btm-contact {margin: 40px auto 0;background:#D9ECF2;padding:40px 0 0;}
.btm-contact-wrap {display: flex;justify-content:space-between;}
.btm-contact-btn {margin:0 auto 30px; display: block; background: #fff;color: #000;font-size: 1.8rem; font-weight: bold;border-radius: 50px;padding:10px 5px;max-width:20em;box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);}
.btm-contact-item {text-align: center;width: 50%;}
.btm-contact-ph img {max-width:340px !important;padding: 10px 0;}
.btm-tel {text-align: center;margin-bottom: 50px}
.btm-tel-no {font-size: 1.8rem}
.btm-tel-time {font-size: 1.2rem;padding-left:1em;}

@media screen and (max-width: 736px){
.btm-title-wrap {display: flex;flex-wrap: wrap}
.btm-title-left,.btm-title-right {width: 100%;text-align: center}
.btm-contact-wrap {display: flex;flex-wrap: wrap;margin-top: 40px}
.btm-contact-item {width: 100%}
.btm-tel-time {display: block;padding-left:0;}
}