@charset "utf-8";

/* -----------------------------------------------------------
Element
----------------------------------------------------------- */
html {font-size:62.5%;}
* {box-sizing:border-box;}
body {
  font-family:'Kosugi Maru',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size:16px;
  font-weight:500;
  color:#3E3A39;
  line-height:1.75;
}
a {
  color:inherit;
  text-decoration:none;
}
.anc {
  height:0;
  border:none;
  margin:-100px 0 0;
  padding:100px 0 0;
}

main img {max-width:100%;}

@media screen and (min-width: 768px){
  .sp_cont {display:none;}
  a:hover {
    text-decoration:underline;
    color:inherit;
  }
  .hover_btn {transition:0.5s;opacity:1;}
  .hover_btn:hover {transition:0.5s;opacity:0.75;}
}

@media screen and (max-width: 767px){
  body {
    -webkit-text-size-adjust: 100%;
    font-size:1.2rem;
  }
  .pc_cont {display:none;}
  .anc {
    margin:-50px 0 0;
    padding:50px 0 0;
  }
}

/* -----------------------------------------------------------
Template
----------------------------------------------------------- */
/* :::::::::: header :::::::::: */
header {
  position:fixed;
  width:100%;
  height:100px;
  padding:20px;
  margin:auto;
  top:0;
  left:0;
  right:0;
  background:#FFFFFF;
  box-shadow:0 0 3px 3px rgba(0,0,0,0.2);
  z-index:100;
}

header.on_movie {z-index:0;}
header::before {
  position:absolute;
  display:block;
  content:"";
  width:100vw;
  height:8px;
  background:#9070AF;
  margin:auto;
  top:0;
  left:-100%;
  right:-100%;
  z-index:1;
}
header .header_box {
  width:100%;
  max-width:960px;
  height:60px;
  margin:0 auto;
}
header .logo {
  display:inline-block;
  width:auto;
  height:100%;
}
header .logo a {
  font-family:'M PLUS Rounded 1c',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
  display:block;
  width:100%;
  height:100%;

}
header .logo img {
  height:100%;
  margin:0 25px 0 0;
  float:left;
}
header .logo span {
  display:inline;
  font-size:2.2rem;
  font-weight:900;
  vertical-align:middle;
  float:left;
  margin:15px 0 0;
}
header p.menu {
  font-family:'M PLUS Rounded 1c',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
  position:relative;
  width:40px;
  height:60px;
  padding:35px 0 0;
  text-align:center;
  float:right;
  cursor:pointer;
}
header p.menu span {
  font-size:1.4rem;
  font-weight:900;
  color:#9070AF;
  text-align:center;
}
header p.menu span::before ,
header p.menu span::after {
  position:absolute;
  display:block;
  content:"";
  width:100%;
  height:4px;
  background:#9070AF;
  border-radius:2px;
  margin:auto;
  left:0;
  right:0;
}
header p.menu span::before {
  top:15px;
  box-shadow:0 10px 0 0 #9070AF;
}
header p.menu span::after {top:35px;}

/* :::::::::: nav :::::::::: */
nav {
  position:fixed;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  right:0;
  z-index:110;
  visibility:hidden;
  opacity:0;
  transition:0.5s;
}
nav.active {
  visibility:visible;
  opacity:1;
}
nav .bg_menu {
  width:100%;
  height:100%;
  background:rgba(144,112,175,0.85);
  z-index:0;
}
nav .menu_box {
  position:absolute;
  width:310px;
  height:310px;
  text-align:center;
  color:#FFFFFF;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
}
nav .menu_box .menu_title {
  font-family:'M PLUS Rounded 1c',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
  width:100%;
  font-size:4rem;
  font-weight:800;
}
nav .menu_box .menu_title span {
  position:absolute;
  display:block;
  width:1em;
  height:1em;
  top:0.85em;
  right:0;
  cursor:pointer;
}
nav .menu_box .menu_title span::before,
nav .menu_box .menu_title span::after {
  position:absolute;
  display:block;
  content:"";
  width:1em;
  height:4px;
  border-radius:2px;
  background:#FFFFFF;
  top:0;
  right:0;
  transform:rotate(45deg);
}
nav .menu_box .menu_title span::after {transform:rotate(-45deg);}
nav .menu_box ul {
  width:100%;
  margin:0.5em 0 0;
  border-top:solid 1px #FFFFFF;
}
nav .menu_box ul li {
  width:100%;
  border-bottom:solid 1px #FFFFFF;
}
nav .menu_box ul li a {
  position:relative;
  display:block;
  padding:0.6em 0;
  text-decoration:none;
}
nav .menu_box ul li a:hover {background:rgba(255,255,255,0.2);}
nav .menu_box ul li a::after {
  position:absolute;
  display:block;
  content:"";
  width:0.5em;
  height:0.5em;
  border-top:solid 2px #FFFFFF;
  border-right:solid 2px #FFFFFF;
  transform:rotate(45deg);
  margin:auto;
  top:0;
  bottom:0;
  right:1em;
}

