@charset "UTF-8";

/* ロゴライン
--------------------------------------*/
.results{
  padding: 0 0 5rem;
}
.results h2{
  width: 30.2rem;
  margin: 0 auto;
}

/*　スライド -------*/
.results-slide{
  padding: 3.5rem 0 0;
}
.results-slide img{
  max-width: none;
  height: 97px;  
}

/* ビジネスシーン SP
--------------------------------------*/
.scene{
  background: var(--red);
}
.scene section{
  padding: 0 1.5rem;
  position: relative;
}
.scene section h2{
  width: 100%;
  position: absolute;
  top: -8px;
  left: 0;
  z-index: 5;
}
.scene section h2 picture img{
  display: block;
  width: 22rem;
  margin: 0 auto;
  padding: 0 0 3rem;  
 }
.scene section h2 span{
  display: block;
  padding: 0;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
  color: #fff;
}
.scene section h2 span strong{
  display: block;  
  padding: 1rem 0 2.5rem;
  line-height: 1.5;
  font-size: 3rem;
}

/* シーン内容 SP -------------- */
.scene-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  padding: 32rem 0 0;
}
.scene-content article{
  width: auto;
  margin: 0 0 2.5rem;
  padding: 0 0 2.5rem;
  border-bottom: 1px solid var(--lred);
}
.scene-content article:last-child{
  margin: 0 0 5rem;
  border-bottom: 0;   
}

/* 写真とNO SP */
.scene-ph{
  position: relative;  
}
.scene-ph p{
  width: 36%;
  padding: 0.3rem 0 0;
  background: var(--red);
  border-radius: 0 2rem 0 0;
  letter-spacing: 0.05em;
  font-family: "Outfit", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  position: absolute;
  bottom: -25px;
  left: 0;
}
.scene-ph p span{
  padding: 0 0.5rem;
  font-size: 2.1rem;
}
.scene-content article h3{
  padding:3rem 0 1rem;
  letter-spacing: 0.05em;
  font-size: 2.1rem;
  font-weight: bold;
  color: var(--yl);
}
.scene-content article h3 + p{
  line-height: 2;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
}
.scene-content article h3 + p span{
  color: var(--yl);
}

/* 選ばれる理由 SP
--------------------------------------*/
.reason{
  padding: 3rem 1.5rem 0;
  background: var(--egray);  
}
.reason-lady-pc{
  background: none;
}
.reason section h2{
  max-width: 34rem;  
  margin: 0 auto;
  padding: 0 0 3rem;  
}
.re-line{
  display: block;
  height: 3rem;
  margin: 0 0 2rem;
  border-top: 8px solid var(--red);
  border-left: 8px solid var(--red);
  border-right: 8px solid var(--red);
  position: relative;
}
.re-line::before{
  display: block;
  content: "";
  width: 8rem;
  height: 3rem;
  border-left: 8px solid var(--red);
  width: 100%;
  position: absolute;
  top: -3rem;
  left: 50%;
}

.reason-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
  margin: 0;
  padding: 0;
}
.reason-content article{
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 0 1rem;
  box-shadow: 5px 5px 10px rgba(156, 156, 156, 0.2);
  border-radius: 0.5rem;
  background: #fef5fa;
  overflow: hidden;
}
.reason-content article > p{
  width: 25%;
  padding: 0 1.5rem;
}
.reason-content article > p img{
  display: block;
  max-width: 8rem;
  margin: 0 auto;
}

/* 高さ調整 */
.reason-content article div{
  width: 75%;
  height: auto;
  padding: 2rem 4rem 2rem 2rem;
  background: #fff;
}
@media screen and (min-width:500px) {
  .reason-content article div{
    height: 14rem;
  }
}
@media screen and (min-width:600px) {
  .reason-content article div{
    height: 12rem;
  }
}
@media screen and (min-width:750px) {
  .reason-content article div{
    height: 15rem;
  }
}
@media screen and (min-width:1000px) {
  .reason-content article div{
    height: 14rem;
  }
}
@media screen and (min-width:1400px) {
  .reason-content article div{
    height: 16rem;
  }
}
@media screen and (min-width:1600px) {
  .reason-content article div{
    height: 20rem;
  }
}

.reason-content article div h3{
  padding: 0;
  letter-spacing: 0.025em;  
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--red);
}
.reason-content article div h3 + p{
  max-width: 36rem;
  line-height: 1.6;
  font-size: 1.4rem;
}

/* 女性 SP ----------------- */
.reason p.reason-lady{
  display: block;
  width: 20rem;
  margin: 0 auto;
  padding: 1rem 0 0;
  text-align: center;
}

/* アップロード SP
--------------------------------------*/
.upload{
  padding: 5rem 0 0;
  background: var(--egray);
}
.upload section h2{
  margin: 0 0 5rem;
  padding: 0 1rem;
  text-align: center;
  line-height: 2;
  letter-spacing: 0.025em;
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--red);
}
.upload section h2 span strong{
  font-size: 2.8rem;
}

