@charset "UTF-8";
/*
@mixin mPc { 
	@media screen and (min-width: 961px) and (max-width: 1280px){
		@content;
	}	
}
*/
#lead h2 {
  font-weight: 500;
  font-size: clamp(2rem, 4.31vw, 3.4rem);
  margin-bottom: 30px;
  text-align: center;
  color: #005fb7; }
@media screen and (min-width: 961px) {
  #lead .inner {
    padding-bottom: 60px; } }
#lead p.purpose {
  font-weight: bold;
  color: #00233f; }
  @media screen and (min-width: 768px) {
    #lead p.purpose {
      font-size: 1.8rem; } }
@media screen and (max-width: 480px) {
  #lead ul {
    max-width: 300px;
    width: 100%;
    margin: 0px auto; } }
@media screen and (min-width: 481px) {
  #lead ul {
    display: flex;
    justify-content: space-between; } }
#lead ul li {
  display: block;
  text-align: center;
  border: 1px solid #cccccc;
  background: #f7f7f7; }
  @media screen and (max-width: 480px) {
    #lead ul li {
      margin-bottom: 20px; } }
  @media screen and (min-width: 481px) {
    #lead ul li {
      width: 48%; } }
  #lead ul li a {
    display: block;
    padding: 20px 20px;
    font-weight: bold; }
    @media screen and (min-width: 768px) {
      #lead ul li a {
        padding: 30px 30px; } }
    #lead ul li a:hover {
      background: #dde7e9; }
  #lead ul li img {
    margin-bottom: 20px;
    max-width: 180px; }
    @media screen and (min-width: 768px) {
      #lead ul li img {
        max-width: 250px; } }
  #lead ul li .viewmore {
    max-width: 210px;
    margin: 0px auto;
    font-size: 1.6rem;
    color: #ffffff;
    display: block;
    padding: 10px 10px;
    font-family: "Jost", sans-serif;
    font-style: italic;
    font-weight: 500;
    background-image: linear-gradient(90deg, #0a56a3, #0b5fb3 15%, #0bb8de);
    position: relative; }
    @media screen and (min-width: 1281px) {
      #lead ul li .viewmore {
        font-size: 2.0rem; } }
    #lead ul li .viewmore::after {
      content: url("../images/common/arrow_thin_white.svg");
      display: inline-block;
      background-size: contain;
      position: absolute;
      width: 28px;
      top: 20%;
      padding-left: 5px; }

 /*************************************
    common
*************************************/
#flow .step {
  margin-bottom: 10px;
  padding: 15px 20px 25px 20px;
  border-radius: 10px;
  position: relative;
  border-top: 5px solid #ccc; }
  @media screen and (min-width: 961px) {
    #flow .step {
      padding: 20px 50px 10px 50px; } }
  @media screen and (min-width: 768px) {
    #flow .step {
      display: flex;
      justify-content: space-between; } }
  @media screen and (min-width: 768px) {
    #flow .step .step_number {
      width: 200px; } }
  @media screen and (min-width: 768px) {
    #flow .step .textArea {
      width: -webkit-calc(100% -250px);
      width: calc(100% - 250px); } }
  #flow .step strong {
    font-weight: bold; }
  #flow .step .point_S {
    font-weight: 600; }
  #flow .step h3 {
    margin-bottom: 10px; }
    @media screen and (min-width: 961px) {
      #flow .step h3 {
        margin-bottom: 20px; } }
    #flow .step h3 span.en {
      font-weight: 600;
      font-size: clamp(1.8rem, 2.4vw, 3rem);
      font-family: "Times New Roman", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "source-han-serif-japanese", serif;
      color: #005fb7;
      background: linear-gradient(transparent 50%, #B8D8F7 50%);
      font-family: "Jost", sans-serif; }
  #flow .step h4.tit {
    margin-bottom: 30px;
    font-weight: bold; }
    @media screen and (min-width: 768px) {
      #flow .step h4.tit {
        margin-bottom: 20px; } }
    @media screen and (max-width: 767px) {
      #flow .step h4.tit {
        text-align: center;
        margin-bottom: 30px; } }
    #flow .step h4.tit span {
      font-weight: 900;
      font-size: clamp(2.2rem, 3.69vw, 3.4rem);
      color: #005fb7;
      background: linear-gradient(transparent 50%, #B8D8F7 50%);
      display: inline-block; }
      @media screen and (min-width: 768px) {
        #flow .step h4.tit span {
          margin-right: 20px; } }
  #flow .step h5 {
    font-weight: bold;
    color: #005fb7;
    font-size: clamp(2rem, 1vw, 2.5rem);
    margin-bottom: 15px;
    border-top: 1px dotted #333333;
    padding-top: 20px; }
  #flow .step h6 {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.8rem; }
  #flow .step .catch {
    font-size: clamp(2rem, 1vw, 2.5rem);
    margin-bottom: 30px; }
  #flow .step table.plan {
    margin: 20px auto;
    margin-bottom: 40px; }
    #flow .step table.plan th {
      background: #666666;
      border: solid 1px #ccc;
      color: #fff;
      padding: 10px;
      width: 200px; }
    #flow .step table.plan td {
      border: solid 1px #ccc;
      padding: 10px;
      background: #ffffff; }
    @media screen and (max-width: 767px) {
      #flow .step table.plan {
        width: 100%; }
        #flow .step table.plan .last td:last-child {
          border-bottom: solid 1px #ccc;
          width: 100%; }
        #flow .step table.plan th,
        #flow .step table.plan td {
          border-bottom: none;
          display: block;
          width: 100%; } }
  #flow .step .step_number {
    font-family: "Jost", sans-serif;
    font-weight: 900;
    font-size: 4.2rem;
    font-style: italic;
    line-height: 1.0;
    margin-bottom: 7px; }
    @media screen and (max-width: 960px) {
      #flow .step .step_number {
        text-align: center; } }
    @media screen and (max-width: 767px) {
      #flow .step .step_number {
        font-size: 3.2rem; } }
    #flow .step .step_number span.num {
      font-size: 8.0rem;
      color: #005fb7;
      line-height: 1.0; }
      @media screen and (max-width: 767px) {
        #flow .step .step_number span.num {
          font-size: 6.0rem; } }
  #flow .step ul {
    margin-bottom: 30px; }
    #flow .step ul li {
      padding-bottom: 5px; }
  #flow .step p {
    margin-bottom: 25px; }

