@charset "UTF-8";
/*
@mixin mPc { 
	@media screen and (min-width: 961px) and (max-width: 1280px){
		@content;
	}	
}
*/
#service_index {
  /*************************************
  #service_info
  *************************************/
  /*************************************
  #for
  *************************************/ }
  #service_index #lead {
    text-align: center; }
    #service_index #lead ul.serviceLogo {
      max-width: 800px;
      margin: 0px auto;
      margin-bottom: 50px; }
      @media screen and (min-width: 768px) {
        #service_index #lead ul.serviceLogo {
          display: flex;
          justify-content: space-between;
          margin-bottom: 80px; } }
      #service_index #lead ul.serviceLogo li {
        text-align: center; }
        @media screen and (min-width: 768px) {
          #service_index #lead ul.serviceLogo li {
            width: 48%;
            display: table; } }
        @media screen and (min-width: 768px) {
          #service_index #lead ul.serviceLogo li a {
            display: table-cell;
            vertical-align: middle; } }
        #service_index #lead ul.serviceLogo li img {
          display: inline-block; }
      @media screen and (max-width: 767px) {
        #service_index #lead ul.serviceLogo img.sanbrain {
          margin-bottom: 40px;
          max-width: 350px; } }
      #service_index #lead ul.serviceLogo img.nobase {
        width: 200px; }
        @media screen and (max-width: 767px) {
          #service_index #lead ul.serviceLogo img.nobase {
            width: 150px; } }
    #service_index #lead .leadText {
      background-image: linear-gradient(90deg, #0bb8de, #0b5fb3);
      padding: 20px 20px;
      color: #ffffff; }
      @media screen and (min-width: 768px) {
        #service_index #lead .leadText {
          padding: 30px 30px; } }
      #service_index #lead .leadText strong {
        font-size: clamp(1.8rem, 0.4vw, 2rem); }
  #service_index #service_info {
    background: url("../images/home/story-vision_bg.jpg");
    background-size: cover; }
    #service_index #service_info .catch {
      font-size: clamp(2.8rem, 2.4vw, 4rem);
      font-family: "Times New Roman", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "source-han-serif-japanese", serif;
      margin-bottom: 4%;
      color: #005fb7;
      text-align: center;
      font-weight: bold; }
      @media screen and (max-width: 480px) {
        #service_index #service_info .catch {
          margin-bottom: 30px; } }
    #service_index #service_info table {
      border-collapse: collapse;
      width: 100%;
      font-size: 0.9375rem; }
    @media screen and (max-width: 767px) {
      #service_index #service_info table > tbody {
        border-left: 1px solid #000000; } }
    #service_index #service_info table > thead > tr {
      width: 100%;
      display: flex;
      flex-wrap: nowrap; }
      @media screen and (min-width: 768px) {
        #service_index #service_info table > thead > tr {
          display: table-row; } }
    #service_index #service_info table > thead > tr {
      width: 100%; }
    #service_index #service_info table > thead {
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      border-right: 1px solid #000; }
    #service_index #service_info table > thead > tr th {
      display: block;
      padding: 10px 10px;
      background-color: #f7f7f7;
      text-align: center;
      color: #000000;
      font-size: 1.6rem;
      font-weight: bold;
      border-bottom: 1px solid #000000;
      width: calc(100% / 2); }
      @media screen and (min-width: 768px) {
        #service_index #service_info table > thead > tr th {
          display: table-cell;
          width: 33.333%;
          font-size: 1.8rem;
          padding: 20px 10px; } }
      #service_index #service_info table > thead > tr th:first-of-type {
        display: none; }
        @media screen and (min-width: 768px) {
          #service_index #service_info table > thead > tr th:first-of-type {
            display: table-cell; } }
      #service_index #service_info table > thead > tr th:not(:last-of-type) {
        border-right: 1px solid #000000; }
      #service_index #service_info table > thead > tr th img.sanbrain {
        max-width: 200px;
        width: 100%; }
      #service_index #service_info table > thead > tr th img.nobase {
        max-width: 200px;
        width: 100%;
        margin-bottom: 10px; }
      #service_index #service_info table > thead > tr th span {
        background: #005fb7;
        color: #ffffff;
        display: inline-block;
        width: 120px;
        text-align: center;
        padding: 2px 10px;
        margin: 0px auto;
        border-radius: 4px; }
    #service_index #service_info table > tbody > tr {
      width: 100%;
      display: flex;
      flex-wrap: wrap; }
      @media screen and (min-width: 768px) {
        #service_index #service_info table > tbody > tr {
          display: table-row; } }
    #service_index #service_info table > tbody > tr th {
      padding: 10px 10px;
      display: block;
      width: 100%;
      color: #fff;
      border-bottom: 1px solid #cccccc;
      background-color: #00233f;
      text-align: center;
      box-sizing: border-box;
      font-weight: bold; }
      @media screen and (min-width: 768px) {
        #service_index #service_info table > tbody > tr th {
          padding: 20px 10px;
          display: table-cell;
          width: 33.333%;
          line-height: 1.2; } }
    #service_index #service_info table > tbody > tr td {
      padding: 15px 10px;
      display: block;
      width: calc(100% / 2);
      text-align: center;
      background-color: #ffffff;
      border-bottom: 1px solid #000000;
      box-sizing: border-box;
      font-size: 1.4rem; }
      @media screen and (min-width: 768px) {
        #service_index #service_info table > tbody > tr td {
          display: table-cell;
          width: 33.333%;
          padding: 20px 10px;
          font-size: 1.6rem; } }
      #service_index #service_info table > tbody > tr td.notice {
        background-color: #ffffff;
        border-right: 1px solid #000000; }
      #service_index #service_info table > tbody > tr td:not(:last-of-type) {
        border-right: 1px solid #000000; }
  #service_index #for {
    text-align: center;
    background-image: linear-gradient(90deg, #0a56a3, #0b5fb3 15%, #0bb8de);
    color: #ffffff; }
    @media screen and (min-width: 961px) {
      #service_index #for .inner {
        padding-bottom: 50px; } }
    #service_index #for p.point {
      font-size: clamp(2rem, 4vw, 4rem);
      font-family: "Times New Roman", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "source-han-serif-japanese", serif;
      font-weight: bold;
      line-height: 1.0; }
    #service_index #for p.text {
      font-size: clamp(1.6rem, 0.89vw, 2rem);
      margin-bottom: 50px; }
      @media screen and (min-width: 768px) {
        #service_index #for p.text {
          margin-bottom: 80px; } }
    #service_index #for .arrow {
      width: 100px;
      margin: 0px auto; }
  #service_index .linkArea {
    background: #00233f; }
    @media screen and (min-width: 961px) {
      #service_index .linkArea .inner {
        padding-top: 60px;
        padding-bottom: 60px; } }
    @media screen and (min-width: 961px) {
      #service_index .linkArea ul {
        display: flex;
        justify-content: space-between; } }
    #service_index .linkArea ul li {
      display: block;
      text-align: center; }
      @media screen and (min-width: 961px) {
        #service_index .linkArea ul li {
          width: 48%;
          background: #f7f7f7; } }
      #service_index .linkArea ul li a {
        display: block;
        padding: 20px 20px; }
        @media screen and (min-width: 961px) {
          #service_index .linkArea ul li a {
            padding: 30px 30px; } }
        #service_index .linkArea ul li a:hover {
          background: #f7f7f7; }
      #service_index .linkArea ul li img {
        margin-bottom: 20px;
        max-width: 250px; }
      #service_index .linkArea ul li .viewmore {
        max-width: 210px;
        margin: 0px auto;
        font-size: 1.6rem;
        color: #ffffff;
        display: block;
        padding: 10px 10px;
        font-family: "Jost", sans-serif;
        font-style: italic;
        font-weight: 500;
        background-image: linear-gradient(90deg, #0a56a3, #0b5fb3 15%, #0bb8de);
        position: relative; }
        @media screen and (min-width: 1281px) {
          #service_index .linkArea ul li .viewmore {
            font-size: 2.0rem; } }
        #service_index .linkArea ul li .viewmore::after {
          content: url("../images/common/arrow_thin_white.svg");
          display: inline-block;
          background-size: contain;
          position: absolute;
          width: 28px;
          top: 20%;
          padding-left: 5px; }
      #service_index .linkArea ul li:hover .viewmore {
        background: #005fb7; }