.upload-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.upload-content article{
  width: auto;
  margin: 0 0 5rem;
  padding: 3rem 2rem;
  background: #fff;
  position: relative;
}
.upload-content article p.up-no{
  width: 100%;
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  top: -30px;
  left: 0;
}
.upload-content article figure{
  border-radius: 1rem;
  background: var(--lgray);
}
.upload-content article figure img{
  display: block;
  height: auto;
  margin: 0 auto;
  padding: 1.5rem 0;
}
/* アイコン SP ------------------------ */
.upload-content article figure.up-wh01 img{
  width: 12rem;
}
.upload-content article figure.up-wh02 img{
  width: 14rem;
}
.upload-content article figure.up-wh03 img{
  width: 12rem;
}
.upload-content article div h3{
  padding: 1.5rem 0 1rem;
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  color: var(--red);
}
.upload-content article div h3 + p{
  padding: 0 1rem;
  font-size: 1.5rem;
}
.upload-content article div + p{
  width: 100%;
  position: absolute;
  bottom: -1rem;
  left: 0;
}
.upload-content article div + p img{
  display: block;
  width: 2.4rem;
  margin: 0 auto;
  text-align: center;
  transform: rotate(90deg);
}
/*----------------------------------------------------
PC / タブレット用 414- 
----------------------------------------------------*/
@media screen and (min-width:414px) {
   .upload section h2{
    font-size: 2.4rem;
  }
  .upload section h2 span strong{
    font-size: 2.8rem;
  }
  .upload-content article div h3 + p{
    padding: 0 1.5rem;
    font-size: 1.6rem;
  }
}

/*機能 SP
-------------------------*/
.func-wrap{
  padding: 5rem 0;
}
.func-wrap h2{
  padding: 0 0 2.5rem;
}
.func-wrap h2 img{
  display: block;
  width: 28.6rem;
  margin: 0 auto;
}
.func-main{
  padding: 0 0.5rem 5rem;
  text-align: center;
}

/* 機能内容 SP ------------------- */
.func-content{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.func-content article{
  width: auto;
  margin: 0 0 3rem;
  position: relative;
}
.func-content article figure{
  padding: 2rem;
  text-align: center;
  background: #eee;
}
.func-content article h3{
  padding: 2rem 0 1rem;
  letter-spacing: 0.025em;  
  text-align: center;
  font-size:2rem;
  font-weight: bold;
}
.func-content article h3 br{
  display: block;
}
.func-only{
  width:12rem;
  position: absolute;
  top: -15px;
  right: 0;  
}

/* 機能質問 SP ----------------- */
.func-q {
  display: flex;
  justify-content: center;
  padding: 0;
  line-height: 1.6;
  cursor: pointer;  
  position: relative;
  background: url(../img/fonc-line-8.png) repeat-x left center;  
}

.func-q p{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
}
.func-q::before, .func-q::after {
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.func-q::before {
  width: 15px;
  height: 3px;
}
.func-q::after {
  width: 3px;
  height: 15px;
  opacity: 1;
  transition: .3s;
}
.func-q.active::after {
  opacity: 0;
}
/* 回答 SP ----------------- */
.func-a {
  display: none;
  margin: 0 1rem;
  padding: 2rem 1.5rem 3rem;
  font-size: 1.6rem;
  background: var(--lgray);
}
.func-a p {
  line-height: 2;
  font-size: 1.4rem;
}
.func-a p span{
  padding-block-end: 3px;  
  border-bottom: 2px dashed var(--red); 
  font-weight: bold;
  color: var(--red);
}
.func-a p small{
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
}

/* サンプルはこちら SP ----------------- */
.func-sample{
  margin: 0 1.5rem;
  padding: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  background: var(--egray);
  position: relative;
}
.func-sample-in{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  border-radius: 0.5rem;
  border: 2px solid var(--red);
  background: var(--red);
  overflow: hidden;
}
.func-sample-in p:first-child{
  width: auto;
  padding: 3rem 0 2rem;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1.8rem;
  background: #fff;
}
.func-sample-in p:first-child span{
  color: var(--red);
  font-weight: bold;
}
.func-sample-in p:nth-child(2){
  background: #fff;
  position: static; 
}
.func-sample-in p:nth-child(2) img{
  display: block;
  width: 16rem;
  margin: 0 auto;
}
.func-sample-in p:last-child {
  width:auto;
}
.func-sample-in p:last-child a{
  display: block;
  padding: 3rem 0;
  text-align: center;
  font-size: 2.6rem;
  font-weight: bold;
  color: #fff;
  background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 96% center;
  background-size: 2.4rem;
  letter-spacing: 0.1em;
  transition: 0.5s;
}
.func-sample-in p:last-child a:hover{
  background: #e74d9d url(../img/icon-btn-w-r.svg) no-repeat 96% center;
  background-size: 2.4rem;
}

/* 導入事例 SP
-------------------------*/
.case-wrap{
  padding: 5rem 0;
  background: var(--egray);
}
.case-wrap section h2{
  padding: 0 0 3rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}

/* スクロール内企業情報
---------------------------- */
#works .works-slick{
  max-width: 1480px;
  margin: 0 auto 5rem;
/*  margin: 0 0 5rem;*/
  padding: 3rem 0;
}
#works .works-slick div.slick-wh{
  padding: 0 1rem;
}
.case-data{
  padding: 2rem 1rem;
  background: #fff;
}

/* 事例各企業 SP --------------------- */
.case-data{
  display: flex;
  flex-direction: column;
  padding: 3rem;
  background: #fff;
  box-shadow: 5px 5px 0 rgba(153, 153, 153, 0.2);
}
/* 事例ロゴ SP --------------------- */
.case-data figure{
  width: auto;
  padding: 0;
}
.case-data figcaption{
  display: block;
  padding: 2rem 0;
  font-size: 1.6rem;
}
.case-data figcaption span{
  padding: 0 1rem;
}
/* 事例内容 SP --------------------- */
.case-data article{
  width: auto;
  padding: 0;
  border-left: 0;
}
.case-data article h3{
  padding: 0 0 5rem;
  letter-spacing: 0.05em;
  font-size: 2.1rem;
  font-weight: bold;
}
.case-data article h3 span{
  font-weight: bold;
  color: var(--red);
}
.case-data article h3 + p{
  display: none;
}
.case-data article dl{
  max-width: 65rem;
  padding: 0 0 3rem;
}
.case-data article dl:last-child{
  padding: 0;
}
.case-data article dl dt{
  line-height: 1;
  padding: 0 0 1rem 2.4rem;
  font-size: 1.8rem;
  background: url(../img/case-icon.svg) no-repeat left top;
  background-size: 14px;
  color: var(--red);
}
.case-data article dl dd{
  font-size: 1.4rem;
}