#flow h3.planname {
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  font-size: clamp(2rem, 3.08vw, 3rem); }
#flow .entry {
  max-width: 800px;
  margin: 0px auto; }
  #flow .entry .mazuha {
    position: relative;
    padding: 1rem;
    border-radius: 15px;
    border: 1px solid;
    border-bottom: 8px solid #ffffff;
    background-color: #00233f;
    color: yellow;
    font-weight: bold;
    font-size: 1.8rem;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #flow .entry .mazuha {
        font-size: 2.6rem; } }
    #flow .entry .mazuha::before {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      height: 25px;
      width: 1px;
      background-color: #005fb7;
      content: ""; }

#sanbrain .anshin, #nobase .anshin {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px; }
  #sanbrain .anshin h3, #nobase .anshin h3 {
    font-weight: bold;
    padding: 20px 10px;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color: #00233f;
    background-image: -webkit-gradient(linear, left top, right top, from(#cb9b0c), to(#f3e18b));
    background-image: -webkit-linear-gradient(left, #cb9b0c 0%, #f3e18b 100%);
    background-image: linear-gradient(to right, #cb9b0c 0%, #f3e18b 100%);
    margin-bottom: 40px;
    font-size: clamp(2.2rem, 6.03vw, 4rem); }
  #sanbrain .anshin .catch, #nobase .anshin .catch {
    font-size: clamp(2rem, 1vw, 2.5rem);
    font-weight: bold; }
  #sanbrain .anshin ul, #nobase .anshin ul {
    margin-bottom: 30px;
    display: inline-block;
    text-align: left; }
    #sanbrain .anshin ul li, #nobase .anshin ul li {
      font-weight: bold;
      font-size: 120%;
      color: #005fb7; }
      @media screen and (min-width: 768px) {
        #sanbrain .anshin ul li, #nobase .anshin ul li {
          font-size: 3.0rem; } }
  #sanbrain .anshin .henkin strong, #nobase .anshin .henkin strong {
    font-weight: bold;
    font-size: 120%;
    color: #005fb7; }
    @media screen and (min-width: 768px) {
      #sanbrain .anshin .henkin strong, #nobase .anshin .henkin strong {
        font-size: 3.0rem; } }
