@charset 'UTF-8';
/*************
/* 100%表示用
*************/
/* 基本設定 */
#page-main {
  width: 100%;
  /* .p_service__blockの罫線のように、コンテナの外へ広げて画面幅いっぱいに出す要素がある。
     100vwはスクロールバーの幅を含むため、そのままだとPCで数px右へはみ出して横スクロールが出る。
     ここで切っておけば、はみ出したぶんだけが落ちて見た目は画面幅ちょうどになる。
     overflow:hiddenはスクロールコンテナを作りposition:sticky（.about_tit）を壊すのでclipを使う */
  overflow-x: clip;
}
#page-main img {
  max-width: 100%;
  height: auto;
}

/****************************************
/* 送信完了
****************************************/
.thanks_block_outer{
  text-align: center;
  /* 下のpが幅を1/0.9倍で持つぶん、レイアウト上は右へはみ出す
     （縮小後の見た目は収まる）。横スクロールを出さないよう閉じ込める */
  overflow-x: clip;
}
.thanks_block{
  display: inline-block;
  text-align: left;
}
/* .sq90のscaleX(0.9)は見た目だけを縮めるので、幅100%のままだと
   折り返し位置が右端の10%手前で決まってしまう。
   1/0.9倍の幅を持たせて、折り返しを見た目の右端まで届かせる */
.thanks_block .txt_block p{
  width: 111.111%;/* 1 / 0.9 */
}
.thanks-btn{
  margin-top: 3.071rem;
}

/****************************************
/* 会社概要
****************************************/
.company_block{
  width: 100%;
}
.company_table{
  margin-bottom: 0;
  list-style: none;
}
.company_table li{
  position: relative;
  display: flex;
  padding-bottom: 2.714rem;
}
.company_table li + li{
  margin-top: 2.357rem;
}
.company_table li::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(185,185,185,0.5);
  left: 0;
  bottom: 0;
}
.company_table_item{
  width: 30%;
  align-self: center;
}
.company_table_con{
  width: 70%;
}
.company_table_item > .sq90, .company_table_con > .sq90{
  width: 111.111%;/* 1 / 0.9 */
  line-height: 1.5;
}
.company_map{
  margin-top: 4.285rem;
}
.company_map .youtube{
  padding: 0;
  aspect-ratio: 16 / 9;
  filter: grayscale(1);
}
@media screen and (min-width: 768px) {
  .company_block{
    width: 75%;
    max-width: 1200px;
    margin-left: auto;
  }
  .company_table_item{
    padding: 0 20px;
  }
  .company_map{
    margin-top: 5.71rem;
  }
}
@media screen and (min-width: 992px) {
  .company_table_item{
    width: 25%;
  }
  .company_table_con{
    width: 75%;
  }
  .company_table_item{
    padding: 0 30px;
  }
  .company_map .youtube{
    aspect-ratio: 48 / 25;
  }
}
@media screen and (min-width: 1200px) {
  .company_table{
    font-size: 1.06rem;
  }
  .company_table li{
    padding-bottom: 3.33rem;
  }
  .company_table li + li{
    margin-top: 3rem;
  }
  .company_table_item{
    padding: 0 42px;
  }
  .company_map{
    margin-top:  6.66rem;
  }
}
@media screen and (max-width: 1023px) {
  .company_table_con .sep_slash1023{
    display: block;
    font-size: 0;
    line-height: 0;
  }
}
@media screen and (max-width: 575px) {
  .company_table_con .sep_slash575{
    display: block;
    font-size: 0;
    line-height: 0;
  }
}

/****************************************
/* 私たちについて
****************************************/
.about_block + .about_block{
  position: relative;
  margin-top: 8rem;
  padding-top: 2.14rem;
}
.about_block + .about_block::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(60,60,60,0.5);
  top: 0;
  left: 0;
}
.about_tit{
  width: 160px;
  height: 40px;
  background-color: #AF09F1;
  color: #fff;
}
.about_tit .f-eng{
  line-height: 1;
  font-size: 1.07rem;
}
.about_content .f38{
  letter-spacing: 0;
  line-height: 1.75;
  text-align: justify;
  margin-bottom: 3rem;
}
.about_content p{
  font-size: 1.1428rem;
}
.about_content p + p{
  margin-top: 2.357rem;
}
/* スクロールに応じて1行ずつ濃くなるテキスト（opacityの値はpage.jsがインラインで指定）。
   トップページの .about_block .txt_block .line（top.css／top.js）と同じ演出。
   1行 = 1つの <span class="line">。.lineを書いたブロックだけが対象になるので、
   演出を掛けたい箇所にだけ書くこと（MISSION・VISION・VALUEは<br>のままで対象外）。
   水平比率（scaleX）は親の.sq90 / .sq105が担当するのでここでは掛けない。
   opacityは親子で掛け算になるため、.about_concept_smallのように親が0.8の場合も
   JSが1まで上げたときの見た目は0.8のままで保たれる */
