@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 制作の流れ ◇◆◇
  
  
========================================================================================================================*/

.mess {
  text-align:center;
  padding-bottom:60px;
}

@media (max-width:767px) {
  .mess {
    text-align:left;
    padding-bottom:4em;
  }
}

@media (max-width:500px) {
  .mess {
    padding-bottom:3.5em;
  }
}


/*----------------------------------------------------------------------------------------------------

  流れ
  
----------------------------------------------------------------------------------------------------*/

.block-warp {
  background-color:#f2f2f2;
}

.step-block {
  padding-top:60px;
  padding-bottom:60px;
}

.step-title {
  text-align:center;
  font-weight:normal;
  margin-top:-5em;
}

.step-no {
  width:4em;
  height:4em;
  background-color:#2c77c2;
  color:#fff;
  display:inline-block;
  line-height:1.2;
  border-radius:4em;
  -moz-border-radius:4em;
  -webkit-border-radius:4em;
}

.step-no small {
  display:block;
  padding-top:1.3em;
}

.step-title .headline-cst {
  color:#0f64b9;
  margin-bottom:1em;
  margin-top:0.75em;
}

.step-block p.ind { padding-top:1.5em; }

.step-block .user {
  border:1px dotted #969696;
  padding:1em 1.25em;
  margin-top:2em;
  clear:both;
}

@media (max-width:767px) {
  .step-block {
    padding-top:4em;
    padding-bottom:4em;
  }
  
  .step-title .headline-cst {
    margin-bottom:0.5em;
  }

  .step-block p { padding-top:1em; }

  .step-block .user {
    padding:1em;
    margin-top:1.5em;
  }
  
  .step-block br.sp-none {
    display:none;
  }
}

@media (max-width:500px) {
  .step-block {
    padding-top:3.5em;
    padding-bottom:3.5em;
  }
  
  .step-title .headline-cst {
    margin-bottom:0.35em;
  }
  
  .step-no small {
    padding-top:1.5em;
  }
}


/*-----------------------------------------------------------------------------------
  タイトル　アニメーション
-----------------------------------------------------------------------------------*/