/*************************************
#sanbrain, #nobase
*************************************/
#sanbrain #service_lead, #nobase #service_lead {
  text-align: center; }
  @media screen and (min-width: 961px) {
    #sanbrain #service_lead .inner, #nobase #service_lead .inner {
      padding-bottom: 80px; } }
  #sanbrain #service_lead .logo, #nobase #service_lead .logo {
    text-align: center;
    margin-bottom: 50px; }
    @media screen and (min-width: 768px) {
      #sanbrain #service_lead .logo, #nobase #service_lead .logo {
        margin-bottom: 100px; } }
    #sanbrain #service_lead .logo img, #nobase #service_lead .logo img {
      margin-bottom: 30px; }
    #sanbrain #service_lead .logo.sanbrain, #nobase #service_lead .logo.sanbrain {
      max-width: 500px;
      margin: 0px auto; }
    #sanbrain #service_lead .logo.nobase, #nobase #service_lead .logo.nobase {
      max-width: 300px;
      margin: 0px auto; }
  #sanbrain #service_lead p.name, #nobase #service_lead p.name {
    font-size: 1.8rem;
    font-weight: bold; }
    @media screen and (min-width: 768px) {
      #sanbrain #service_lead p.name, #nobase #service_lead p.name {
        font-size: 2.2rem; } }
    #sanbrain #service_lead p.name span, #nobase #service_lead p.name span {
      background: #005fb7;
      color: #F3CE4D;
      padding: 2px 10px;
      border-radius: 4px;
      display: inline-block;
      width: 120px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #sanbrain #service_lead p.name span, #nobase #service_lead p.name span {
          width: 160px;
          font-size: 2.0rem; } }
  #sanbrain #service_lead .catch, #nobase #service_lead .catch {
    font-size: clamp(1.8rem, 4.4vw, 4rem);
    font-family: "Times New Roman", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "source-han-serif-japanese", serif;
    font-weight: bold;
    margin-bottom: 3%; }
  #sanbrain #service_lead .text, #nobase #service_lead .text {
    font-size: clamp(1.6rem, 1.2vw, 2.2rem);
    line-height: 2.0; }
