@charset "UTF-8";
/* ===================================================
  2026/2改修
  - トップ
  - commuboとは
  - 特徴・テクノロジー
  =================================================== */

.main_wrap {
  width: 100%;
}
.main_wrap section {
  width: auto;
  margin: initial;
}
.md_block,
.sm_block {
  display: none;
}
@media screen and (max-width: 768px) {
  .md_block {
    display: block;
  }
  .md_none {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .sm_block {
    display: block;
  }
  .sm_none {
    display: none;
  }
}

/* section共通 -------------------------------------------------------------- */
.sec_block {
  padding: 80px 0;
}
.sec_bg_b-gr {
  background-color: #f2f6fa;
}
.sec_bg_l-gr {
  background-color: #f7f7f7;
}
.sec_bg_sky {
  background-color: #d4e6f3;
}
.sec_inner {
	padding: 0;
	margin: 0 auto;
  width: 100%;
	max-width: 900px;
}
.sec_ttl_wrap {
  text-align: center;
}
.sec_ttl {
  position: relative;
  margin: 0 0 40px;
  padding: 0 0 48px;
  color: #336bb3;
  font-size: 1.8rem;
  text-align: center;
}
.sec_ttl::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 8px;
  background: url(../img/top/sec_ttl.svg) center bottom no-repeat;
  transform: translateX(-50%);
  content: "";
}
.sec_ttl_label {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 16px;
  background-color: #fff;
  border: 2px solid #6dbb00;
  border-radius: 4px;
  color: #6dbb00;
  font-size: 1rem;
  line-height: 1;
}
.sec_leadem {
  margin: 40px 0;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}
.sec_leadtxt {
  margin: 40px 0;
  font-size: .9rem;
  text-align: center;
}
.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 360px;
  height: 72px;
  margin: 40px auto 0;
  padding: 10px 40px;
  background: #fff;
  border: 1px solid #336bb3;
  border-radius: 40px;
  color: #336BB3;
  font-size: .8rem;
  font-weight: 700;
  transition: 0.3s;
}
.link-btn .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 14px;
  width: 42px;
  height: 42px;
  background: #336BB3;
  border-radius: 50%;
  color: #fff;
  transform: translateY(-50%);
  transition: 0.3s;
}
.link-btn .circle i {
  font-size: .5rem;
}
@media screen and (max-width: 768px) {
  .sec_inner{
    width: 92%
  }
  .sec_ttl {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 480px) {
  .sec_leadtxt {
    text-align: left;
  }
  .sec_ttl {
    font-size: 8.5vw;
  }
  .link-btn {
    width: 87%;
  }
}


/* CTA -------------------------------------------------------------- */
.sec_cta {
  padding: 64px 0;
  background-color: #002252;
}
.sec_cta_ttl {
  margin: 0 0 40px;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
}
.sec_cta_content {
  display: flex;
  justify-content: center;
  gap: 48px;
}
.sec_cta_item {
  flex: 1 1 0;
  text-align: center;
}
.sec_cta_item .cta_txt {
  color: #fff;
  font-size: .8rem;
}
.sec_cta_item .cta_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 80px;
  margin: 24px auto 0;
  padding: 16px 24px;
  border-radius: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  transition: .3s ease;
}
.sec_cta_item .cta_btn.btn-primary {
  background-color: #fff;
  color: #336bb3;
  box-shadow: 0 4px 0 #BFBFBF;
}
.sec_cta_item .cta_btn.btn-primary:hover {
  background-color: #d4e6f3;
  transform: translateY(4px);
  box-shadow: 0 0 0 #BFBFBF;
}
.sec_cta_item .cta_btn.btn-secondary {
  background: #6dbb00;
  box-shadow: 0px 4px 0px #4A8000;
}
.sec_cta_item .cta_btn.btn-secondary:hover {
  background-color: #d6e5c2;
  color: #4A8000;
  transform: translateY(4px);
  box-shadow: 0 0 0 #BFBFBF;
}
@media screen and (max-width: 768px) {
  .sec_cta_content {
    gap: 40px;
  }
  .sec_cta.--demo .sec_cta_item .cta_txt {
    font-size: .7rem;
  }
}
@media screen and (max-width: 480px) {
  .sec_cta_ttl {
    font-size: 8vw;
  }
  .sec_cta_content {
    flex-direction: column;
  }
  .sec_cta_item .cta_btn {
    width: 87%;
    height: 64px;
  }
  .sec_cta.--demo .sec_cta_item .cta_btn {
    width: 90%;
    font-size: 18px;
  }
}
@media screen and (max-width: 320px) {
  .sec_cta.--demo .sec_cta_item .cta_txt {
    font-size: .6rem;
  }
  .sec_cta.--demo .sec_cta_item .cta_btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------
   トップ
----------------------------------------------------------------- */

/* MV -------------------------------------------------------------- */
.mainimg {
  background: url(../img/top/bg_mainimg.png) center top no-repeat;
  background-size: cover;
}
.mainimg_inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 0;
}
.mainimg_ttl {
  margin: 0 0 24px;
  font-size: 32px;
  line-height: 1.5;
}
.mainimg_ttl span {
  color: #336bb3;
  font-size: 44px;
}
.mainimg_txt {
  margin: 0 0 24px;
  color: #555;
  font-size: 16px;
}
.mainimg_cta {
  display: flex;
  gap: 40px;
  margin: 0 0 48px;
}
.mainimg_cta_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 64px;
  padding: 16px 24px;
  border-radius: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  transition: .3s ease;
}
.mainimg_cta_btn.btn-primary {
  background: #336bb3;
  border: 1px solid #336bb3;
}
.mainimg_cta_btn.btn-primary:hover {
  background-color: #fff;
  color: #336bb3;
}
.mainimg_cta_btn.btn-secondary {
  background: #6dbb00;
  border: 1px solid #6dbb00;
}
.mainimg_cta_btn.btn-secondary:hover {
  background-color: #fff;
  color: #6dbb00;
}
.mainimg_rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.rating_ttl {
  width: 377px;
}
.rating_award {
  width: 428px;
}

