@charset "UTF-8";
/* デフォルト */
/* レスポンシブ設定 */
@media screen and (min-width: 541px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 540px) {
  .pc {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .tb {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .nb {
    display: none;
  }
}

@media screen and (min-width: 321px) {
    .mn {
      display: none;
    }
  }

/* リセットCSS */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  /* デフォルトのフォントと文字カラー設定 */
  font-family: "source-han-serif-japanese", serif;
  color: #000000;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

@media screen and (max-width: 540px) {
  p {
    font-size: 16px;
  }
}

ul li {
  list-style: none;
}

/* 見出しデフォルト */
h2 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
  line-height: 39px;

}

@media screen and (max-width: 540px) {
  h2 {
    font-size: 25px;
    margin-bottom: 30px;
    line-height: 32.5px;
  }
}

@media screen and (max-width: 320px) {
  h2 {
    font-size: 20px;
    margin-bottom: 30px;
    line-height: 29px;
  }
}

h3 {
  font-size: 25px;
  text-align: center;
  margin: 40px auto;
  line-height: 32.5px;
}

@media screen and (max-width: 540px) {
  h3 {
    font-size: 20px;
    margin-bottom: 25px;
    margin: 30px auto;
    line-height: 26px;
  }
}

h4 {
    font-size: 20px;
}

@media screen and (max-width: 540px) {
    h4 {
      font-size: 18px;
    }
  }

/* セクションデフォルト */
section {
  padding: 80px 0;
}

@media screen and (max-width: 540px) {
  section {
    padding: 60px 0px;
  }
}

/* コンテイナーデフォルト */
.container {
  max-width: 960px;
  margin: auto;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .container {
    width: 85%;
  }
}

@media screen and (max-width: 540px) {
  .container {
    width: 93%;
  }
}

.sub-container {
  max-width: 700px;
  margin: auto;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .sub-container {
    width: 80%;
  }
}

@media screen and (max-width: 540px) {
  .sub-container {
    width: 93%;
  }
}

.mini-container {
  max-width: 650px;
  margin: auto;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .mini-container {
    width: 80%;
  }
}

@media screen and (max-width: 540px) {
  .mini-container {
    width: 80%;
  }
}

/* 画像デフォルト */
img {
  width: 100%;
  display: block;
}

.base-img {
  max-width: 500px;
  margin: 35px auto;
}

@media screen and (max-width: 540px) {
  .base-img {
    margin: 25px;
  }
}

/* aタグデフォルト */
a {
  display: block;
  text-decoration: none;
  font-size: 35px;
  /* aタグの文字サイズ */
  line-height: 1.2;
  /* aタグの行間 */
  text-align: center;
}

@media screen and (max-width: 540px) {
  a {
    font-size: 24px;
  }
}

/* フッターデフォルト */
footer {
  color: #ffffff;
  background-color: #777777;
  padding: 20px 0;
}

footer a {
  font-size: 14px;
  color: #ffffff;
}

footer p {
  text-align: center;
  font-size: 14px;
}

footer .footer-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.non {
    padding-top: 0%;
}

.top {
    background-image: url(../img/1.png);
    padding-top: 65px;
    padding-bottom: 30px;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 540px) {
    .top {
      background-image: url(../img/66.png);
      padding-bottom: 23px;
      padding-top: 50px;
    }
  }

.regular {
    padding-top: 50px;
}

@media screen and (max-width: 540px) {
    .regular {
     padding-top: 40px;
    }
  }

.center-orange {
    color: #F86D00;
    text-align: center;
    margin-bottom: 35px;
    font-weight: 700;
}

.center {
   text-align: center;
}

.photo-bg {
    padding: 0%;
    background-repeat: no-repeat;
    background-size: contain;
}


.white-marker{
    /* %を変えると太さを、色を変えるとカラーを調整できる */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, transparent), color-stop(65%, rgba(255,255,255,0.8)));
    background: linear-gradient(transparent 65%, rgba(255,255,255,0.8) 65%);
    /* 位置調整 */
  }

  .yellow-marker{
    /* %を変えると太さを、色を変えるとカラーを調整できる */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, transparent), color-stop(65%, #F9EA87));
    background: linear-gradient(transparent 65%, #F9EA87 65%);
    /* 位置調整 */

  }

  /* headline18 */
.orange-title {
    background-color: #FF8400;
    color: #ffffff;
    padding: 30px;
  }
  
  @media screen and (max-width: 540px) {
    .orange-title {
      padding: 30px 0px;
    }
  }

  .black-title {
    background-color: #333333;
    color: #ffffff;
    padding: 30px;
  }
  
  @media screen and (max-width: 540px) {
    .black-title {
      padding: 30px 0px;
    }
  }

  .orange-title02 {
    background-color: #F86D00;
    color: #ffffff;
    padding: 30px;
  }
  
  @media screen and (max-width: 540px) {
    .orange-title02 {
      padding: 30px 0px;
    }
  }

  .text-title {
    background-color: #154071;
    color: #ffffff;
    padding: 30px;
  }
  
  @media screen and (max-width: 540px) {
    .text-title {
      padding: 30px 0px;
    }
  }


  .orange-bg {
    background-color: #FFF1E6;
  }

.mini-title {
    width: 71%;
    margin: 0 auto 35px auto;
}

@media screen and (max-width: 540px) {
    .mini-title {
     width: 100%;
     margin: 0 auto 25px auto;
    }
  }

.question {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 15px;
}

@media screen and (max-width: 540px) {
    .question  {
      margin-top: 40px;
      margin-bottom: 15px;
    }
  }

/* box共通 */
.box {
    padding: 35px;
    margin: 35px 0;
  }
  
  @media screen and (max-width: 540px) {
    .box {
      margin: 25px 0;
    }
  }
  
  .box ul {
    margin-left: 70px;
  }
  
  @media screen and (max-width: 768px) {
    .box ul {
      margin-left: 60px;
    }
  }
  
  @media screen and (max-width: 540px) {
    .box ul {
      margin-left: 57px;
    }
  }
  
  @media screen and (max-width: 320px) {
    .box ul {
      margin-left: 47px;
    }
  }
  
  .box ul li {
    margin: 25px 0;
    font-size: 18px;
    position: relative;
  }
  
  @media screen and (max-width: 768px) {
    .box ul li {
      font-size: 16px;
    }
  }
  
  .box ul li:first-child {
    margin-top: 0;
  }
  
  .box ul li:last-child {
    margin-bottom: 0;
  }
  
  .box ul li::before {
    position: absolute;
    content: '';
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  /* チェックボックス */

  .box01 {
    background-color: #ffffff;
    padding: 40px 0;
    margin-top: 0%;
    margin-bottom: 0%;
  }
  
  @media screen and (max-width: 540px) {
    .box01 {
      padding: 35px 10px 35px 0;
    }
  }
  
  .box01 ul {
    margin-left: 75px;
  }
  
  @media screen and (max-width: 540px) {
    .box01 ul{
      margin-left: 57px;
    }
  }
  
  .box01 ul li::before {
    background: url(../img/4.png) no-repeat;
    background-size: contain;
    width: 26px;
    height: 22px;
    left: -30px;
  }
  
  @media screen and (max-width: 540px) {
    .box01 ul li::before {
      left: -30px;
      top: 11px;
    }
  }

  .gray-bg {
    background-image: url(../img/5.png);
    background-size: cover;
  }

  .circle {
    width: 52%;
    margin: 23px auto;
  }

  .cta-ballon {
    width: 27%;
    margin: 60px auto 0 auto;
  }

  @media screen and (max-width: 540px) {
    .cta-ballon {
    width: 47%;
      margin: 45px auto 0 auto;
    }
  }

  .cta {
    width: 71%;
    margin: 0 auto;
  }

  @media screen and (max-width: 540px) {
    .cta  {
      width: 100%;
    }
  }

  .qr {
    width: 24%;
    margin: 25px auto 0 auto;
  }

  @media screen and (max-width: 540px) {
    .qr {
    width: 38%;
    margin: 20px auto 0 auto;
    }
  }

  .gradation-bg {
    background-image: url(../img/10.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  @media screen and (max-width: 540px) {
    .gradation-bg {
     background-image: url(../img/65.png);
    }
  }

  .blue-photo {
    margin-bottom: 40px;
  }

  @media screen and (max-width: 540px) {
    .blue-photo {
      margin-bottom: 30px;
    }
  }

  .blue-bg {
    background-color: #ECF5FF;
  }

  .menu-title {
    margin-bottom: 15px;
    margin-top: 50px;
  }

  @media screen and (max-width: 540px) {
    .menu-title {
        margin-bottom: 20px;
        margin-top: 40px;
    }
  }

  .top-title {
    margin-top: 70px;
  }

  @media screen and (max-width: 540px) {
    .top-title {
      margin-top: 50px;
    }
  }

  .menu {
    display: flex;
    flex-direction: column;
    width: 93%;
    margin: 0 auto;
  }

  @media screen and (max-width: 540px) {
    .menu {
      width: 100%;
    }
  }

  .main-photo {
    width: 86%;
  }
  

  .guide {
    background-color: rgba(255,255,255,0.8);
    padding: 40px 0px 40px 40px;
    width: 77%;
    margin: -30px 0 0 auto;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  }

  @media screen and (max-width: 540px) {
    .guide {
      width: 86%;
      padding: 30px 20px;
      margin: -22px 0 0 auto;
    }
  }

  .box02 {
    background-color: #ffffff;
    padding: 40px 0;
    border: 2px solid #FFCFAA;
  }
  
  @media screen and (max-width: 540px) {
    .box02 {
      padding: 35px 10px 35px 0;
    }
  }
  
  .box02 ul {
    margin-left: 75px;
    color: #B14E00;
  }
  
  @media screen and (max-width: 540px) {
    .box02 ul{
      margin-left: 57px;
    }
  }
  
  .box02 ul li::before {
    background: url(../img/24.png) no-repeat;
    background-size: contain;
    width: 26px;
    height: 22px;
    left: -30px;
  }
  
  @media screen and (max-width: 540px) {
    .box02 ul li::before {
      left: -30px;
      top: 12px;
    }
  }

  .photo-bg02 {
    background-image: url(../img/25.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  @media screen and (max-width: 540px) {
    .photo-bg02 {
      background-image: url(../img/69.png);
    }
  }

  .ballon01 {
    width: 89%;
    margin: 0 auto 50px auto;
  }

  @media screen and (max-width: 540px) {
    .ballon01{
      width: 100%;
      margin: 0 auto 40px auto;
    }
  }

.accent {
    width: 46%;
    margin: 0 auto;
}

@media screen and (max-width: 540px) {
    .accent{
    width: 100%;
    }
  }

.ballon-title {
    width: 44%;
    margin: 0 auto 30px auto;
}

@media screen and (max-width: 540px) {
    .ballon-title {
      width: 77%;
      margin: 0 auto 20px auto;
    }
  }

.blue-bold {
  color: #003D81;
  font-weight: 700;
}

.orange-text {
    color: #EF8700;
    text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
}

.main-photo02 {
    margin: 0 auto 35px auto;
}

@media screen and (max-width: 540px) {
    .main-photo02  {
        margin: 0 auto 25px auto;
    }
    }

.main-photo03 {
    margin: 35px auto 50px auto;
}

@media screen and (max-width: 540px) {
    .main-photo03  {
        margin: 25px auto 40px auto;
    }
  }

.main-photo04 {
    margin: 35px auto;
}

@media screen and (max-width: 540px) {
    .main-photo04{
     margin: 25px auto;
    }
  }

.main-photo05 {
    margin: 35px auto 0 auto;
}

@media screen and (max-width: 540px) {
    .main-photo05 {
      margin: 25px auto 0 auto;
    }
  }

.profile-photo {
    width: 33%;
    margin: 0 auto 35px auto;
}

@media screen and (max-width: 540px) {
    .profile-photo{
      width: 56%;
      margin: 0 auto 25px auto;
    }
  }


.negative-bg {
    background-image: url(../img/33.png);
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 540px) {
    .negative-bg{
      background-image: url(../img/70.png);
    }
  }


.negative-bg02 {
    background-image: url(../img/37.png);
}

@media screen and (max-width: 540px) {
    .negative-bg02  {
        background-image: url(../img/71.png);
    }
  }

.ballon02 {
    width: 66%;
    margin: 35px auto 30px auto;
}

@media screen and (max-width: 540px) {
    .ballon02{
      width: 98%;
      margin: 25px auto;
    }
  }


.orange-bold {
    color: #F86D00;
    font-weight: 700;
}

.positive-bg {
    background-image: url(../img/40.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.box-title {
    text-align: center;
    color: #ffffff;
    background-color: #FF9543;
    padding: 25px;
  }
  
  @media screen and (max-width: 540px) {
    .box-title {
      padding: 20px;
    }
  }

.step-bg {
    background-color: #FFF9F1;
}

.step {
    width: 84%;
    margin: 0 auto 50px auto;
}

@media screen and (max-width: 540px) {
    .step{
     width: 74%;
     margin: 0 auto 40px auto;
    }
  }

.text-bg{
    background-color: #EBF9FF;
}

.text {
    width: 39%;
    margin: 0 auto 35px auto;
}

@media screen and (max-width: 540px) {
    .text  {
      width: 67%;
      margin: 0 auto 25px auto;
    }
  }

.aco-block {
    margin-bottom: 30px;
  }
  
  .aco-last {
    margin-bottom: 0;
  }
  
  .aco-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  .aco-content-left {
    margin-right: 15px;
  }
  
  @media screen and (max-width: 540px) {
    .aco-content-left {
      margin-right: 10px;
    }
  }
  
  .aco-content-left p {
    font-size: 20px;
    line-height: 1;
    color: #FF9D50;
  }

  @media screen and (max-width: 540px) {
    .aco-content-left p {
      font-size: 33px;
    }
  }
  
  .aco .q {
    background-color: #FF9039;
    padding: 24px;
    color: #ffffff;
    position: relative;
  }
  
  @media screen and (max-width: 540px) {
    .aco .q {
      padding: 20px 25px;
    }
  }
  
  .aco .q::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  
  .aco .q:hover {
    cursor: pointer;
  }
  
  .q .aco-content-right p {
    font-size: 20px;
    font-weight: bold;
  }
  
  @media screen and (max-width: 540px) {
    .q .aco-content-right p {
      font-size: 18px;
    }
  }
  
  .aco .close::before {
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #ffffff transparent;
    -webkit-transition: all .7s;
    transition: all .7s;
  }
  
  .aco .a {
   background-color: #ffffff;
    padding: 35px 25px;
    color: #707070;
  }
  
  @media screen and (max-width: 540px) {
    .aco .a {
      padding: 20px 25px;
    }
  }

  .qa-title {
    color: #E56300;
  }
  
  .q .aco-content-left p {
 color: #fff;
  }

  .a .aco-content-right p {
    color: #000000;
  }

  .ballon03 {
    width: 90%;
    margin: 0 auto 35px auto;
  }

  @media screen and (max-width: 540px) {
    .ballon03 {
      width: 100%;
      margin: 0 auto 25px auto;
    }
  }

  .ballon04 {
    width: 93%;
    margin: 50px auto 35px auto;
  }

  @media screen and (max-width: 540px) {
    .ballon04 {
      width: 100%;
      margin: 40px auto 25px auto;
    }
  }

.last-bg {
    background-image: url(../img/51.png);
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 540px) {
    .last-bg {
      background-image: url(../img/77.png);
    }
  }