@charset "utf-8";

/* -------------------------------------------------- */
/* #block-beginner */
/* -------------------------------------------------- */
#block-beginner .box + .box{margin-top:30px;}
#block-beginner .box .box-inner{border:1px solid #ccc;background:linear-gradient(180deg, #f6edf0, #d299a0);}
#block-beginner .box .box-inner02{border:1px solid #fff;}
#block-beginner .box .box-ttl{font-size:2.4rem;font-weight:600;letter-spacing:0.05em;position:relative;padding-left:57px;background:#fff;}
#block-beginner .box .box-ttl span{font-size:3.2rem;display:flex;align-items:center;justify-content:center;;background:#763d4c;color:#fff;width:48px;height:48px;padding-bottom:3px;transform:rotate(-5deg);position:absolute;top:-8px;left:5px;box-shadow:2px 2px 2px rgba(0,0,0,0.1);}
#block-beginner .box .box-ttl.narrow{letter-spacing:0;}
#block-beginner .box .box-top{padding:5px 0 0;border-bottom:0;}
#block-beginner .box .img{margin:10px 5px 0;text-align:center;}
#block-beginner .box .flex{display:flex;padding:5px;gap:5px;}
#block-beginner .box .flex01{flex:1;padding:0 0 1px 1px;}
#block-beginner .box .flex01 .flex01-inner{height:100%;padding:10px;font-feature-settings:"palt";-webkit-font-feature-settings:"palt";background:#fff;}
#block-beginner .box .flex02{width:50%;padding:0 1px 1px 0;}
#block-beginner .box .flex02 .flex02-inner{border-left:0;height:100%;background:url(/img/beginner/back.jpg) repeat;font-feature-settings:"palt";-webkit-font-feature-settings:"palt";position:relative;}
#block-beginner .box .flex02 a{text-decoration:none;color:#444;font-weight:bold;display:flex;flex-direction:column;height:100%;}
#block-beginner .box .flex02 h2{text-align:center;background:#fddd4c;margin-top:8px;font-size:1.6rem;letter-spacing:0.08em;padding:2px 5px;}
#block-beginner .box .flex02 ul{flex:1;padding:10px;font-size:1.3rem;}
#block-beginner .box .flex02 ul > li{position:relative;padding-left:12px;}
#block-beginner .box .flex02 ul > li + li{margin-top:5px;}
#block-beginner .box .flex02 ul > li::before{content:"";display:block;width:6px;height:6px;background:#ffa020;border-radius:100%;position:absolute;left:0;top:0.6em;opacity:0.8;}
#block-beginner .box .flex02 .btn{background:#a16974;text-align:center;padding:8px;border-top:5px solid #c4959d;}
#block-beginner .box .flex02 .btn span{display:inline-block;padding:3px 10px 3px 25px;color: #444;border-radius:3px;font-size: 1.4rem;border: 1px solid #bcbebd;background: linear-gradient(0deg, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 50%);background-size: contain;outline: 1px solid #fff;outline-offset: -2px;position: relative;}
#block-beginner .box .flex02 .btn span::before{content:"";display:block;width:12px;height:15px;background:url(/img/beginner/arrow.png) no-repeat;background-size:contain;position:absolute;top:50%;left:12px;margin-top:-8px;}
#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 .img img{width:100%;}
  #block-beginner .box .flex{display:block;}
  #block-beginner .box .flex01{margin-bottom:5px;}
  #block-beginner .box .flex02{width:100%;max-width:100%;}

}