@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/* navbar collapse for iPad (bootstrap) */

@media ( min-width: 768px ) {
    #banner {
      min-height: 300px;
      border-bottom: none;
    }
    .bs-docs-section {
      margin-top: 8em;
    }
    .bs-component {
      position: relative;
    }
    .bs-component .modal {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      bottom: auto;
      z-index: 1;
      display: block;
    }
    .bs-component .modal-dialog {
      width: 90%;
    }
    .bs-component .popover {
      position: relative;
      display: inline-block;
      width: 220px;
      margin: 20px;
    }
    .nav-tabs {
      margin-bottom: 15px;
    }
    .progress {
      margin-bottom: 10px;
    }
    .slider img{
      border:0px;
      margin:5px;
    }
    .navbar {
      margin-bottom: 0px;
    }
    .jumbotron {
      padding-top: 60px;
      padding-bottom: 60px;
    }
    #searchbox {
      margin-top: 5px;
      margin-bottom: 5px;
    }
}
#thumb-v {
  margin-top: 0px;
  margin-bottom: 24px;
}
#thumb-v .sp-thumbnail-image-container {
	width: 180px;
	height: 60px;
}

#thumb-v .sp-thumbnail-image {
	height: 100%;
}


section.section {
  padding: 100px 0;
}
section.section.section-default {
  background-color: #f9f9f9;
}
section.section.section-inverse {
  background-color: #fafcff;
}
section.section .subtitle {
  margin-bottom: 24px;
  text-align: center;
}
section.section .subtitle h2 {
  margin-top: 0;
}

.point .point-box {
  text-align: center;
}
.point .point-box .point-circle {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  font-size: 60px;
  line-height: 100px;
  color: #fff;
  border-radius: 100%;
}
.point .point-box .point-circle.start {
  background-color: #18bc9c;
}
.point .point-box .point-circle.replace {
  background-color: #f39c12;
}
.point .point-box .point-circle.compass {
  background-color: #2c3e50;
}
.point .point-box .point-circle.japanese {
  background-color: #e74c3c;
}
.point .point-box .point-description{
  color: #18bc9c;
}
.point .point-box .point-description h4 {
  text-align: center;
}
.point .point-box .point-description p {
  text-align: justify;
}

.getting-started h3 {
  margin-top: 0;
}

.japanese-font .well > h3 {
  margin-top: 24px;
}

.available-bower {
  position: relative;
  overflow: hidden;
}
.available-bower .bower-logo {
  position: absolute;
  right: 40px;
  bottom: 0;
  width: 300px;
  height: 300px;
  background-image: url("../img/bower-logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
          background-size: contain;
  opacity: .3;
}

.tate { /* 縦書き用(spanタグに設定する) */
  writing-mode: tb-rl; /* IE用 */
  writing-mode: vertical-rl; /* Chrome、Firefox用 */
  margin: 0 auto;
  padding: 3px 3px 3px 5px !important;
  white-space: nowrap;
  width: 1em; /* firefox対策 */
  line-height: 1em; /* firefox対策 */
  text-orientation: upright;
  direction: ltr;
}
/* header class */
.box {
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
  background-color: #fff;
}
.box::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #3498db;
  border-radius: 4px;
}

.ribbon {
  position: relative;
  padding: .75em 1em;
  background-color: #e1f0fa;
}
.ribbon::before,
.ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  border-style: solid;
  border-color: transparent;
}
.ribbon::before {
  left: 0;
  border-width: 0 15px 15px 0;
  border-right-color: #cce5f6;
}
.ribbon::after {
  right: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-top-color: #cce5f6;
}
.marker{
margin-top: 1.5em;
color: #3498db;
font-weight: bold;
background: linear-gradient(transparent 70%, #cce5f6 70%);
}
/* header class end */


.featured .subtitle h2 {
  font-size: 24px;
}
.featured ul.featured-list a {
  opacity: .7;
}
.featured ul.featured-list a:hover, .featured ul.featured-list a:active, .featured ul.featured-list a:focus {
  opacity: .5;
}
.featured ul.featured-list li {
  padding: 6px 20px;
}

.thumbnail {
  background: #fff;
}
.thumbnail > a:hover, .thumbnail > a:active, .thumbnail > a:focus {
  opacity: .7;
}

footer {
  padding: 40px 0;
  color: #333;
  background-color: #d3e7ea;
}
footer .copyright {
  padding-top: 10px;
  padding-bottom: 10px;
}
.link_white a:link, .link_white a:visited, .link_white a:hover, .link_white a:active {
  color: #333;
}

.bootstrap-default {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4285;
}
.bootstrap-default > h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
}
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}
.row-eq-height a.btn{
    white-space: normal;
    height: 100%;
}
.nav-tabs {
  margin-bottom: 0px;
}
.tab-content {
  border: 1px solid #ccc;
  background-color: #fff;

}
.tab-pane ul {
  list-style-type: none;

  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #fff;

}
.tab-pane .date {
  display: inline-block;
  width: 6em;
  padding-bottom: 0px;
}
.tab-pane .title {
}
.slider-pro {
  background-color: #f6fafa;
}
.logo-bg {
  background-image: url("../img/jb_bg.png");
  background-repeat: repeat;
  background-color: #e4f2f0;
}
.sp-slide img{
  background-color: #fff;
}

/* --- add ---*/

.indent {
  padding-left:1em;
}

/* --- ファイルコンテナ ---*/
.ex1 {
	background-image      : url('/cms/wp-content/uploads/2019/02/fcon_back1.jpg');
	background-repeat     : no-repeat;
	background-position   : right bottom;
}
.ex2 {
	background-image      : url('/cms/wp-content/uploads/2019/02/fcon_back2.jpg');
	background-repeat     : no-repeat;
	background-position   : right bottom;
}
.ex3 {
	background-image      : url('/cms/wp-content/uploads/2019/02/fcon_back3.jpg');
	background-repeat     : no-repeat;
	background-position   : right bottom;
}
.ex4 {
	background-image      : url('/cms/wp-content/uploads/2019/02/fcon_back4.jpg');
	background-repeat     : no-repeat;
	background-position   : right bottom;
}

/* ボタンテキストの折り返し */
.btn_side {
	white-space: normal;
}