@charset "UTF-8";
body {
  font-size: 16px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-weight: normal;
  color: #271c08;
}
a {
  text-decoration: none;
}
p {
  margin: 0 !important;
  padding: 0 !important;
}
section {
  clear: both;
  overflow: auto;
}
/*--------------------------------------------------
見出しタグ
-----------------------------------------------------*/
h2 {
  margin: 0;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #142c58;
  letter-spacing: 0.1em;
  font-family: 'Noto Serif JP', "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  z-index: 1;
  position: relative;
}
h3 {
  margin: 20px 0;
  font-size: 33px;
  font-weight: bold;
  text-align: left;
  color: #142c58;
  font-family: 'Noto Serif JP', "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}
/*--------------------------------------------------
全体レイアウト
-----------------------------------------------------*/
.main {
  background-color: #e6f3f9;
}
.article {
  background-color: #fff;
  font-size: 16px;
}
.article p {
  line-height: 2;
  color: #3b3d3d;
}
.article {
  width: 100%;
}
.top_image_in {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.sec_inr {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.article img {
  width: 100%;
}
.sp_br {
  display: none;
}
.pc_br {
  display: block;
}
.t_big {
  font-size: 1.7em;
}
.t_big02 {
  font-size: 1.2em;
}
.t_big03 {
  font-size: 1.3em;
}
.t_blue {
  color: #1a9cdd;
}
.t_red {
  color: #a62d3c;
}
.t_white {
  color: #fff;
}
.t_orange {
  color: #f29127;
}
.b {
  font-weight: bold;
}
.underl {
  background: linear-gradient(transparent 60%, #eaf5fa 60%);
  padding: 0 3px;
}
.t_small {
  font-size: 0.8em;
}
.slash {
  letter-spacing: 0.1em;
  position: relative;
  font-weight: bold;
}
.slash:before, .slash:after {
  position: relative;
  display: inline-block;
  content: "";
  background: #142c58;
  width: 2px;
  height: 1em;
  margin: 0 1em;
  margin-top: -.2em;
  vertical-align: middle;
}
.slash:before {
  transform: rotate(-35deg);
}
.slash:after {
  transform: rotate(35deg);
}
/* -------------------------------
FV
----------------------------------*/
.top_image {
  background-image: url("../images/top_back.jpg");
  background-repeat: no-repeat;
  background-position: center;
  height: auto;
}
.top_image_in img {
  width: 100%;
}
.sp_top {
  display: none;
}
/* -------------------------------
sec01
----------------------------------*/
.sec01 {
  padding: 0 0 60px;
  text-align: center;
  background: #e6f3f9;
}
.btn_area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.btn_flex {
  width: 46%;
}
.btn_new {
  width: 46%;
  margin-top: 12px;
}
.btn {
  border-radius: 50px;
  font-size: 27px;
  box-shadow: 4px 4px 10px -2px rgba(0, 0, 0, 0.2);
  padding: 22px;
  border: 1px solid #fff;
  letter-spacing: 0.1em;
}
.btn_flex p {
  color: #142c58;
}
.btn:hover {
  opacity: 0.8;
  transition: all .3s;
}
.btn a {
  color: #fff;
}
.signup {
  background: rgb(28, 160, 245);
  background: linear-gradient(180deg, rgba(28, 160, 245, 1) 0%, rgba(5, 135, 241, 1) 100%);
}
.login {
  background: rgb(248, 177, 53);
  background: linear-gradient(180deg, rgba(248, 177, 53, 1) 0%, rgba(239, 123, 28, 1) 100%);
}
.new {
  background: rgb(123, 213, 240);
  background: linear-gradient(180deg, rgba(123, 213, 240, 1) 0%, rgba(112, 195, 219, 1) 48%, rgba(100, 187, 213, 1) 100%);
}
.causion {
  margin-top: 15px;
  text-decoration: underline;
}
.btn_space {
  margin-top: 15px;
}
/* -------------------------------
sec02
----------------------------------*/
.sec_02 {
  padding: 70px 0;
  text-align: center;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(231, 244, 252, 1) 48%, rgba(231, 244, 252, 1) 100%);
}
.sec_02_inr {
  position: relative;
}
.img_left {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 0;
}
.img_right {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 0;
}
.img_left img, .img_right img {
  width: 50%;
}
/* -------------------------------
sec03
----------------------------------*/
.sec_03 {
  padding: 70px 0;
  text-align: center;
  background: url('../images/man_bg.jpg');
  background-size: cover;
}
.nayami_area {
  display: inline-block;
  margin-top: 40px;
  padding: 50px 100px;
  background-color: rgba(255, 255, 255, 0.7);
}
.nayami_area li {
  line-height: 2.2;
  list-style: none;
  text-align: left;
  font-size: 22px;
}
.fa-solid {
  margin-right: 10px;
}
.arrow {
  margin: -60px auto 0;
  width: 30%;
}
/* -------------------------------
sec04
----------------------------------*/
.sec_04 {
  padding: 70px 0;
  text-align: center;
  background: #fff;
}
.sec_04 p {
  font-size: 1.5em;
}
.sec_04_img {
  width: 70%;
  margin: 40px auto 0;
}
/* -------------------------------
sec05
----------------------------------*/
.sec_05_ttl {
  background: #317fb2;
  padding: 10px;
  text-align: center;
}
.sec_05_ttl p {
  color: #fff;
}
.sec_05 {
  background: #fff;
  padding: 70px 0 100px;
}
.feature_box {
  display: flex;
  justify-content: space-around;
}
.feature_img {
  width: 45%;
  box-shadow: 15px 15px #eaf7fb;
}
.feature_inr {
  margin-top: 20px;
  width: 45%;
}
.point {
  background: #317fb2;
  color: #fff;
  font-size: 1.2em;
  padding: 3px 10px;
}
.feature_under {
  margin: 40px 0 80px;
  text-align: center;
}
.feature_under p {
  font-size: 1.2em;
}
.reason_area {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-left: 0;
  margin-left: 0;
}
.reason_area li {
  list-style: none;
  width: 18%;
  color: #1a9cdd;
  padding: 20px 10px;
  border: 1px solid #1a9cdd;
  margin-bottom: 12px;
}
/* -------------------------------
sec06
----------------------------------*/
.sec_06 {
  padding: 80px 0;
  text-align: center;
  background: url("../images/bg.jpg");
  background-size: cover;
}
.inr_btn, .inr_btn02 {
  margin: 40px auto 0;
  width: 60%;
}
/* -------------------------------
sec07
----------------------------------*/
.sec_07 {
  padding: 80px 0;
  text-align: center;
  background: #fff;
}
.voice_area {
  padding: 50px 0 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.v_box {
  background: #fff;
  width: 45%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30px;
  padding: 15px 20px;
  box-shadow: 0 0 8px #ccc;
}
.v_img {
  width: 28%;
}
.v_text {
  text-align: left;
  width: 65%;
  font-size: 0.9em;
}
.v_text p {
  line-height: 1.8;
}
.man, .woman {
  border-radius: 20px;
  color: #fff;
  padding: 3px 10px;
}
.man {
  background: #317fb2;
}
.woman {
  background: #f29127;
}
/* -------------------------------
sec08
----------------------------------*/
.sec_08 {
  padding: 80px 0;
  text-align: center;
  background: #e0f0fa;
}
.guide_area {
  padding: 50px 0;
  display: flex;
  justify-content: space-around;
}
.guide_area p {
  line-height: 1.7;
}
.g_img {
  width: 80%;
  margin: 0 auto;
  border-radius: 50%;
}
.g_box {
  width: 28%;
}
.step {
  margin: 20px 0 10px;
  font-size: 0.9em;
}
.step span {
  color: #fff;
  padding: 2px 10px;
  background: #1c9ddd;
  border-radius: 5px;
}
.g_title {
  color: #0c2e56;
  font-size: 1.5em;
  margin-bottom: 10px;
}
/* -------------------------------
sec09
----------------------------------*/
.sec_09 {
  padding: 80px 0 30px;
  text-align: center;
  background: #fff;
}
.price_area {
  padding: 40px 0;
}
.space {
  letter-spacing: 0.1em;
}
.p_text {
  margin: 20px 0;
  display: inline-block;
  text-align: left;
}
.p_table {
  width: 100%;
  border-top: 1px solid #ccc;
  margin: 20px auto;
}
.p_table th, .p_table td {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.p_table th {
  width: 40%;
  background-color: rgba(240, 240, 240, 0.7);
  font-weight: bold;
  text-align: center;
}
.p_table td {
  width: 60%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: left;
}
/* -------------------------------
sec10
----------------------------------*/
.sec_10 {
  padding: 110px 0;
  text-align: center;
  background: url("../images/bg03.jpg");
  background-size: cover;
}
.beginner_text {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  padding: 40px 20px;
  background-color: rgba(255, 255, 255, 0.6);
}
/* -------------------------------
sec11
----------------------------------*/
.sec_11 {
  padding: 80px 0;
  text-align: center;
  background: #fff;
}
.faq_area {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  text-align: left;
  padding-top: 40px;
}
.question {
  background: #2f80b0;
  padding: 15px 20px;
  color: #fff;
}
.faq-list {
  padding-left: 0;
  margin-left: 0;
}
.faq_item {
  list-style: none;
  position: relative;
  margin-bottom: 20px;
}
.faq_item span {
  position: absolute;
  top: 8px;
  right: 15px;
  color: #fff;
}
.answer {
  background: #fff;
  border: 1px solid #2f80b0;
  padding: 10px 12px;
  display: none;
}
/* -------------------------------
sec12
----------------------------------*/
.sec_12 {
  padding: 80px 0 60px;
  text-align: center;
  background: #e0f0fa;
}
.security_area {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-left: 0;
  margin-left: 0;
}
.security_area li {
  width: 47%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: #fff;
  padding: 20px;
  list-style: none;
  align-items: center;
  margin-bottom: 40px;
}
.security_img {
  width: 18%;
}
.security_txt {
  width: 63%;
  text-align: left;
}
/* -------------------------------
sec13
----------------------------------*/
.sec_13 {
  padding: 80px 0;
  text-align: center;
  background: rgb(224, 240, 250);
  background: linear-gradient(180deg, rgba(224, 240, 250, 1) 0%, rgba(255, 255, 255, 1) 56%);
}
.sec_13_inr {
  position: relative;
}
.last_left {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 0;
}
.last_right {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 0;
}
.last_left img, .last_right img {
  width: 40%;
}
/* -------------------------------
sec14
----------------------------------*/
.sec_14 {
  padding: 80px 0;
  text-align: center;
  background: url('../images/bg02.jpg');
  background-size: cover;
}
.contact_area {
  padding: 40px 0;
}
.contact_area a {
  color: #3b3d3d;
  text-decoration: underline;
}
.contact_table {
  width: 600px;
  border-top: 1px solid #ccc;
  margin: 0 auto;
}
.contact_table th, .contact_table td {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.contact_table th {
  width: 30%;
  background-color: rgba(240, 240, 240, 0.7);
  font-weight: bold;
  text-align: center;
}
.contact_table td {
  width: 70%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: left;
}
/* SNSボタン*/
.snsicon {
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-left: 0;
}
.snsicon li {
  width: 10%;
  list-style: none;
}
.sns_btn {
  border-radius: 50%;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: #fff !important;
  text-decoration: none;
  transition: .5s;
}
.sns_btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.sns_btn:hover {
  opacity: 0.8;
}
.tw {
  background: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%);
}
.insta {
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
}
.insta:before {
  content: '';
  position: absolute;
  top: 27px;
  left: -12px;
  width: 59px;
  height: 40px;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.fb {
  background: linear-gradient(135deg, #6699ff 0%, #3b5998 100%);
}
.sns_text span {
  background: #142c58;
  color: #fff;
  padding: 4px 8px 3px;
  letter-spacing: 0.1em;
  border-radius: 5px;
}
/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  color: #fff;
  background: #1d9bd5;
  padding: 15px 0;
  text-align: center;
}
.footer p, .footer a {
  color: #fff;
  font-size: 0.9em;
}
.footer a:hover {
  opacity: 0.9;
}