.about_content .line{
  display: block;
  will-change: opacity;
}
.about_concept{
  margin-top: 4.428rem;
  /* 下の.about_concept_bigは.sq105（左基準のscaleX(1.05)）で右へ5%広がって描画される。
     width:fit-contentで文字ぶんの幅に絞ってはいるが、狭い画面で文字が箱いっぱいまで
     伸びると5%が.container_90の左右余白を超えて横スクロールが出る。
     overflow:hiddenはスクロールコンテナを作りposition:stickyを壊すのでclipを使う */
  overflow-x: clip;
}
.about_concept_big{
  font-size: 3.928rem;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.14rem;
}
.about_concept_small{
  font-size: 0.6428rem;
  line-height: 1.75;
  opacity: 0.8;
}
.about_value_list{
  margin-bottom: 0;
  list-style: none;
}
.about_value_list li + li{
  margin-top: 5.714rem;
}
.about_value_tit{
  line-height: 1;
  margin-bottom: 3.214rem;
}
.about_value_tit .no{
  color: #AF09F1;
  letter-spacing: 0.05em;
  font-size: 0.785rem;
  text-align: right;
  margin-bottom: -5px;
}
.about_value_tit .tit{
  letter-spacing: -0.03em;
  font-size: 4.285rem;
}
/* .sq105は左基準でscaleX(1.05)するため、ボックスが親と同じ幅のままだと
   右へ5%ぶん広がって描画され、そのぶんが横スクロールになる。
   文字ぶんの幅だけ持たせてはみ出しをなくす（.c-title1 .f-cg.sq105と同じ対処） */