/* :::::::::: footer :::::::::: */
footer {
  position:relative;
  width:100%;
  background:#FFFFFF;
  z-index:10;
}
footer > div {
  width:100%;
  max-width:1040px;
  padding:38px 20px;
  margin:0 auto;
  overflow:hidden;
}
footer > div .f_logo {display:inline-block;}
footer > div .f_logo img {
  display:inline-block;
  width:auto;
  height:50px;
  vertical-align:middle;
}
footer > div .f_logo span {
  display:inline-block;
  font-weight:500;
  font-size:1.4rem;
  line-height:1.6;
  margin:0 0 0 30px;
  vertical-align:middle;
}
footer .copyright {
  font-family:'M PLUS Rounded 1c',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
  width:100%;
  height:40px;
  font-size:1.4rem;
  color:#FFFFFF;
  background:#9070AF;
  text-align:center;
  line-height:40px;
}
footer .pagetop {
  position:fixed;
  width:50px;
  height:50px;
  cursor:pointer;
  bottom:50px;
  right:10px;
}
.totop {
  transform:translateY(100px);
  opacity:0;
  transition:0.75s;
}
.fadein.totop {
  transform:translateY(0);
  opacity:1;
}
/* :::::::::: kv :::::::::: */
.kv {
  position:fixed;
  /* width:100%; */
  /* width:100%;
  height:auto;
  margin:auto; */
  top:100px;
  /* left:-100%;
  right:-100%; */
  z-index:0;
}

.kv_booklet img {
  width: 100%;
  object-fit: contain;
  aspect-ratio: 64 / 15;
}

/* :::::::::: main :::::::::: */
main {
  position:relative;
  display:block;
  margin:100px 0 0;
  background:#FFF;
  overflow:hidden;
  z-index:10;
}
main.booklet {
  background:#FFF;
  /* margin:calc(23.44% + 100px) 0 0; */
}

main article {
  width:100%;
  max-width: 1040px;
  margin: 0 auto;
}

main article section {
  width:100%;
  margin:0 auto;
}

.common_share {
  text-align:center;
  padding:40px 0;
  background:#EEEEEE;
}
.common_share h2 {
  font-family:'M PLUS Rounded 1c',"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
  font-size:2.0rem;
  font-weight:900;
  margin:0 auto 10px;
}
.common_share ul {
  text-align:center;
  overflow:hidden;
}
.common_share ul li {
  display:inline-block;
  width:50px;
  height:52px;
  margin:0 5px;
}

