@charset "UTF-8";

/*'tab': 768px
'pc' : 1024px */

/* カスタムプロパティ
------------------------------------------------- */
:root {
  --main-width: 1000px;
  --line-height: 1.666;
  --color-primary: #6BB785;
  --color-primary-pale: #F0F8F3;
  --color-primary-dark: #3E7C84;
  --color-primary-txt-dark: #169F44;
  --color-white: #ffffff;
  --color-red: #E30000;
  --color-txt: #333333;
  --color-gray-pale: #D9D9D9;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-exbold: 800;
  --font-gothic: "M PLUS 1p", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --transition-basic: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  --transition-fast: all 0.15s ease;
  --box-shadow: 6px 6px 10px 0px rgb(0 0 0 / .4);
  --text-shadow: 2px 3px 3px rgb(0 0 0 / .4);
  --border-radius: 100vmax;
  /* --bg-gradation: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%); */
  --font12px: 0.75rem;
  --font14px: 0.875rem;
  --font16px: 1rem;
  --font17px: 1.0625rem;
  --font18px: 1.125rem;
  --font20px: 1.25rem;
  --font22px: 1.375rem;
  --font24px: 1.5rem;
  --font26px: 1.625rem;
  --font28px: 1.75rem;
  --font30px: 1.875rem;
  --font36px: 2.25rem;
  --font48px: 3rem;
  --font60px: 3.75rem;
}


/* ----------------------------------------------------------------------

// 見出し、ボタン、表など繰り返し使うパーツ（モジュール）のスタイルを定義

------------------------------------------------------------------------- */

/* text
------------------------------------------------- */


/* img
------------------------------------------------- */
img {
	transition: var(--transition-basic);
}
img.for_sp {
  display: none;
}
@media screen and (max-width: 767px) {
  img.for_pc {
    display: none;
  }
  img.for_sp {
    display: inline-block;
  }
}



/* text link
------------------------------------------------- */
svg {
  fill: currentColor;
}
a {
	color: var(--color-txt);
  text-decoration: none;
	transition: var(--transition-basic);
}
a.basic_a,
.basic_a a {
  position: relative;
  display: inline-block;
}
a.basic_a::before,
.basic_a a::before {
  position: absolute;
  bottom: 5px;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-txt);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: var(--transition-basic);
}
a.basic_a.opposite::before,
.basic_a.opposite a::before {
  transform: scale(1, 1);
}
/* hover for PC */
@media screen and (min-width: 1024px) {
  a.basic_a:hover::before,
  .basic_a a:hover::before {
    transform: scale(1, 1);
  }
  a.basic_a.opposite:hover::before,
  .basic_a.opposite a:hover::before {
    transform: scale(0, 1);
  }
}

.basic_link01 {
  text-align: center;
}
.basic_link01 a {
  position: relative;
  display: inline-block;
  background-color: var(--color-red);
  border: var(--color-red) 2px solid;
  color: var(--color-white);
  font-size: var(--font24px);
  padding: 15px 47px 15px 33px;
  border-radius: var(--border-radius);
  text-align: center;
}
.basic_link01 a::before {
  position: absolute;
  top: calc(50% - 10px);
  right: 20px;
  content: "";
  width: 21px;
  height: 21px;
  background: url(../img/ico_arrow.svg) no-repeat;
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(110deg) brightness(98%) contrast(108%);
}
/* hover for PC */
@media screen and (min-width: 1024px) {
  .basic_link01 a:hover {
    background-color: var(--color-white);
    color: var(--color-red);
  }
  .basic_link01 a:hover::before {
    filter: invert(9%) sepia(94%) saturate(6033%) hue-rotate(6deg) brightness(104%) contrast(118%);
  }
}
@media screen and (max-width: 767px) {
  .basic_link01 a {
    font-size: var(--font16px);
    padding: 12px 30px 12px 17px;
  }
  .basic_link01 a::before {
    width: 16px;
    height: 16px;
    background-size: contain;
    right: 12px;
    top: calc(50% - 8px);
  }
  
}