@media screen and (max-width: 768px) {
  .mainimg_inner {
    padding-inline: 4%;
  }
}
@media screen and (max-width: 480px) {
  .mainimg {
    background-position: left -80px top;
  }
  .mainimg_ttl {
    font-size: 8.5vw;
  }
  .mainimg_ttl span {
    font-size: 11.7vw;
  }
  .mainimg_cta {
    gap: 16px;
  }
  .mainimg_cta_btn {
    height: 56px;
    padding-inline: 16px;
    font-size: 16px;
  }
  .mainimg_rating {
    flex-direction: column;
  }
  .rating_ttl,
  .rating_award {
    width: 100%;
  }
}


/* 導入実績 -------------------------------------------------------------- */
#intro_record h2 {
  text-align: center;
}
.record_ratio {
	margin: 30px auto
}
.record_ratio ul {
	display: flex;
	align-items: center;
	justify-content: space-between
}
.record_ratio ul li img {
	height: 87px;
	width: auto
}
.record_list {
	margin-top: 30px;
	position: relative
}
.record_list ul {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((180px + 20px)*27); 		/*実際のロゴの×*3＝27*/
	position: relative
}
.record_list ul li {
	width: 180px;
	margin: 0 10px
}
.record_list ul {
	animation: result_list linear 12.0s infinite;
	animation-delay: 0s
}
@media screen and (max-width: 480px) {
  .record_ratio {
	margin: 30px auto
  }
  .record_ratio ul {
	  flex-direction: column;
    gap: 20px;
  }
  .record_ratio ul li img {
    display: block;
    height: 67px;
    width: auto;
  }
  .record_list {
    position: relative;
    margin-top: 30px;
  }
  .record_list ul {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .record_list ul li {
    width: calc(50% - 10px);
    margin: 0 0;
  }
  .record_list ul li > img {
	  width: 80%;
  }
}

/* New Version4 -------------------------------------------------------------- */
.new_ver4_list {
  display: flex;
  gap: 24px;
  margin: 40px 0;
}
.new_ver4_list_item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.new_ver4_list_item h4 {
  font-size: 1rem;
}
.new_ver4_list_item p {
  font-size: .8rem;
}

@media screen and (max-width: 768px) {
  .sec_ttl_label {
    font-size: .9rem;
  }
  .new_ver4_list_item img {
    width: 72px;
  }
}
@media screen and (max-width: 480px) {
  .new_ver4_list {
    gap: 16px;
  }
  .new_ver4_list_item {
    gap: 8px;
  }
  .new_ver4_list_item img {
    width: 60px;
  }
  .new_ver4_list_item h4 {
    font-size: 4vw;
  }
  .new_ver4_list_item p {
    font-size: 3.5vw
  }
}


/* お悩み -------------------------------------------------------------- */
.problem_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}
.problem_item {
  padding: 24px;
  background-color: #fff;
  border: 1px solid #b2b2b2;
  border-radius: 16px;
}
.problem_item_ttl {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}
.problem_item_desc {
  font-size: .7rem;
}
.problem_img {
  margin: 40px 0 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .problem_grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media screen and (max-width: 480px) {
  .problem_grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}


/* 理由 -------------------------------------------------------------- */
.reasons_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 0;
}
.reasons_list_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
}
.reasons_list .item_ttl {
  color: #336bb3;
  font-size: 1rem;
}
.reasons_list .item_desc {
  font-size: .8rem;
  text-align: left;
}
.reasons_list .item_img {
  margin-top: auto;
}
@media screen and (max-width: 480px) {
  .reasons_list {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}


/* デモ体験 -------------------------------------------------------------- */
.trial-demo_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 40px 0 !important;
  border: 2px solid #336bb3;
  border-radius: 16px;
  padding: 40px;
}
.trial-demo_block_ttl {
  font-size: 1.2rem;
  color: #336bb3;
  text-align: center;
}
.trial-demo_flow {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.trial-demo_flow .flow_item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #b2b2b2;
  font-size: 16px;
}
.trial-demo_flow .flow_item_box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background-color: #d4e6f3;
  border-radius: 4px;
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
.trial-demo_block_txt {
  font-size: .8rem;
}
.trial-demo_tel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 40px;
  background-color: #f2f6fa;
  border-radius: 8px;
  pointer-events: none;
}
.trial-demo_tel .tel_ttl {
  font-size: .7rem;
}
.trial-demo_tel .tel_icon {
  display: none;
}
.trial-demo_tel .tel_num {
  color: #336bb3;
  font-size: 1.6rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .trial-demo_block {
    width: 100% !important;
    padding: 24px;
  }
  .trial-demo_flow {
    gap: 12px;
  }
  .trial-demo_flow .flow_item {
    gap: 12px;
  }
  .trial-demo_flow .flow_item_box {
    padding: 16px 16px;
  }
}
@media screen and (max-width: 480px) {
  .trial-demo_flow {
    flex-direction: column;
  }
  .trial-demo_flow .flow_item {
    flex-direction: column;
  }
  .trial-demo_flow .flow_item_box {
    padding-inline: 24px;
  }
  .trial-demo_flow .flow_item .flow_item_box + i {
    transform: rotate(90deg);
  }
  .trial-demo_tel {
    gap: 8px;
    height: 48px;
    background-color: #336bb3;
    border-radius: 40px;
    box-shadow: 0px 4px 0px #244C80;
  }
  .trial-demo_tel .tel_ttl {
    display: none;
  }
  .trial-demo_tel .tel_icon {
    color: #fff;
    display: block;
  }
  .trial-demo_tel .tel_num {
    color: #fff;
    font-size: .9rem;
    font-weight: bold;
  }
}