.about_content .sq105{
  width: fit-content;
}
.about_content .about_value_list .f30{
  margin-bottom: 1.64rem;
}
.about_content .about_value_list p{
  font-size: 0.928rem;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .about_block{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .about_block + .about_block{
    padding-top: 4.64rem;
    margin-top: 11.54rem;
  }
  /* 左のラベル（CONCEPT / MISSION / VISION / VALUE）を、その.about_blockを
     読み終わるまで画面に留める。stickyの固定範囲は「親＝.about_block」なので、
     ラベルは.about_blockの直下のflex子のまま動かさないこと。
     align-items:flex-startでラベルが縦に伸びないようにしているのもこのため
     （stretchで親と同じ高さになると動く余地がなくなりstickyが効かない）。
     topは#header（header.css）の高さ＋20pxの余白。ヘッダー高を変えたらここも合わせる */
  .about_tit{
    position: sticky;
    top: 118px;/* #header 98px + 20px */
  }
  /* .noを絶対配置する基準。以前はここもstickyにしていたが、
     固定範囲が1つの<li>の中だけで動く距離がほとんど無く効果が見えなかったため、
     固定は上の.about_titに一本化した */
  .about_value_tit{
    position: relative;
  }
  .about_value_tit .no{
    text-align: left;
    position: absolute;
    top: 10px;
    left: -2.85rem;
    margin-bottom: 0;
  }
  .about_content{
    width: 60%;
  }
}
@media screen and (min-width: 992px) {
  .about_content{
    width: 64.375%;
  }
  .about_tit{
    top: 120px;/* #header 100px + 20px */
  }
}
@media screen and (min-width: 1200px) {
  .about_block + .about_block{
    padding-top: 6.66rem;
    margin-top: 12.66rem;
  }
  .about_tit{
    top: 132px;/* #header 112px + 20px */
  }
  .about_tit .f-eng{
    font-size: 1rem;
  }
  .about_content .f38{
    margin-bottom: 3.86rem;
  }
  .about_content p{
    font-size: 1.33rem;
  }
  .about_content p + p{
    margin-top: 2.66rem;
  }
  .about_concept{
    margin-top: 7.6rem;
  }
  .about_concept_big{
    font-size: 5.333rem;
    margin-bottom: 4.66rem;
  }
  .about_concept_small{
    font-size: 0.733rem;
  }
  .about_value_list li + li{
    margin-top: 6.66rem;
  }
  .about_value_tit{
    margin-bottom: 4rem;
  }
  .about_value_tit .no{
    font-size: 0.866rem;
    left: -3rem;
  }
  .about_value_tit .tit{
    font-size: 5.33rem;
  }
  .about_content .about_value_list .f30{
    margin-bottom: 1.866rem;
  }
  .about_content .about_value_list p{
    font-size: 1rem;
    line-height: 2;
  }
}
@media screen and (max-width: 767px) {
  .about_tit{
    margin-bottom: 5.57rem;
  }
  .about_content p{
    font-feature-settings: "palt" 1;
  }
}


/****************************************
/* 事業内容　SERVICE　共通
****************************************/
/* about */
.service_about .en_tit{
  margin-bottom: 3.714rem;
}
.service_about__tit .f32{
  line-height: 1.66;
  margin-bottom: 2.214rem;
}
.service_about__flex .txt_block{
  text-align: justify;
}
.service_about__flex .txt_block p + p{
  margin-top: 1.928rem;
}
@media screen and (min-width: 992px) {
  .service_about__flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .service_about__tit .f32{
    margin-bottom: 0;
  }
  .service_about__flex .txt_block{
    width: 44.285%;
  }
}
@media screen and (min-width: 1200px) {
  .service_about .en_tit{
    margin-bottom: 4.4rem;
  }
  .service_about__flex .txt_block p{
    font-size: 0.933rem;
  }
  .service_about__flex .txt_block p + p{
    margin-top: 1.866rem;
  }
}
/* service */
.service_sec{
  margin-top: 10.28rem;
}
.p_service__block{
  position: relative;
}
.p_service__block::before, .p_service__block::after{
  position: absolute;
  content: "";
  width: 100vw;
  height: 1px;
  background-color: rgba(180,180,180,0.5);
  left: calc(50% - 50vw);
}
.p_service__block::before{
  top: 0;
}
.p_service__block::after{
  bottom: 0;
}
.p_service__list{
  margin-bottom: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.p_service__list li{
  width: 50%;
  position: relative;
  padding: 2rem 0 1.928rem;
}
.p_service__list li::before{
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(180,180,180,0.5);
}
.p_service_tit{
  color: #AF09F1;
  margin-bottom: 1.285rem;
}
.p_service_tit .f-cg{
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: 1.1428rem;
  margin-bottom: 0.428rem;
}
.p_service_tit .f-cg.sq105{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
}
.p_service_tit .sq90{
  font-size: 0.785rem;
  transform-origin: center center;
  margin-bottom: 0;
}
.p_service_value__line{
  position: relative;
  margin-top: 1.85rem;
  padding-bottom: 1.28rem;
}
.p_service_value__line::before{
  position: absolute;
  content: "";
  width: 85.714%;
  height: 1px;
  background-color: rgba(180,180,180,0.5);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* .titは中央寄せ、.txtは左寄せ。
   下の.txtが幅を1/0.9倍で持つぶん、レイアウト上は右へ11%はみ出す
   （縮小後の見た目は収まる）。横スクロールを出さないよう閉じ込める。
   overflow:hiddenはスクロールコンテナを作りposition:stickyを壊すのでclipを使う */
.p_service_value{
  overflow-x: clip;
  width: 66.1538%;
  margin: 0 auto;
}
/* .f-cgはwidth:fit-contentで中身の幅しか持たないブロックなので、
   text-align:centerでは中央に来ない（中央に寄るのは箱の中身であって箱自体ではない）。
   左右autoのマージンで箱ごと中央に置く。
   width:fit-content自体は、左基準のscaleX(1.05)が右へ5%はみ出すのを防ぐためのもの。
   変形の基準点も中央にしないと、1.05倍したぶんだけ見た目の中心が左へずれる */
.p_service_value .tit{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transform-origin: center center;
  color: #AF09F1;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.714rem;
}
/* .sq90のscaleX(0.9)は見た目だけを縮め折り返し判定には効かないので、
   幅100%のままだと折り返し位置が右端の10%手前で決まってしまう。
   1/0.9倍の幅を持たせて折り返しを見た目の右端まで届かせる。
   左寄せなので変形の基準点は左（contents.cssの既定）のままでよい */
.p_service_value .txt{
  width: 111.111%;/* 1 / 0.9 */
  text-align: justify;
  margin-bottom: 0;
  font-size: 0.785rem;
  line-height: 1.8;
}
.p_service_img{
  width: 34.2856%;
  margin: 0 auto 1.1428rem;
}
.p_service__list .txt_block{
  width: 66.1538%;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.785rem;
  /* 説明文の行数が列ごとに違う（2行・3行）と、下の.p_service_value__lineの
     罫線の位置が列ごとにずれるので、一番多い3行ぶんの高さを最低限確保して揃える。
     min-heightをline-heightから計算しているのは、両者がずれると
     その差ぶん（1〜2px）だけ罫線が食い違うため。
     行間を変えるときは--txt-lhだけを直せば、min-heightも自動で追従する。
     単位をemにしているのはこの要素自身のfont-sizeが基準になるため、
     768px・1200pxでfont-sizeが変わってもそのまま3行ぶんになる。
     heightではなくmin-heightなので、4行になる文言を入れても切れることはない
     （その列だけ罫線が下がる） */
  --txt-lh: 1.8;
  line-height: var(--txt-lh);
  min-height: calc(var(--txt-lh) * 3em);
  text-align: justify;
  margin-bottom: 1rem;
}
/* 下マージンは上の.txt_block側で持つ。
   min-heightが0以外になると最後の子の下マージンが親の外へ抜けなくなり（相殺されなくなり）、
   高さに含まれてしまう。そうすると3行の列だけマージン1つぶん高くなり、
   min-heightで揃えたはずの罫線の位置が1remずれる */
.p_service__list .txt_block p:last-child{
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .service_sec{
    margin-top: 12.07rem;
  }
  .p_service__list{
    position: relative;
  }
  .p_service__list::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(180,180,180,0.5);
  }
  .p_service__list li{
    width: 25%;
  }
  .p_service_tit .f-cg{
    font-size: 1.1428rem;
  }
  .p_service_tit .sq90{
    font-size: 0.928rem;
  }
}
@media screen and (min-width: 992px) {
  .p_service__list li{
    padding: 2.714rem 0 2.5rem;
  }
  .p_service_tit{
    margin-bottom: 1.6428rem;
  }
  .p_service_tit .f-cg{
    font-size: 1.428rem;
  }
  .p_service_tit .sq90{
    font-size: 1rem;
  }
  .p_service_img{
    margin-bottom: 1.714rem;
  }
  .p_service__list .txt_block{
    font-size: 0.928rem;
  }
  .p_service_value .txt{
    font-size: 0.928rem;
  }
}
@media screen and (min-width: 1200px) {
  .service_sec{
    margin-top: 12.93rem;
  }
  .p_service__list li{
    min-height: 526px;
    padding: 3.133rem 0;
  }
  .p_service_tit{
    margin-bottom: 2.066rem;
  }
  .p_service_tit .f-cg{
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .p_service_tit .sq90{
    font-size: 1.2rem;
  }
  .p_service_img{
    margin-bottom: 2.2rem;
  }
  .p_service__list .txt_block{
    font-size: 1rem;
    width: 65.714%;
    /* line-heightではなく--txt-lhを変える。
       min-heightもこの値から計算しているので、直接line-heightを書くと
       3行ぶんの高さと食い違って罫線が1〜2pxずれる */
    --txt-lh: 1.86;
  }
  .p_service__list.value li{
    padding-bottom: 4.4rem;
  }
  .p_service_value__line{
    margin-top: 3.26rem;
    padding-bottom: 2.13rem;
  }
  .p_service_value{
    width: 65.714%;
  }
  .p_service_value .tit{
    font-size: 1.33rem;
    margin-bottom: 1rem;
  }
  .p_service_value .txt{
    line-height: 1.86;
    font-size: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .p_service__block{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .p_service__block::before, .p_service__block::after{
    width: 100%;
    left: 0;
  }
  .p_service__list li:nth-child(odd)::before{
    display: none;
  }
  .p_service__list li:nth-child(1), .p_service__list li:nth-child(2){
    padding-bottom: 3rem;
  }
  .p_service__list li:nth-child(1)::after, .p_service__list li:nth-child(2)::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: rgba(180,180,180,0.5);
    bottom: 0;
    left: 0;
  }
}
/* media */
.service_media{
  margin-top: 10.714rem;
}
.service_media__flex{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.service_media_item{
  width: calc((100% - 10px)/2);
  height: 80px;
  background-color: #AF09F1;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service_media_item .sq90{
  font-size: 1.1428rem;
  line-height: 1.5;
  transform-origin: center center;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .service_media{
    margin-top: 12.5rem;
  }
  .service_media_item{
    width: calc((100% - 30px)/4);
  }
}
@media screen and (min-width: 992px) {
  .service_media_item{
    width: calc((100% - 60px)/7);
  }
}
@media screen and (min-width: 1200px) {
  .service_media{
    margin-top: 13.2rem;
  }
  .service_media__flex{
    gap: 14px;
  }
  .service_media_item{
    width: calc((100% - 84px)/7);
    height: 120px;
  }
  .service_media_item .sq90{
    font-size: 1.33rem;
  }
}
/* flow */
.service_flow{
  margin-top: 10.71rem;
}
.service_flow_chart{
  margin-bottom: 0;
  list-style: none;
  /* 丸の中心の位置＝ --flow-pad-t ＋ --flow-head-h ÷ 2。
     1行目（見出しの行）の高さを決め打ちにしておくと、この位置が計算で出せるので、
     縦線を「丸の中心から次の丸の中心まで」ちょうど引ける。
     見出しはどれも1行なので固定で問題ない（2行になる文言を入れる場合は要調整） */
  --flow-head-h: 2.857rem;/* 40px：見出し1行ぶんの高さ（20px × line-height 2） */
  --flow-txt-gap: 0;/* 見出し（.f30）と本文（.service_flow_txt）の間。1200px以上だけ空ける */
  /* 01の丸の上半分が.service_flow_chartの外へ出ないようにするための余白。
     必要なのは01だけで、02以降は「前の丸の下端＋--flow-gap」の位置に来るため食い込まない。
     下限は 01の半径31.5px − --flow-head-h ÷ 2（20px）＝ 11.5px。
     これ以上大きくすると全liに効いて、リストの上だけでなく段の間も広がる。
     リストの上の空きを調整したいときはここではなく
     .service_flow_chartのmargin-top（または上の見出し側）で取ること */
  --flow-pad-t: 1rem;/* 14px */
  /* 丸と丸のあいだに見える線の長さ。項目の間隔はこの1つで調整する。
     本文（見出し＋2行）が入る高さより短くすると、その段だけ間隔が広がる */
  --flow-gap: 5.714rem;/* 80px */
  --flow-col: 99px;/* 丸の列の幅＝一番大きい05の直径。縦線の位置もここから出す */
  --no-step: 9px;/* 段ごとに直径が増える幅。liの高さの計算に使う */
}
/* 丸（.no）と見出し（.f30）の中心を段ごとの調整なしで揃えるためgridにしている。
   この2つは.service_flow_noと.service_flow_conという別々の親の中にいるので、
   flexのalign-itemsでは互いを基準に揃えられない。
   .service_flow_conをsubgridにすると、その中の見出しと本文が親の1行目・2行目へ直接並ぶ。
   丸も1行目に置けば同じ行に入るので、丸の大きさが63〜99pxと変わっても
   align-self:centerだけで中心が揃い、段ごとのmargin調整を書かずに済む */
.service_flow_chart li{
  display: grid;
  grid-template-columns: var(--flow-col) 1fr;
  grid-template-rows: var(--flow-head-h) 1fr;
  column-gap: 40px;
  row-gap: var(--flow-txt-gap);
  position: relative;
  /* 丸は1行目の中心から上下へはみ出すので、その上半分ぶんの居場所を空けておく
     （一番大きい05で約30px）。marginではなくpaddingなのは、
     縦線の長さをheight:100%（＝liの高さ）で出しているため、
     間をmarginで空けるとその距離が合わなくなるから */
  padding-top: var(--flow-pad-t);
  /* 見える線の長さを5つとも同じにするための高さ。
     liの高さ＝丸の中心から次の丸の中心までの距離なので、
       この丸の半径 ＋ 見える線 ＋ 次の丸の半径
     を持たせればよい。直径は--no-stepずつ増えるので次の丸の半径は (--no-size + --no-step) / 2、
     まとめると --no-size / 2 + (--no-size + --no-step) / 2 = --no-size + --no-step / 2。
     丸の大きさに応じて自動で伸び縮みするので、段ごとの調整は不要。
     heightではなくmin-heightなのは、狭い画面で本文が3行以上になったときに
     はみ出すのを防ぐため。その段だけ間隔が広がるが、文字が切れることはない */
  --no-size: var(--flow-col);
  min-height: calc(var(--no-size) + var(--no-step) / 2 + var(--flow-gap));
}
/* 最後の段は次の丸が無いので、中身なりの高さでよい */
.service_flow_chart li:last-child{
  min-height: 0;
}
/* 丸の中心どうしをつなぐ縦線。
   起点は丸の中心（padding-top ＋ 1行目の高さの半分）。
   どのliも丸の中心までの距離が同じなので、
   「丸の中心から次の丸の中心まで」の長さはliの高さと等しくなる＝height:100%でちょうど届く。
   最後のliには引かないので、05の下へ線が伸びることもない */
.service_flow_chart li:not(:last-child)::before{
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: calc(var(--flow-pad-t) + var(--flow-head-h) / 2);
  background-color: rgba(120,35,220,0.45);
  left: calc(var(--flow-col) / 2);
  z-index: -1;
}
.service_flow_no{
  width: var(--flow-col);
  grid-row: 1;/* 見出しと同じ行に置く */
  align-self: center;
  /* 丸がこの行の高さを決めてしまうと、本文が丸の下まで押し下げられる。
     この箱自体は高さを持たせず、中の丸を上下へはみ出させることで、
     1行目の高さは見出し（.f30）だけで決まり、本文は丸の横に回り込む。
     高さ0＋align-items:centerなので、丸の中心＝この箱の位置＝1行目の中心のまま。
     はみ出す上半分ぶんの余白は下のli側のpadding-topで確保している */
  height: 0;
  display: flex;
  align-items: center;
}
/* 直径は--no-sizeから取る。liの高さもこの値から計算しているので、
   大きさを変えるときは各段の--no-sizeだけを直せばよい */
.service_flow_no .no{
  width: var(--no-size);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  border-radius: 50%;
}
.service_flow_chart li:nth-child(1){
  --no-size: 63px;
}
.service_flow_chart li:nth-child(1) .no{
  background-color: #e4d3f8;
  color: #AF09F1;
  font-size: 0.835rem;
}
.service_flow_chart li:nth-child(2){
  --no-size: 72px;
}
.service_flow_chart li:nth-child(2) .no{
  background-color: #c9a7f1;
  color: #AF09F1;
  font-size: 0.964rem;
}
.service_flow_chart li:nth-child(3){
  --no-size: 81px;
}
.service_flow_chart li:nth-child(3) .no{
  background-color: #ae7bea;
  font-size: 1.09rem;
}
.service_flow_chart li:nth-child(4){
  --no-size: 90px;
}
.service_flow_chart li:nth-child(4) .no{
  background-color: #934fe3;
  font-size: 1.22rem;
}
.service_flow_chart li:nth-child(5){
  --no-size: 99px;
}
.service_flow_chart li:nth-child(5) .no{
  background-color: #AF09F1;
  font-size: 1.35rem;
}
/* 幅と間隔は親のgrid-template-columns（99px 1fr）とcolumn-gap（40px）が持つ */
.service_flow_con{
  grid-column: 2;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}
/* 見出しを1行目（--flow-head-h）の中で上下中央に置く。丸も同じ行の中央にいるので、
   これで丸の中心と見出しの中心が同じ高さになる。
   margin-bottomを残すとマージンごと中央に配置されて中心が上へずれるので0にする */
.service_flow_con .f30{
  align-self: center;
  margin-bottom: 0;
  /* 1行目の高さ（--flow-head-h）はこの行の高さを前提に決めてあるので、
     継承任せにせず明示しておく（20px × 2 = 40px） */
  line-height: 2;
}
.service_flow_con .f30{
  color: #AF09F1;
}
.service_flow_txt{
  font-size: 0.928rem;
  line-height: 1.69;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .service_flow{
    margin-top: 11.428rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .service_flow .s-title1{
    margin-bottom: 0;
  }
  .service_flow_chart{
    width: 61.785%;
  }
}
@media screen and (min-width: 1200px) {
  .service_flow{
    margin-top: 12rem;
  }
  /* 1200px以上は丸を一回り大きくし（最大110px）、
     .f30が2rem（30px）・本文が1rem（15px）になって中身も高くなるぶんを合わせる。
     直径は70/80/90/100/110pxと10px刻みになるので--no-stepも10pxにする
     （liの高さの計算がこの刻み幅を使っているため、ここがずれると線の長さが揃わない）。
     ここを直せば丸の中心・縦線の位置・liの高さがすべて追従する */
  .service_flow_chart{
    --flow-head-h: 2.8rem;/* 42px：30px × line-height 1.4（下の.f30と揃えること） */
    --flow-txt-gap: 2.533rem;/* 38px：見出しと本文の間 */
    /* 丸の上半分がはみ出すぶんの余白。必要なのは01の丸だけで、
       02以降は「前の丸の下端＋--flow-gap」の位置に来るため食い込まない。
       下限は 01の半径35px − --flow-head-h ÷ 2（21px）＝ 14px。
       50pxのままだと見出しと本文の間を空けたぶんliが縦に伸びて、
       --flow-gapを85pxに保てなくなるのでここまで下げている */
    --flow-pad-t: 1.2rem;/* 18px */
    --flow-gap: 5.666rem;/* 85px */
    --flow-col: 110px;
    --no-step: 10px;
  }
  /* 見出しの行の高さを詰めて、本文を見出しの直下に寄せる。
     line-height 2のままだと文字の上下に15pxずつ余白がつき、本文が離れて見える。
     この値を変えるときは上の--flow-head-h（30px × line-height）も必ず合わせること。
     ずれると丸の中心と縦線の起点が合わなくなる */
  .service_flow_con .f30{
    line-height: 1.4;
  }
  .service_flow_chart li:nth-child(1){
    --no-size: 70px;
  }
  .service_flow_chart li:nth-child(1) .no{
    font-size: 0.86rem;
  }
  .service_flow_chart li:nth-child(2){
    --no-size: 80px;
  }
  .service_flow_chart li:nth-child(2) .no{
    font-size: 1rem;
  }
  .service_flow_chart li:nth-child(3){
    --no-size: 90px;
  }
  .service_flow_chart li:nth-child(3) .no{
    font-size: 1.13rem;
  }
  .service_flow_chart li:nth-child(4){
    --no-size: 100px;
  }
  .service_flow_chart li:nth-child(4) .no{
    font-size: 1.26rem;
  }
  .service_flow_chart li:nth-child(5){
    --no-size: 110px;
  }
  .service_flow_chart li:nth-child(5) .no{
    font-size: 1.4rem;
  }
  .service_flow_txt{
    font-size: 1rem;
  }
}

/****************************************
/* プライバシーポリシー
****************************************/
.policy-outer{
	width: 100%;
}
.policy_block h3{
	font-size: 1.214rem;
	margin-bottom: 1.214rem;
}
.policy_block + .policy_block{
	margin-top: 2.928rem;
}
.policy_block .txt_block, .policy_list{
	font-size: 0.928rem;
}
.policy_block .txt_block{
	text-align: justify;
}
.policy_list{
	margin-bottom: 0;
	list-style: none;
}
.policy_list li{
	padding-left: 1em;
	text-indent: -1em;
}
@media screen and (min-width: 768px){
	.policy-outer{
		width: 75%;
		max-width: 1200px;
		margin-left: auto;
	}
	.policy_block + .policy_block{
		margin-top: 4rem;
	}
	.policy_block h3{
		font-size: 1.2rem;
		margin-bottom: 2rem;
	}
	.policy_block .txt_block, .policy_list{
		font-size: 0.933rem;
	}
}