/* body
------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-size: 100%; 
}
body {
	position: relative;
	overflow-x: hidden;
	background: var(--color-white);
	color: var(--color-txt);
	font-family: var(--font-gothic);
	font-size: var(--font18px);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height);
	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* one column layout
------------------------------------------------- */
.inner {
  max-width: calc(var(--main-width) + 15px + 15px);
  padding: 0 15px;
	margin: 0 auto;
}
@media screen and (max-width: 1023px) {
  .inner {
    margin: 0;
  }
}




/* footer
------------------------------------------------- */
footer {
	font-size: var(--font16px);
}
footer nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
  height: 100px;
}
footer .foot_nav ul li a {
  display: block;
  padding: 10px 20px;
  gap: 10%;
}
.copyright {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding: 14px 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  footer nav ul {
    height: 60px;
  }
  .copyright {
    padding: 10px 0;
  }

}

/* page_top
------------------------------------------------- */
#page_top {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 5;
}
#page_top a {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0;
  text-align: center;
  border-radius: var(--border-radius);
  border: var(--color-primary) 2px solid;
}
#page_top a::after {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--color-white);
  border-right: 3px solid var(--color-white);
}
/* hover for PC */
@media screen and (min-width: 1024px) {
  #page_top a:hover {
    background-color: var(--color-white);
  }
  #page_top a:hover::after {
    border-color: var(--color-primary);
  }
}



/* メインビジュアル
------------------------------------------------- */
.mainv_box {
  width: 100%;
  height: 947px;
  text-align: center;
}
.mainv_box picture {
  position: relative;
  display: block;
  height: 100%;
}
.mainv_box picture img {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 1023px) {
  .mainv_box {
    aspect-ratio: 928/947;
    height: initial;
  }
}



/* 共通コンテンツ
------------------------------------------------- */
p {
  margin-bottom: calc(1rem * var(--line-height));
}
p.lead {
  text-align: center;
}
strong {
  color: var(--color-primary-txt-dark);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 1023px) {
}


/* アプリダウンロード
------------------------------------------------- */
.app_download {
  background-color: var(--color-primary-pale);
  padding: 30px 0 40px;
  text-align: center;
}
.app_download .logo {
  margin-bottom: 30px;
}
.app_link {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 15px;
}
.app_link li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.app_download .logo img {
  width: 284px;
}
img.qr_code {
  display: inline-block;
  background-color: var(--color-white);
  padding: 8px;
}
@media screen and (max-width: 1023px) {
  .app_link {
    flex-direction: column;
  }
  .app_link li:not(:last-child) {
    margin-bottom: 10px;
  }
  .app_download .logo img {
    width: 250px;
  }

}


/* biztreeとは・・・・・
------------------------------------------------- */
#what_is {
  padding: 60px 0;
  text-align: center;
}
#what_is h2 {
  font-size: clamp(var(--font26px), 2.85vw, var(--font36px));
  margin-bottom: 30px;
}
#what_is p strong {
  font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
}
@media screen and (max-width: 1023px) {
  #what_is {
    padding: 40px 0;
  }
}

/* biztreeを活用する事で
------------------------------------------------- */
#by_using {
  background-color: var(--color-primary-pale);
  margin-top: 50px;
  padding: 40px 0 50px;
}
#by_using h2 {
  font-size: clamp(var(--font28px), 2.9vw, var(--font36px));
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 20px;
}
#by_using ol {
  counter-reset: num;
  background-image: url(../img/bkg_img01.png), url(../img/bkg_img02.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top 40px right 0, bottom 60px right 0;
  padding-right: 330px;
}
#by_using ol li {
  font-size: clamp(var(--font18px), 1.95vw, var(--font24px));
  font-weight: var(--font-weight-bold);
  line-height: 2;
}
#by_using ol li::before {
  counter-increment: num;
  content: counter(num) " : ";
}
@media screen and (max-width: 767px) {
  #by_using {
    padding-bottom: 130px;
    background: var(--color-primary-pale) url(../img/bkg_img01.png) no-repeat bottom 14px center/180px auto;
  }
  #by_using ol {
    background-image: none;
    padding-right:  0;
  }
}


