@charset "UTF-8";
/*@import url("btn.css");*/
/*-------------------------------
　変　数
-------------------------------*/
/*-------------------------------
　基　本
-------------------------------*/
* {
  font-famly: sans-seif; }

html {
  overflow: auto;
  scroll-behavior: smooth; }

body {
  line-height: 1.8;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  overflow: hidden;
  color: #3B4043; }

img {
  max-width: 100%; }

@media screen and (max-width: 640px) {
  .sp {
    display: inherit; }

  .pc {
    display: none !important; }

  .wrapper {
    margin: 0 auto;
    margin-right: 6%;
    margin-left: 6%; } }
@media screen and (min-width: 641px) {
  .sp {
    display: none !important; }

  .pc {
    display: inherit; }

  .wrapper {
    padding-left: 20px;
    padding-right: 20px; }

  .simplebar-placeholder {
    display: none; } }
@media screen and (min-width: 980px) {
  .wrapper {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0; } }
a:hover {
  opacity: 0.6; }

.flex {
  display: flex; }

/*-------------------------------
　共　通
-------------------------------*/
h2.basic {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 36px;
  position: relative;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 60px;
  letter-spacing: 2px; }
  h2.basic:after {
    content: '';
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    bottom: -25px;
    border-bottom: 2px solid #196FDD; }

h2.basic_icon {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 36px;
  position: relative;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 60px;
  letter-spacing: 2px; 
  }
  h2.basic_icon:after {
    content: '';
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    bottom: -25px;
    border-bottom: 2px solid #196FDD; }

.basic_icon_img{
    width:50px;  
    position: absolute;
    margin-left:-1.5em;
    top:0;}

h3.basic {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.2; }
  h3.basic.mt {
    margin-top: 60px; }

h4.blue {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  font-weight: bold;
  color: #196FDD;
  margin-bottom: 30px; }

p.lead {
  text-align: center;
  margin-bottom: 50px; }
  p.lead span {
    font-weight: bold;}
  p.lead span > span {display:inline-block;}
section.section {
  padding-top: 70px;
  padding-bottom: 70px; }
  section.section.bg {
    background-color: #F1F8FE; }

.imglist {
  display: flex;
  justify-content: center; }
  .imglist .block {
    padding-left: 13px;
    padding-right: 13px;
    box-sizing: content-box;
    width: 100%; }
    .imglist .block p.img {
      padding-bottom: 12px; }
    .imglist .block p.txt {
      font-size: 16px;
      line-height: 1.5;
      font-weight: bold;
      text-align: center; }

/***add 202503 ***/
h2.basic_topBL {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  color:#00529b;
  font-size: 40px;
  position: relative;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: 2px; }
p.lead2 {
  font-size:20px;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
  width:100%;}
    
  .topflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom:; }
    .topflex > p.topimg {
      width: calc((100% - 18px)/3) ; 
      margin-right: 6px;
      margin-bottom: 12px; }
      .topflex:last-child {
        margin-bottom: 0; }
@media screen and (max-width: 640px) {
    h2.basic_topBL {
      font-size: 26px;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: 1px; }
    p.lead2 {
      font-size:18px;
      text-align: left;
      margin-bottom: 30px;}
}

/***add end 202503 ***/

section.lead .imglist .block {
  width: 180px; }

section.master .imglist {
  flex-wrap: wrap; }
  section.master .imglist .block {
    width: 260px;
    margin-bottom: 30px; }

section.katsuyou .imglist {
  margin-top: 30px;
  margin-bottom: 30px; }

.fc_red {
  color: #E85E5E; }

.fwb {
  font-weight: bold; }

.honbun {
  font-size: 16px;
  text-align: left; }

.chushaku {
  text-align: right;
  margin-bottom: 6px;
  font-size: 12px; }

@media screen and (max-width: 640px) {
  h2.basic {
    font-size: 22px; }

.basic_icon_img{
    width:30px;  
    position: absolute;
    margin-left:-1.5em;
    top:0;}

  h3.basic {
    font-size: 20px; }

  section.section {
    padding-top: 40px;
    padding-bottom: 40px; }

  p.lead {
    margin-bottom: 30px; }

  .imglist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -30px; }
    .imglist .block {
      margin-bottom: 30px; }
      .imglist .block:last-child {
        margin-bottom: 0; }
      .imglist .block p.img {
        padding-bottom: 12px; }
      .imglist .block p.txt {
        font-size: 16px;
        line-height: 1.5;
        font-weight: bold;
        text-align: center; }

/**add 202503 **/
  .topflex {
      display: block;
      text-align:center;}
    .topflex > p.topimg {text-align:center;
        margin: 1em auto;
        width : 100%;}
    .topimg-top{width :80%;}
/* add-end */

  section.lead .imglist .block {
    width: 40%; }

  section.katsuyou .imglist {
    margin-top: 0px;
    margin-bottom: 0px; }
    section.katsuyou .imglist .block {
      margin-bottom: 0; }
}
/*-------------------------------
 　ヘッダーとKV
-------------------------------*/
header {
    z-index:99;
    position: fixed;
    background-color:#ffffff; 
    width:100%;}
  header .gnav{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
     margin: 15px;}
  header .logo {
    width: 170px; }
  header .globalmenu > li {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    padding-left: 3px; }
    header .globalmenu > li a {
      display: inline-block;
      text-decoration: none;
      font-weight: bold;
      color: #3B4043;
      font-size: 14px;
      line-height: 1;
      padding: 12px 16px;
      border-radius: 20px;
      box-sizing: border-box; }
    header .globalmenu > li.current a {
      background-color: #EBEBEB; }

.attention {
  background-color: #C3D9F6;
  color: #3B4043;
  font-size: 12px;
  text-align: center;
  padding: 4px; }
  .attention a {
    text-decoration: none;
    color: inherit; }
  .attention i {
    margin-left: 0.5em; }

@media screen and (max-width: 641px) {
header {
    z-index:99;
    position: fixed;}
   header .gnav{
     display: block;
     text-align: center;
     margin: 0; }
   header .logo {
     width: 140px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 5px;
     margin-bottom: 5px; }
   header .globalmenu {
     background-color: #C3D9F6;
     display: flex; }
     header .globalmenu > li {
        padding-left: 0px;
        flex-grow: 1; }
        header .globalmenu > li a {
          font-size: 3.5vw;
          padding: 14px 3vw;
          border-radius: 0;
          display: block; }
        header .globalmenu > li.current a {
          background-color: #9DC0EE; } }
.kv_top .kvimg {
  padding-top:74px;
  text-align: center;
  background-color: #B6D1E6; }
  .kv_top .kvimg img {
    margin-left: auto;
    margin-right: auto; }
.kv_top .kvlead {
  background-color: #f1f8fe; }
  .kv_top .kvlead .wrap.pc {
    max-width: 1126px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
    display: flex; }
    .kv_top .kvlead .wrap.pc .content {
      width: 54%;
      text-align: center;
      padding-bottom: 50px; }
      .kv_top .kvlead .wrap.pc .content .title {
        text-align: center;
        padding-top: 40px;
        padding-bottom: 20px; }
        .kv_top .kvlead .wrap.pc .content .title img {
          width: 294px; }
      .kv_top .kvlead .wrap.pc .content .txt {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
        line-height: 25px; }
        .kv_top .kvlead .wrap.pc .content .txt span {
          font-size: 12px; }
    .kv_top .kvlead .wrap.pc .device {
      width: 46%;
      margin-top: -36px; }
  .kv_top .kvlead .wrap.sp p.img {
    margin-top: -18px; }
  .kv_top .kvlead .wrap.sp p.txt {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 22px; }
    .kv_top .kvlead .wrap.sp p.txt span {
      font-size: 10px; }

@media screen and (min-width: 641px) and (max-width: 1126px) {
  .kv_top .kvlead .wrap.pc .content {
    padding-bottom: 20px; }
    .kv_top .kvlead .wrap.pc .content .title {
      padding-top: 20px;
      padding-bottom: 10px; }
      .kv_top .kvlead .wrap.pc .content .title img {
        width: 20vw; }
    .kv_top .kvlead .wrap.pc .content .txt {
      font-size: 1.5vw;
      line-height: 1.5; }
      .kv_top .kvlead .wrap.pc .content .txt span {
        font-size: 1.5vw; } }
/*-------------------------------
　リード
-------------------------------*/
.youtube_ume {
  text-align: center;
  margin-top: 60px; }

@media screen and (max-width: 640px) {
  .youtube_ume {
    width: 100%;
    aspect-ratio: 16 / 9; }

  .youtube_ume iframe {
    width: 100%;
    height: 100%; } }
/*-------------------------------
　サービス紹介
-------------------------------*/
section .service {
  display: flex;
  margin-bottom: 50px; }
  section .service .block {
    text-align: center;
    width: 100%; }
    section .service .block .ttl {
      padding-bottom: 20px; }
      section .service .block .ttl h3 {
        margin-bottom: 0; }
      section .service .block .ttl img {
        width: 70px; }
    section .service .block .img {
      padding-bottom: 30px; }
      section .service .block .img img {
        height: 250px;
        filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2)); }
    section .service .block .txt {
      padding-bottom: 30px; }
      section .service .block .txt .btn {
        margin-top: 15px; }
    section .service .block .link {
      display: flex;
      justify-content: center; }
      section .service .block .link p {
        padding-left: 5px;
        padding-right: 5px; }
        section .service .block .link p a img {
          width: 195px; }
    section .service .block.app {
      border-right: 2px dotted #708090;
      padding-right: 40px; }
    section .service .block.master {
      padding-left: 40px; }

h3.basic.blue {
  color: #196FDD;
  font-size: 24px; }
  h3.basic.blue span {
    font-size: 14px; }

@media screen and (max-width: 640px) {
  section .service {
    display: block;
    margin-bottom: 0; }
    section .service .block {
      border-bottom: 2px dotted #708090;
      padding-bottom: 30px;
      margin-bottom: 30px; }
      section .service .block .ttl img {
        width: 50px;
        margin-bottom: 10px; }
      section .service .block .img {
        padding-bottom: 30px; }
        section .service .block .img img {
          height: 200px; }
      section .service .block.app {
        border-right: none;
        padding-right: 0px; }
      section .service .block.master {
        padding-left: 0px; }

  h3.basic.blue {
    font-size: 20px; }
    h3.basic.blue span {
      font-size: 12px; } }
/*-------------------------------
　お知らせ
-------------------------------*/
section.section.news {
  padding-top: 40px; }

.topnews ul {
  border-bottom: 1px solid #C8C8C8; }
  .topnews ul > li {
    border-top: 1px solid #C8C8C8;
    padding-top: 30px;
    padding-bottom: 30px; }
    .topnews ul > li p.from {
      font-weight: bold; }
    .topnews ul > li p.txt {
      font-size: 14px;
      display: inline-block;
      padding-top: 6px;
      padding-bottom: 6px; }
    .topnews ul > li p.link {
      color: #196FDD;
      font-size: 14px; }
      .topnews ul > li p.link a {
        color: inherit; }
      .topnews ul > li p.link i {
        margin-right: 0.5em; }

@media screen and (max-width: 640px) {
  section.section.news {
    padding-top: 20px; }

  .topnews ul > li {
    padding-top: 20px;
    padding-bottom: 20px; }
    .topnews ul > li p.txt {
      font-size: 14px;
      display: inline-block;
      padding-top: 6px;
      padding-bottom: 6px; } }
/*-------------------------------
　ダウンロード
-------------------------------*/
section.section.download {
  padding-top: 20px;
  padding-bottom: 20px; }

.dlarea .block {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px; }
  .dlarea .block .ttl {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .dlarea .block .ttl p.icon {
      padding-right: 10px; }
      .dlarea .block .ttl p.icon img {
        height: 60px; }
    .dlarea .block .ttl p.txt {
      font-size: 20px;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700; }
      .dlarea .block .ttl p.txt span {
        display: inline-block; }
  .dlarea .block .content .appbtn {
    width: 160px;
    display: inline-block; }
    .dlarea .block .content .appbtn p {
      font-weight: bold;
      text-align: center; }
  .dlarea .block .content .btn {
    display: inline-block; }
  .dlarea .block + .block {
    border-top: 1px solid #C8C8C8; }

@media screen and (max-width: 640px) {
  .dlarea .block {
    flex-wrap: wrap;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px; }
    .dlarea .block .ttl p.icon img {
      height: 60px; }
    .dlarea .block .ttl p.txt {
      font-size: 18px;
      line-height: 1.4; }
    .dlarea .block .content {
      text-align: center;
      margin-top: 20px; }
      .dlarea .block .content .appbtn {
        width: 48%; }
      .dlarea .block .content .btn.line {
        display: inline-block;
        margin-top: -10px; }
        .dlarea .block .content .btn.line a {
          height: 50px;
          font-size: 12px;
          padding: 19px 15px;
          padding-top: 16px;
          min-width: auto; }
      .dlarea .block .content .btn.blue {
        margin-top: -20px;
        width: 80%; } }
/*-------------------------------
 FOOTER
-------------------------------*/
.bnavi {
  text-align: center;
  padding: 8px 0; }
  .bnavi ul {
    display: flex;
    justify-content: center;
    justify-content: space-around; }
    .bnavi ul li a {
      font-size: 14px;
      color: #FFF;
      text-decoration: none;
      padding: 5px 20px; }
      .bnavi ul li a i {
        padding: 0 4px; }

.pnavi {
  background-color: #fff;
  border-top: 1px solid #ddd;
  text-align: center; }
  .pnavi ul {
    display: block;
    margin: 10px 0; }
    .pnavi ul li {
      padding: 2px;
      width: 100%;
      font-size: 14px; }
      .pnavi ul li strong {
        font-weight: 900; }
      .pnavi ul li a {
        color: #666666;
        text-decoration: none;
        padding: 5px 5px; }
        .pnavi ul li a i {
          padding: 0 4px; }

.bottom {
  background-color: #196FDD;
  text-align: center;
  padding-top: 30px; }
  .bottom .name {
    width: 250px;
    margin: 0 auto;
    margin-bottom: 10px; }
  .bottom .flex {
    align-items: center; }
  .bottom .gamen {
    width: 50%;
    height: 170px;
    overflow: hidden; }
  .bottom .btn {
    padding-left: 10px;
    width: 50%; }

.social {
  padding: 40px 0; }

.copy {
  background-color: #EEEEEE;
  text-align: center;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .copy p {
    padding: 1em;
    padding-bottom: 0; }
  .copy ul {
    padding: 1em;
    display: flex; }
    .copy ul li {
      padding: 0 1em; }
      .copy ul li a {
        text-decoration: none;
        color: inherit; }
        .copy ul li a i {
          padding: 0 4px; }

@media screen and (min-width: 641px) {
  .bottom {
    padding-top: 10px; }
    .bottom .flex {
      justify-content: center; }
    .bottom .gamen {
      width: 200px;
      height: 170px;
      overflow: hidden; }
    .bottom .btn {
      padding-left: 30px;
      width: auto;
      text-align: center; }
      .bottom .btn img {
        width: 200px;
        margin: 0;
        margin-bottom: 10px; }
      .bottom .btn a {
        display: inline-block;
        width: 150px; }

  .social {
    padding: 20px 0; }

  .pnavi ul {
    display: flex;
    justify-content: center; }
    .pnavi ul li {
      width: auto; }

  .copy {
    justify-content: center; } }
/*-------------------------------
　バナーエリア
-------------------------------*/
section.section.banner {
  background-color: #F8F8F8;
  padding-top: 0;
  padding-bottom: 0; }
  section.section.banner .wrapper {
    padding: 40px;
    max-width: 100%; }
    section.section.banner .wrapper ul.bannerarea {
      display: flex;
      justify-content: center;
      margin-left: -8px;
      margin-right: -8px; }
      section.section.banner .wrapper ul.bannerarea > li {
        width: auto;
        padding-left: 8px;
        padding-right: 8px; }
        section.section.banner .wrapper ul.bannerarea > li img {
          width: 100%;
          max-width: 250px; }

@media screen and (max-width: 640px) {
  section.section.banner .wrapper {
    padding: 5% 0; }
    section.section.banner .wrapper ul.bannerarea {
      flex-wrap: wrap;
      margin-left: -8px;
      margin-right: -8px;
      justify-content: flex-start; }
      section.section.banner .wrapper ul.bannerarea > li {
        width: auto;
        padding: 8px;
        width: 50%; }
        section.section.banner .wrapper ul.bannerarea > li img {
          width: 100%;
          max-width: 250px; } }
/*-------------------------------
　第二階層共通
-------------------------------*/
section.kv_second {
  padding-top:92px;
  background: url("../img/bg_pc.jpg") center center;
  background-size: cover; }
  section.kv_second .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 280px;
    overflow-y: hidden; }
  section.kv_second h1.pagetitle {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #FFF;
    font-size: 36px;
    letter-spacing: 2px; }
  section.kv_second p.img.app {
    width: 250px;
    padding-top: 50px;
    margin-bottom: -50px; }
  section.kv_second p.img.master {
    width: 340px; }

.shadowbox {
  background-color: #FFF;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
  margin-bottom: 10px; }
  .shadowbox img {
    border-radius: 10px; }
  .shadowbox.box_phone {
    width: 210px; }
  .shadowbox.box_sq {
    width: 260px; }

@media screen and (max-width: 640px) {
  section.kv_second {
    background: url("../img/bg_sp.jpg") center center;
    background-size: cover; }
    section.kv_second .wrapper {
      height: 180px;
      overflow-y: auto;
      position: relative; }
    section.kv_second h1.pagetitle {
      font-size: 24px;
      letter-spacing: 0px;
      line-height: 1.2;
      text-align: center; }
    section.kv_second p.img {
      padding-top: 0;
      margin-bottom: 0;
      position: absolute;
      bottom: 0;
      right: 0; }
      section.kv_second p.img.app {
        width: 32vw;
        padding-top: 0;
        margin-bottom: 0; }
      section.kv_second p.img.master {
        width: 45vw;
        position: relative; }

  .shadowbox.box_phone {
    width: 200px; }
  .shadowbox.box_sq {
    width: 220px; }
  .shadowbox.box_pc {
    width: 220px; } }
/*-------------------------------
　マリンコンパスアプリ
-------------------------------*/
section.section .download {
  background: #FFFFD8;
  border-radius: 10px;
  padding: 30px;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  section.section .download h3.basic {
    margin-bottom: 0; }
    section.section .download h3.basic span {
      display: inline-block; }
  section.section .download .content {
    display: flex;
    justify-content: flex-end; }
    section.section .download .content .appbtn + .appbtn {
      margin-left: 5px; }
    section.section .download .content .appbtn img {
      width: 180px; }
    section.section .download .content .appbtn p {
      font-weight: bold;
      text-align: center; }

section.section.app .imglist .block {
  width: 210px; }

section.section.premium .imglist .block {
  width: 260px; }

  .scrollpc {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-right: -6%;
    margin-left: -6%; }

  .scrollpc .imglist {
    margin-left: calc(6% - 13px);
    margin-right: calc(6% - 13px);
    flex-wrap: nowrap !important;
    justify-content: flex-start; }


@media screen and (max-width: 640px) {
  section.section .download {
    padding: 20px;
    display: block;
    margin-left: -6%;
    margin-right: -6%;
    /*margin-bottom: -40px;*/ }
    section.section .download h3.basic {
      margin-bottom: 10px;
      font-size: 4vw; }
/*
div.download > div.content { margin-left:-1em;}
      margin-left: 5px; }
*/
  .scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-right: -6%;
    margin-left: -6%; }

  .scroll .imglist {
    margin-left: calc(6% - 13px);
    margin-right: calc(6% - 13px);
    flex-wrap: nowrap !important;
    justify-content: flex-start; }

  section.section.app .imglist .block {
    width: 200px; }

  section.section.master .imglist .block {
    width: 220px;
    margin-bottom: 0; }
    section.section.master .imglist .block p.txt {
      height: 8em; }

  section.section.premium .imglist .block {
    width: 220px; } }
.pservice {/*
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
 /* background: url("../img/chara.png") right bottom no-repeat;*/
/*  background-size: 170px auto;
  padding-right: 200px;*/
  text-align: center;
  margin-bottom: 50px; }
  .pservice table {
    width:100%;
    font-size: 16px;
    border: 1px solid #B2B2B2; }
    .pservice table thead th {
      text-align: center;
      font-size: 14px;
      background-color: #D9E8F9;
      padding: 0.5em;
      border: 1px solid #B2B2B2; }
      /*.pservice table thead th:nth-child(3) {
        background-color: #FFE0C5; }*/
    .pservice table tbody th {
      text-align: right;
      background-color: #F1F8FE;
      padding: 0.7em;
      border: 1px solid #B2B2B2; }
    .pservice table tbody td {
      background-color: #FFF;
      padding: 0.7em;
      text-align: center;
      width: 150px;
      border-bottom: 1px solid #B2B2B2;
      border-left: 1px dotted #B2B2B2; }
     /* .pservice table tbody td:nth-child(3) {
        background-color: #FFFFD8;
        color: #E95513;
        font-weight: bold; }*/

.pservice table td.tdleft{text-align:left;min-width:9em;}

@media screen and (max-width: 640px) {
  .pservice {
    background: none;
    padding-right: 0;
    margin-bottom: 30px; }
    .pservice table {
      font-size: 13px;
      line-height: 1.2;
      width: 100%; }
      .pservice table th {font-weight:bold;}
      .pservice table thead th {
        font-size: 12px;
        padding: 0.3em;
        vertical-align: middle; }
      .pservice table tbody td {
        text-align: center;
        width: 6em;
        vertical-align: middle; }
     .pservice table thead th.tahe{white-space: nowrap;}
     .pservice table td.tdleft{font-weight:bold;text-align:left;min-width:9em;}
    
}
.dousa {
  padding-left: 1.5em;
  margin-bottom: 30px; }
  .dousa p.ttl {
    font-weight: bold;
    margin-left: -1.5em;
    margin-bottom: 0.3em; }
    .dousa p.ttl:before {
      content: '●';
      color: #196FDD;
      margin-right: 0.5em; }

ul.dot {
  line-height: 1.6; }
  ul.dot li {
    padding-bottom: 6px;
    padding-left: 1.2em;
    text-indent: -1.2em; }
    ul.dot li:before {
      content: '・';
      margin-right: 0.2em; }

ul.kome {
  line-height: 1.6; }
  ul.kome li {
    padding-bottom: 6px;
    padding-left: 1.2em;
    text-indent: -1.2em; }
    ul.kome li:before {
      content: '※';
      margin-right: 0.2em; }

ul.num {
  line-height: 1.6;
  list-style-type: decimal;
  list-style-position: inside; }
  ul.num li {
    padding-bottom: 6px;
    padding-left: 1.2em;
    text-indent: -1.2em; }

@media screen and (max-width: 640px) {
  #dousa ul {
    font-size: 14px; } }
/*-------------------------------
　共有マスター
-------------------------------*/
.examplebox, .add_examplebox {
  background-color: #fff;
  padding: 20px;
  display: flex;
  margin-bottom: 20px; }
  .examplebox .img, .add_examplebox .img {
    padding-right: 25px; }
    .examplebox .img img, .add_examplebox .img img {
      border-radius: 70px;
      width: 140px;
      height: 140px;
      object-fit: cover;
      max-width: 140px; }
  .examplebox .content, .add_examplebox .content {
    text-align: left; }
    .examplebox .content p.cate, .add_examplebox .content p.cate {
      font-size: 14px;
      font-weight: bold;
      color: #196FDD;
      display: inline-block;
      border: 1px solid #196FDD;
      padding: 5px 15px;
      line-height: 1;
      margin-right: 10px;
      border-radius: 100vh; }
    .examplebox .content p.name, .add_examplebox .content p.name {
      font-size: 18px;
      font-weight: bold;
      display: inline-block; }
    .examplebox .content p.ttl, .add_examplebox .content p.ttl {
      font-size: 16px;
      margin-top: 6px;
      margin-bottom: 6px;
      line-height: 1.4; }
    .examplebox .content p.txt, .add_examplebox .content p.txt {
      font-size: 14px; }

.add_examplebox {
  padding: 0;
  margin-bottom: 0;
  background: none;
  display: block; }
  .add_examplebox .content {
    margin-bottom: 10px; }

.ttltext {
      font-size: 16px;
      font-weight:bold;
      margin-top: 6px;
      margin-bottom: 6px;
      line-height: 1.4; }
.dllink{
      color: #196FDD;
      font-weight:bold;
      text-decoration:none;}
    .dllink:hover{text-decoration: underline #FF3028;}

  .postp{
        width:100%;
        margin:0 auto;
        text-align:center;
}
  .postphoto{ 
        max-width:60%;}

@media screen and (max-width: 681px) and (min-width: 641px){
    .content2 { width:50%; text-align:right; }
    
}


@media screen and (max-width: 640px) {
  .postp{
        width:100%;
        margin:0 auto;
        text-align:center;}
      .postphoto{
          max-width:100%;}
  .examplebox {
    padding: 15px; }
    .examplebox .img {
      padding-right: 10px; }
      .examplebox .img img {
        border-radius: 30px;
        width: 60px;
        height: 60px;
        max-width: 60px; }
    .examplebox .content p.ttl {
      margin-top: 10px;
      margin-left: -70px;
      font-weight: bold; }
    .examplebox .content p.txt {
      margin-left: -70px; } 
    .content2 {
      width:100%;
      margin-top: 10px;
      font-weight: bold; }

}
/*-------------------------------
　ページトップ
-------------------------------*/
#page_top {
  width: 60px;
  height: 60px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #196FDD;
  border-radius: 50%;
  opacity: 0.6; }

/* Font Awesome */
#page_top::before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f325';
  font-size: 20px;
  color: #ffffff;
  position: absolute;
  width: 30px;
  height: 40px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center; }



/*-------------------------------
　スクロールバー非表示
-------------------------------*/
@media screen and (max-width: 640px) {
  ::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none; } }

/*リスト*/
ul.servicelist {
  font-size:1.1em;
  font-weight:bold;
  padding: 0.5em 0.5em 0.5em 5em;
  position: relative;
}
ul.servicelist li {
  line-height: 1.1;
  padding: 0.5em 1em;
  list-style-type: none!important;
}
ul.servicelist li:before {
  line-height: 0.7;
  font-size:1.4em;
  margin-right:1em;
  content: "⚫︎";
  position: absolute;
  left : 3em;
  color: #1e90ff;
}

img.topimg-app{width:300px;}

@media screen and (min-width: 980px) {
  .wrapper_wid {
    max-width:1100px;
    text-align:center;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0; } 
}

  .appflex1 {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom:; }
    .appflex1 > p.topimg {
         margin: 0 auto;
      width: calc(100% /4.1); 
      margin-right: 2px;
      margin-bottom: 12px; }
      .appflex1:last-child {
        margin-bottom: 0; }

  .appflex2 {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom:; }
    .appflex2 > p.topimg {
      width: calc((100% - 10px)/4); 
      margin-right: 12px;
      margin-bottom: 12px; }
      .appflex2:last-child {
        margin-bottom: 0; }
.spbr {
    display: none;
}
@media screen and (max-width: 640px) {
        .spbr {
            display: block;
        }
        ul.servicelist {
            padding: 0.5em 0.5em 0.5em 1em;
            position: relative;
        }

        ul.servicelist li:before {
        left : 0;
        color: #1e90ff;}  

        .appflex1 {
            width:100%;
            text-align:center;}

        .appflex1 > p.topimg {
             margin: 0 auto;
             display:block;
             width: 90%;
             margin-bottom: 12px; }
            .appflex1:last-child {
                 margin-bottom: 12px; }

        .appflex2 {
            width:100%;
            text-align:center;}

        .appflex2 > p.topimg {
             margin: 0 auto;
             display:block;
             width: 90%;
             margin-bottom: 12px; }
            .appflex2:last-child {
                 margin-bottom: 12px; }
}

.txleft{ text-align:left; font-size:0.9em;}
.sevsubtitle{font-weight:700; font-size:0.8em;display:block;}