@charset "UTF-8";


/* ---------------------------------------------------------------------
	共通
--------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
	フォーカスデザインのサービス内容
--------------------------------------------------------------------- */
#intro{
  padding-top: 145px;
  padding-bottom: 0;
  background-image: url("../images/features/features_bg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  /* background-size: 1600px 1236px; */
  background-position: top center;
  overflow: hidden;
}
#intro .c-head__lead{
  font-size: 58px;
  margin-top: 73px;
  line-height: 1.484827586206897;
  letter-spacing: 0.06em;
}

/* Q&A
--------------------------------------------- */
#intro #QA{
  padding-bottom: 132px;
}
#intro #QA::after{
  content: "";
  display: block;
  width: 1372px;
  height: 403.92px;
  background-image: url("../images/features/bg_persons.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  position: absolute;
  bottom: 0;
  left: calc(50% + 24px);
  transform: translateX(-50%);
  z-index: -1;
}
#intro #QA .qa_lead{
  font-size: 18px;
  line-height: 1.833333333333333;
  font-weight: normal;
  letter-spacing: 0.04em;
}
#intro #QA .qa_lead:first-child{
  margin-top: 61px;
}
#intro #QA .qa_lead:last-child{
  margin-top: 43px;
}
/* QAリスト */
#intro #QA .qa_list{
  max-width: 691.205px;
  margin: 36px auto 0;
}
#intro #QA .qa_list .A + .Q{
  margin-top: 19px;
}
/* 吹き出し */
.tooltip {
  position: relative;
  display: inline-block;
  margin-bottom: 13.5751px;
  border-radius: 45px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: #ffffff;
}
.tooltip::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-style: solid;
}
.Q .tooltip{
  background-color: #808080;
  padding: 14px 29px 15px;
}
.Q .tooltip::after {
  left: 6.4%;
  border-width: 13.6px 14.4px 0 0;
  border-color: #808080 transparent transparent;
  translate: calc(-50% - 0.5px) 100%;
}
.A .tooltip{
  background-color: #E97D0D;
  padding: 13px 29px 16px;
}
.A .tooltip::after {
  left: 94%;
  border-width: 13.6px 0 0 14.4px;
  border-color: #E97D0D transparent transparent;
  translate: calc(-50% + 0.5px) 100%;
}
@media screen and (min-width: 1860px) {
  #intro{
    /* background-size: 1860px 1437.9265px; */
    max-width: 1860px;
    margin: auto;
  }
}
@media screen and (min-width: 1360px) and (max-width: 1599.98px) {
  #intro{
    background-size: 1600px 1236px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1359.98px) {
  #intro{
    background-size: 117.647vw 90.882vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1439.98px) {
  #intro #QA::after{
    width: 95.278vw;
    height: 28.05vw;
    left: calc(50% + 1.667vw);
  }
}
@media screen and (min-width: 1000px) and (max-width: 1439.98px) {
  #intro #QA::after{
    width: 95.278vw;
    height: 28.05vw;
    left: calc(50% + 1.667vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 999.98px) {
  #intro #QA {
    padding-bottom: 17vw;
  }
  #intro #QA::after{
    width: 89vw;
    height: 28.05vw;
    left: calc(50% + 1vw);
  }
}
@media screen and (min-width: 1000px) and (max-width: 1199.98px) {
  #intro #QA{
    padding-bottom: 11vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  #intro{
    padding-top: 12.083vw;
  }
  #intro .c-head__lead{
    font-size: 4.833vw;
    margin-top: 6.083vw;
  }
  
  /* Q&A
  --------------------------------------------- */
  #intro #QA .qa_lead{
    font-size: 1.5vw;
  }
  #intro #QA .qa_lead:first-child{
    margin-top: 5.083vw;
  }
  #intro #QA .qa_lead:last-child{
    margin-top: 3.583vw;
  }
  /* QAリスト */
  #intro #QA .qa_list{
    max-width: 57.6vw;
    margin: 3vw auto 0;
  }
  #intro #QA .qa_list .A + .Q{
    margin-top: 1.583vw;
  }
  #intro #QA .qa_list .A:last-child{
    margin-right: 1.583vw;
  }
  /* 吹き出し */
  .tooltip {
    position: relative;
    margin-bottom: 1.131vw;
    border-radius: 3.75vw;
    font-size: 1.5vw;
  }
  .Q .tooltip{
    padding: 1.167vw 2.417vw 1.25vw;
  }
  .Q .tooltip::after {
    border-width: 1.133vw 1.2vw 0 0;
    /* translate: calc(-50% - 0.5px) 100%; */
    translate: calc(-50% - 0.042vw) 100%;
  }
  .A .tooltip{
    padding: 1.083vw 2.417vw 1.333vw;
  }
  .A .tooltip::after {
    border-width: 1.133vw 0 0 1.2vw;
    translate: calc(-50% + 0.042vw) 100%;
  }
}
@media screen and (min-width: 768px) {
  /* 複数行 */
  .Q .tooltip:has(br)::after {
    left: 14.4%;
  }
  .A .tooltip:has(br)::after {
    left: 87%;
  }
  #intro #QA .qa_list .A:last-child{
    margin-right: 19px;
  }
}
@media screen and (max-width: 767.98px) {
  #intro{
    padding-top: 18vw;
    background-image: url("../images/features/features_bg_sp.svg");
    background-size: contain;
  }  
  #intro .l-container {
    width: calc(100% - 10vw);
  }
  #intro .c-head__lead {
    font-size: 7vw;
    margin-top: 16.75vw;
    line-height: 1.5;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  #intro #QA .qa_lead {
    font-size: 3.15vw;
    letter-spacing: 0.05em;
  }
  #intro #QA .qa_lead:first-child {
    margin-top: 8.5vw;
  }
  #intro #QA .qa_lead:last-child {
    margin-top: 5.25vw;
  }
  #intro #QA .qa_list {
    max-width: none;
    margin: 15.25vw auto 0;
  }
  .tooltip {
    margin-bottom: 2.5vw;
    border-radius: 11.25vw;
    font-size: 2.753vw;
    line-height: 1.650317892824705;
    letter-spacing: 0.03em;
  }
  .Q .tooltip,
  .A .tooltip {
    padding: 1.75vw 11.75vw 2.25vw;
  }
  .qa_list .Q:nth-of-type(2) .tooltip {
    padding: 1.75vw 11.25vw 2.25vw;
  }
  .qa_list .Q:nth-of-type(3) .tooltip {
    padding: 1.75vw 15vw 2.25vw;
  }
  .qa_list .Q:nth-of-type(4) .tooltip {
    padding: 1.75vw 6.25vw 2.25vw;
  }
  .qa_list .A:nth-of-type(2) .tooltip {
    padding: 1.75vw 16vw 2.25vw;
  }
  .qa_list .A:nth-of-type(3) .tooltip {
    padding: 1.75vw 5.75vw 2.25vw;
  }
  .qa_list .A:nth-of-type(4) .tooltip {
    padding: 1.75vw 5.25vw 2.25vw;
  }
  #intro #QA .qa_list .A + .Q {
    margin-top: 6vw;
  }
  .Q .tooltip::after {
    left: 14.4%;
    border-width: 2.203vw 2.077vw 0 0;
    translate: calc(-50% - 0.125vw) 100%;
  }
  .A .tooltip::after {
    left: 87%;
    border-width: 2.203vw 0 0 2.077vw;
    translate: calc(-50% + 0.125vw) 100%;
  }
  #intro #QA::after {
    width: 100vw;
    height: 58.462vw;
    background-image: url(../images/features/bg_persons_sp.svg);
    left: calc(50%);
  }
  #intro #QA {
    padding-bottom: 63.75vw;
  }
}