/* ビジネスチャンスはスワイプの先に！
------------------------------------------------- */
#about_us {
  padding: 40px 0 50px;
}
#about_us h2 {
  font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 20px;
}
#about_us h3 {
  background: var(--color-primary-pale) url(../img/bkg_img03.png) no-repeat top 5px right 5px;
  font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
  color: var(--color-primary-txt-dark);
  text-align: center;
  padding: 26px 3%;
  margin: calc(1rem * var(--line-height) + 30px) 0;
  line-height: 1.479;
}
#about_us h4 {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-pale) url(../img/bkg_img04.png) no-repeat top right;
  font-size: clamp(var(--font24px), 2.85vw, var(--font36px));
  color: var(--color-primary-txt-dark);
  padding: 0 3%;
  margin: calc(1rem * var(--line-height) + 30px) 0;
  line-height: 1;
}
#about_us p.important {
  margin: 3.2rem 0;
}
#about_us_slider {
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  #about_us h3 {
    background-size: 55px auto;
  }
  #about_us h4 {
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
  }
}


/* FAQ
------------------------------------------------- */
#faq {
  padding: 70px 0 0;
}
#faq h2 {
  font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
  text-align: center;
  margin-bottom: 20px;
}
.qa_box {
  border: var(--color-gray-pale) 1px solid;
  border-radius: 5px;
  padding: 30px 3% 5px 50px;
  margin-bottom: 10px;
}
.qa_box h3 {
  position: relative;
  font-size: var(--font20px);
  font-weight: var(--font-weight-bold);
  margin-bottom: 30px;
}
.qa_box p {
  position: relative;
}
.qa_box h3::before,
.qa_box p::before {
  position: absolute;
  font-size: var(--font30px);
  top: -10px;
  left: -32px;
}
.qa_box h3::before {
  content: "Q";
  color: var(--color-primary);
}
.qa_box p::before {
  content: "A";
  color: #E87070;
  font-weight: var(--font-weight-bold);
}
.qa_box.qa_strong {
  padding: 16px 30px 30px 80px;
}
.qa_box.qa_strong h3 {
  font-size: var(--font30px);
  color: var(--color-primary);
}
.qa_box.qa_strong p {
  font-size: var(--font24px);
  font-weight: var(--font-weight-bold);
  color: #E87070;
}
.qa_box.qa_strong h3::before,
.qa_box.qa_strong p::before {
  font-size: var(--font48px);
  top: -20px;
  left: -52px;
}
.qa_box.qa_strong .app_download {
  padding: 10px 30px;
  margin-left: -40px;
}

@media screen and (max-width: 767px) {
  #faq {
    padding: 40px 0 0;
  }
  .qa_box {
    padding: 25px 6% 3px 45px;
  }
  .qa_box h3 {
    margin-bottom: 20px;
  }
  .qa_box.qa_strong {
    padding: 20px 6% 30px 55px;
  }
  .qa_box.qa_strong h3 {
    font-size: var(--font22px);
  }
  .qa_box.qa_strong p {
    font-size: var(--font20px);
  }
  .qa_box.qa_strong h3::before,
  .qa_box.qa_strong p::before {
    font-size: var(--font36px);
    top: -15px;
    left: -39px;
  }
  .qa_box.qa_strong .app_download {
    margin-left: -30px;
  }
}


/* ここで皆様にお願いがございます
------------------------------------------------- */
#favor {
  padding: 40px 0 20px;
}
#favor h2 {
  font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 60px;
}
.our_goal {
  background: var(--color-primary-pale) url(../img/bkg_img05.png) no-repeat right 40px center;
  padding: 40px 0 1px 100px;
  margin-bottom: calc(1rem * var(--line-height));
}
.our_goal li {
  position: relative;
  font-size: var(--font30px);
  font-weight: var(--font-weight-medium);
  margin-bottom: 43px;
  line-height: 1.3;
  text-shadow: 0px 0px 10px rgba(243, 252, 247, 1);
}
.our_goal li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -45px;
  width: 34px;
  height: 34px;
  background: url(../img/ico_check.svg) no-repeat;
}
.function_later {
  background: var(--color-primary-pale) url(../img/bkg_img06.png) no-repeat bottom 8px right 40px;
  padding: 20px 370px 20px 50px;
  margin-bottom: calc(1rem * var(--line-height));
}
.function_later li {
  font-weight: var(--font-weight-bold);
  list-style-type: disc;
}

