@charset "utf-8";

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

#preamble{
  @media (max-width: 860px) {
    background:url(../grp/body_yama.png) center bottom repeat-x scroll;
  }
}

main{
  border-radius: 20px;
  padding:30px;
  border:3px solid rgb(var(--mainColor));
  background:white;
  @media (max-width: 860px) {
    padding:0;
    border:none;
    background:none;
  }
}

#top_com{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:20px;
  width:min(860px,100%);
  margin:0 auto;
  p{
    text-align: left;
    font-size: 1.2rem;
    font-weight: 500;
    
    strong{
      color:red;
      text-decoration: underline;
      text-underline-offset: .2em;
    }
  }
  @media (max-width: 768px) {
    display:block;
    figure{
      display:none;
    }
  }
}

#root{
  margin:30px auto 0 auto;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
  align-items: start;
  section{
    border:1px solid #2c9a74;
    padding:20px 0 0 0;
    border-radius: 10px;
    overflow: hidden;
    background:#fbfff2;
    h3{
      font-size: 1.2rem;
      font-weight: 500;
      span{
        font-size: 1rem;
        padding:.1em .5em;
        border-radius: 5px;
        margin:0 .3em 0 0 ;
        color:white;
        background:red;
        display:inline-block;
      }
    }
    p{
      margin:.5em 20px 0 20px;
      text-align: left;
    }
    div{
      margin:20px auto 0 auto;
      iframe{
        width:100%;
        height:min(450px,70vh);
        border: 10px;
      }
    }
  }
  > div{
    align-self: center;

    p{
      font-size: 1.6rem;
      font-weight: 600;
      margin:20px auto 0 auto;
      span{
        font-size: 1.3rem;
        font-weight: 500;
        background:red;
        display:inline-block;
        margin:0 .5em 0 0;
        padding:.2em .5em;
        border-radius: 5px;
        color:white;
      }
    }
  }
  @container (max-width: 900px) {
    display:block;
    > * + *{
      margin-top:20px;
    }
    section{
      div{
        border-radius: 0;
      }
    }
    > div{
      display:block;
      padding:20px;
      border:1px solid silver;
      border-radius: 10px;
      background:white;
    }
  }
}