@charset "utf-8";

@import url("../style/variables.css");/*変数定義*/
	
:root{
}

#nayami{
  width:min(760px,100%);
  margin:0 auto;
  font-size: 1.1rem;
  > * + *{
    margin-top:15px;
  }
  h3{
    font-size: 1.3rem;
    font-weight: 600;
  }
  ul{
    display:flex;
    flex-wrap:wrap;
    justify-content: start;
    gap:.5em 1em;
    li{
      margin:0 0 0 2em;
      list-style:disc;
      text-align: left;
    }
  }
  P{
    display:inline-block;
    text-align: left;
  }
  
}

#flow{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:30px;
  width:min(1000px,100%);
  margin:50px auto 0 auto;
  section{
    border:3px solid rgb(var(--mainColor));
    border-radius: 10px;
    padding:20px;
    > * + *{
      margin-top:10px;
    }
    > h3{
      font-size: 1.4rem;
      font-weight: 600;
      text-align: left;
      span{
        display:inline-block;
        font-size: 1rem;
        margin:0 .5em 0 0;
        padding:.1em .5em;
        background:rgb(var(--mainColor));
        color:white;
        border-radius: 5px;
      }
    }
    > p{
      text-align: left;
    }
    > aside{
      a{
        display:inline-block;
        background:red;
        color:white;
        font-size: 1.1rem;
        padding:.3em .7em;
        border-radius: 10px;
        &:hover{
          background:#d90000;
        }
      }
    }
  }
  @media (max-width: 768px) {
    display:grid;
      gap:20px;
      grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
  }
}

#contact{
  width:min(1000px,100%) !important;
}