/* 導入効果 -------------------------------------------------------------- */
.effects_content {
  display: flex;
}
.effects_item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}
.effects_item:first-child {
  border-right: 1px solid #e8e8e8;
}
.effects_item_ttl {
  margin: 0 0 24px;
  font-size: 1.2rem;
  font-weight: bold;
}
.effects_item_ttl span {
  display: block;
  color: #336bb3;
  font-size: .8rem;
  font-weight: normal;
}
.effects_item_box {
  padding: 16px 24px;
  background-color: #d4e6f3;
  border-radius: 8px;
}
.effects_item_box .box_value {
  font-size: 1.2rem;
  font-weight: bold;
}
.effects_item_box .box_value em {
  color: #336bb3;
  font-style: normal;
}
.effects_item_box .box_value em span {
  display: inline-block;
  padding: 0 4px;
  font-size: 2.4rem;
}
.effects_item_box .box_desc {
  font-size: .7rem;
}
.effects_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
}
.effects_list_item {
  padding: .5em 1em;
  border: 1px solid #336BB3;
  border-radius: 2px;
  color: #336bb3;
  font-size: .7rem;
  line-height: 1;
}
@media screen and (max-width: 480px) {
  .effects_content {
    flex-direction: column;
  }
  .effects_item {
    padding-inline: 0;
  }
  .effects_item:first-child {
    padding-bottom: 24px;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }
  .effects_item:last-child {
    padding-top: 24px;
  }
}


/* 違い -------------------------------------------------------------- */
.difference_table {
  margin: 0 auto;
  border-spacing: 4px 0;
}
.difference_table th {
  width: 300px;
  padding: 1em;
  border-radius: 8px 8px 0 0;
  color: #fff;
  font-size: .9rem;
  text-align: center;
}
.difference_table th:first-child {
  width: 160px;
}
.difference_table th:nth-child(2) {
  background-color: #336bb3;
}
.difference_table th:nth-child(2) span {
  display: block;
  font-size: 14px;
  line-height: 1;
}
.difference_table th:last-child {
  background-color: #828282;
}
.difference_table td:first-child {
  width: 160px;
  background-color: #67708B;
  border-bottom: 2px dotted #fff;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.difference_table tr:nth-child(2) td:first-child {
  border-radius: 8px 0 0 0;
}
.difference_table tr:last-child td:first-child {
  border: none;
  border-radius: 0 0 0 8px;
}
.difference_table td:not(:first-child) {
  padding-inline: 16px;
  background-color: #fff;
}

