@charset "utf-8";
/*消す*/
header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #fff;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
/*消す*/
html, body{
  height: 100%;
}

section.page-section.creative-agency img{
  width: 100%;
}

.fv {
  padding: 8% 0 2%;
  background: url(../images/fv-bg.png) no-repeat center;
  position: relative;
  overflow: hidden;
}

.fv h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 800;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  position: relative;
  padding: 0 0 45px 0;
  margin: 0 0 35px 0;
  line-height: 1;
  z-index: 1;
}

.fv h2:after{
  content: "";
  display: block;
  width: 10%;
  height: 4px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.fv h2 span{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05rem;
  display: block;
  padding: 0 0 1.5rem 0;
}

p.fv-read-big {
  color: #fff;
  font-size: 32px;
  padding: 1.5rem 0;
}

p.fv-read {
  color: #fff;
  font-size: 20px;
  line-height: 1.8;
  padding: 0 0 30px 0;
}

.fv-img {
  width: 120%;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/*contents*/

.customer-analysis-contents {
  padding: 80px 0;
}

.customer-analysis-contents h3 {
  font-size: 46px;
  font-weight: 800;
  color: #5cb1c6;
  text-align: center;
  line-height: 1;
  padding: 0 0 80px 0;
}

p.contents-ttl-read {
  font-size: 24px;
  color: #6A6A6A;
  line-height: 2;
  padding: 0 0 3rem 0;
}

p.contents-ttl-read span{
  color: #5cb1c6;
  font-size: 120%;
}

/**mr flow**/
.mr-flow-img {
  display: flex;
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
  gap: 40px;
}

.mr-flow-img figure{
  position: relative;
}

.mr-flow-img figure:after {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #3BACFF;
  position: absolute;
  top: 38%;
  right: 0;
  transform: translateX(150%);
}

.mr-flow-img figure:last-of-type:after{
  display: none;
}

.mr-flow-img figcaption{
    color: #0a4a81;
    font-size: 1rem;
    line-height: 1;
    padding: 0.5rem 0;
    font-weight: 500;
}

/**worries**/
.customer-analysis-contents.worries {
  background: #5cb1c621;
}

.worries-block {
  display: flex;
  justify-content: space-between;
}

ul.worries-list {
  width: 65%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.worries-block ul li{
  font-size: 22px;
  color: #6A6A6A;
  padding: 0 0 0 40px;
  background: url(../images/worries-check.png) no-repeat;
  background-position: left center;
  width: 100%;
  text-align: left;
}

.worries-block ul li span{
  color: #5cb1c6;
}

.worries-block figure{
  width: 35%;
}

.lesolution {
  padding: 40px 0 60px;
  background: #5cb1c6;
  position: relative;
}

.lesolution:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  border-color: #5cb1c6 transparent transparent transparent;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 95%);
  bottom: 0;
}

.lesolution p {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  position: relative;
  letter-spacing: 1.2px;
  width: fit-content;
  margin: 0 auto;
  padding: 0 50px;
}

.lesolution p span{
  color: inherit;
  font-size: 130%;
}

.lesolution p:before {
  content: "";
  display: block;
  width: 4px;
  height: 60%;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-22deg);
}

.lesolution p:after {
  content: "";
  display: block;
  width: 4px;
  height: 60%;
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(22deg);
}

h3.contents-ttl {
  margin: 0 auto 60px;
  color: #5cb1c6;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  padding: 40px;
}

h3.contents-ttl span{
  display: block;
}

h3.contents-ttl span.ttl-deco {
  font-size: 1.2rem;
  background: #5cb1c6;
  color: #fff;
  padding: 0.8rem 1.5rem;
  width: fit-content;
  margin: 0 auto 1rem;
}

h3.contents-ttl span.ttl-sub {
  color: #6A6A6A;
  font-size: 1.5rem;
  padding: 1rem 0 2rem;
}

h3.contents-ttl span.ttl-main {
  position: relative;
  padding: 0.5rem 6rem;
  width: fit-content;
  margin: 0 auto;
}

span.ttl-main:before {
  content: "";
  width: 2rem;
  height: 100%;
  border: 2px solid #5cb1c6;
  border-right: none;
  position: absolute;
  top: 0;
  left: 0;
}

span.ttl-main:after {
  content: "";
  width: 2rem;
  height: 100%;
  border: 2px solid #5cb1c6;
  border-left: none;
  position: absolute;
  top: 0;
  right: 0;
}

h3.contents-ttl.reversal span.ttl-deco {
  color: #5cb1c6;
  background: #fff;
}

h3.contents-ttl.reversal span.ttl-sub {
  color: #fff;
}

h3.contents-ttl.reversal span.ttl-main {
  color: #fff;
}

h3.contents-ttl.reversal span.ttl-main:before {
  border: 2px solid #fff;
  border-right: none;
}

h3.contents-ttl.reversal span.ttl-main:after {
  border: 2px solid #fff;
  border-left: none;
}

p.conest-ttl-read {
  margin: -20px 0 50px 0;
}

.contents-block {
  display: flex;
  justify-content: space-between;
  width: 80%;
  max-width: 1280px;
  margin: 3rem auto;
  align-items: center;
}

.contents-block .contents-txt {
    width: 45%;
    box-sizing: border-box;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.contents-txt p.contents-txt {
  width: 100%;
  border-radius: 16px;
  color: #fff;
  text-align: left;
  padding: 1rem 1.6rem;
  font-size: 14px;
}

.contents-txt p.contents-txt span {
  font-size: 120%;
  padding: 0 0 1rem 0;
  text-align: center;
  font-weight: 600;
}

.contents-txt p.contents-txt.reversal {
  background: #fff;
  color: #5cb1c6;
}

.contents-txt .bgblue {
  background: #79d2e8;
}

.contents-block .contents-img {
  width: 55%;
}

p.contents-copy {
  color: #6A6A6A;
  font-size: 2.6rem;
}

p.contents-copy.reversal{
  color: #fff;
}

.contents-block + .contents-block .contents-txt {
  order: 2;
}

.contents-block + .contents-block .contents-img {
  order: 1;
}

.customer-analysis-contents.sales-trends {
  background: #5cb1c6;
}

.sales-trends .contents-block .contents-txt {
  order: 2;
}

.sales-trends .contents-block .contents-img {
  order: 1;
}

.sales-trends .contents-block + .contents-block .contents-txt {
  order: 1;
}

.sales-trends .contents-block + .contents-block .contents-img {
  order: 2;
}

.customer-analysis-contents.mr-function {
  background: #5cb1c6;
  position: relative;
}

.customer-analysis-contents.mr-function:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  border-color: #5cb1c6 transparent transparent transparent;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 95%);
  bottom: 0;
}

.customer-analysis-contents.mr-function h3{
  color: #fff;
}

.customer-analysis-contents.mr-function figure{
  max-width: 1280px;
  margin: 0 auto;
}

.customer-analysis-contents.mr-function img.beiginner-icon {
  max-width: 60px !important;
}

p.mr-function-txt{
  padding: 2rem 0 0 0;
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
}

p.mr-function-txt span{
  display: block;
  font-size: 80%;
}

p.mr-function-txt img{
  max-width: 50px;
}

.customer-analysis-contents.mr-function-img figure {
  max-width: 960px;
  margin: 0 auto;
}

.customer-analysis-contents.mr-function-img figure + figure{
  margin-top: 40px;
}

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

@media screen and (max-width: 1280px){
  .contents-block {
    width: 90%;
  }
  .customer-analysis-contents.mr-function figure{
    width: 80%;
  }
}

@media screen and (max-width: 1024px){
  .fv h2 {
    font-size: 52px;
  }
  p.fv-read {
    font-size: 16px;
  }
  .fv-img {
    max-width: 600px;
  }
  .lesolution {
    padding: 40px 0;
  }
  .lesolution p {
    font-size: 26px;
  }
  .worries-block {
    padding: 0 24px;
  }
}

@media screen and (max-width: 768px){
  p.contents-ttl-read {
    font-size: 20px;
  }
  .customer-analysis-contents {
    padding: 50px 0;
  }
  .customer-analysis-contents h3 {
    padding: 0 0 30px 0;
  }
  .worries-block ul li {
    font-size: 17px;
  }
  .contents-block {
    flex-wrap: wrap;
  }
  .contents-block .contents-txt {
    width: 100%;
    order: 1 !important;
  }
  .contents-block .contents-txt img{
    width: 80%;
    margin: 0 10%;
  }
  .contents-block .contents-img {
    width: 100%;
    padding: 0 10%;
    order: 2 !important;
  }

  .flow-block dl {
    width: 48%;
    margin: 0 0 30px 0;
  }
  h4.case-ttl {
    padding: 0 15px 15px 15px;
    margin: 0 auto 25px;
  }
  .case-block dl dt {
    font-size: 16px;
  }
  .case-block dl dd p {
    font-size: 14px;
  }
  .case-interview h5 {
    font-size: 16px;
  }
  .case-interview p {
    font-size: 14px;
    line-height: 1.6;
  }
  .usage-fee-block dl dt {
    font-size: 16px;
  }
  .usage-fee-block dl dd.usage-fee-txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 580px){
  .fv-img {
    width: 80%;
    padding: 10%;
  }
  .customer-analysis-contents h3 {
    font-size: 30px;
  }
  p.contents-ttl-read {
    font-size: 16px;
  }
  .mr-flow-img {
    width: 94%;
    gap: 20px;
  }
  .mr-flow-img figure:after {
    border-width: 10px 0 10px 10px;
  }
  .lesolution:after {
    border-width: 30px 80px 0 80px;
  }
  h3.contents-ttl span.ttl-main {
    padding: 0.5rem 4rem;
    font-size: 48px;
  }
  h3.contents-ttl{
    margin-bottom: 0;
  }
  .contents-block {
    margin: 0 auto;
  }
  .contents-block .contents-txt {
    padding: 2rem 0;
  }
  p.contents-copy {
    font-size: 2.2rem;
  }
  p.mr-function-txt {
    font-size: 1.8rem;
  }
  p.mr-function-txt img {
    max-width: 35px;
  }
  .customer-analysis-contents.mr-function {
    margin: 0 0 30px 0;
  }
  .customer-analysis-contents.mr-function-img figure {
    width: 80%;
  }
  .customer-analysis-contents.mr-function img.beiginner-icon {
    max-width: 35px !important;
  }
}

@media screen and (max-width: 480px){
  .fv h2 {
    font-size: 42px;
  }
  .fv p{
    padding-left: 8%;
    padding-right: 8%;
  }
  p.fv-read-big {
    font-size: 24px;
  }
  p.fv-read {
    font-size: 14px;
  }
  .customer-analysis-contents {
    padding-left: 8%;
    padding-right: 8%;
  }
  .customer-analysis-contents h3 {
    font-size: 24px;
  }
  p.contents-ttl-read {
    font-size: 15px;
  }
  .worries-block {
    flex-wrap: wrap;
  }
  ul.worries-list {
    width: 100%;
  }
  .worries-block figure {
    width: 100%;
  }
  .lesolution p {
    font-size: 20px;
    padding: 0 24px;
  }
  
}

@media screen and (max-width: 430px){
  .fv h2 span {
    font-size: 15px;
    padding: 1rem 0 1.5rem 0;
  }
  p.fv-read-big {
    font-size: 20px;
  }
  .mr-flow-img {
    width: 90%;
    gap: 20px;
    flex-wrap: wrap;
  }
  .mr-flow-img figure {
    width: 100%;
  }
  .mr-flow-img figure:after {
    border-width: 10px 0 10px 10px;
    rotate: 90deg;
    top: auto;
    right: auto;
    bottom: 0;
  }
  .customer-analysis-contents {
    padding-left: 5%;
    padding-right: 5%;
  }
  .customer-analysis-contents h3 {
    font-size: 20px;
  }
  p.contents-ttl-read {
    font-size: 14px;
  }
  h3.contents-ttl span.ttl-main {
    padding: 0.5rem 2rem;
    font-size: 40px;
  }
  span.ttl-main:before, span.ttl-main:after {
    width: 1rem;
  }
  p.contents-copy {
    font-size: 1.8rem;
  }
}

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

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

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