/* 料金プラン SP
-------------------------*/
.plan-wrap {
  padding: 5rem 0 0;
}
.plan-wrap h2{
  padding: 0 0 5rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}
.plan-wrap h2 + p{
  width: 32rem;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.025em;
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--red);
  position: relative;
}
.plan-wrap h2 + p span{
  font-size: 2.8rem;  
}
.plan-wrap h2 + p small{
  font-size: 1.2rem;
  vertical-align: top;
}
.plan-wrap h2 + p::before{
  content: "メクリブ";
  width: 8rem;
  line-height: 1.6;
  border-radius: 1rem;
  font-size: 1.2rem;
  color: #fff;
  background: var(--red); 
  position: absolute;
  top: -15px;
  left: 30px;
}
.plan-wrap h2 + p + p{
  margin: 0 0 5rem;
  padding: 1rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid #ccc;
  font-size: 1.6rem;
}

/* スクロール SP --------------- */
.plan-in-pc{
  display: none;
}
.plan-in-sp{
  display: block;
}
.plan-in{
  margin: 0 0 0 1.5rem;
  overflow-x: scroll;
  scrollbar-color: var(--red) #e0e0e0;
}
.plan-in p{
  width: 92rem;
  padding: 0 0 2rem;
}
.plan-in p img{
  display: block;
  max-width: none;  
  width: 90rem;
}

/* 説明 SP --------------- */
.plan-ttl{
  padding: 7rem 1.5rem;
}
.plan-ttl dl{
  margin: 0 0 3rem;
  padding: 2rem;
  color: var(--red);  
  border: 1px solid var(--red);
  font-size: 1.6rem;
  font-weight: bold;
}
.plan-ttl ol{
  line-height: 1.6;
  font-size: 1.4rem;
  font-weight: bold;  
}

/* 制作代行 SP 
---------------------------- */
.plan-agency{
  padding: 0rem 1.5rem 5rem;
  background: linear-gradient(180deg, #fff 0%, #fff 85%, #d6006f 85%, #d6006f 100%);
}
.plan-agency section{
  display: flex;
  flex-direction: column;
  padding: 3rem 0;
  border: 3px solid var(--red);
  border-radius: 1rem 1rem 0 0;
  background: #fff;
  box-shadow: 5px 5px 5px reba(153,153,153,0.5);
}
.plan-agency section h3{
  width: auto;
  text-align: center;
  letter-spacing: 0;
  margin: 0 3rem 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #ccc;   
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--red); 
}
.plan-agency section article{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: auto;
  padding: 0;
  border-left: none;    
}
.plan-agency-ttl {
  width: auto;
  padding: 0 3rem;
}
.plan-agency-ttl h4{
  padding: 0 0 2rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
  text-align: center;
  font-size: 2.8rem;
  font-weight: bold;
}
.plan-agency-ttl h4 + p{
  color: var(--red);   
  font-size: 1.8rem;
  font-weight: bold;
}
.plan-agency-ttl h4 + p + p{
  padding:1.5rem 0 2.5rem;
  text-align: left;
  font-size: 1.6rem;
}
/* 画像 SP -------- */
.plan-agency section article figure{  
  width: auto;
  padding: 0 3rem 2.5rem;
  text-align: center;
}
/* ボタン SP -------- */
.plan-agency-btn{
  width: auto;
  padding: 0 1.5rem;
}
.plan-agency-btn p a{
  display: block;
  padding: 2rem 0;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  border-radius: 1rem;
  border: 3px solid var(--red);
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--yl);
  background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 96% center;
  background-size: 3rem;
  transition: 0.5s;
}
.plan-agency-btn p a:hover{
  color: var(--red);
  background: #fff url(../img/icon-btn-r.svg) no-repeat 96% center;
  background-size: 3rem;
}


/*よくある質問 SP
-------------------------*/
.faq-wrapper {
  background: #f8f8f8;
  padding: 5rem 1.5rem;
}
.faq-wrapper section{
  max-width: 120rem;
  margin: 0 auto;
}
.faq-wrapper section h2{
  padding: 0 0 3rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}

#faq {
  max-width: 120rem;
  margin: 0 auto;
}
.faq-box {
  margin: 0 0 1rem;
  border-radius:1rem;
  overflow: hidden;
  border: 1px solid var(--red);
}
/* 質問 SP ----------------- */
.question {
  padding: 2rem 5rem 2rem 3.5rem;
  line-height: 1.6;
  cursor: pointer;
  background: #fff;
  font-size: 1.8rem;
  position: relative;
}
.question p {
  margin: 0 0 0 1rem;
  padding: 0 0 0 0.5rem;
  position: relative;
}
/* Q SP-------------------- */
.question p::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--red);
  border-radius: 50%;
  position: absolute;
  top: -0.2rem;
  left: -3.8rem;
}
.question p::after {
  content: "Q";
  color: #fff;
  font-size: 2.1rem;
  font-weight: bold;
  position: absolute;
  top: -0.5rem;
  left: -3.1rem;
}