#sanbrain .accordion-hidden, #nobase .accordion-hidden {
  display: none; }
#sanbrain .accordion-open, #nobase .accordion-open {
  display: block;
  cursor: pointer;
  position: relative;
  line-height: 1.3; }
  @media screen and (min-width: 961px) {
    #sanbrain .accordion-open, #nobase .accordion-open {
      font-size: 1.8rem; } }
  #sanbrain .accordion-open::before, #sanbrain .accordion-open::after, #nobase .accordion-open::before, #nobase .accordion-open::after {
    background: #005fb7;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px;
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    top: 0%;
    right: 0px; }
    @media screen and (min-width: 768px) {
      #sanbrain .accordion-open::before, #sanbrain .accordion-open::after, #nobase .accordion-open::before, #nobase .accordion-open::after {
        right: 0px; } }
  #sanbrain .accordion-open::before, #nobase .accordion-open::before {
    content: '続きを読む▼';
    position: absolute;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #sanbrain .accordion-open::before, #nobase .accordion-open::before {
        left: 0px;
        right: 0px;
        top: -20px; } }
    @media screen and (min-width: 768px) {
      #sanbrain .accordion-open::before, #nobase .accordion-open::before {
        top: -50px; } }
#sanbrain .accordion-hidden:checked + .accordion-open:before, #nobase .accordion-hidden:checked + .accordion-open:before {
  /*transform: translateY(-50%) rotate(0);*/
  content: '';
  position: absolute;
  text-align: center; }
  @media screen and (max-width: 767px) {
    #sanbrain .accordion-hidden:checked + .accordion-open:before, #nobase .accordion-hidden:checked + .accordion-open:before {
      left: 0px;
      right: 0px;
      top: -20px; } }
  @media screen and (min-width: 768px) {
    #sanbrain .accordion-hidden:checked + .accordion-open:before, #nobase .accordion-hidden:checked + .accordion-open:before {
      top: -50px;
      width: 100px; } }
#sanbrain .accordion-hidden:checked + .accordion-open:after, #nobase .accordion-hidden:checked + .accordion-open:after {
  /*transform: translateY(-50%) rotate(0);*/
  content: '閉じる▲';
  position: absolute;
  text-align: center; }
  @media screen and (max-width: 767px) {
    #sanbrain .accordion-hidden:checked + .accordion-open:after, #nobase .accordion-hidden:checked + .accordion-open:after {
      left: 0px;
      right: 0px;
      top: -20px; } }
  @media screen and (min-width: 768px) {
    #sanbrain .accordion-hidden:checked + .accordion-open:after, #nobase .accordion-hidden:checked + .accordion-open:after {
      top: -50px;
      width: 100px; } }
#sanbrain .accordion-inner, #nobase .accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  cursor: pointer; }
#sanbrain .accordion-hidden:checked + .accordion-open + .accordion-inner, #nobase .accordion-hidden:checked + .accordion-open + .accordion-inner {
  height: auto;
  opacity: 1;
  padding: 15px 0px 0px 0px; }
  @media screen and (min-width: 768px) {
    #sanbrain .accordion-hidden:checked + .accordion-open + .accordion-inner, #nobase .accordion-hidden:checked + .accordion-open + .accordion-inner {
      padding: 20px 0px 0px 0px; } }

 /*************************************
    #sanbrain
*************************************/
#sanbrain {
  background: #dde7e9; }
  #sanbrain .logo {
    max-width: 350px;
    margin: 0px auto;
    margin-bottom: 15px; }
  #sanbrain .step {
    background: #ffffff; }

 /*************************************
    #nobase
*************************************/
#nobase {
  background: #ffffff; }
  #nobase .logo {
    max-width: 180px;
    margin: 0px auto;
    margin-bottom: 15px; }
    @media screen and (min-width: 768px) {
      #nobase .logo {
        max-width: 250px; } }
  #nobase .step {
    background: #dde7e9; }