@media screen and (max-width: 767px) {
  /* :::::::::: header :::::::::: */
  header {
    height:50px;
    padding:8px 3%;
    box-shadow:0 0 3px 3px rgba(0,0,0,0.2);
  }
  header::before {height:3px;}
  header .header_box {height:34px;}
  header .logo {width:calc(100% - 35px);}
  header .logo img {margin:0 2% 0 0;}
  header .logo span {
    font-size:1.3rem;
    margin:8px 0 0;
  }
  header p.menu {
    width:34px;
    height:34px;
    padding:20px 0 0;
  }
  header p.menu span {font-size:1.1rem;}
  header p.menu span::before {
    top:2px;
    box-shadow:0 8px 0 0 #9070AF;
  }
  header p.menu span::after {top:18px;}

  /* :::::::::: nav :::::::::: */
  nav .menu_box {
    width:90%;
    height:400px;
  }
  nav .menu_box .menu_title {font-size:3.6rem;}
  nav .menu_box ul li a {font-size:1.4rem;}

  /* :::::::::: kv :::::::::: */
  .kv {
    height:80px;
    top:50px;
  }
  .kv_booklet img {width:100%;}
  .kv .p_title {top:18px;}

  /* :::::::::: main :::::::::: */
  main {margin:50px 0 0;}
  main article {padding:5% 0 0;}
  main.booklet article {padding:0;}

  .common_share {padding:8% 0;}
  .common_share h2 {
    font-size:1.4rem;
    margin:0 auto 3%;
  }
  .common_share ul li {
    width:38px;
    height:40px;
    margin:0 5px;
  }
  .btn_common {
    min-width:220px;
  }
  .btn_common a {
    margin:0 auto 8%;
    padding: 0.5em;
    font-size:1.5rem;
    border-radius:22px;
  }
  .btn_common a::after {right:1.5rem;}
  .devide {
    font-size:1.4rem;
    margin:0 auto 8%;
  }
  .devide > span:nth-of-type(1) {font-size:2.8rem;}

  /* :::::::::: footer :::::::::: */
  footer > div {padding:5% 3%;}
  footer > div .f_logo img {height:30px;margin:0 10px 0 0;}
  footer > div .f_logo span {
    font-size:1.2rem;
    margin:2% 0 0;
  }
  footer .copyright {
    height:auto;
    font-size:1.2rem;
    text-align:left;
    line-height:1.2;
    padding:0.5em 1em;
  }
  footer .pagetop {
    width:40px;
    height:40px;
    bottom:15px;
    right:15px;
  }
}

/* -----------------------------------------------------------
Common
----------------------------------------------------------- */
.fwbold {font-weight:bold;}
.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.clear {clear: both;}
.italic {font-style:italic;}

.btn_common a{
  display: block;
  max-inline-size: max-content;
  margin: 1em auto 3em;
  padding: 0.5em 2.5em 0.7em;
  border-radius: 2em;
  background: #fff15a;
  color: #000;
  font-size: 1.5em;
  font-weight: 700;
  box-shadow: inset 0px -4px 0px 0px #e2d052;
  transition-duration: 100ms;
}

.btn_common a:hover {
  text-decoration:none;
  box-shadow: unset;
  transform:translateY(1px);
}

table{
  width: 95%;
  margin:0 auto;
  border-collapse:collapse;
}
caption{
  padding: 0.5rem;
  border: 1px #959595 solid;
  border-bottom: none;
  background: #e6e6e6;
  color: #000;
  font-weight: bold;
}
table th{white-space: nowrap;}
table th ,table td {
  padding: 0.4em 1em;
  border: 1px #959595 solid;
  vertical-align: middle;
}