#sanbrain #details, #nobase #details {
  background: url("../images/home/story-vision_bg.jpg");
  background-size: cover; }
  #sanbrain #details h2, #nobase #details h2 {
    font-weight: bold;
    color: #005fb7;
    line-height: 1.3;
    font-size: clamp(1.6rem, 0.82vw, 2rem);
    margin-bottom: 40px; }
    @media screen and (min-width: 768px) {
      #sanbrain #details h2, #nobase #details h2 {
        margin-bottom: 60px; } }
    @media screen and (max-width: 767px) {
      #sanbrain #details h2, #nobase #details h2 {
        text-align: center; } }
    #sanbrain #details h2 span.en, #nobase #details h2 span.en {
      padding-right: 18px;
      font-size: clamp(3.8rem, 5.54vw, 6.5rem);
      font-family: "Jost", sans-serif;
      font-style: italic;
      display: inline-block; }
      @media screen and (max-width: 767px) {
        #sanbrain #details h2 span.en, #nobase #details h2 span.en {
          width: 100%;
          text-align: center;
          padding-right: 0px; } }
  #sanbrain #details .table_details, #nobase #details .table_details {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    /* table幅を100%に指定 */
    border: none; }
  #sanbrain #details .table_details th,
  #sanbrain #details .table_details td, #nobase #details .table_details th,
  #nobase #details .table_details td {
    display: block;
    /* セルをブロック要素に指定 */
    width: 100%;
    /* セルを親要素いっぱいの幅に指定 */
    border: none;
    padding: 15px 10px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box; }
  #sanbrain #details .table_details th, #nobase #details .table_details th {
    font-weight: 700;
    color: #fff; }
    @media screen and (max-width: 767px) {
      #sanbrain #details .table_details th, #nobase #details .table_details th {
        background: #00233f; } }
  @media screen and (min-width: 768px) {
    #sanbrain #details .table_details th,
    #sanbrain #details .table_details td, #nobase #details .table_details th,
    #nobase #details .table_details td {
      display: table-cell;
      /* デフォルト値に指定 */
      border-bottom: 1px solid #ccc;
      color: #000;
      padding: 30px 10px;
      font-size: 1.8rem; }
    #sanbrain #details .table_details th, #nobase #details .table_details th {
      color: #00233f; }
    #sanbrain #details .table_details tr th:first-child, #nobase #details .table_details tr th:first-child {
      width: 250px;
      /* thの固定幅 */ }
    #sanbrain #details tbody, #nobase #details tbody {
      border-top: 1px solid #cccccc; } }