@media screen and (max-width: 767px) {
  #favor h2 {
    margin-bottom: 40px;
  }
  .our_goal {
    background-position: center bottom 7px;
    background-size: 150px auto;
    padding: 30px 2% 70px 40px;
  }
  .our_goal li {
    font-size: var(--font22px);
    margin-bottom: 30px;
  }
  .our_goal li::before {
    background-size: 25px auto;
    left: -30px;
  }
  .function_later {
    background-position: bottom 5px right 40px;
    background-size: 120px auto;
    padding: 20px 15px 100px 40px;
  }
}


/* Biztree応援プロジェクト開催中！
------------------------------------------------- */
#our_project {
  background-color: var(--color-primary-pale);
  padding: 40px 0 20px;
  margin-top: 50px;
}
#our_project h2 {
  font-size: clamp(var(--font26px), 2.85vw, var(--font36px));
  margin-bottom: 30px;
  text-align: center;
  font-weight: var(--font-weight-medium);
}
#our_project ol {
  background-color: var(--color-white);
  counter-reset: project;
  padding: 10px 20px;
  margin-bottom: calc(1rem * var(--line-height));
}
#our_project ol li {
  font-weight: var(--font-weight-bold);
  font-size: var(--font24px);
  line-height: 1.4;
  text-indent: -35px;
  margin-left: 35px;
}
#our_project ol li::before {
  counter-increment: project;
  content: counter(project);
  font-weight: var(--font-weight-exbold);
  font-size: var(--font30px);
  color: var(--color-primary);
  margin-right: 15px;
}

@media screen and (max-width: 767px) {
  #our_project {
    margin-top: 30px;
  }
  #our_project ol {
    padding: 10px 15px;
  }
  #our_project ol li {
    font-size: var(--font20px);
    text-indent: -27px;
    margin-left: 27px;
  }
  #our_project ol li::before {
    font-size: var(--font28px);
    margin-right: 10px;
  }
}


/* biztreeアプリの成長工程を体験
------------------------------------------------- */
#about_plan {
  padding: 40px 0 20px;
}
#about_plan h2 {
  font-size: clamp(var(--font36px), 4.8vw, var(--font60px));
  margin-bottom: 30px;
  text-align: center;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 22px;
  text-decoration-color: rgb(108 183 133 / .4);
  text-underline-offset: -8px;
  text-decoration-skip-ink: none;
}
.plan_img {
  margin-bottom: 45px;
}
#about_plan .basic_link01 {
  margin-bottom: 75px;
}
#about_plan .basic_link01 a {
  width: 600px;
}
@media screen and (max-width: 767px) {
  #about_plan h2 {
    text-decoration-thickness: 16px;
    text-underline-offset: -6px;
  }
  .plan_img {
    margin-bottom: 30px;
  }
  #about_plan .basic_link01 {
    margin-bottom: 45px;
  }
  #about_plan .basic_link01 a {
    width: auto;
  }

}