/* +（開く） SP-------------------- */
.question::before, .question::after {
  content: "";
  display: block;
  background: var(--red);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.question::before {
  width: 15px;
  height: 3px;
  right: 1.5rem;
}
.question::after {
  width: 3px;
  height: 15px;
  right: 2.1rem;
  opacity: 1;
  transition: .3s;
}
.question.active::after {
  opacity: 0;
}
/* 回答 SP ----------------- */
.answer {
  display: none;
  padding: 2rem 1.5rem 3rem;
  font-size: 1.6rem;
  color: #fff;
  background: var(--red);
}
.answer p strong {
  color: #fcfc71;
  font-size: 1.4rem;
  font-weight: bold;
}

/* A SP-------------------- */
.answer {
  padding: 2rem 3.5rem;
  cursor: pointer;
  background:var(--red);
  font-size: 1.8rem;
  position: relative;
}
.answer p {
  margin: 0 0 0 1rem;
  padding: 0 0 0 0.5rem;
  position: relative;
}
.answer p::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -0.2rem;
  left: -3.8rem;
}
.answer p::after {
  content: "A";
  color: var(--red);
  font-size: 2.1rem;
  font-weight: bold;
  position: absolute;
  top: -0.5rem;
  left: -3.1rem;
}
/* +（開く） SP-------------------- 
.answer::before, .answer::after {
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}*/
.answer p span{
  display: block;
  font-size: 1.4rem;
}
.answer p span.qatime{
  font-size: 1.4rem;
}
.answer p a{
  display: block;
  padding: 0.5rem 0 0;
  text-decoration: underline;
  color: #fff;
}
.answer p a:hover{
  color: #ff0;
}


/* ボタン SP -------------*/
.qa-btn{
  padding: 2rem 0 0;
}
.qa-btn a{
  display: block;
  width: 32rem;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
  border-radius: 0.5rem;
  border: 3px solid var(--red); 
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  background: var(--red) url(../img/icon-triangle-w.svg) no-repeat 94% center;
  background-size: 0.8rem;
  transition: 0.5s;
}
.qa-btn a:hover{
  color: var(--red);
  background: #fff url(../img/icon-triangle-red.svg) no-repeat 94% center;
  background-size: 0.8rem;
}


/* ご利用開始の流れ SP
-------------------------*/
.flow-wrap{
  padding: 5rem 3rem;
  background: var(--egray);  
}
.flow-wrap section h2{
  padding: 0 0 2rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;  
}
/* 内容 SP --------------- */
.flow-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid #ccc;
}
.flow-content article{
  width: auto;
  padding: 3rem;
  border-bottom: 1px solid #ccc;
  border-right: none;
  position: relative;
}
.flow-content article dl{
  display: flex;
  align-items: flex-end;
  margin: 0 0 2rem;
  padding: 0;
}
.flow-content article dl dt{
  line-height: 1;
  letter-spacing: 0.075em;
  font-family: "Outfit", sans-serif;
  font-size: 1.6rem;
}
.flow-content article dl dt span{
  display: block;
  letter-spacing: 0;
  font-size: 3rem;
  color: var(--red);
}
.flow-content article dl dd{
  line-height: 1;
  padding: 0 0 0.2rem 1rem;
  font-size: 2.1rem;
  font-weight: bold;
}
/* 画像 SP -------------*/
.flow-content figure{
  display: flex;
  align-items: stretch;  
  width: auto;
  height: auto;
  margin: 0 0 2rem;
  padding: 1.5rem 0;
  border-radius: 2rem;
  background: #fff;
}
.flow-content article figure img{
  display: block;
  margin: 0 auto;
}
.flow-content article:first-child figure img{
  width: 7.2rem;
}
.flow-content article:nth-child(2) figure img{
  width: 14rem;
}
.flow-content article:nth-child(3) figure img{
  width: 9rem;
}
.flow-content article:nth-child(4) figure img{
  width: 9rem;
}
.flow-content article:last-child figure img{
  width: 8rem;
}

/* 画像下テキスト SP -------------*/
.flow-content article figure + p{
  padding: 0 1.5rem;
  font-size: 1.6rem;
}
.flow-content article:first-child figure + p,
.flow-content article:nth-child(2) figure + p{
  padding: 0 2rem;
}
.flow-content figure + p span{
  color: var(--red);
  padding-block-end: 2px;  
  border-bottom: 1px solid var(--red);  
}
/* 進行矢印 SP --------------- */
.flow-content article p.flow-arr{
  width: 100%;
  position: absolute;
  bottom: -1rem;
  left: 0;
}
.flow-content article p.flow-arr img{
  display: block;
  width: 1.8rem;
  margin: 0 auto;
  text-align: center;
  transform: rotate(90deg);
}

