/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/
.maximg {
  width: 100%;
  height: auto;
}

.lead {
  font-size: 1.35rem!important;
  line-height: 1.9em;
}

ul.volonte_howtouse {
  list-style: none;
  height: 100%;
  overflow: auto;
}


@media screen and (min-width: 700px) {

  #welcome .heading-text.heading-section h2 {
      line-height: 1.4em;
  }
  #welcome .col-lg-12 img {
    margin-bottom: 30px;
  }
  #use {
    padding: 100px 0 0;
  }
  #use .heading-text.heading-section h2 {
    margin-bottom: 110px;
  }

  ul.volonte_howtouse li.volonte_screenimg {
    float: left;
    width: 20%;
    height: calc(20% * 1.7125);
    margin-right: 5%;
  }

  ul.volonte_howtouse li.volonte_text {
    width: 75%;
    float: left;
  }

  ul.volonte_howtouse li.volonte_text h3 {
    font-size: 2.4em;
    position: relative;
  }

  ul.volonte_howtouse li.volonte_text h3.select,
  ul.volonte_howtouse li.volonte_text h3.create,
  ul.volonte_howtouse li.volonte_text h3.prominent {
    font-size: 2.3em;
    position: relative;
    line-height: 1.5em;
    text-indent: 1.5em;
    padding-left: 0.5em;
  }
}
@media screen and (max-width: 768px) {
  #welcome .text-center,
  #function .text-center  {
    text-align: left !important;
  }
  #welcome .text-center-sp {
    text-align: center !important;
  }

}
@media screen and (max-width: 767px) {

  #welcome .text-center {
    text-align: left !important;
  }
  #welcome .text-center-sp {
    text-align: center !important;
    margin-top: 20px;
  }
  #function .volonte_function_list {
    text-align: left !important;
  }

  #use {
    margin-top: 50px;
  }

  ul.volonte_howtouse {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 60px;
  }

  ul.volonte_howtouse li.volonte_screenimg {
    order: 2;
    width: 40%;
    margin: 15px auto 0;
  }

  ul.volonte_howtouse li.volonte_text {
    order: 1;
    width: 100%;
  }

  ul.volonte_howtouse.nomargin {
    margin-top: !important;
  }

  ul.volonte_howtouse.nomargin li.volonte_screenimg {
    order: 1;
  }

  ul.volonte_howtouse.nomargin li.volonte_text {
    order: 2;
  }

  ul.volonte_howtouse li.volonte_text h3 {
    font-size: 2.4em;
    position: relative;
  }

  ul.volonte_howtouse li.volonte_text h3.select,
  ul.volonte_howtouse li.volonte_text h3.create,
  ul.volonte_howtouse li.volonte_text h3.prominent {
    font-size: 2.3em;
    position: relative;
    line-height: 1.5em;
    text-indent: 1.5em;
    padding-left: 0.5em;
  }
}
@media screen and (max-width: 414px) {
  #welcome h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 0;
  }
  #welcome .m-b-40 {
    margin-bottom: 20px!important;
  }
  ul.volonte_howtouse li.volonte_screenimg {
    width: 60%;
    margin: 15px auto 0;
  }
  ul.volonte_howtouse li.volonte_text h3 {
    font-size: 2em;
    line-height: 1.4em;
  }
  ul.volonte_howtouse li.volonte_text h3.select,
  ul.volonte_howtouse li.volonte_text h3.create,
  ul.volonte_howtouse li.volonte_text h3.prominent {
    font-size: 2em;
    position: relative;
    line-height: 1.5em;
    text-indent: 1.5em;
    padding-left: 0.5em;
  }

  #onepoint .container {
    padding: 0 15px!important;
  }
  #privacy .container {
    padding: 0 15px!important;
  }
}


ul.volonte_howtouse li.volonte_text h3.select:before {
  position: absolute;
  left: 0;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url(../imgs/icon_select.png) no-repeat;
  background-size: contain;
}

ul.volonte_howtouse li.volonte_text h3.create:before {
  position: absolute;
  left: 0;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url(../imgs/icon_create.png) no-repeat;
  background-size: contain;
}