/* ご支援から特典を受け取るまでの手順について
------------------------------------------------- */
#about_process {
  background-color: var(--color-primary-pale);
  padding-bottom: 70px;
}
#about_process h2 {
  position: relative;
  font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
  color: var(--color-white);
  background-color: var(--color-primary);
  text-align: center;
  margin-bottom: 30px;
  padding: 11px 0;
}
#about_process h2::after {
  position: absolute;
  content: "";
  bottom: -25px;
  left: calc(50% - 23px);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 23px solid transparent;
  border-left: 23px solid transparent;
  border-top: 25px solid var(--color-primary);
  border-bottom: 0;
}
#about_process ol {
  margin-bottom: 30px;
}
#about_process ol li {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-bottom: 40px;
}
#about_process ol li:not(:last-child)::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background-color: var(--color-primary);
  top: 0;
  left: 37px;
}
#about_process ol li div {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  width: 75px;
  height: 75px;
  font-size: var(--font36px);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  border-radius: var(--border-radius);
  padding-top: 13px;
}
#about_process ol li div span {
  display: block;
  font-size: var(--font14px);
  font-weight: var(--font-weight-exbold);
}
#about_process ol li dl {
  background: var(--color-white) url(../img/bkg_img07.png) no-repeat left 15px center;
  flex-basis: calc(100% - 75px - 2.5%);
  padding: 12px 12px 12px 160px;
}
#about_process ol li:nth-child(2) dl {
  background-image: url(../img/bkg_img08.png);
}
#about_process ol li:nth-child(3) dl {
  background-image: url(../img/bkg_img09.png);
}
/* #about_process ol li:nth-child(4) dl {
  background-image: url(../img/bkg_img10.png);
} */
#about_process ol li:nth-child(4) dl {
  background-image: url(../img/bkg_img11.png);
}
#about_process ol li dl dt {
  color: var(--color-primary);
  font-size: var(--font24px);
  font-weight: var(--font-weight-bold);
  margin-bottom: 5px;
}
#about_process ol li dl dd {
  font-size: var(--font16px);
}
.basic_link01 a.fund {
  width: 640px;
}

@media screen and (max-width: 767px) {
  #about_process {
    padding-bottom: 40px;
  }
  #about_process h2 {
    line-height: 1.4;
  }
  #about_process ol {
    margin-bottom: 20px;
  }
  #about_process ol li {
    padding-bottom: 30px;
  }
  #about_process ol li:not(:last-child)::after {
    left: 30px;
  }

  #about_process ol li div {
    width: 60px;
    height: 60px;
    font-size: var(--font28px);
    padding-top: 10px;
  }
  #about_process ol li dl {
    flex-basis: calc(100% - 60px - 2.5%);
    padding: 85px 12px 12px;
    background-position: top 8px center;
    background-size: auto 70px;
  }
  #about_process ol li dl dt {
    font-size: var(--font20px);
    line-height: 1.4;
  }
  .basic_link01 a.fund {
    width: auto;
  }

}


/* 最後に
------------------------------------------------- */
#lastly {
  padding: 50px 0;
}
#lastly h2 {
    font-size: clamp(var(--font26px), 3.8vw, var(--font48px));
    text-align: center;
  margin-bottom: 20px;
    text-align: center;
}
#lastly .align_r {
  margin-bottom: 70px;
  font-size: var(--font24px);
}
@media screen and (max-width: 767px) {
  #lastly .align_r {
    margin-bottom: 40px;
  }
}

/* 特定商取引法
------------------------------------------------- */
#law {
  margin-bottom: 100px;
}
#law .sub_ttl {
  margin-bottom: 30px;
  font-size: var(--font24px);
}
@media screen and (max-width: 960px) {
  #law {
    margin-bottom: 60px;
  }
  #law .sub_ttl {
    margin-bottom: 20px;
  }
}

/* table
------------------------------------------------- */
table.basic_table {
	width: 100%;
}
table.basic_table tr th, table.basic_table tr td {
  border-bottom: var(--color-gray-pale) 1px solid;
	vertical-align: middle;
  padding: 20px 0;
	text-align: left;
  font-weight: var(--font-weight-regular);
}
table.basic_table tr th {
  font-weight: var(--font-weight-medium);
  font-size: var(--font18px);
  white-space: nowrap;
  padding: 20px 60px 20px 0;
}
@media screen and (max-width: 960px) {
  table.basic_table tr th, table.basic_table tr td {
    padding: 10px 3% 20px;
    border-left: none;
    display: block;
  }
  table.basic_table tr th {
    padding: 20px 3% 0;
    border-bottom: none;
  }
}