@media only screen {
  .cssanimations .step-title .step-no,
  .cssanimations .step-title .headline-cst {
    visibility:hidden;
  }
  
  .cssanimations .step-title .step-no.animated,
  .cssanimations .step-title .headline-cst.animated {
    visibility:visible;
  }
  
  .cssanimations .step-title .headline-cst.animated {
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
  
  
  .cssanimations .step-title .step-no.animated {
    -webkit-animation:spin 0.9s forwards;
    animation:spin 0.9s forwards;
    /*
    -webkit-animation:rotateIn 0.6s forwards;
    animation:rotateIn 0.6s forwards;
    */
  }
}

@-webkit-keyframes spin {
  0%   { transform:rotate(-360deg); }
  100% { transform:rotate(0deg); }
}

@keyframes spin {
  0%   { transform:rotate(-360deg); }
  100% { transform:rotate(0deg); }
}


/*-----------------------------------------------------------------------------------
  アイコン
-----------------------------------------------------------------------------------*/

.ic-step {
  width:250px;
  float:right;
  text-align:center;
  margin-left:40px;
  display:inline-block;
  margin-top:-2em;
}

.step03 .ic-step { margin-top:-5em; }
.step09 .ic-step { margin-top:-3em; }
.step10 .ic-step { margin-top:-5em; }

@media (max-width:767px) {
  .ic-step {
    width:32.59452%;
    margin-top:1em !important;
    margin-bottom:2em;
  }
}

@media (max-width:500px) {
  .ic-step {
    width:50%;
    float:none;
    margin-left:auto;
    margin-right:auto;
    margin-top:1.75em !important;
    margin-bottom:1em;
    display:block;
    text-align:center;
  }
}


/*-----------------------------------------------------------------------------------
  資料画像
-----------------------------------------------------------------------------------*/

.doc {
  float:right;
  position:relative;
  text-align:center;
  margin-left:40px;
}

.doc ul.slick-slider {
  padding-bottom:1.5em;
}

.step02 .doc-pc { width:250px; }
.step05 .doc-pc { width:310px; }
.step06 .doc-pc { width:310px; }

.step02 .doc-pc,
.step06 .doc-pc { margin-top:-3.5em; }
.doc-pc { display:inherit; }
.doc-sp { display:none; }

.doc img { margin-top:0.75em; }

@media (max-width:767px) {
  .doc {
    margin-bottom:2em;
  }

  .doc-pc { margin-top:0; display:none; }
  .doc-sp { display:inherit; padding-top:1.5em; }
  
  .doc-sp {
    width:100%;
    float:none;
    margin-left:0;
    margin-bottom:0;
  }
  
  .doc ul.doc-slide.slick-slider {
    margin-left:-5px;
    margin-right:-5px;
    padding-bottom:2em;
  }

  .doc li.slick-slide {
    margin-left:5px !important;
    margin-right:5px !important;
  }

  .doc ul.doc-slide:not(.slick-slider) {
    margin-left:-0.325945%;
    margin-right:-0.325945%;
  }
  
  .doc ul.doc-slide:not(.slick-slider) li {
    margin:0 0.65189%;
  }
  
  .doc li.slick-slide img {
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:500px) {
  .doc ul.doc-slide:not(.slick-slider) {
    margin-left:-0.75%;
    margin-right:-0.75%;
  }
  
  .doc ul.doc-slide:not(.slick-slider) li {
    width:46%;
    margin:0 1.5% !important;
  }
}

@media (max-width:360px) {
  .doc li.slick-slide {
    font-size:90%;
  }
}


/*-----------------------------------------------------------------------------------
  ドット
-----------------------------------------------------------------------------------*/

.doc .slick-dots {
  z-index:99;
  position:absolute;
  bottom:0;
  line-height:0;
}


/*----------------------------------------------------------------------------------------------------

  期間について
  
----------------------------------------------------------------------------------------------------*/

.period {
  text-align:center;
}

.period p {
  margin-top:-0.5em;
}

@media (max-width:767px) {
  .period p {
    text-align:left;
    margin-top:0;
  }
}


/*----------------------------------------------------------------------------------------------------

  まとめ
  
----------------------------------------------------------------------------------------------------*/

.flow-conclusion {
  text-align:center;
  border-top:1px solid #dcdcdc;
}

.flow-conclusion .block {
  text-align:center;
}

.flow-conclusion p:last-child {
  padding-top:1em;
}

.flow-conclusion br.pc-none {
  display:none;
}

@media (max-width:767px) {
  .flow-conclusion .block {
    text-align:left;
  }

  .flow-conclusion br.sp-none {
    display:none;
  }
  
  .flow-conclusion br.pc-none {
    display:inherit;
  }
}

.flow-conclusion-cc {
  background-color:#0a457f;
  color:#fff;
  padding:70px 30px 30px 30px;
  position:relative;
}

.flow-conclusion-cc:before {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:50px solid #fff;
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  border-bottom:60px solid transparent;
  position:absolute;
  left:50%;
  top:0;
  margin-left:-60px;
}

.flow-conclusion-cc span br {
  display:none;
}

@media (max-width:767px) {
  .flow-conclusion-cc {
    padding-top:3.25em;
    padding-bottom:2em;
    padding-left:3%;
    padding-right:3%;
  }

  .flow-conclusion-cc:before {
    border-width:40px;
    border-top-width:35px;
    margin-left:-40px;
  }
}

@media (max-width:640px) {
  .flow-conclusion-cc {
    padding-top:2.5em;
    padding-bottom:1.5em;
    font-size:92%;
  }
  
  .flow-conclusion-cc span {
    display:inline-block;
    margin-bottom:0.25em;
  }
  
  .flow-conclusion-cc span br {
    display:inherit;
  }
  
  .flow-conclusion-cc:before {
    border-width:30px;
    border-top-width:25px;
    margin-left:-30px;
  }
}

@media only screen {
  .cssanimations .flow-conclusion-cc p {
    visibility:hidden;
  }
  
  .cssanimations .flow-conclusion-cc p.animated {
    visibility:visible;
  }
  
  .cssanimations .flow-conclusion-cc p.animated {
    -webkit-animation:zoomIn 0.6s forwards;
    animation:zoomIn 0.6s forwards;
  }
}