.difference_table td:nth-child(2) {
  border-right: 4px solid #336bb3;
  border-left: 4px solid #336bb3;
}
.difference_table tr:last-child td:nth-child(2) {
  border-bottom: 4px solid #336bb3;
}
.difference_table td:last-child {
  border-right: 4px solid #828282;
  border-left: 4px solid #828282;
}
.difference_table tr:last-child td:last-child {
  border-bottom: 4px solid #828282;
}
.difference_table td .td_inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 1em;
  border-bottom: 2px dotted #b2b2b2;
  font-size: 15px;
}
.difference_table tr:last-child td .td_inner {
  border: none;
}
@media screen and (max-width: 768px) {
  .difference_table td:first-child {
    font-size: 14px;
  }
  .difference_table td:not(:first-child) {
    padding-inline: 12px;
  }
}
@media screen and (max-width: 480px) {
  .difference_table_wrap {
    overflow-x: scroll;
  }
  .difference_table {
    width: 700px;
  }
}


/* 伴走支援 -------------------------------------------------------------- */
.assistance_block {
  margin: 40px 0 0 !important;
  padding: 40px;
  background-color: #fff;
  border-radius: 16px;
}
.assistance_block_head {
  margin: 0 0 24px;
  font-size: 1rem;
  text-align: center;
}
.assistance_block_head span {
  background: linear-gradient(180deg, #FFFFFF 50%, #FAE282 50%, #FAE282 100%);
}
.assistance_block_head span em {
  display: inline-block;
  padding: 0 4px;
  color: #336bb3;
  font-size: 1.6rem;
  font-style: normal;
}
.assistance_block_ttl {
  margin: 0 0 24px;
  color: #336bb3;
  font-size: 1.2rem;
  text-align: center;
}
.assistance_summary_content {
  display: flex;
  gap: 24px;
  margin: 24px 0 0;
  padding: 24px 40px;
  border-top: 1px solid #b2b2b2;
}
.assistance_summary_content:last-child {
  padding-bottom: 0;
}
.assistance_summary_content .content_ttl {
  width: 240px;
  color: #336bb3;
  font-size: 1rem;
}
.assistance_summary_content .content_list {

}
.assistance_summary_content .content_list_item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .8rem;
}
.assistance_summary_content .content_list_item i {
  color: #6dbb00;
}
.assistance_summary_content .content_list_item a {
  color: #336bb3;
  text-decoration: underline;
  transition: .3s ease;
}
.assistance_summary_content .content_list_item a:hover {
  background-color: #f2f6fa;
  text-decoration: none;
}

.assistance_support_list {
  display: flex;
  gap: 24px;
}
.assistance_support_list .list_item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  background-color: #fff;
  border: 2px solid #336bb3;
  border-radius: 8px;
}
.assistance_support_list .list_item .item_ttl {
  color: #336bb3;
  font-size: 1rem;
}
.assistance_support_list .list_item .item_img {
}
.assistance_support_list .list_item .item_desc {
  color: #336bb3;
  font-size: .7rem;
  text-align: center;
}

.assistance_step_content {

}
.assistance_step_content .step_item {
  display: flex;
  align-items: center;
  gap: 24px;
}
.assistance_step_content .step_item .item_img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 80px;
  background: #336bb3;
  border-radius: 50%;
}
.assistance_step_content .step_item .item_img::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;
  width: 4px;
  height: 120px;
  background: #336bb3;
  margin: auto;
  content: "";
}
.assistance_step_content .step_item:last-child .item_img::before {
  content: none;
}
.assistance_step_content .step_item .item_ttl {
  width: 220px;
  font-size: .9rem;
}
.assistance_step_content .step_item .item_desc {
  flex: 1 1 0;
  font-size: .8rem;
}
.assistance_step_content .step_term {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  margin: 16px auto;
  padding-left: 64px;
  font-size: .7rem;
}
.assistance_step_content .step_term span {
  color: #336BB3;
}
.assistance_step_content .step_term::after {
  flex: 1 1 0;
  width: 100%;
  height: 0;
  border-bottom: 2px dotted #336bb3;
  content: "";
}
@media screen and (max-width: 768px) {
  .assistance_summary_content {
    padding-inline: 0;
  }
  .assistance_summary_content .content_ttl {
    width: 200px;
  }
}
@media screen and (max-width: 480px) {
  .assistance_block {
    padding: 24px 16px;
  }
  .assistance_summary_content {
    flex-direction: column;
  }
  .assistance_block_head {
    font-size: .9rem;
  }
  .assistance_block_head span em {
    font-size: 1.2rem;
  }

  .assistance_support_list {
    flex-wrap: wrap;
    gap: 16px;
  }
  .assistance_support_list .list_item {
    flex: auto;
    width: calc(50% - 8px);
    padding: 16px 12px;
  }
  .assistance_support_list .list_item .item_ttl {
    font-size: 4.2vw;
  }
  .assistance_support_list .list_item .item_img {
    width: 60px;
  }
  .assistance_support_list .list_item .item_desc {
    font-size: 3.5vw;
  }

  .assistance_step_content .step_item {
    gap: 12px;
  }
  .assistance_step_content .step_item .item_img {
    width: 48px;
    height: 48px;
  }
  .assistance_step_content .step_item .item_img::before {
    
  }
  .assistance_step_content .step_item .item_img img {
    width: 28px;
  }
  .assistance_step_content .step_item .item_ttl {
    width: 100px;
    font-size: 3.7vw;
  }
  .assistance_step_content .step_item .item_desc {
    font-size: 3.5vw;
  }
  .assistance_step_content .step_term {
    margin-block: 12px;
    padding-left: 48px;
    font-size: 3.5vw;
  }
}


