@charset "UTF-8";

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

  /**************************************************
共通(モジュール)
***************************************************/
  body {
    font-size: 16px;
    line-height: 1.5em;
  }

  section {
    padding: 5vh 0;
  }

  .article-box {
    padding: 3vh 0;
  }

  .hidden-xs {
    display: none;
  }

  .title-exp {
    margin-bottom: 5vh;
    font-size: 0.9rem;
  }

  .article-title {
    font-size: 1.4rem;
  }

  .contents h2 {
    font-size: 1.6rem;
  }

  .sec-title {
    font-size: 1.6rem;
  }

  .scroll {
    overflow-x: auto;
  }

  .scroll table {
    min-width: 640px;
    margin: 0 10px 10px;
  }

  .scroll td {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
  }

  /**************************************************
コンテンツ幅
***************************************************/
  /**************************************************
ヘッダー
***************************************************/
  .header {
    z-index: 100;
  }

  header .logo {
    font-size: 10px;
    padding: 0 0 0 0;
  }

  .navbar-brand {
    height: 100%;
    font-size: 1.25rem;
  }

  .navbar {
    height: 80px;
    box-shadow: 3px 3px 3px 0px #666;
    padding: 10px 0 10px 10px;
  }

  .navbar-toggler {
    background: #fff;
    margin-right: 15px;
    padding: 0.15em 0.35em;
  }

  .navbar-collapse {
    padding: 0;
  }

  .navbar-light .navbar-nav .nav-link {
    color: #f3f3f2;
  }

  .nav-link i {
    color: #f3f3f2;
  }

  .navbar-brand img {
    height: 100% !important;
  }

  .navbar-light .navbar-toggler-icon {
    background-image: none;
  }

  .icon-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: #666;
    margin: 6.3px 0;
  }

  .navbar-nav {
    height: auto;
    overflow: scroll;
    border-bottom: 3px solid #f3f3f2;
    padding-bottom: 25px;
  }

  .navbar-collapse {
    background: #fff;
    z-index: 100%;
  }

  .navbar-collapse li {
    background: #fff;
    border-bottom: 1px solid #f3f3f2;
    font-family: "UD新ゴNT M";
  }

  .nav-item .nav-link {
    line-height: 50px;
  }

  .dropdown-menu {
    border-top: 1px solid #f3f3f2;
    padding: 0;
  }

  .dropdown-item {
    line-height: 40px;
    padding-left: 3em;
    font-size: 0.9em;
  }

  .header_tel {
    width: 50%;
    float: left;
    background: #EAF4FC !important;
  }

  .header_contact {
    width: 50%;
    float: right;
  }

  header h2 {
    padding: 5px 0 0;
    width: 55%;
  }

  .transform .navbar {
    padding: 15px 0 !important;
  }

  /**************************************************
フッター
***************************************************/
  .contact_box .read {
    font-size: 1.2rem;
    text-align: left;
    margin: 0 0 1em !important;
  }

  .contact_box .read span {
    font-size: 1.25em;
  }

  .contact_box .tel {
    font-size: 1.75rem;
  }

  footer .company-name {
    font-size: 1.25rem;
  }

  .footer-menu {
    padding: 5vh 0;
  }

  footer .shop-info {
    padding-top: 5vh;
    margin-bottom: 0;
    margin-top: 3vh;
    border-top: 1px solid #f3f3f2;
  }

  footer.nb-footer .footer-info-single ul li a {
    padding: 0.5em;
    font-size: 1rem;
    display: block;
  }

  footer.nb-footer .footer-info-single ul li {
    text-align: center;
  }



  /**************************************************
トップ
***************************************************/
  .main {
    width: 100%;
    padding: 80px 0 0;
    background-size: cover;
  }

  .main img {
    width: 90%;
    margin: auto;
  }

  .beginner-index {
    padding: 3vh 0 7vh 0;
    background: #f3f3f2;
  }

  .beginner-index h3 {
    font-size: 1.5rem;
  }

  .beginner-index .btn, #counseling-index .btn, #company-index .btn {
    margin-top: 3vh;
  }

  .blog-index {
    padding: 7vh 0;
  }

  .blog-index {
    background-attachment: inherit;
    background-size: auto;
  }

  .blog-index .section-title::after {
    bottom: -0.5em;
  }

  .blog-index .pickup {
    padding: 5vh 0 2vh;
  }

  .blog-index .box {
    background: #fff;
    width: 100%;
    margin: 0 auto 3vh;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
  }

  .blog-index .box .col-5 {
    padding: 0 0 0 15px;
    margin: 0;
  }

  .blog-index .box-body {
    padding: 1em 1em 1em 0;
  }

  .blog-index .pickup .photo {
    height: 180px;
  }

  .blog-index .pickup h4 {
    padding: 0 0 0 1em;
    font-size: 1.1rem;
    text-align: left;
    letter-spacing: 0;
    color: #666;
  }

  .blog-index .normal h4 {
    padding: 0;
    font-size: 1rem;
  }

  .blog-index .normal .photo {
    height: 100%;
  }

  .blog-index .pickup .date,
  .blog-index .normal .date {
    font-size: 0.85rem;
  }

  #counseling-index .menu {
    background: #f3f3f2;
    padding: 7vh 0;
  }

  .counselor-box,
  .company-box {
    padding: 7vh 3vw 5vh;
  }

  #company-index h3 {
    font-size: 1.75rem;
    margin-bottom: 0;
  }

  #company-index .title-en {
    margin-bottom: 0;
  }

  #new-index .section-title {
    text-align: center;
  }

  #new-index .section-title::after {
    display: none;
  }

  /**************************************************
下層共通
***************************************************/
  .sub-main {
    padding: 120px 0 60px;
  }

  .title-exp {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.7rem;
    margin-bottom: 1em;
  }

  .det-title {
    font-size: 1.5rem;
  }

  .sub-main .title {
    font-size: 1.5rem;
    padding: 0;
  }

  .sub-main .title::after {
    bottom: -1rem;
  }

  .sub-main .title h1 {
    font-size: 1.5rem;
  }

  .sub-main .title p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  .sub-main .sub-title {
    font-size: 0.9rem;
  }

  .sub-contents .section-title {
    border-left: none;
    padding: 0;
  }

  .section-title h2 {
    font-size: 1.65rem;
  }

  .contact_box {
    padding: 3vh 5vw;
  }

  .voice .box {
    padding: 2em;
  }

  .voice .col-lg-9 {
    padding: 0;
  }

  .voice .box .name {
    text-align: center;
    margin-top: 20px;
  }

  .voice .box h3 {
    font-size: 1.25rem;
    margin-bottom: 2vh;
  }

  .about .text-box {
    padding: 2em;
  }

  .case-box {
    margin-bottom: 10px;
  }

  .case-box h4 {
    font-size: 1.35rem;
    margin-bottom: 0.75em;
  }

  .case-box img {
    display: none;
  }

  .case .subject {
    font-size: 1rem;
  }

  .voice-box {
    padding: 2em 2em;
  }

  .user-voice h3 {
    font-size: 1.35rem;
    margin-bottom: 0.75em;
  }

  .user-voice .name p, .user-voice .pattern p {
    font-size: 1.15rem;
  }

  .user-voice img {
    width: 30%;
    margin: 0 37.5% 1em;
  }

  .flow-box {
    width: 96%;
    margin: 0 auto 10px;
  }

  .flow-box .text {
    padding: 2em 1em 1em;
  }

  .flow-box h3 {
    font-size: 1.35rem;

  }

  .fees .read p {
    font-size: 1.35rem;
    margin-bottom: 0;
  }

  .grant-flow .photo {
    display: none;
  }

  #profile .blog-index .blog-box,
  #beginner .blog-index {
    width: 90%;
    margin: auto;
  }

  #profile .blog-index .normal h4,
  #beginner .blog-index .normal h4 {
    min-height: auto;
  }

  /**************************************************
下層ページ
***************************************************/
  /*カウンセリング*/
  #recommend {
    padding: 7vh 0;
  }

  #recommend h2 {
    font-size: 1.2rem;
  }

  .recommend-list {
    padding: 1em;
    width: 100%;
  }

  .recommend-list li {
    font-size: 1.1rem;
    padding: 0.75em 0;
    line-height: 1.5em;
  }

  #about h2 {
    font-size: 1.5rem;
  }

  #about {
    background: none;
  }

  #usp {
    background: #f3f3f2;
  }

  #usp .point {
    width: 100%;
    padding-bottom: 0;
  }

  .point h3 {
    margin: 1em 0;
    font-size: 1.25rem;
  }

  #usp .col-lg-4 {
    padding: 3vh 5vw;
  }

  #merit .box {
    padding: 2em 1.5em;
    width: 100%;
  }

  #merit h3 {
    font-size: 1.35rem;
    text-align: left;
  }

  #voice .voice-box {
    padding: 2em 1.5em;
  }

  #voice .photo {
    width: 50%;
  }

  #voice h3 {
    font-size: 1.35rem;
    text-align: left;
    margin-bottom: 0.5em;
  }

  #voice .name {
    padding: 0 0.3em;
    text-align: center;
  }

  .case-detail .name {
    background: #2a4073;
    color: #fff;
    width: 100%;
  }

  .case-detail th {
    padding: 0;
    border: 0;
  }

  #voice .case-detail {
    margin-bottom: 3vh;
  }

  #tought .detail {
    padding: 3vh 5vw 0;
  }

  #tought .name {
    text-align: center;
  }

  #tought .name span {
    letter-spacing: 0;
  }

  #flow .flow-box {
    width: 90%;
  }

  #flow .title {
    width: 100%;
    font-size: 1.25rem;
    padding: 1em 0 0.5em 0;
  }

  #flow .step {
    font-size: 1.2rem;
    top: -10px;
    border: 1px solid #3a3737;
  }

  #flow .title h3 {
    position: relative;
    font-size: 1.35rem;
  }

  #flow .text {
    padding: 1.5em 1.5em 0.5em 1.5em;
  }

  #menu h3 {
    font-size: 1.35rem;
  }

  #menu th, #menu td {
    padding: 1em;
    display: block;
    width: 100%;
  }

  #menu h4 {
    font-size: 1.25rem;
    border: 1px solid #2a4073;
    text-align: center;
    padding: 0.35em;
    color: #2a4073;
  }

  .a_txt {
    margin-bottom: 5vh;
  }

  .a_txt dt {
    width: 80px;
    height: 80px;
  }

  .a_txt dd {
    font-size: 1rem;
    width: 80%;
    margin: 0;
  }

  .q_txt {
    margin-bottom: 3vh;
  }

  .q_txt dt {
    width: 80px;
    height: 80px;
  }

  .q_txt dd {
    font-size: 1rem;
    width: 80%;
    margin: 0;
  }

  /*初めての方*/
  .section-title .title-en {
    font-size: 0.5em;
  }

  #counseling-about li span {
    display: block;
    margin-top: 0.5em;
  }

  .counseling-btn {
    font-size: 1.25rem;
  }

  .tought .text {
    padding: 0;
  }

  /*会社概要*/

  .company h2, .history h2 {
    font-size: 1.6rem;
  }

  .company table {
    width: 100%;
  }

  .company th, .company td {
    display: block;
    padding: 1em 0.5em;
  }

  .company th {
    background: #f3f3f2;
    color: #2a4073;
    text-align: center;
  }

  .company td {
    text-align: center;
  }


  /*お問合せ*/
  .form .text,
  .form table {
    width: 100%;
  }

  .form th,
  .form td {
    display: block;
    padding: 1em;
  }

  .form th {
    width: 100%;
  }

  .form input,
  .form textarea {
    width: 100%;
    padding: 1em;
    border-radius: 6px;
  }

  .company td {
    padding: 2em 0;
  }

  .form input[type="checkbox"] {
    display: inline-block;
    width: auto;
    text-align: center;
  }

  .form input[type="radio"] {
    width: 100%;
  }

  .form .check label {
    padding: 1em 2em;
  }

  input[type="text"] {
    display: inline-block;
    width: 100%;
  }

  .form label {
    font-weight: normal;
    margin-bottom: 0;
    display: block;
    width: 100%;
    text-align: left;
  }

  /*** よくある質問  ***/

}

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

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

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

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