/* ---------------------------------------------------------------------
  Focus Designの特徴
--------------------------------------------------------------------- */
#feature{
  padding-bottom: 230px;
}
#feature .c-head__sc__box{
  font-size: 23px;
}
#feature .c-head__sc__box .lang__en{
  font-size: 34px;
  font-family: "Roboto", sans-serif;
}
/* 特徴リスト
--------------------------------------------- */
/* 丸ラベル */
.label__circle{
  font-size: 15.75px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  padding: 1em;
}
.label__circle .num{
  font-size: 4.19047619047619em;
  font-weight: 700;
  line-height: 1;
  display: block;
  font-family: "Roboto", sans-serif;
}
/* 見出し */
#feature .feature_list .feature_list__header .head{
  font-weight: normal;
  font-size: 38px;
  line-height: 1.408461538461538;
}
/* テキスト */
#feature .feature_list .feature_list__body .txt{
  font-size: 15.75px;
  font-weight: normal;
  line-height: 1.857142857142857;
  margin-top: 0.5em;
}
/* Icon */
#feature .feature_list .feature_list__body .icon{
  width: 200px;
  text-align: center;
}
#feature .feature_list .feature_list__body .icon img{
  display: inline-block;
}
#feature .feature_list .feature_list__body .icon.icon_feature01 img{
  width: 116.9714px;
}
#feature .feature_list .feature_list__body .icon.icon_feature02 img{
  width: 93.3487px;
}
#feature .feature_list .feature_list__body .icon.icon_feature03 img{
  width: 149.5919px;
}
#feature .feature_list .feature_list__body .icon.icon_feature04 img{
  width: 128.6751px;
}
#feature .feature_list .feature_list__body .icon.icon_feature05 img{
  width: 120.4882px;
}
/* レイアウト */
#feature .feature_list{
  margin-top: 100px;
}
#feature .feature_list .feature_list__item{
  border-top: dashed 0.6378px #414141;
  position: relative;
}
#feature .feature_list .feature_list__item:last-child{
  border-bottom: dashed 0.6378px #414141;
}
/* リード文
--------------------------------------------- */
#feature .lead{
  font-size: 38.67px;
  margin-top: 78px;
}