/* 業界での導入実績 -------------------------------------------------------------- */
.industries_list_wrap {
  margin: 40px 0 0;
}
.industries_list {
  display: flex;
  margin: 24px 0 0;
}
.industries_list:not(:last-child) {
  padding: 0 0 24px;
  border-bottom: 1px solid #e8e8e8;
}
.industries_item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-left: 1px solid #e8e8e8;
}
.industries_item:first-child {
  border-left: none;
}
.industries_item .item_ttl {
  color: #336bb3;
  font-size: .9rem;
  font-weight: bold;
}
.industries_item .item_category {
  padding: 8px 16px;
  border: 1px solid #336BB3;
  color: #336bb3;
  font-size: .7rem;
  line-height: 1;
}
.industries_item .item_desc {
  font-size: .7rem;
}
.industries_item .item_foot {
  width: 100%;
  margin-top: auto;
  padding: 8px 16px;
  background-color: #f2f6fa;
  border-radius: 8px;
  font-size: .7rem;
}
.industries_item .item_foot dt {
  color: #336bb3;
  font-weight: bold;
}
.industries_item .item_foot dd {
}

@media screen and (max-width: 480px) {
  .industries_list {
    flex-direction: column;
  }
  .industries_list:first-child {
    border-bottom: none;
  }
  .industries_item {
    padding-block: 24px;
    border-left: none;
    border-bottom: 1px solid #e8e8e8;
  }
  .industries_item:first-child {
    padding-block-start: 0;
  }
  .industries_list:last-child .industries_item:last-child {
    padding-block-end: 0;
    border-bottom: none;
  } 

}


/* よくある質問 -------------------------------------------------------------- */
.faq_list {
}
.faq_list_item {
  margin: 0 0 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
}
.faq_list_item:last-child {
  margin: 0;
}
.faq_list_item .item_que {
  position: relative;
  margin: 0 0 16px;
  padding: 0 0 0 28px;
  font-size: .9rem;
  font-weight: bold;
}
.faq_list_item .item_ans {
  position: relative;
  padding: 0 0 0 28px;
  color: #555;
  font-size: .8rem;
}
.faq_list_item .item_que .fa-q,
.faq_list_item .item_ans .fa-a  {
  position: absolute;
  left: 0;
  font-size: 1rem;
}
.faq_list_item .item_que .fa-q {
  top: 7px;
  color: #336bb3;
}
.faq_list_item .item_ans .fa-a {
  top: 6px;
  color: #6dbb00;
}
.faq_list_item .item_ans .ans_note {
  display: flex;
  border-bottom: 1px solid #b2b2b2;
  }
.faq_list_item .item_ans .ans_note:first-of-type {
  margin: 12px 0 0;
  border-top: 1px solid #b2b2b2;
}
.faq_list_item .item_ans .ans_note_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 144px;
  padding: 6px 8px;
  background-color: #f7f7f7;
  border-radius: 2px;
  color: #336BB3;
  font-size: .7rem;
  text-align: center;
}
.faq_list_item .item_ans .ans_note_desc {
  padding: 6px 16px;
  font-size: .7rem;
}
.faq_list_item .item_ans .ans_note_desc ul li {
  margin-left: 1em;
  list-style: square;
}
.faq_list_item .item_ans .ans_script {
  color: #336BB3;
  margin: 12px 0 0;
  font-weight: bold;
}

@media screen and (max-width: 798px) {
  .faq_list_item {
    padding: 20px;
  }
}
@media screen and (max-width: 480px) {
  .faq_list_item .item_ans .ans_note {
    flex-direction: column;
  }
  .faq_list_item .item_ans .ans_note_ttl {
    width: 100%;
  }
}


/* --------------------------------------------------------------
  commuboとは
---------------------------------------------------------------- */

