@charset "utf-8";

/* -------------------------------------------------- */
/* #block-beginner */
/* -------------------------------------------------- */
#block-beginner .box + .box{margin-top:30px;}
#block-beginner .box .flex{display:flex;}
#block-beginner .box .flex01{flex:1;padding:15px;background:url(/img/beginner/be_pa02.jpg) no-repeat;background-size:100% 100%;font-feature-settings:"palt";-webkit-font-feature-settings:"palt";}
#block-beginner .box .flex02{max-width:51%;}
#block-beginner .box .box-txt{text-align:right;margin-top:10px;}
#block-beginner .box .link{display:flex;gap:10px;margin-top:20px;}
#block-beginner .box .link > *{flex:1;}

/* -------------------------------------------------- */
/* #block-icon */
/* -------------------------------------------------- */
#block-icon .box{border:1px solid #ccc;padding:15px;}
#block-icon .box .box-inner{display:flex;gap:15px;}
#block-icon .box .box-inner > *{flex:1;display:flex;gap:5px;}
#block-icon .box .box-inner .img{max-width:54%;}
#block-icon .box .box-inner .txt{flex:1;}
#block-icon .box .box-inner .ttl{font-weight:bold;margin-bottom:2px;}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:799px){
   /* -------------------------------------------------- */
  /* #block-beginner */
  /* -------------------------------------------------- */
  #block-beginner .box{max-width:500px;margin-left:auto;margin-right:auto;}

  /* -------------------------------------------------- */
  /* #block-icon */
  /* -------------------------------------------------- */
  #block-icon .box{padding:20px;}
  #block-icon .box .box-inner{display:block;max-width:400px;margin:auto;}
  #block-icon .box .box-inner > *{align-items:center;}
  #block-icon .box .box-inner > * + *{margin-top:10px;}

}
@media screen and (min-width:1px) and (max-width:569px){
  #block-beginner .box .flex{display:block;}
  #block-beginner .box .flex01{padding:15px 20px 20px;}
  #block-beginner .box .flex .flex02{margin:auto;width:100%;max-width:100%;text-align:center;}
  #block-beginner .box .flex .flex02 img{width:100%;}
}