/* Scss Document */
:root {
  --pc: 1000px;
  --sp: 999px;
  --fs48: 4.8rem;
  --fs40: 4rem;
  --fs36: 3.6rem;
  --fs28: 2.8rem;
  --fs22: 2.2rem;
  --fs20: 2.0rem;
  --fs18: 1.8rem;
  --fs16: 1.6rem;
  --fs14:1.4rem;
  --fs12:1.2rem; }

@media (max-width: 999px) {
  :root {
    --fs48: 2.6rem;
    --fs40: 2.2rem;
    --fs36: 2.4rem;
    --fs28: 2.2rem;
    --fs22: 2.0rem;
    --fs20: 1.8rem;
    --fs18: 1.4rem;
    --fs16: 1.4rem;
    --fs14: 1.2rem;
    --fs12: 1.0rem; } }
/* 
---------------------------------------
flow
---------------------------------------
*/
#flow .boxs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 8rem 10rem; }
  @media (max-width: 999px) {
    #flow .boxs {
      flex-direction: column;
      padding: 4rem 2rem; } }
#flow .box {
  width: calc(609/1200*100%); }
  @media (max-width: 999px) {
    #flow .box {
      width: 100%;
      margin-bottom: 2rem; } }
#flow .pic {
  width: calc(508/1200*100%); }
  @media (max-width: 999px) {
    #flow .pic {
      width: 100%; } }
#flow .ttlBox {
  display: flex;
  align-items: center;
  margin-bottom: 2rem; }
#flow .ico {
  width: 8rem;
  height: auto;
  margin-right: 2rem; }
  @media (max-width: 999px) {
    #flow .ico {
      width: 5.4rem;
      margin-right: 1rem; } }
#flow .ttl {
  font-size: 3.2rem;
  color: #0097EA; }
  @media (max-width: 999px) {
    #flow .ttl {
      font-size: 2.4rem; } }
#flow .txt span {
  font-size: 1.6rem;
  line-height: 2;
  display: block; }
  @media (max-width: 999px) {
    #flow .txt span {
      font-size: 12px; } }
#flow .underIcon {
  margin: 2rem auto; }
  @media (max-width: 999px) {
    #flow .underIcon {
      width: 6rem;
      height: auto;
      margin: 1rem auto; } }