@charset "UTF-8";
/* line 11, beginner.scss */
#introSec .catch { font-size: 28px; margin-bottom: 1em; }
/* line 12, beginner.scss */
#introSec .read { text-align: center; }
/* line 13, beginner.scss */
#introSec .tit { font-family: "YakuHanJP", "HummingProN-D", "FOT-ハミング ProN D"; font-size: 26px; position: relative; z-index: 5; background: #fff; padding: 0 1em; margin-top: 1.5em; }
/* line 14, beginner.scss */
#introSec .tit::before { content: ""; width: 92px; height: 82px; background: url("../../img/cmn/logomark.svg") no-repeat; background-size: cover !important; display: block; margin: 0 auto; }
/* line 15, beginner.scss */
#introSec .tit::after { content: ""; width: 100%; height: 1px; background: rgba(179, 162, 162, 0.5); position: absolute; bottom: 1em; left: 0; z-index: 0; }
/* line 16, beginner.scss */
#introSec .tit em { background: #fff; padding: 0 1em; position: relative; z-index: 5; }
/* line 18, beginner.scss */
#introSec .notice { display: inline-block; background: #faf7ec; padding: 1em 2em 1em 70px; border-radius: 20px; position: relative; margin: 2.5em auto 4em; right: -2em; }
/* line 19, beginner.scss */
#introSec .notice .ph { width: 150px; height: 150px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; left: -100px; }

@media only screen and (max-width: 750px) { /* line 29, beginner.scss */
  #introSec { padding: 0 5%; }
  /* line 30, beginner.scss */
  #introSec .catch { font-size: 20px; margin-bottom: 1em; }
  /* line 31, beginner.scss */
  #introSec .read { text-align: justify; }
  /* line 32, beginner.scss */
  #introSec .tit { font-size: 20px; padding: 0 .5em; margin-top: 1.5em; }
  /* line 33, beginner.scss */
  #introSec .tit::before { width: 72px; height: 68px; margin: 0 auto .5em; }
  /* line 35, beginner.scss */
  #introSec .tit em { padding: 0 .5em; }
  /* line 37, beginner.scss */
  #introSec .notice { display: block; padding: 1.5em 1.5em; margin: 3.5em auto 6em; right: 0; }
  /* line 38, beginner.scss */
  #introSec .notice .ph { width: 100px; height: 100px; position: relative; top: auto; left: auto; bottom: auto; right: auto; transform: none; margin: -70px auto .5em; }
  /* line 40, beginner.scss */
  #introSec .notice .text .read { font-size: 15px; } }
/* line 53, beginner.scss */
#flowSec .list { background: #fef7f9; text-align: left; padding: 30px 50px 40px; border-radius: 30px; position: relative; overflow: visible; }
/* line 54, beginner.scss */
#flowSec .list:not(:last-child) { margin-bottom: 5em; }
/* line 55, beginner.scss */
#flowSec .list:not(:last-child)::after { content: "\f0d7"; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: #e23565; font-size: 80px; line-height: 1; position: absolute; left: -50%; right: -50%; margin: auto; z-index: 10; top: calc(100% - .05em); text-align: center; }
/* line 57, beginner.scss */
#flowSec .list .ph { width: 220px; height: 220px; border-radius: 50%; float: right; margin-left: 3em; margin-bottom: .5em; margin-top: -2.5em; margin-right: -1em; }
/* line 58, beginner.scss */
#flowSec .list .tit { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; /*display: flow-root;*/ }
/* line 59, beginner.scss */
#flowSec .list .tit .num { font-family: "YakuHanJP", "HummingProN-D", "FOT-ハミング ProN D"; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; position: relative; width: 100px; margin-top: -1em; margin-left: -1em; }
/* line 60, beginner.scss */
#flowSec .list .tit .num::after { content: ""; width: 120%; height: 120%; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: -50%; right: -50%; margin: auto; z-index: 10; z-index: 0; filter: blur(10px); }
/* line 61, beginner.scss */
#flowSec .list .tit .num span, #flowSec .list .tit .num em { line-height: 1.25; color: #e23565; opacity: .75; position: relative; z-index: 5; }
/* line 62, beginner.scss */
#flowSec .list .tit .num span { font-size: 10px; }
/* line 63, beginner.scss */
#flowSec .list .tit .num em { font-size: 38px; }
/* line 65, beginner.scss */
#flowSec .list .tit .t { font-family: "YakuHanJP", "HummingProN-D", "FOT-ハミング ProN D"; color: #e23565; width: calc(100% - 100px); border-bottom: 2px dotted rgba(179, 162, 162, 0.5); padding-bottom: .25em; }
/* line 66, beginner.scss */
#flowSec .list .tit .t em { font-size: 32px; }
/* line 67, beginner.scss */
#flowSec .list .tit .t span { font-size: 12px; margin-left: 1em; }
/* line 70, beginner.scss */
#flowSec .list .read { margin-top: 1em; }
@media only screen and (max-width: 750px) { /* line 76, beginner.scss */
  #flowSec .list { padding: 1.5em 1.5em; border-radius: 20px; width: 90%; margin: auto; }
  /* line 77, beginner.scss */
  #flowSec .list:not(:last-child) { margin-bottom: 7em; }
  /* line 78, beginner.scss */
  #flowSec .list:not(:last-child)::after { font-size: 60px; top: calc(100% - .05em); }
  /* line 80, beginner.scss */
  #flowSec .list .ph { width: 130px; height: 130px; float: none; margin: -80px auto .5em; }
  /* line 81, beginner.scss */
  #flowSec .list .tit { position: relative; }
  /* line 82, beginner.scss */
  #flowSec .list .tit .num { width: 70px; margin: 0; position: absolute; top: -50px; left: 50px; }
  /* line 83, beginner.scss */
  #flowSec .list .tit .num::after { width: 120%; height: 120%; }
  /* line 85, beginner.scss */
  #flowSec .list .tit .num span { font-size: 8px; }
  /* line 86, beginner.scss */
  #flowSec .list .tit .num em { font-size: 30px; }
  /* line 88, beginner.scss */
  #flowSec .list .tit .t { width: 100%; padding-bottom: 1em; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; }
  /* line 89, beginner.scss */
  #flowSec .list .tit .t em { font-size: 24px; }
  /* line 90, beginner.scss */
  #flowSec .list .tit .t span { font-size: 10px; margin-left: 0em; line-height: 1.5; }
  /* line 93, beginner.scss */
  #flowSec .list .read { margin-top: 1em; } }