/* MV -------------------------------------------------------------- */
.about_mv {
  background: #d4e6f3 url(../img/about/bg_mv_audio-wave.png) center top 72px repeat-x;
}
.about_mv_inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 0;
}
.about_mv_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about_mv_copy .copy_sub {
  padding: 8px 40px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .05em;
}
.about_mv_copy .copy_main {
  margin: 20px 0 0;
  color: #336bb3;
  font-size: 42px;
  letter-spacing: .08em;
}
.about_mv_copy .copy_main span {
  display: block;
  font-size: 32px;
}
.about_mv_content {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin: 40px 0 0;
}
.about_mv_cta {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 40px 0 0;
}
.about_mv_cta_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 64px;
  padding: 16px 24px;
  border-radius: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  transition: .3s ease;
}
.about_mv_cta_btn.btn-primary {
  background: #336bb3;
  border: 1px solid #336bb3;
}
.about_mv_cta_btn.btn-primary:hover {
  background-color: #fff;
  color: #336bb3;
}
.about_mv_cta_btn.btn-secondary {
  background: #6dbb00;
  border: 1px solid #6dbb00;
}
.about_mv_cta_btn.btn-secondary:hover {
  background-color: #fff;
  color: #6dbb00;
}

@media screen and (max-width: 768px) {
  .about_mv_inner {
    padding-inline: 4%;
  }
  .about_mv_content {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 480px) {
  .about_mv {
    background-position: center top 104px;
  }
  .about_mv_copy .copy_sub {
    width: 90%;
    font-size: 4.2vw;
  }
  .about_mv_copy .copy_main {
    font-size: 10.6vw;
    letter-spacing: .05em;
  }
  .about_mv_copy .copy_main span {
    font-size: 5.5vw;
    line-height: 2;
  }
  .about_mv_pic {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .about_mv_cta {
    gap: 16px;
  }
  .about_mv_cta_btn {
    width: 100%;
    height: 56px;
    padding-inline: 16px;
    font-size: 16px;
  }
  .about_mv_content .content_img {
    width: 75%;
  }
}


/* commuboとは -------------------------------------------------------------- */
.outline_movie {
  margin: 40px 0 0;
  text-align: center;
}
.outline_desc {
  margin: 40px 0 0;
  padding: 40px;
  border-radius: 16px;
  border: 4px solid #d4e6f3;
}
.outline_desc .desc_txt {
  font-size: .8rem;
}
.outline_desc .desc_txt:not(:first-child) {
  margin: 16px 0 0;
}
.outline_desc .desc_txt em {
  color: #336bb3;
  font-weight: bold;
  font-style: normal;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
  .outline_desc {
    padding: 24px;
  }
}


/* 進化 -------------------------------------------------------------- */
.improvement_block {
  margin: 40px 0 0 !important;
  padding: 40px;
  background-color: #fff;
  border-radius: 16px;
}
.improvement_content {
  padding: 24px 0;
  border-top: 1px solid #b2b2b2;
}
.improvement_content:first-child {
  padding: 0 0 24px;
  border-top: none;
}
.improvement_content:last-child {
  padding: 24px 0 0;
}
.improvement_content .content_img {
}
.improvement_content .content_group {
}
.improvement_content .content_ttl {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  color: #336bb3;
  font-size: 1.2rem;
}
.improvement_content .content_desc {
  margin: 16px 0 0;
  padding: 0 0 0 64px;
  font-size: .8rem;
}
.improvement_content .content_desc em {
  font-weight: bold;
  font-style: normal;
}
@media screen and (max-width: 480px) {
  .improvement_block {
    padding: 24px;
  }
  .improvement_content .content_ttl {
    font-size: 5.86vw;
  }
  .improvement_content .content_desc {
    padding: 0;
  }
}


/* 課題 -------------------------------------------------------------- */
.issue_list_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0 0;
}
.issue_list {
  padding-left: 24px;
}
.issue_list_item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  font-size: 1rem;
  line-height: 1.5;
}
.issue_list_item:first-child {
  margin: 0;
}
.issue_list_item i {
  color: #fdd23c;
  font-size: 24px;
}
.issue_list_item em {
  font-weight: bold;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .issue_list {
    padding-left: 16px;
  }
}
@media screen and (max-width: 480px) {
  .issue_list {
    padding-left: 0;
  }
  .issue_list_item {
    gap: 8px;
    font-size: .8rem;
  }
  .issue_list_item i {
    font-size: 20px;
  }
}


/* 特長 -------------------------------------------------------------- */
.feature_ttl_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.feature_ttl_label {
  display: inline-block;
  padding: 8px 16px;
  background-color: #fff;
  border: 2px solid #6dbb00;
  border-radius: 4px;
  color: #6dbb00;
  font-size: 1rem;
  line-height: 1;
}
.feature_block {
  margin: 40px 0 0 !important;
  padding: 40px;
  background-color: #fff;
  border-radius: 16px;
}
.feature_ttl {
  font-size: 1.2rem;
  text-align: center;
}
.feature_lead {
  color: #555;
  font-size: .9rem;
  text-align: center;
}
.feature_summary {
  margin: 40px 0 0;
}
.feature_summary_content {
  display: flex;
  gap: 24px;
  margin: 0 !important;
  padding: 24px 0;
  border-top: 1px solid #b2b2b2;
}
.feature_summary_content:last-child {
  padding-bottom: 0;
}
.feature_summary_content .content_ttl {
  width: 200px;
  color: #336bb3;
  font-size: 1rem;
}
.feature_summary_content .content_list {
  flex: 1 1 0;
}
.feature_summary_content .content_list_item {
  margin: 0 0 8px;
}
.feature_summary_content .content_list_item .item_ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: bold;
}
.feature_summary_content .content_list_item .item_desc {
  padding-left: 24px;
  font-size: .7rem;
}
.feature_summary_content .content_list_item i {
  color: #6dbb00;
}
.feature_record_list {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 0;
}