@media screen and (min-width: 768px) {
  #feature .feature_list .label__circle{
    position: absolute;
    top: 44px;
    left: 11px;
  }
  #feature .feature_list .feature_list__body .icon{
    position: absolute;
    top: 59px;
    right: 0;
  }
  #feature .feature_list .feature_list__item{
    padding: 37px 200px 43px;
  }
  #feature .feature_list .feature_list__body .txt.__small{
    font-size: 13.5px;
    line-height: 2.166666666666667;
  }  
}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  #feature{
    padding-bottom: 19.167vw;
  }
  #feature .c-head__sc__box{
    font-size: 1.917vw;
  }
  #feature .c-head__sc__box .lang__en{
    font-size: 2.833vw;
  }

  /* 特徴リスト
  --------------------------------------------- */
  /* 丸ラベル */
  .label__circle{
    font-size: 1.313vw;
    width: 10.833vw;
    height: 10.833vw;
  }
  /* 見出し */
  #feature .feature_list .feature_list__header .head{
    font-size: 3.167vw;
  }
  /* テキスト */
  #feature .feature_list .feature_list__body .txt{
    font-size: 1.313vw;
  }
  #feature .feature_list .feature_list__body .txt.__small{
    font-size: 1.125vw;
  }
  /* Icon */
  #feature .feature_list .feature_list__body .icon{
    width: 16.667vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature01 img{
    width: 9.748vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature02 img{
    width: 7.779vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature03 img{
    width: 12.466vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature04 img{
    width: 10.723vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature05 img{
    width: 10.041vw;
  }
  /* レイアウト */
  #feature .feature_list{
    margin-top: 8.333vw;
  }
  #feature .feature_list .feature_list__item{
    padding: 3.083vw 16.667vw 3.583vw;
  }
  #feature .feature_list .label__circle{
    top: 3.667vw;
    left: 0.917vw;
  }
  #feature .feature_list .feature_list__body .icon{
    top: 4.917vw;
    right: 0;
  }

  /* リード文
  --------------------------------------------- */
  #feature .lead{
    font-size: 3.223vw;
    margin-top: 6.5vw;
  }
}