/*----------------------------------------------------
PC / タブレット用 750- 
----------------------------------------------------*/
@media screen and (min-width:750px) {

  .scene section h2 picture img{
    display: block;
    width: 54rem;
    padding: 0;  
   }
  .scene section h2 span{
    display: none;
  }

  /* シーン内容 TB -------------- */
  .scene-content{
    flex-direction: row;
    padding: 18rem 0 0;
  }
  .scene-content article{
    width: 48%;
    border-bottom: 0;
  }

  /* 選ばれる理由 TB
  --------------------------------------*/
  .reason{
    padding: 5rem 1.5rem 0;
  }
  .reason section h2{
    max-width: 111rem;  
    margin: 0 auto;
    padding: 0 0 3rem;
  }
  .re-line{
    display: none;
  }

  .reason-content{
    flex-direction: row;
  }
  .reason-content article{
    width: 49%;
  }
  .reason-content article div{
    padding: 2rem 3rem 2rem 2rem;
  }


  /* アップロード TB
  --------------------------------------*/
  .upload{
    padding: 5rem 0;
    background: var(--egray);
  }
  .upload section h2{
    margin: 0 0 6rem;
    padding: 0;
  }
  .upload-content{
    flex-direction: row;
  }
  .upload-content article{
    width: 30%;
    margin: 0;
  }
  /* アイコン TB ------------------------ */
  .upload-content article figure img{
    height: 15rem;
  }
  .upload-content article figure.up-wh01 img{
    width: 12rem;
    padding: 0;
  }
  .upload-content article figure.up-wh02 img{
    width: 14rem;
    padding: 2rem 0 0;
  }
  .upload-content article figure.up-wh03 img{
    width: 12rem;
    padding: 0;
  }

  .upload-content article div h3 + p{
    padding: 0;
  }
  .upload-content article div + p{
    width: 100%;
    position: absolute;
    bottom: 50%;
    left: 103%;
    z-index: 10;
  }
  .upload-content article div + p img{
    margin: 0;
    text-align: left;
    transform: rotate(0deg);
  }


  /* 機能 TB 
  --------------------------------------*/
  .func-content{
    flex-direction: row;
  }
  .func-content article{
    width: 48%;
  }

  .func-sample-in{
    flex-direction: row;
    align-items:center;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
  }
  .func-sample-in p:first-child{
    width: 60%;
    padding: 1.5rem 0 1.5rem 15rem;
    text-align: left;
    font-size: 1.6rem;
  }
  .func-sample-in p:nth-child(2){
    background: transparent;
    position: absolute;
    top: -7px;
    left: 15px; 
  }
  .func-sample-in p:nth-child(2) img{
    width: 13rem;
    margin: 0;
  }
  .func-sample-in p:last-child{
    width: 40%;
  }
  .func-sample-in p:last-child a{
    display: block;
    padding: 2rem 0;
    font-size: 2rem;
    background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 92% center;
    background-size: 2rem;
    transition: 0.5s;
  }
  .func-sample-in p:last-child a:hover{
    padding: 2.6rem 0;
    background: #e74d9d url(../img/icon-btn-w-r.svg) no-repeat 92% center;
    background-size: 2rem;
  }

  /* 料金プラン 750
  -------------------------*/
  .plan-wrap h2 + p{
    width: 64rem;
  }
  .plan-wrap h2 + p::before{
    top: -15px;
    left: 50px;
  }
  .plan-wrap h2 + p + p{
    padding: 0 0 3rem;
  }


  /* 制作代行 750 
  ---------------------------- */
  .plan-agency section h3{
    margin: 0 10rem 1.5rem; 
  }
  .plan-agency-ttl {
    padding: 0 10rem;
  }
  /* 画像 SP -------- */
  .plan-agency section article figure{  
    padding: 0 10rem 2.5rem;
  }


  /* 質問 TB 
  --------------------------- */
  .question {
    padding: 2rem 7rem 2rem 5rem;
  }
  .question p {
    margin: 0 1rem;
    padding: 0 0 0 0.5rem;
  }
  .question::before {
    width: 15px;
    height: 3px;
    right: 3rem;
  }
  .question::after {
    width: 3px;
    height: 15px;
    right: 3.6rem;
    opacity: 1;
    transition: .3s;
  }
  /* 回答 TB ----------------- */
  .answer {
    padding: 2rem 10rem 2rem 5rem;
  }
  .answer p {
    margin: 0 1rem;
    padding: 0 0 0 0.5rem;
  }
  .answer::before {
    width: 15px;
    height: 3px;
    right: 3rem;
  }
  .answer::after {
    width: 3px;
    height: 15px;
    right: 3.6rem;
    opacity: 1;
    transition: .3s;
  }


}

