:root {
  --cl_dark_blue: #071d2a;
}

.header {
  background-color: #fff;
  padding: 8px 0 10px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;
}

.header_logo {
  margin: 0 auto;
  width: 54.08333333333333%;
}

.main {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

.mv_img {
  overflow-x: hidden;
}

.mv_img picture {
  display: flex;
  justify-content: center;
}

.mv_img picture img {
  display: block;
  width: 100%;
}

.cp {
  background-image: url('../img/cp_bg.png');
  background-size: 1920px;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

.cp_container {
  max-width: 1353px;
  margin: 0 auto;
  width: 90%;
}

.cp_contents {
  padding: 8.4% 0 24%;
  position: relative;
}

.cp_contents::after {
  background-image: url('../img/character_balloon_img01.png');
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  inset: auto 0 -1% 0;
  margin: auto;
  height: 281px;
  width: 835px;
}

.cp_item {
  background-image: url('../img/cp_img_bg.png');
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

.cp_img {
  margin: 0 auto 8.426%;
  width: 88.692%;
}

.cp_btn {
  display: block;
  position: absolute;
  inset: auto 0 -8% 0;
  margin: 0 auto;
  opacity: 1;
  width: 53.880266075388%;
}

.cp_btn::before {
  border-radius: 50px;
  background-color: #fff;
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 60%;
  width: 91%;
}

.cp_btn::after {
  background-image: url('../img/cp_btn_arrow.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  inset: 0 5.5% 1px auto;
  margin: auto;
  transition: .2s;
  height: 60px;
  width: 69px;
}

.cp_btn:hover::after {
  inset: 0 5% 1px auto;
}

.cp_btn picture {
  display: block;
  position: relative;
  transition: .2s;
}

.cp_btn picture:hover {
  opacity: .7;
}

.cp_hint {
  margin: 0 auto 6.653%;
  width: 73.90983%;
}

.cp_character {
  margin: 0 auto;
  width: 74.353288%;
}

.contents {
  background-image: url('../img/contents_bg.jpg');
  background-size: 1920px;
  background-position: center top;
  background-repeat: no-repeat;
  margin: -212px 0 0;
  padding: 310px 0 126px;
}

.contents .container {
  position: relative;
}

.contents .container::after {
  background-image: url('../img/character_balloon_img02.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  inset: auto 0 -2% 0;
  margin: auto;
  height: 317px;
  width: 589px;
  z-index: 2;
}

.contents .container > div:not(:last-of-type) {
  margin: 0 auto 6%;
}

.contents_wrap {
  background-color: #fff;
  border-radius: 40px;
  box-sizing: border-box;
  border: 2px solid transparent;
  background-clip: padding-box;
  padding: 2px;
  position: relative;
  margin: 0 auto;
  width: 83.333333%;
}

.contents_wrap::before {
  border-radius: inherit;
  background: conic-gradient(#f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4, #2d3d52, #f2f3f4);
  content: '';
  position: absolute;
  inset: 0;
  margin: -2px;
  z-index: 0;
}

.contents_container {
  background-color: #fff;
  border-radius: inherit;
  position: relative;
  z-index: 2;
}

.contents_inner {
  background-image: url('../img/contents_item_bg.jpg');
  background-size: 21px;
  background-repeat: repeat;
  border: 10px solid #023250;
  border-radius: 40px;
  padding: 0 0 9.4%;
}

.contents_title {
  margin: -.8% auto 5%;
  width: 53.326612%;
}

.contents01_head {
  color: var(--cl_dark_blue);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8em;
  margin: 0 0 4%;
  text-align: center;
}

.contents01_img01 {
  margin: 0 auto 5%;
  width: 58.265306%;
}

.contents01_text {
  color: var(--cl_dark_blue);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8em;
  margin: 0 0 5%;
  text-align: center;
}

.contents01_images {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 95%;
}

.contents01_image {
  width: 48.8%;
}

.contents02_items {
  margin: -7% 0 0;
}

.contents02_items > div:not(:last-of-type) {
  position: relative;
  padding: 0 0 1%;
  margin: 0 auto 3%;
}

.contents02_items > div:not(:last-of-type)::after {
  background-image: url("../img/contents02_item_dots.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  margin: auto;
  height: 5px;
  width: 100%;
}

.contents02_item {
  margin: 0 auto;
  width: 92%;
}

.contents02_item_head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 auto 1.2%;
  width: 86%;
}

.contents02_item_left01 {
  width: 54.337%;
}

.contents02_item_left02 {
  width: 57.337%;
}

.contents02_item_left02 .contents02_item_title {
  margin: 0 auto 0 0;
  width: 85%;
}

.contents02_item_right01 {
  width: 36%;
}

.contents02_item_right02 {
  width: 39%;
}

.contents02_item_text {
  color: var(--cl_dark_blue);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8em;
  padding: 3% 0 0 17.8%;
  text-align: left;
}

.contents02_item_text.p_adjust {
  padding: 3% 0 0 16.5%;
}

.contents02_item_text sup {
  font-size: .74em;
  vertical-align: -7px;
}

.contents02_item_img {
  margin: 0 auto;
  width: 80.133185%;
}

.contents02_item_img.mt_adjust {
  margin: -2% auto 0;
}

.contents02_item_title02 {
  margin: 0 auto 2.8%;
  width: 86%;
}

.contents02_item_img02 {
  margin: 0 auto 3%;
  width: 67.81354%;
}

.contents02_item_text02 {
  color: var(--cl_dark_blue);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8em;
  margin: 0;
  text-align: center;
}

.contents02_item_img03 {
  margin: -5% auto;
  width: 91.877058%;
}

.contents03_head01 {
  margin: 0 auto 1%;
  width: 54.795918%;
}

.contents03_text {
  color: var(--cl_dark_blue);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8em;
  margin: 0 auto;
  text-align: center;
}

.contents03_img01 {
  margin: 0 auto 2%;
  width: 73.673469%;
}

.contents03_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 4%;
  width: 90%;
}

.contents03_list {
  margin: 0 0 2.4%;
  width: 49%;
}

.contents03_head02 {
  margin: 0 auto;
  width: 53.469387%;
}

.contents03_text02 {
  color: var(--cl_dark_blue);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8em;
  margin: 0 auto 4%;
  text-align: center;
}

.contents03_text02 sup {
  font-size: .74em;
  vertical-align: -7px;
}

.contents03_text02 span {
  background-color: #fff04a;
}

.contents03_img02 {
  margin: 0 auto 6%;
  width: 92%;
}

.cta {
  background-image: url('../img/cta_bg.jpg');
  background-size: 1920px;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 54px 0 38px;
}

.cta_title {
  margin: 0 auto 2%;
  width: 76.5%;
}

.cta_buttons {
  margin: 0 auto;
  width: 52.666666%;
}

.cta_btn {
  display: block;
  margin: -5.6% 0 0;
  position: relative;
}

.cta_btn::before {
  border-radius: 50px;
  background-color: #fff;
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 56%;
  width: 89%;
}

.cta_btn::after {
  background-image: url('../img/cta_btn_arrow.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  inset: 0 6% 0 auto;
  margin: auto;
  transition: .2s;
  height: 73px;
  width: 81px;
}

.cta_btn:hover::after {
  inset: 0 5% 0 auto;
}

.cta_btn picture {
  position: relative;
  opacity: 1;
  transition: .2s;
}

.cta_btn picture:hover {
  opacity: .7;
}

.cp02 {
  background-image: url('../img/cp02_bg.jpg');
  background-size: 1920px;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

.cp02_container {
  max-width: 1353px;
  margin: 0 auto;
  width: 90%;
}

.cp02_contents {
  padding: 8.4% 0 1.8%;
  position: relative;
}

.cp02_item {
  background-image: url('../img/cp_img_bg.png');
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

.cp02_img {
  margin: 0 auto 8.426%;
  width: 88.692%;
}

.cp02_btn {
  display: block;
  position: absolute;
  inset: auto 0 -8% 0;
  margin: 0 auto;
  opacity: 1;
  width: 53.880266075388%;
}

.cp02_btn::before {
  border-radius: 50px;
  background-color: #fff;
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 60%;
  width: 91%;
}

.cp02_btn::after {
  background-image: url('../img/cp02_btn_arrow.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  inset: 0 5.5% 1px auto;
  margin: auto;
  transition: .2s;
  height: 60px;
  width: 69px;
}

.cp02_btn:hover::after {
  inset: 0 5% 1px auto;
}

.cp02_btn picture {
  display: block;
  position: relative;
  transition: .2s;
}

.cp02_btn picture:hover {
  opacity: .7;
}

.cp02_balloon {
  margin: -5% auto 0;
  width: 58.980044%;
}

.cp02_text {
  margin: 0 auto;
  width: 80.487804%;
}

.footer {
  background-color: #fff;
}

.footer_text {
  color: #000;
  font-size: 14px;
  line-height: 2.2em;
  text-align: center;
}

.show_pc {
  display: block;
}

.show_sp {
  display: none;
}

.show_flex_pc {
  display: flex;
}

.show_flex_sp {
  display: none;
}

@media screen and (max-width: 1920px) {
  .mv_img picture img {
    width: 1920px;
  }
}

@media screen and (max-width: 1504px) {
  .header {
    padding: .531915vw 0 .664894vw;
  }

  .container {
    max-width: 79.787234vw;
  }

  .mv_img picture img {
    width: 127.659574vw;
  }

  .cp {
    background-size: 127.659574vw;
  }

  .cp_container {
    max-width: 89.960106vw;
  }

  .cp_contents::after {
    height: 18.683511vw;
    width: 55.518617vw;
  }

  .cp_btn::before {
    border-radius: 3.324468vw;
  }

  .cp_btn::after {
    inset: 0 5.6% .066489vw auto;
    height: 3.989362vw;
    width: 4.587766vw;
  }

  .cp_btn:hover::after {
    inset: 0 5% .066489vw auto;
  }

  .contents {
    background-size: 127.659574vw;
    margin: -14.095745vw 0 0;
    padding: 20.611702vw 0 8.37766vw;
  }

  .contents .container::after {
    height: 21.077128vw;
    width: 39.162234vw;
  }

  .contents_wrap {
    border-radius: 2.659574vw;
    border: .132979vw solid transparent;
    padding: .132979vw;
  }

  .contents_wrap::before {
    margin: -0.132979vw;
  }

  .contents_inner {
    background-size: 1.396277vw;
    border: .664894vw solid #023250;
    border-radius: 2.659574vw;
  }

  .contents01_head {
    font-size: 1.196809vw;
  }

  .contents01_text {
    font-size: 1.196809vw;
  }

  .contents02_items > div:not(:last-of-type)::after {
    height: 0.332447vw;
  }

  .contents02_item_text {
    font-size: 1.196809vw;
  }

  .contents02_item_text sup {
    vertical-align: -.465426vw;
  }

  .contents02_item_text02 {
    font-size: 1.196809vw;
  }

  .contents03_text {
    font-size: 1.196809vw;
  }

  .contents03_text02 {
    font-size: 1.196809vw;
  }

  .contents03_text02 sup {
    vertical-align: -.465426vw;
  }

  .cta {
    background-size: 127.659574vw;
    padding: 3.590426vw 0 2.526596vw;
  }

  .cta_btn {
    margin: -5.6% 0 0;
  }

  .cta_btn::before {
    border-radius: 3.324468vw;
  }

  .cta_btn::after {
    height: 4.853723vw;
    width: 5.385638vw;
  }

  .cp02 {
    background-size: 127.659574vw;
  }

  .cp02_container {
    max-width: 89.960106vw;
  }

  .cp02_btn::before {
    border-radius: 3.324468vw;
  }

  .cp02_btn::after {
    inset: 0 5.6% .066489vw auto;
    height: 3.989362vw;
    width: 4.587766vw;
  }

  .cp02_btn:hover::after {
    inset: 0 5% .066489vw auto;
  }

  .footer_text {
    font-size: .930851vw;
  }
}

/* @media screen and (max-width: 1215px) {
  .mv_img picture img {
    width: 158.024691vw;
  }
} */

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

  .show_sp {
    display: block;
  }
  .show_flex_pc {
    display: none;
  }

  .show_flex_sp {
    display: flex;
  }

  .header {
    padding: 2% 0;
  }

  .header_logo {
    width: 95.441176%;
  }

  .container {
    max-width: 100%;
    width: 90.666666%;
  }

  .mv_img picture img {
    width: 100%;
  }

  .cp {
    background-image: url('../img/cp_bg_sp.png');
    background-size: 100%;
  }

  .cp_container {
    max-width: 100%;
    width: 100%;
  }

  .cp_contents {
    padding: 13.334% 0 52%;
  }

  .cp_item {
    background-image: none;
    position: relative;
  }

  .cp_img {
    margin: 0 auto 9.335%;
    width: 100%;
  }

  .cp_btn {
    inset: auto 0 8% 0;
    width: 98.933333%;
  }

  .cp_btn::before {
    border-radius: 13.020833vw;
    height: 69%;
    width: 91%;
  }

  .cp_btn::after {
    background-image: url('../img/cp_btn_arrow_sp.png');
    inset: 0 5.6% .066489vw auto;
    height: 8.59375vw;
    width: 10.15625vw;
  }

  .cp_hint {
    margin: 0 auto 17.334%;
    width: 89.333333%;
  }

  .cp_character {
    margin: 0 auto;
    width: 89.333333%;
  }

  .cp_contents::after {
    background-image: url('../img/character_balloon_img01_sp.png');
    inset: auto 0 -3% 0;
    height: 57.161458vw;
    width: 94.401042vw;
  }

  .contents {
    background-image: url('../img/contents_bg_sp.jpg');
    background-size: 100%;
    margin: -14.322917vw 0 0;
    padding: 42.447917vw 0 13.020833vw;
  }

  .contents_wrap {
    border-radius: 5.208333vw;
    border: 0.651042vw solid transparent;
    padding: 0.651042vw;
    width: 100%;
  }

  .contents_wrap::before {
    margin: -0.260417vw;
  }

  .contents .container::after {
    background-image: url('../img/character_balloon_img02_sp.png');
    inset: auto -3% -.6% 0;
    height: 42.447917vw;
    width: 82.161458vw;
  }

  .contents .container > div:not(:last-of-type) {
    margin: 0 auto 10%;
  }

  .contents_inner {
    background-size: 2.734375vw;
    border: 1.302083vw solid #023250;
    border-radius: 4.427083vw;
  }

  .contents_title {
    margin: -1.171875vw auto 10.608%;
    width: 85.606060%;
  }

  .contents01_head {
    font-size: 3.90625vw;
    margin: 0 0 6%;
  }

  .contents01_img01 {
    margin: 0 auto 6%;
    width: 87.878787%;
  }

  .contents01_text {
    font-size: 3.90625vw;
    margin: 0 0 10%;
  }

  .contents01_images {
    flex-direction: column;
  }

  .contents01_images > div:not(:last-of-type) {
    margin: 0 0 2%;
  }

  .contents01_image {
    width: 100%;
  }

  .contents02_items {
    margin: 0;
  }

  .contents02_items > div:not(:last-of-type) {
    padding: 0 0 8%;
    margin: 0 auto 8%;
  }

  .contents02_items > div:not(:last-of-type)::after {
    background-image: url("../img/contents02_item_dots_sp.png");
    height: 0.666667vw;
    width: 97%;
  }

  .contents02_item {
    width: 96.40625%;
  }

  .contents02_item_head {
    flex-direction: column;
    align-items: center;
    margin: 0 auto 8.2%;
    width: 96.272285%;
  }

  .contents02_item_left01 {
    width: 100%;
  }

  .contents02_item_text {
    font-size: 3.90625vw;
    padding: 0;
    text-align: justify;
  }

  .contents02_item_text.p_adjust {
    padding: 0;
  }

  .contents02_item_text sup {
    vertical-align: -1.466667vw;
  }

  .contents02_item_title {
    margin: 0 0 4%;
  }

  .contents02_item_right01 {
    width: 97.643097%;
  }

  .contents02_item_img {
    width: 100%;
  }

  .contents02_item_left02 {
    margin: 0 auto 8.3%;
    width: 100%;
  }

  .contents02_item_left02 .contents02_item_title {
    margin: 0 auto 2%;
    width: 85.016835%;
  }

  .contents02_item_right02 {
    width: 88.047138%;
  }

  .contents02_item_img.mt_adjust {
    margin: -5% auto 0;
  }

  .contents02_item_title02 {
    margin: 0 auto 7%;
    width: 69.043760%;
  }

  .contents02_item_img02 {
    margin: 0 auto 8.2%;
    width: 95.623987%;
  }

  .contents02_item_text02 {
    font-size: 3.90625vw;
    padding: 0;
    margin: 0 auto 6%;
    text-align: justify;
    width: 96.272285%;
  }

  .contents02_item_img03 {
    margin: 0 -2% 0 auto;
    padding: 0 0 4%;
    width: 100%;
  }

  .contents03_head01 {
    margin: 0 auto 3%;
    width: 100%;
  }

  .contents03_text {
    font-size: 3.90625vw;
    margin: 0 auto;
    text-align: justify;
    width: 92.8125%;
  }

  .contents03_img01 {
    margin: 0 auto 8%;
    width: 92.8125%;
  }
  
  .contents03_lists {
    margin: 0 auto 15%;
  }

  .contents03_lists .swiper-button-prev,
  .contents03_lists .swiper-button-next {
    background-image: url("../img/contents03_arrow_sp.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    margin: auto;
    height: 8.203125vw;
    width: 6.119792vw;
  }

  .contents03_lists .swiper-button-prev {
    inset: 0 auto 0 2%;
    transform: rotate(180deg);
  }

  .contents03_lists .swiper-button-next {
    inset: 0 2% 0 auto;
  }

  .contents03_lists .swiper-navigation-icon {
    display: none;
  }

  .contents03_lists .swiper-slide {
    opacity: .4;
  }

  .contents03_lists .swiper-slide.swiper-slide-active {
    opacity: 1;
  }

  .contents03_head02 {
    margin: 0 auto 6%;
    width: 88.939393%;
  }

  .contents03_text02 {
    font-size: 3.90625vw;
    margin: 0 auto 10%;
    text-align: justify;
    width: 92.8125%;
  }

  .contents03_text02 sup {
    vertical-align: -1.466667vw;
  }

  .contents03_img02 {
    margin: 0 auto 21%;
    width: 92.8125%;
  }

  .cta {
    background-image: url('../img/cta_bg_sp.jpg');
    background-size: 100%;
    padding: 7.2% 0;
  }

  .cta .container {
    width: 100%;
  }

  .cta_title {
    margin: 0 auto 2%;
    width: 92.8%;
  }

  .cta_buttons {
    margin: 0 auto;
    width: 98.933333%;
  }

  .cta_btn {
    margin: -6% 0 0;
  }

  .cta_btn::before {
    border-radius: 13.333333vw;
    height: 60%;
    width: 90%;
  }

  .cta_btn::after {
    background-image: url('../img/cta_btn_arrow_sp.png');
    height: 10.416667vw;
    width: 11.979167vw;
  }

  .cp02 {
    background-image: url('../img/cp02_bg_sp.jpg');
    background-size: 100%;
  }

  .cp02_container {
    max-width: 100%;
    width: 100%;
  }

  .cp02_contents {
    padding: 13.334% 0 9%;
  }

  .cp02_item {
    background-image: none;
    position: relative;
  }

  .cp02_img {
    margin: 0 auto 9.335%;
    width: 100%;
  }

  .cp02_btn {
    inset: auto 0 8% 0;
    width: 98.933333%;
  }

  .cp02_btn::before {
    border-radius: 13.020833vw;
    height: 69%;
    width: 91%;
  }

  .cp02_btn::after {
    background-image: url('../img/cp02_btn_arrow_sp.png');
    inset: 0 7% .066489vw auto;
    height: 8.59375vw;
    width: 10.15625vw;
  }

  .cp02_balloon {
    margin: -12% auto 4%;
    width: 88.266666%;
  }

  .cp02_text {
    width: 94.4%;
  }

  .footer_text {
    font-size: 2.604167vw;
  }
}