ul.volonte_howtouse li.volonte_text h3.prominent:before {
  position: absolute;
  left: 0;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url(../imgs/icon_prominent.png) no-repeat;
  background-size: contain;
}

ul.volonte_howtouse li.volonte_text p {}

/*
*
*
* 共通
*
*
*/
.background-black {
  background-color: #24272d !important;
}

.heading-text.heading-section h2:before {
  height: 0;
  background-color: #2250fc;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.volonte {
  font-family: "Volonte", sans-serif;
  font-size: 140%;
}

.volonte_function_list {
  list-style: none;
}

.volonte_list {
  list-style: none;
}

.volonte_list li {
  padding-left: 30px;
}

.volonte_list li:before {
  content: counter(my-counter);
  /* カウンター「my-counter」を呼び出す */
  counter-increment: my-counter;
  /* この要素が現れる度にカウンター「my-counter」が加算されていく、 */
  background-color: #A103A2;
  display: block;
  float: left;
  margin-top: 7px;
  color: #fff;
  font-size: 65%;
  font-weight: bold;
  letter-spacing: -0.5pt;
  text-indent: -0.5pt;
  line-height: 20px;
  /* 行間を高さと同じにすることで、上下中央に配置させる */
  margin-left: -30px;
  text-align: center;
  height: 20px;
  width: 20px;
  /* width、heightを同じ数値にして、正方形にする */
  border-radius: 50%;
  /* 要素を丸にする（正方形なので、正円となる） */
}

.volonte_list-num>li:after {
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
}

.volonte_list {
  counter-reset: my-counter;
  /* ol本体でカウンターをリセット – このクラスが呼び出される度に1からカウントされるようにする */
  padding: 0;
}

.volonte_list.later2 {
  counter-reset: my-counter 2;
  padding: 0;
}

h4 .border_bt {
  display: inline-block;
  padding: 0.25em 0.5em;
  /*上下 左右の余白*/
  color: #494949;
  /*文字色*/
  background: rgba(115, 0, 108, 0);
  border-left: solid 5px #73006C;
  /*左線*/
}

.appstore {
  margin: 0 auto;
  width: 30vw;
  min-width: 220px;
  max-width: 250px;
}

.appicon {
  border-radius: 50%;
  margin: 40px auto 0;
  width: 26vw;
  max-width: 120px;
}

.sendmail {
  color: #0066cc!important;
}
/*
スクロールトップボタン
*/
#scrollTop {
  background-color: rgba(162, 3, 163, 1) !important;
}

#scrollTop:after, #scrollTop:before {
  background-color: #ee45ee;
}

.volonte_color0 {
  color: #73006C;
}

.volonte_color1 {
  color: #a203a3 !important;
}

.volonte_color2 {
  color: #ee45ee !important;
}

.volonte_color3 {
  color: #EF83F0;
}

.volonte_color4 {
  color: #F4B2F1;
}

.btn.volonte_btn {
  border-radius: 5px !important;
  background-color: rgba(1, 15, 50, 0.5) !important;
  border-color: rgba(1, 15, 50, 0) !important;
}

/*
その他のアプリ
*/
.copyright-content .container {
  padding: 0;
}
#other-apps .container .footer__col-title {
    font-size: 16px;
    letter-spacing: -0.1px;
    line-height: 23px;
    margin-bottom: 24px;
    color: #333;
    font-weight: 600;
}
.footer__other-apps {
  padding-top: 0;
  padding-left: 0;
  margin-bottom: 40px;
}
.footer__other-apps-list {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__other-apps-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.footer__other-apps-item a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer__other-apps-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(74,67,62,0.15);
  flex-shrink: 0;
  display: block;
}
.footer__other-apps-item a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--c-start);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-smooth);
}
.footer__other-apps-item a:hover::after { transform: scaleX(1); }
.footer__other-apps-item a:hover { color: var(--c-start); }
.footer__other-apps-item span {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.65;
}

@media (max-width: 768px) {
  #other-apps .container{ padding: 0 30px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__other-apps-list { flex-direction: column; }
  .footer__other-apps-item { flex: none; }
}

@media (max-width: 480px) {
  #other-apps .container{ padding: 0 30px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__other-apps-list { flex-direction: column; }
  .footer__other-apps-item { flex: none; }
}