@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("swiper-bundle.min.css");

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  font-size:62.5%;
}

body{
  position:relative;
  color:#323232;
  font-family:'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size:1.4rem;
  font-weight:400;
  line-height:2.7rem;
  letter-spacing:.1rem;
  font-feature-settings:"palt" 1;
}

::selection{
  color:#fff;
  background:#e74657;
}

::-moz-selection{
  color:#fff;
  background:#e74657;
}

a{
  color:inherit;
  text-decoration:none;
  outline:none;
  transition:all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

p{
  margin:0;
  text-align:justify;
}

h2{
  display:inline-block;
  margin:25px 0 0;
  padding:0 0 10px;
  border-bottom:4px solid #fcc642;
  color:#e74657;
  font-size:3.5rem;
  font-weight:600;
  line-height:3.8rem;
  letter-spacing:.3rem;
}

h3{
  margin:0 0 5px;
  font-size:2.2rem;
  font-weight:600;
  line-height:1.6;
  text-align:left;
}

img{
  max-width:100%;
  height:auto;
}

section{
  position:relative;
  z-index:10;
  margin:0;
}

.inner{
  width:90%;
  max-width:1000px;
  margin-right:auto;
  margin-left:auto;
}

.section-title{
  text-align:center;
}

.section-title span{
  padding:5px 15px;
  border-radius:30px;
  background:#fcc642;
  color:#fff;
  font-size:1.8rem;
  font-weight:500;
}

header{
  background-image:url("../img/bg/bg_st2.png");
  background-repeat:repeat;
  background-position:center;
  background-size:12px;
}

header .header-visual{
  width:95%;
  margin:0 auto;
  border-radius:30px;
  background-color:#efacbe;
}

header .header-visual.page{
  display:flex;
  align-items:center;
  height:600px;
  background-image:url("../img/visual/page_visual.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

header .header-visual.page .container{
  margin-left:250px;
}

header .header-visual.page .container h1{
  display:inline-block;
  margin:60px 0 0 -22px;
  padding:0 0 16px;
  border-bottom:4px solid #fcc642;
  color:#fff;
  font-size:5.0rem;
}

header .header-visual.page .container p{
  margin:6px 0 0 -22px;
  color:#fff;
  font-size:3.0rem;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
}

main section.message{
  position:relative;
  overflow:hidden;
  padding:130px 0 150px;
  background-image:url("../img/bg/bg_st2.png");
  background-repeat:repeat;
  background-position:center;
  background-size:12px;
}

main section.message:after{
  content:'';
  position:absolute;
  top:-5px;
  left:0;
  z-index:0;
  width:100%;
  height:100%;
  background-image:url("../img/bg/bg_message2.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:0.6;
}

@media screen and (min-width: 768px){
  main section.message:after{
  opacity:1;
}}

main section.message .container{
  position:relative;
  z-index:10;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

main section.message .container .title{
  margin-left:0;
}

main section.message .container .title h2{
  display:inline-block;
  margin:0 0 0 calc(47.5vw - 535px);
  padding:0;
  border-bottom:none;
  color:inherit;
  font-size:4rem;
  font-weight:600;
  line-height:8rem;
  letter-spacing:1rem;
}

@media (max-width: 767px){
  main section.message .container .title h2{
    margin:0;
    border-bottom:none;
    font-size:1.8rem;
    line-height:3.5rem;
    letter-spacing:inherit;
  }
}

.brpc{
  display:inline;
}

@media (max-width: 767px){
  .brpc{
    display:none;
}}

main section.message .container .text{
  max-width:620px;
  margin:40px calc(5% + 50px) 0 0;
}

main section.message .container .text p{
  font-size:1.6rem;
  font-weight:500;
  line-height:5rem;
}

main section.message .container .text p strong{
  color:#e74657;
  font-weight:600;
}

main section.feature{
  padding:80px 0 80px 0;
  border-radius:30px;
  background:#fff3e8;
}

main section.feature .container{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

main section.feature .container .feature-item{
  width:calc(100% / 3 - 25px);
}

main section.feature .container .feature-item .img{
  position:relative;
}

main section.feature .container .feature-item .img img {
  border-radius:10px;
}

main section.feature .container .feature-item h2{
  margin:10px 0;
  padding:0 0 2px;
  color:#e74657;
  font-size:2rem;
  font-weight:bold;
}

main section.privacy{
  padding:80px 0;
}

main section.privacy .container{
  display:flex;
  align-items:center;
  margin-top:30px;
}

main section.privacy .container .imgs{
  position:relative;
  display:flex;
  overflow:hidden;
  width:60%;
}

main section.privacy .container .imgs .img{
  margin-left:20px;
}

main section.privacy .container .imgs .img + .img {
  margin-left: 60px;
}

@media (max-width: 767px) {
  main section.privacy .container .imgs .img{
    margin-left: 0;
  }}

main section.privacy .container .imgs .img img{
  border-radius:10px;
}

main section.privacy .container .content{
  flex:1;
  max-width:510px;
  margin-left:6.25%;
}

main section.voice{
  padding:40px 0 30px;
  border-radius:30px;
  background:#fff3e8;
  text-align:center;
}

main section.voice p{
  font-size:1.8rem;
  text-align:center !important;
}

main section.voice video{
  display:block;
  width:90%;
  height:auto;
  margin:10px auto 5px;
  padding:0;
  border-radius:10px;
}

footer section.footer{
  position:relative;
  overflow:hidden;
  padding:120px 0 80px;
  background:#f2f2f2;
  text-align:center;
}

footer section.footer:before{
  content:'';
  position:absolute;
  top:-60px;
  left:-100px;
  width:calc(100% + 200px);
  height:120px;
  border-radius:50%;
  background:#fff;
}

footer section.footer img{
  width:250px;
  height:auto;
}

footer section.footer .contact{
  position:fixed;
  bottom:-570px;
  left:0;
  display:block;
  width:100%;
}

footer section.footer .contact .head{
  position:relative;
  width:calc(100% - 60px);
  margin:0 auto;
  padding:16px 0;
  border-radius:15px 15px 0 0;
  background:#e74657;
  color:#fff;
  text-align:center;
}

footer section.footer .contact .head svg{
  position:absolute;
  top:20px;
  right:20px;
}

footer section.footer .contact .body{
  padding:40px;
  border:3px solid #e74657;
  border-radius:15px 15px 0 0;
  background:#fff;
}

footer section.footer .contact .body p{
  color:#ed6d2a;
  font-weight:600;
  text-align:center;
}

footer section.footer .contact .body .tel{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:20px;
}

footer section.footer .contact .body img{
  width:52px;
  height:52px;
  max-width:none;
}

footer section.footer .contact .body .infos .info a{
  display:flex;
  width:calc(50% - 40px);
  padding:15px;
  border:2px solid #42afb1;
  border-radius:10px;
  background:#fff;
}
section.footer span{
  display:block;
  font-weight:600;
  line-height:2rem;
}

footer section.links{
  padding:40px 0;
  border-radius:30px;
  background-image:url("../img/bg/bg_links.svg"),url("../img/bg/bg_st_links.png");
  background-repeat:no-repeat, repeat;
  background-position:center, center;
  background-size:cover, 10px;
}

footer section.links .title{
  margin-bottom:20px;
  color:#e74657;
  text-align:center;
}

footer section.links .container1{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:30px 130px;
}

footer section.links .container2{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:900px;
  margin-top:30px;
  margin-right:auto;
  margin-left:auto;
}

footer section.links .info-box{
  display:none;
  width:920px;
  max-width:100%;
  margin:10px auto 0;
  padding:20px 16px 16px;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  background:#fff9c4;
  box-shadow:0 14px 34px rgba(0,0,0,0.10);
  color:#222;
  text-align:left;
}

footer section.links .info-box .info-image img{
  display:block;
  width:60%;
  max-width:100%;
  height:auto;
  margin:0 auto 20px;
  border-radius:12px;
}

@media screen and (min-width:768px){
  footer section.links .info-box .info-image img{
    width:60%;
}}

footer section.links .info-box p{
  margin:0 0 16px;
  font-size:1.7rem;
  line-height:1.4;
  letter-spacing:0.03em;
  white-space:pre-line;
}

footer section.links .info-box p.signature{
  margin:22px 0 0;
  opacity:0.85;
  font-size:1.4rem;
  line-height:1.4;
}

.info-box a:not(.btn),
#policyBox a {
color: #1a0dab;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
word-break: break-all;
overflow-wrap: anywhere;
}

.info-box a:not(.btn):visited,
#policyBox a:visited {
color: #681da8;
}

.info-box a:not(.btn):hover,
.info-box a:not(.btn):focus,
#policyBox a:hover,
#policyBox a:focus {
color: #0037c1;
text-decoration-thickness: 2px;
}

.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  height:70px;
  margin:30px 0 0;
  border:none;
  border-radius:35px;
  background:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);
  text-decoration:none;
}

.btn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
}