@media screen and (max-width: 768px) {
  .feature_ttl_label  {
    font-size: .9rem;
  }
  .feature_summary_content {
    padding-inline: 0;
  }
  .feature_summary_content .content_ttl {
    width: 200px;
  }
}
@media screen and (max-width: 480px) {
  .feature_block {
    padding: 24px 16px;
  }
  .feature_ttl {
    font-size: 5.86vw;
  }
  .feature_lead {
    width: 100%;
    text-align: left;
  }
  .feature_summary_content {
    flex-direction: column;
  }
  .feature_record_list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}


/* 違い -------------------------------------------------------------- */
/* topと同じ */


/* 機能 -------------------------------------------------------------- */
.functions_list_wrap {
  margin: 40px 0 0;
}
.functions_list {
  display: flex;
  margin: 24px 0 0;
}
.functions_list:not(:last-child) {
  padding: 0 0 24px;
  border-bottom: 1px solid #e8e8e8;
}
.functions_item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-left: 1px solid #e8e8e8;
}
.functions_item:first-child {
  border-left: none;
}
.functions_item .item_ttl {
  color: #336bb3;
  font-size: .9rem;
  font-weight: bold;
  text-align: center;
}
.functions_item .item_desc {
  font-size: .7rem;
}
.functions_item .item_foot {
  width: 100%;
  margin-top: auto;
  padding: 8px 16px;
  background-color: #f2f6fa;
  border-radius: 8px;
  font-size: .7rem;
}
.functions_item .item_foot dt {
  color: #336bb3;
  font-weight: bold;
}
.functions_item .item_foot dd {
}

@media screen and (max-width: 480px) {
  .functions_list {
    flex-direction: column;
  }
  .functions_list:not(:last-child) {
    padding: 0;
    border-bottom: none;
  }
  .functions_item {
    padding-block: 24px;
    border-left: none;
    border-bottom: 1px solid #e8e8e8;
  }
  .functions_item:first-child {
    padding-block-start: 0;
  }
  .functions_list:last-child .functions_item:last-child {
    padding-block-end: 0;
    border-bottom: none;
  } 
}


/* AI利用 -------------------------------------------------------------- */
.generative-ai_img {
  width: 240px;
  margin: 40px auto;
  text-align: center;
}
.generative-ai_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}
.generative-ai_item {
  padding: 24px 20px;
  background-color: #fff;
  border-radius: 16px;
}
.generative-ai_item .item_ttl {
  margin: 0 0 16px;
  color: #336bb3;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.generative-ai_item .item_desc {
  margin: 16px 0;
  font-size: .7rem;
}
.generative-ai_item .item_dialogue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
}
.generative-ai_item .item_dialogue .bubble-staff {
  align-self: flex-start;
  padding: 8px;
  max-width: 90%;
  background-color: #ebf7ff;
  border: 1px solid #cadae6;
  border-radius: 12px 12px 12px 0;
  color: #333;
  font-size: 12px;
}
.generative-ai_item .item_dialogue .bubble-user {
  align-self: flex-end;
  padding: 8px 12px;
  background-color: #ebf5dc;
  border: 1px solid #d6e3c3;
  border-radius: 12px 12px 0 12px;
  color: #333;
  font-size: 12px;
}
.generative-ai_item .item_complement {
  margin: 16px 0 0;
  color: #336bb3;
  font-size: .7rem;
}

@media screen and (max-width: 768px) {
  .generative-ai_grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
  }
}
@media screen and (max-width: 480px) {
  .generative-ai_grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}


/* 最適な型 -------------------------------------------------------------- */
.proper-usage_content {
  display: flex;
}
.proper-usage_block {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  text-align: center;
}
.proper-usage_block:first-child {
  border-right: 1px solid #e8e8e8;
}
.proper-usage_block .block_ttl {
  color: #336bb3;
  font-size: 1.2rem;
  font-weight: bold;
}
.proper-usage_block .block_lead {
  color: #555;
  font-size: .8rem;
}
.proper-usage_block .block_list {
}
.proper-usage_block .block_list_item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.5;
}
.proper-usage_block .block_list_item:not(:first-child) {
  margin: 12px 0 0;
}
.proper-usage_block .block_list_item i {
  color: #6dbb00;
}
@media screen and (max-width: 480px) {
  .proper-usage_content {
    flex-direction: column;
  }
  .proper-usage_block {
    padding-inline: 0;
  }
  .proper-usage_block:first-child {
    padding-bottom: 24px;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }
  .proper-usage_block:last-child {
    padding-top: 24px;
  }
}