@media screen and (max-width: 767.98px) {
  #feature {
    padding-bottom: 22.5vw;
  }
  #feature .l-container {
    width: calc(100% - 12vw);
  }
  #feature .c-head__sc__box{
    font-size: 4.025vw;
  }
  #feature .c-head__sc__box .lang__en{
    font-size: 5.95vw;
  }
  /* 特徴リスト
  --------------------------------------------- */
  /* 丸ラベル */
  .label__circle{
    font-size: 3.025vw;
    width: 25vw;
    height: 25vw;
    padding: 0.5em;
    margin-top: -7.75vw;
    margin-left: -1.5vw;
  }
  .label__circle .num{
    font-size: 4.189256198347107em;
  }
  /* 見出し */
  #feature .feature_list .feature_list__header .head{
    font-size: 6.5vw;
    margin-left: 5.5vw;
  }
  /* テキスト */
  #feature .feature_list .feature_list__body .txt{
    font-size: 2.75vw;
    line-height: 1.860909090909091;
    text-align: justify;
    width: 100%;
  }
  /* レイアウト */
  #feature .feature_list{
    margin-top: 10.5vw;
  }
  #feature .feature_list .feature_list__item{
    padding: 3.75vw 0px 10.25vw;
  }
  #feature .feature_list .feature_list__item:last-child{
    padding-bottom: 5vw;
  }
  #feature .feature_list .feature_list__header{
    display: flex;
  }
  #feature .feature_list .feature_list__body{
    display: flex;
    margin-top: 3vw;
    padding-left: 4vw;
  }
  #feature .feature_list .feature_list__body .icon{
    max-width: 24.832vw;
    width: 100%;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature01 img{
    width: 18.97vw;
    margin-top: 5vw;
    margin-left: 5vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature02 img{
    width: 14.922vw;
    margin-left: 6.75vw;
    margin-top: 1.25vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature03 img{
    width: 100%;
    margin-top: 2.25vw;
    margin-left: 2.75vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature04 img{
    width: 21.277vw;
    margin-top: 3.25vw;
    margin-left: 4.75vw;
  }
  #feature .feature_list .feature_list__body .icon.icon_feature05 img{
    width: 19.76vw;
    margin-top: 2.5vw;
    margin-left: 7vw;
  }
  /* リード文
  --------------------------------------------- */
  #feature .lead{
    font-size: 6.5vw;
    line-height: 1.75;
    margin-top: 10vw;
  }
}


/* ---------------------------------------------------------------------
  相談のご案内
--------------------------------------------------------------------- */
#information{
  padding-bottom: 160px;
}
#information .lead{
  font-size: 24.75px;
  margin-top: 94px;
  font-weight: normal;
  line-height: 2.28875;
  letter-spacing: 0.02em;
}
#information .c-colorbox__wrap{
  margin-top: 57px;
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  #information{
    padding-bottom: 13.333vw;
  }
  #information .lead{
    font-size: 2.063vw;
    margin-top: 7.833vw;
  }
  #information .c-colorbox__wrap{
    margin-top: 4.75vw;
  }  
}
@media screen and (max-width: 767.98px) {
  #information{
    padding-bottom: 19vw;
  }
  #information .l-container {
    width: calc(100% - 10vw);
  }
  #information .lead{
    font-size: 4vw;
    margin-top: 6vw;
  }
  #information .c-colorbox__wrap{
    margin-top: 9.5vw;
  }
}