#sanbrain #price, #nobase #price {
  background: #ebebeb; }
  #sanbrain #price h2, #nobase #price h2 {
    font-weight: bold;
    color: #005fb7;
    line-height: 1.3;
    font-size: clamp(1.6rem, 0.82vw, 2rem);
    margin-bottom: 40px; }
    @media screen and (min-width: 768px) {
      #sanbrain #price h2, #nobase #price h2 {
        margin-bottom: 60px; } }
    @media screen and (max-width: 767px) {
      #sanbrain #price h2, #nobase #price h2 {
        text-align: center; } }
    #sanbrain #price h2 span.en, #nobase #price h2 span.en {
      padding-right: 18px;
      font-size: clamp(3.8rem, 5.54vw, 6.5rem);
      font-family: "Jost", sans-serif;
      font-style: italic;
      display: inline-block; }
      @media screen and (max-width: 767px) {
        #sanbrain #price h2 span.en, #nobase #price h2 span.en {
          width: 100%;
          text-align: center;
          padding-right: 0px; } }
  #sanbrain #price .price_catch, #nobase #price .price_catch {
    font-weight: bold;
    line-height: 1.3;
    font-size: clamp(2rem, 1vw, 2.5rem); }
  #sanbrain #price .ol, #nobase #price .ol {
    margin-bottom: 30px; }
    @media screen and (min-width: 768px) {
      #sanbrain #price .ol, #nobase #price .ol {
        margin-bottom: 50px; } }
  #sanbrain #price h3, #nobase #price h3 {
    font-weight: bold;
    color: #005fb7;
    font-size: clamp(2rem, 1vw, 2.5rem);
    margin-bottom: 10px; }
  #sanbrain #price .table_price, #nobase #price .table_price {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    /* table幅を100%に指定 */
    border: none;
    margin-bottom: 30px; }
  #sanbrain #price .table_price th,
  #sanbrain #price .table_price td, #nobase #price .table_price th,
  #nobase #price .table_price td {
    display: block;
    /* セルをブロック要素に指定 */
    width: 100%;
    /* セルを親要素いっぱいの幅に指定 */
    border: none;
    padding: 15px 10px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
    font-weight: bold; }
  #sanbrain #price .table_price th, #nobase #price .table_price th {
    font-weight: 700;
    color: #fff;
    background: #00233f;
    border: solid 1px #ccc; }
  #sanbrain #price .table_price td, #nobase #price .table_price td {
    border: solid 1px #ccc;
    background: #fff;
    color: #000; }
  @media screen and (min-width: 768px) {
    #sanbrain #price .table_price th,
    #sanbrain #price .table_price td, #nobase #price .table_price th,
    #nobase #price .table_price td {
      display: table-cell;
      /* デフォルト値に指定 */
      border-bottom: 1px solid #ccc;
      padding: 30px 10px;
      font-size: 1.8rem;
      text-align: center; }
    #sanbrain #price .table_price tr th:first-child, #nobase #price .table_price tr th:first-child {
      width: 450px;
      /* thの固定幅 */ }
    #sanbrain #price tbody, #nobase #price tbody {
      border-top: 1px solid #cccccc; } }
  #sanbrain #price strong, #nobase #price strong {
    font-size: 120%; }
  #sanbrain #price ul.service_about, #nobase #price ul.service_about {
    margin-bottom: 15px; }
    #sanbrain #price ul.service_about li p, #nobase #price ul.service_about li p {
      font-size: 1.4rem; }
  #sanbrain #price .include-service p, #nobase #price .include-service p {
    margin-bottom: 1px;
    padding-left: 1em;
    text-indent: -1em; }
  #sanbrain #price .nobase_plan, #nobase #price .nobase_plan {
    background: #ffffff;
    padding: 20px 20px; }
    @media screen and (min-width: 768px) {
      #sanbrain #price .nobase_plan, #nobase #price .nobase_plan {
        padding: 30px 50px; } }
#sanbrain #important, #nobase #important {
  background-image: linear-gradient(90deg, #0a56a3, #0b5fb3 15%, #0bb8de); }
  @media screen and (min-width: 961px) {
    #sanbrain #important .inner, #nobase #important .inner {
      padding-top: 60px;
      padding-bottom: 60px; } }
  #sanbrain #important p, #nobase #important p {
    color: #ffffff;
    font-size: clamp(1.8rem, 3.4vw, 3.5rem);
    font-family: "Times New Roman", "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "source-han-serif-japanese", serif;
    font-weight: bold;
    text-align: center; }
  #sanbrain #important .arrow, #nobase #important .arrow {
    width: 100px;
    margin: 0px auto; }

/*************************************
#sanbrain
*************************************/
/*************************************
#nobase
*************************************/
#nobase #for-owners {
  text-align: center;
  background: #ebebeb; }
  #nobase #for-owners h3 {
    font-weight: 500;
    margin-bottom: 30px;
    color: #005fb7;
    font-size: clamp(2rem, 4vw, 4rem); }
    @media screen and (max-width: 767px) {
      #nobase #for-owners h3 {
        text-align: center; } }
    @media screen and (min-width: 768px) {
      #nobase #for-owners h3 {
        margin-bottom: 75px; } }
  #nobase #for-owners dl.forList {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0px auto;
    margin-bottom: 15px; }
    #nobase #for-owners dl.forList dt {
      background-image: linear-gradient(90deg, #0a56a3, #0b5fb3 15%, #0bb8de);
      width: 10%;
      padding: 15px;
      border-radius: 5px 0px 0px 5px; }
      @media screen and (max-width: 480px) {
        #nobase #for-owners dl.forList dt {
          width: 50px; } }
    #nobase #for-owners dl.forList dd {
      background: #ffffff;
      width: 90%;
      text-align: left;
      padding: 15px;
      font-size: clamp(1.6rem, 2.4vw, 2.8rem); }
      @media screen and (max-width: 480px) {
        #nobase #for-owners dl.forList dd {
          width: -webkit-calc(100% -50px);
          width: calc(100% - 50px); } }