/* 特徴・テクノロジー タブ -------------------------------------------------------------- */
.technology_tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e8e8e8;
}
.technology_tabs_item {
}
.technology_tabs_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 8px 8px;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.technology_tabs_btn::before {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0px;
  height: 3px;
  background-color: #336bb3;
  transform: translateX(-50%);
  content: "";
  transition: 0.3s;
}
.technology_tabs_btn:hover {
  font-weight: bold;
}
.technology_tabs_btn:hover::before {
  width: 100%;
}
.technology_tabs_btn.active {
  color: #336bb3;
  font-weight: bold;
}
.technology_tabs_btn.active::before {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background-color: #336BB3;
  content: "";
}
.technology_tabs_btn.active::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 4px;
  border-top: 4px solid #336bb3;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}
.technology_content {
  margin: 40px 0 0;
}
.tab_content {
  display: none;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab_content.active {
  display: block;
}
.technology_box_head {
	margin-bottom: 20px;
}
.technology_box_head dl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% + 60px);
	margin-left: -30px
}
.technology_box_head dl dt {
	width: 320px
}
.technology_box_head dl dd {
  position: relative;
	width: calc(100% - 320px);
	margin-left: -60px;
	padding: 40px;
	background: rgba(255, 255, 255, .8);
	border-radius: 16px;
}
.technology_box_head dl dd strong.num {
	position: absolute;
	left: 40px;
	top: -.5em;
	color: #336bb3;
	font-size: 2.6rem;
	line-height: 1em;
}
.technology_box_head dl dd h3 {
	font-size: 1.2rem;
	margin-bottom: .5em
}
.technology_box_head dl dd p {
	font-size: .8rem;
}
.technology_box.even dl {
	flex-direction: row-reverse;
	margin: 0
}
.technology_box.even dl dd {
	margin-right: -60px
}
.technology_box_bottom {
	border: 6px solid #336BB3;
	background: #336BB3;
	border-radius: 8px
}

.technology_box_cont {
	padding: 40px 30px;
	background: #fff;
	border-radius: 16px;
}
.technology_box_cont h4 {
	font-size: 1.2rem;
	margin-bottom: 24px
}
.technology_box_cont h4:not(:first-child) {
	margin-top: 60px
}
.technology_box_cont .api-wrap img {
	display: block;
	width: 50%;
	margin: 60px auto 0
}
.technology_box_cont p {
	font-size: .8rem;
}
.technology_box_cont figure {
	margin: 40px auto
}
.technology_voice-list {
	display: flex;
	flex-wrap: wrap;
	margin: 40px 20px;
	justify-content: center
}
.technology_voice-list > li {
	width: calc(100% / 4 - 20px);
	margin: 0 10px 20px;
	text-align: center;
}
.technology_voice-list > li audio {
	width: 100%;
}
.technology_voice-list > li > img {
  width: 108px;
}
.technology_voice-list > li > p {
	font-size: 14px;
	margin: 10px 0;
}

@media (max-width: 768px) {
  .technology_tabs_btn {
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .technology_tabs_wrap {
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge (新) */
  }
  .technology_tabs_wrap::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge (旧) */
  }
  .technology_tabs {
    gap: 4px;
    width: max-content;
  }
  .technology_box_head {
    margin: 0 0 40px;
  }
  .technology_box_head dl {
    flex-direction: column;
  	width: 100%;
	  margin-left: 0;
  }
  .technology_box.even .technology_box_head dl {
    flex-direction: column;
    margin: 0;
  }
  .technology_box_head dl dt {
  	width: calc(100% + 30px);
  }
  .technology_box_head dl dd {
    width: 100%;
    margin: -24px 0 0 0;
    padding: 40px 16px 20px;
    backdrop-filter: blur(4px);
    text-align: center;
  }
  .technology_box.even dl dd {
    margin-right: 0;
  }
  .technology_box_head dl dd strong.num {
    left: 50%;
    transform: translateX(-50%);
  }
  .technology_box_head dl dd h3 {
    text-align: center;
  }
  .technology_box_head dl dd p {
    text-align: left;
  }
  .technology_box_cont {
    padding: 20px 16px;
  }
  .technology_box_cont h4 {
  	font-size: 1rem;
    margin-bottom: 16px;
  }
  .technology_box_cont p {
    font-size: .7rem;
  }
  .technology_box_cont figure {
    margin: 24px 0;
  }
  .technology_voice-list {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    margin: 40px 0;
  }
  .technology_voice-list > li {
    width: 100%;
    margin: 0;
  }
  .technology_voice-list > li > p {
    font-size: 14px;
    margin: 10px 0
  }
}