.btn img{
  display:block;
  width:43px;
  height:43px;
  margin:0 20px 0 15px;
}

.btn span{
  font-size:1.8rem;
  font-weight:600;
}

.btn-a{
  width:260px;
}

.btn-b{
  width:520px;
}

.manga-box{
  display:none;
  width:100%;
  margin:10px auto 0;
  background:#fff;
  text-align:center;
}

.manga-box h3{
  text-align:center;
}

.manga-box .swiper-slide img{
  display:block;
  width:100%;
  margin:0 0 16px;
}

.manga-box .swiper-button-prev,
.manga-box .swiper-button-next{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:180px;
  height:26px;
  margin:26px 25px 10px;
  padding:0;
  transform:none;
  border-radius:12px;
  background:#e74657;
  box-shadow:0 3px 8px rgba(0,0,0,0.12);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:26px;
}

.manga-box .swiper-button-next:active,
.manga-box .swiper-button-prev:active{
  transform:scale(0.95);
  box-shadow:0 6px 14px rgba(0, 0, 0, 0.25);
}

.manga-box .swiper-button-next::after,
.manga-box .swiper-button-prev::after{
  display:none !important;
}

@media (max-width: 767px){
  body{
    overflow-x:hidden;
    font-size:1.3rem;
    line-height:2.5rem;
  }

  h2{
    margin:12px 0 0;
    padding:0 0 2px;
    border-bottom:3px solid #fcc642;
    font-size:1.6rem;
    line-height:inherit;
    letter-spacing:.15rem;
  }

  h3{
    font-size:1.8rem;
  }

  .inner{
    width:calc(100% - 60px);
    max-width:100%;
    margin:0 30px;
    padding:0;
  }

  .section-title span{
    font-size:1.2rem;
  }

  header .header-visual{
    margin-top:10px;
    border-radius:10px;
  }

  header .header-visual.page{
    height:210px;
  }

  header .header-visual.page .container{
    margin-top:20px;
    margin-left:30px;
  }

  header .header-visual.page .container h1{
    margin:60px 0 0 -18px;
    padding:0 0 1px;
    border-bottom:3px solid #fcc642;
    font-size:2.0rem;
  }

  header .header-visual.page .container p{
    margin:4px 0 0 -18px;
    font-size:1.1rem;
  }

  main section.message{
    padding:30px 0;
  }

  main section.message .container{
    flex-direction:column;
  }

  main section.message .container .title{
    width:100%;
    margin:0;
    text-align:center;
  }

  main section.message .container .text{
    margin:20px 0 0;
    padding:0 30px;
  }

  main section.message .container .text p{
    font-size:1.2rem;
    line-height:inherit;
  }

  main section.message .container .text p strong{
    margin:0 3px;
    padding:3px;
    background:#e74657;
    color:#fff;
  }

  main section.feature{
    padding:40px 0;
    border-radius:20px;
  }

  main section.feature .container{
    flex-direction:column;
  }

  main section.feature .container .feature-item{
    width:100%;
  }

  main section.feature .container .feature-item:nth-child(n+2){
    margin-top:40px;
  }

  main section.feature .container .feature-item h2{
    margin:5px 0;
    font-size:1.4rem;
    line-height:inherit;
    border-bottom:4px solid #fcc642;
  }

  main section.privacy{
    padding:40px 0;
  }

  main section.privacy .container{
    margin-top:40px;
    flex-direction:column;
  }

  main section.privacy .container .imgs{
    width:calc(100% - 60px);
  }

  main section.privacy .container .imgs .img + .img{
    display:none;
  }

  main section.privacy .container .content{
    width:calc(100% - 60px);
    max-width:none;
    margin:10px auto 0;
  }

  main section.voice{
    padding:20px 0 10px;
    border-radius:20px;
  }

  main section.voice p{
    font-size:1.3rem;
  }

  footer section.footer{
    padding:100px 0 50px;
  }

  footer section.footer img{
    width:200px;
  }

  footer section.links{
    padding:30px 0;
    border-radius:20px;
  }

  footer section.links .title{
    margin-bottom:30px;
  }

  footer section.links .container1{
    justify-content:space-around;
    gap:0;
  }

  footer section.links .container1 + .container1{
    margin-top:20px;
  }

  footer section.links .info-box{
    width:95%;
    margin:10px auto 0;
    padding:8px;
    border-radius:12px;
  }

  footer section.links .info-box p{
    margin:0 0 12px;
    font-size:1.3rem;
    line-height:1.6;
    letter-spacing:0.02em;
  }

  footer section.links .info-box p.signature{
    margin-top:16px;
    font-size:1.1rem;
    line-height:1.5;
  }

  .btn{
    height:40px;
  }

  .btn img{
    width:25px;
    height:25px;
    margin:0 6px 0 10px;
  }

  .btn span{
    font-size:1rem;
  }

  .btn-a{
    width:calc(50vw - 30px);
    max-width:150px;
    min-width:auto;
  }

  .btn-b{
    width:95%;
  }

  .manga-box .swiper-slide img{
    margin:0 0 10px;
  }

  .manga-box .swiper-button-prev,
  .manga-box .swiper-button-next{
    width:120px;
    height:32px;
    margin:16px 6px 8px;
    border-radius:10px;
    font-size:1.3rem;
    line-height:32px;
  }
}