/* -----------------------------------------------------------
Information
----------------------------------------------------------- */
.information {
  margin: 2em 2em 80px 2em;
}
.information h2{
  margin: 1em 0;
  padding: 0.5rem;
  background: #9070AF;
  border-radius: 2em;
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.information .point_list{
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.information ul.point_list li{
  width: min(50%, 280px);
  margin-bottom: 1em;
  text-align: center;
  container-type: inline-size;
}
.information ul.point_list li .point{
  width: 130px;
  margin: 0 auto;
}
.information ul.point_list li dt{
  margin-bottom: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2;
}
.information ul.point_list li dd{
  font-size: 1.1em;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .information ul.point_list li dt{
    font-size: 1.3em;
  }
  .information ul.point_list li dd{
    font-size: 1.2em;
  }
  .information ul.point_list li:last-child{
    width: 90%;
  }
}

/* -----------------------------------------------------------
選択肢
----------------------------------------------------------- */
ul.anc_link {
  width:100%;
  max-width:1040px;
  padding:0 20px;
  margin:35px auto 25px;
  overflow:hidden;
}
ul.anc_link li {
  width:31%;
  height:40px;
  line-height:40px;
  font-size:1.6rem;
  margin:0 3.5% 0 0;
  float:left;
  text-align:center;
}
@media screen and (max-width: 860px) {
  ul.anc_link li {font-size:1.3rem;}
}
ul.anc_link li:nth-child(3n) {margin:0;}
ul.anc_link li a {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border:solid 1px #BDBDBD;
  border-radius:20px;
  text-decoration:none;
}
ul.anc_link li a::after {
  position:absolute;
  display:block;
  content:"";
  width:1rem;
  height:1rem;
  border-bottom:solid 2px #3E3A39;
  border-right:solid 2px #3E3A39;
  margin:auto;
  top:0;
  bottom:5px;
  right:20px;
  transform:rotate(45deg);
}

@media screen and (max-width: 767px) {
  ul.anc_link {
    width:94%;
    padding:0;
    margin:0 auto 5%;
  }
  ul.anc_link li {
    width:100%;
    height:30px;
    line-height:30px;
    font-size:1.2rem;
    margin:0 0 2%;
  }
  ul.anc_link li a {border-radius:15px;}
  ul.anc_link li a::after {
    width:0.8rem;
    height:0.8rem;
    border-bottom:solid 1px #3E3A39;
    border-right:solid 1px #3E3A39;
  }
}

/* -----------------------------------------------------------
Main Contents
----------------------------------------------------------- */
.content_wrap{
  width: 95%;
  margin-bottom: 5em;
}

.content_headline{
  display: grid;
  margin-bottom: 1em;
  container-type: inline-size;
}

.content_headline h2{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 60px);
  height: min(10cqw, 60px);
  grid-area: 1 / 1 / 2 / 2;
  justify-self: end;
  align-self: end;
  background: #9070AF;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  font-size: 1.5em;
  color: #fff;
  font-weight: bold;
  font-size: 3cqw;
}

.content_headline img{
  margin: unset;
  grid-area: 1 / 1 / 2 / 2;
  align-self: end;
  z-index: 1;
  width: min(20cqw, 120px);
}

.content_wrap h3{
  margin: 1em 0;
  padding: 0.5rem;
  background: #9070AF;
  border-radius: 2em;
  color: #fff;
  font-size: 2cqw;
  font-weight: bold;
  text-align: center;
}

.voice_wrap{
  width: 95%;
  margin: 0 auto;
}

.voice_wrap .voice_list{
  margin: 0 1em;
}
.voice_wrap .voice_list li{
  margin-bottom: 1em;
  text-indent: -1em;
}

.flex_wrap{
  display: flex;
  justify-content: space-between;
}

.sec_lead {
  margin-bottom: 1em;
}
.cta_area {
  margin: 2em auto;
}
.cta_area .lead{
  margin-bottom: 1em;
}
.note{
  width: 95%;
  margin: 0 auto;
}

figcaption{
  font-size: 0.8em;
  text-align: center;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .flex_wrap{
    flex-direction: column-reverse;
  }
  .content_headline h2{
    width: calc(100% - 10cqw);
    font-size: 6cqw;
  }
  .content_wrap h3{
    font-size: 5cqw;
  }
}

/* -----------------------------------------------------------
FAQ
----------------------------------------------------------- */
.faq_wrap{
  max-inline-size: max-content;
  margin-inline: auto;
}
.faq_list{
  margin-left: 1.5em;
}

.faq_list dt{
  text-indent: -1.5em;
}

.faq_list dt::before{
  content: "Ｑ.";
}

.faq_list dd{
  text-indent: -1.5em;
  margin-bottom: 1em;
  color: #7544a5;
}

.faq_list dd::before{
  content: "Ａ.";
}

/* -----------------------------------------------------------
レコメンド
----------------------------------------------------------- */
.page_questionnaire {
  text-align:center;
  padding:40px 20px 50px;
  background: #edeaf3;
}
.page_questionnaire h2 {
  font-size:2rem;
  font-weight:900;
  margin:0 auto 20px;
}
.award > p {font-size:1.2em;margin:0 0 1em;}