/* -----------------------------------------------
PC 1000-
----------------------------------------------- */
@media screen and (min-width:1000px) {

  /* ロゴライン 
  --------------------------------------*/
  .results{
    padding: 0 0 8rem;
  }
  .results h2{
    width: 78rem;
  }

  /* ビジネスシーン 1000
  --------------------------------------*/
  .scene section h2 picture img{
    width: 77rem;
   }
  .scene section h2 span{
    display: none;
  }

  /* シーン内容 TB -------------- */
  .scene-content{
    padding: 27rem 0 0;
  }
  .scene-content article{
    width: 30%;
    margin: 0 0 8rem;
  }
  .scene-content article:last-child{
    margin: 0 0 8rem;
  }

  .scene-content article h3{
    padding:3.5rem 0 1rem;
    font-size: 2.4rem;
  }
  .scene-content article h3 + p{
    font-size: 1.8rem;
  }

  /* 選ばれる理由 1000
  --------------------------------------*/
  .reason-lady-pc{
    background: url(../img/reason-ph-lady.png) no-repeat left bottom;
    background-size: 40rem;  
  }
  .reason section h2{
    width:67%;  
    margin: 0 0 0 auto;
    padding: 0 0 1.5rem;
  }

  /* 内容 1000 ----------------- */
  .reason-content{
    width: 67%;
    margin: 0 0 0 auto;
    padding: 0 0 5rem;
  }
  .reason-content article > p{
    padding: 0 1.5rem;
  }
  .reason-content article > p img{
    display: block;
    max-width: 8rem;
    margin: 0 auto;
  }
  .reason-content article:last-child > p img{
    max-width: 7rem;
  }
  
  .reason-content article div{
    padding: 2rem;
  }
  .reason-content article div h3{
    font-size: 1.6rem;
  }
  .reason-content article div h3 + p{
    font-size: 1.3rem;
  }

  /* 女性 1000 ----------------- */
  .reason p.reason-lady{
    display: none;
  }


  /* アップロード 1000
  --------------------------------------*/
  .upload{
    padding: 10rem 0;
  }
  .upload section h2{
    margin: 0 0 10rem;
    padding: 0;
    font-size: 3.6rem;
  }
  .upload section h2 span strong{
    font-size: 4.2rem;
  }

  .upload-content{
    flex-direction: row;
    padding: 0;
  }
  .upload-content article{
    width: 30%;
    margin: 0;
    padding: 5rem 2rem 6rem;
  }
  .upload-content article p.up-no{
    font-size: 6.4rem;
    position: absolute;
    top: -60px;
    left: 0;
  }
  .upload-content article figure{
    border-radius: 1rem;
    background: var(--lgray);
  }
  .upload-content article figure img{
    display: block;
    height: auto;
    margin: 0 auto;
  }
  /* アイコン 1000 ------------------------ */
  .upload-content article figure img{
    height: auto;
  }
  .upload-content article figure.up-wh01 img{
    width: 18rem;
    padding: 5rem 0;
  }
  .upload-content article figure.up-wh02 img{
    width: 22rem;
    padding: 5rem 0;
  }
  .upload-content article figure.up-wh03 img{
    width: 18rem;
    padding: 5rem 0;
  }

  .upload-content article div h3{
    padding: 3rem 0 2rem;
    font-size: 3rem;
  }
  .upload-content article div h3 + p{
    padding: 0 1rem;
    font-size: 2rem;
  }
  .upload-content article div + p img{
    width: 6rem;
  }

  /* 導入事例 1000
  -------------------------*/
  .case-wrap{
    padding: 10rem 0;
  }
  .case-wrap section h2{
    padding: 0 0 6rem;
    font-size: 3.6rem;
  }

  /* 事例各企業 1000 --------------------- */
  .case-data{
    flex-direction: row;
    padding: 6rem 5rem;
  }
  /* 事例ロゴ 1000 --------------------- */
  .case-data figure{
    width: 29%;
    padding: 0 5% 0 0;
  }
  .case-data figcaption{
    display: none;
  }

  /* 事例内容 1000 --------------------- */
  .case-data article{
    width: 71%;
    padding: 0 0 0 6%;
    border-left: 1px solid #ccc;
  }
  .case-data article h3{
    padding: 0;
    font-size: 3rem;
  }
  .case-data article h3 span{
    font-weight: bold;
    color: var(--red);
  }
  .case-data article h3 + p{
    display: block;
    padding: 2rem 0 4rem;
    font-size: 1.8rem;
  }
  .case-data article dl{
    padding: 0 0 3rem;
  }
  .case-data article dl:last-child{
    padding: 0;
  }
  .case-data article dl dt{
    line-height: 1;
    padding: 0 0 1rem 2.4rem;
    font-size: 2rem;
    background: url(../img/case-icon.svg) no-repeat left top;
    background-size: 18px;
  }
  .case-data article dl dd{
    font-size: 1.6rem;
  }

  /* 機能 1000 
  --------------------------------------*/
  .func-sample-in p:first-child{
    width: 55%;
    padding: 1.5rem 0 1.5rem 20rem;
    font-size: 1.8rem;
  }
  .func-sample-in p:nth-child(2){
    top: -8px;
    left: 40px; 
  }
  .func-sample-in p:nth-child(2) img{
    width: 14rem;
  }
  .func-sample-in p:last-child{
    width: 45%;
  }
  .func-sample-in p:last-child a{
    font-size: 2.4rem;
  }

  /* 料金プラン 1000
  -------------------------*/
  .plan-wrap {
    padding: 10rem 1.5rem 5rem;
  }
  .plan-wrap h2{
    font-size: 3.6rem;
  }

  .plan-wrap h2 + p{
    width: 64rem;
    font-size: 2.8rem;
  }
  .plan-wrap h2 + p span{
    font-size: 3rem;  
  }
  .plan-wrap h2 + p::before{
    top: -15px;
    left: 10px;
  }
  .plan-wrap h2 + p + p{
    padding: 0 0 6rem;
  }

  /* スクロール 1000 --------------- */
  .plan-in-sp{
    display: none;
  }
  .plan-in-pc{
    display: block;
  }
  .plan-in p img{
    max-width: 100%;  
    width: auto;
  }

  /* 説明 1000 --------------- */
  .plan-ttl{
    padding: 4rem 0 0;
  }
  .plan-ttl dl{
    font-size: 1.8rem;
  }
  .plan-ttl ol{
    line-height: 1.8;
    font-size: 1.6rem;
  }


  /* 制作代行 1000 
  ---------------------------- */
  .plan-agency{
    padding: 0rem 1.5rem 3rem;
    background: linear-gradient(180deg, #fff 0%, #fff 70%, #d6006f 70%, #d6006f 100%);
  }
  .plan-agency section{
    flex-direction: row;
  }
  .plan-agency section h3{
    width: 7%;
    margin: 0;
    padding: 0 1.5% 0 0;
    letter-spacing: 0.1em;
    text-align: left;
    border-bottom: none;   
    writing-mode: vertical-rl;
    text-orientation: upright;    
  }

  .plan-agency section article{
    flex-direction: row;
    width: 93%;
    padding: 0 6rem 0 4.5rem;
    border-left: 1px solid #ccc;   
  }
  .plan-agency-ttl {
    width: 64%;
    padding: 0 8rem 0 0;
  }
  .plan-agency-ttl h4{
    padding: 0;
    text-align: left;
  }
  .plan-agency-ttl h4 + p + p{
    padding:1rem 0 2rem;
    text-align: left;
  }

  /* 画像 1000 -------- */
  .plan-agency section article figure{  
    width: 36%;
    padding: 0;
    text-align: center;
  }  
  /* ボタン 1000 -------- */
  .plan-agency-btn{
    width: 100%;
    padding: 0;
  }


  /*よくある質問 1000
  -------------------------*/
  .faq-wrapper {
    padding: 10rem 1.5rem;
  }
  .faq-wrapper section h2{
    padding: 0 0 8rem;
    font-size: 3.6rem;
  }

  /* 質問 1000 ----------------- */
  .question {
    padding: 3rem 7rem 3rem 5rem;
    font-size: 2.1rem;
  }
  .question p {
    margin: 0 1rem;
    padding: 0.6rem 0 0 2.5rem;
  }
  .question::before {
    width: 15px;
    height: 3px;
    right: 3rem;
  }
  .question::after {
    width: 3px;
    height: 15px;
    right: 3.6rem;
    opacity: 1;
    transition: .3s;
  }

  /* Q 1000 ------------ */
  .question p::before {
    width: 4.6rem;
    height: 4.6rem;
    top: -0.2rem;
    left: -3.8rem;
  }
  .question p::after {
    font-size: 2.6rem;
    top: 0;
    left: -2.4rem;
  }

  /* 回答 1000 ----------------- */
  .answer {
    padding: 3rem 7rem 3rem 5rem;
    font-size: 2.1rem;
  }
  .answer p {
    margin: 0 1rem;
    padding: 0.6rem 0 0 2.5rem;
  }
  .answer::before {
    width: 15px;
    height: 3px;
    right: 3rem;
  }
  .answer::after {
    width: 3px;
    height: 15px;
    right: 3.6rem;
    opacity: 1;
    transition: .3s;
  }

  .answer p span{
    font-size: 1.6rem;
  }
  .answer p span.qatime{
    display: inline;
    font-size: 1.6rem;
  }


  /* A 1000 ------------ */
  .answer p::before {
    width: 4.6rem;
    height: 4.6rem;
    top: -0.2rem;
    left: -3.8rem;
  }
  .answer p::after {
    font-size: 2.6rem;
    top: 0;
    left: -2.4rem;
  }

  /* ボタン 750 -------------*/
  .qa-btn a{
    width: 34rem;
    margin: 0 0 0 auto;
    padding: 1rem 0;
    border: 3px solid var(--red);
    font-size: 1.8rem;
    background: var(--red) url(../img/icon-triangle-w.svg) no-repeat 96% center;
    background-size: 0.8rem;
  }
  .qa-btn a:hover{
    color: var(--red);
    background: #fff url(../img/icon-triangle-red.svg) no-repeat 96% center;
    background-size: 0.8rem;
  }

 /* ご利用開始の流れ 1000
  -----------------------------------*/
  .flow-wrap{
    padding: 10rem 1.5rem;
  }
  .flow-wrap section h2{
    padding: 0 0 8rem;
    font-size: 3.6rem;
  }

  /* 内容 1000 --------------- */
  .flow-content{
    flex-direction: row;
    border-top: none;
  }
  .flow-content article{
    width: 20%;
    padding: 0.5rem 0;
    border-bottom: none;
    border-right: 1px solid #ccc;
  }
  .flow-content article dl{
    margin: 0;
    padding: 0 0 5rem 2rem;
  }
  .flow-content article dl dd{
    font-size: 1.8rem;
  }

  /* 画像 1000 -------------*/
  .flow-content figure{
    align-items: center;
    width: 14rem;
    height: 14rem;
    margin: 0 auto 4rem;
    padding: 0;
    border-radius: 50%;
  }
  .flow-content article:first-child figure img{
    width: 6rem;
  }
  .flow-content article:nth-child(2) figure img{
    width: 11rem;
  }
  .flow-content article:nth-child(3) figure img{
    width: 8rem;
  }
  .flow-content article:nth-child(4) figure img{
    width: 10rem;
  }
  .flow-content article:last-child figure img{
    width: 9rem;
  }


  /* 進行矢印 1000 --------------- */
  .flow-content article p.flow-arr{
    bottom: 55%;
    left: 50%;
  }
  .flow-content article p.flow-arr img{
    display: block;
    width: 3rem;
    margin: 0 auto;
    text-align: center;
    transform: rotate(0deg);
  }

}

/*----------------------------------------------------
PC 1200- 
----------------------------------------------------*/
@media screen and (min-width:1200px) {

  /* 選ばれる理由 1200
  --------------------------------------*/
  .reason section h2{
    width:72%;  
  }

  /* 内容 1200 ----------------- */
  .reason-content{
    width: 72%;
  }

  .reason-content article > p img{
    max-width: 6rem;
  }

  .reason-content article:last-child > p img{
    max-width: 5.4rem;
  }

  .reason-content article div{
    padding: 2rem 4rem 2rem 2rem;
  }


}


/*----------------------------------------------------
PC 1400- 
----------------------------------------------------*/
@media screen and (min-width:1400px) {


  /* 選ばれる理由 1400
  --------------------------------------*/
  .reason{
    padding: 8rem 1.5rem 0;
  }
  .reason-lady-pc{
    background: url(../img/reason-ph-lady.png) no-repeat -2% bottom;
    background-size: 50rem;  
  }

  /* 内容 1400 ----------------- */
  .reason-content article{
    margin: 0 0 2rem;
  }
  .reason-content article div h3{
    font-size: 2rem;
  }
  .reason-content article div h3 + p{
    font-size: 1.6rem;
  }


  /* 機能 1400
  -------------------------*/
  .func-wrap{
    padding: 10rem 0;
  }
  .func-wrap h2{
    padding: 0 0 5rem;
  }
  .func-wrap h2 img{
    width: 68rem;
  }
  .func-main{
    padding: 0 0 8rem;
  }

  /* 機能内容 1400 ------------------- */
  .func-content{
    padding: 0 1.5rem 5rem;
  }
  .func-content article{
    width: 31%;
    margin: 0 0 6rem;
  }
  .func-content article h3{
    padding: 3rem 0 2rem;
    font-size:2.2rem;
  }
  .func-content article h3 br{
    display: none;
  }
  .func-a p {
    font-size: 1.8rem;
  }
  .func-a p span{
    padding-block-end: 3px;  
    border-bottom: 2px dashed var(--red); 
  }

  /* サンプルはこちら 1400 ----------------- */
  .func-sample{
    margin: 0;
    padding: 5rem 10rem 3rem;
    border-radius: 1rem;
  }
  .func-sample-in p:first-child{
    width: 60%;
    padding: 2.8rem 0 2.8rem 26rem;
    line-height: 1.8;
    font-size: 2.8rem;
  }
  .func-sample-in p:nth-child(2){
    top: -30px;
    left: 60px; 
  }
  .func-sample-in p:nth-child(2) img{
    width: 30rem;
  }
  .func-sample-in p:last-child{
    width: 40%;
  }
  .func-sample-in p:last-child a{
    display: block;
    padding: 4rem 0;
    font-size: 3.6rem;
    background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 92% center;
    background-size: 3rem;
  }
  .func-sample-in p:last-child a:hover{
    padding: 4.6rem 0;
    background: #e74d9d url(../img/icon-btn-w-r.svg) no-repeat 92% center;
    background-size: 3rem;
  }

  /* 制作代行 1400 
  ---------------------------- */
 .plan-agency section{
    padding: 5rem 0;
  }
  .plan-agency section h3{
    letter-spacing: 0.2em;
    font-size: 2.8rem;
  }
  .plan-agency-ttl h4{
    padding: 0;
    font-size: 4.2rem;
    font-weight: bold;
  }
  .plan-agency-ttl h4 + p{
    font-size: 2.2rem;
  }
  .plan-agency-ttl h4 + p + p{
    padding:2rem 0 5rem;
  }
  .plan-agency-btn p a{
    padding: 1rem 0;
    letter-spacing: 0.1em;
    font-size: 3rem;
    background: var(--red) url(../img/icon-btn-w-r.svg) no-repeat 80% center;
    background-size: 3rem;
  }
  .plan-agency-btn p a:hover{
    color: var(--red);   
    background: #fff url(../img/icon-btn-r.svg) no-repeat 80% center;
    background-size: 3rem;
  }

  /* よくある質問 PC1400
  -------------------------*/
  .faq-wrapper {
    padding: 10rem 0;
  }

 /* 流れ 1400 
  ---------------------------- */
  
  /* 内容 1400 --------------- */
  .flow-content article dl{
    margin: 0;
    padding: 0 0 5rem 4rem;
  }
  .flow-content article dl dd{
    font-size: 2.4rem;
  }

  /* 画像 1400 -------------*/
  .flow-content figure{
    align-items: center;
    width: 20rem;
    height: 20rem;
    margin: 0 auto 4rem;
    padding: 0;
    border-radius: 50%;
  }
  .flow-content article:first-child figure img{
    width: 11rem;
  }
  .flow-content article:nth-child(2) figure img{
    width: 16rem;
  }
  .flow-content article:nth-child(3) figure img{
    width: 13rem;
  }
  .flow-content article:nth-child(4) figure img{
    width: 21rem;
  }
  .flow-content article:last-child figure img{
    width: 14rem;
  }
  /* 画像下テキスト 1400 -------------*/
  .flow-content article figure + p{
    padding: 0 4rem;
  }
  .flow-content article:first-child figure + p,
  .flow-content article:nth-child(2) figure + p{
    padding: 0 4rem;
  }

}

/*----------------------------------------------------
PC 1600- 
----------------------------------------------------*/
@media screen and (min-width:1600px) {

  /* 選ばれる理由 1600
  --------------------------------------*/
  .reason{
    padding: 8rem 0 0;
  }
  .reason-lady-pc{
    background: url(../img/reason-ph-lady.png) no-repeat left bottom;
    background-size: 60rem;  
  }

  .reason section h2{
    width: 74%;  
    margin: 0 0 0 auto;
    padding: 0 0 3rem;
  }  
  .reason-content{
    width: 74%;
    margin: 0 0 0 auto;
    padding: 0 0 5rem;
  }

  .reason-content article > p img{
    max-width: 8rem;
  }
  .reason-content article:last-child > p img{
    max-width: 6.4rem;
  }

  .reason-content article div{
    padding: 3rem 6rem 3rem 3rem;
  }
  .reason-content article div h3{
    padding: 0 0 1rem;    
    font-size: 2.6rem;
  }
  .reason-content article div h3 + p{
    font-size: 1.8rem;
  }


  /* 機能内容 1600 ------------------- */
  .func-content{
    padding: 0 0 5rem;
  }  

  /*料金プラン 1600
  -------------------------*/
  .plan-wrap {
    padding: 10rem 0 5rem;
  }

  /* 制作代行 1600 
  ---------------------------- */
  .plan-agency{
    padding: 0rem 0 3rem;
  }

  /*よくある質問 SP
  -------------------------*/
  .faq-wrapper {
    padding: 10rem 0rem;
  }

}

/*----------------------------------------------------
PC 1800- 
----------------------------------------------------*/
@media screen and (min-width:1800px) {

  .reason section h2{
    width: 80%;  
  }  
  .reason-content{
    width: 80%;
    padding: 0 0 5rem;
  }
  .reason-lady-pc{
    background: url(../img/reason-ph-lady.png) no-repeat left bottom;
    background-size: 60rem;  
  }

}