/* CSS Document */

/*Reboot*/
html {
    font-size: 14px; /* ルート要素のフォントサイズを1rem=14pxと定義する オリジナルは16px*/
} 
/*Container*/	
@media (min-width: 576px){
#poiunihome .container {
    max-width: 95%;
}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px){
#poiunihome .container {
    max-width: 1170px;
}
}
/* Color List*/
/*
3. Yellow, magenta, cyan and black
book cover design with yellow, magenta, cyan and black color combination
Book cover design by Stephen.
Hex code: #e2d810, #d9138a, #12a4d9 and #322e2f
https://en.99designs.jp/blog/creative-inspiration/color-combinations/
*/
.bg-poiuni-main{
	background-color: #6EC5E9;
}
/*
.bg-poiuni-main a{
	color: aliceblue;
}*/

.bg-poiuni-sub{
	background-color: #e6eff8;
}
.bg-poiuni-link{
	background-color: #C58ADE;
}

.btn-poiuni-main {
    background: #6EC5E9; /*好きな色; //ボタンの背景色*/
    color: white; /*//ボタンのテキストの色*/
}

.btn-poiuni-main:hover, .btn-poiuni-main:focus, 
.btn-poiuni-main:active, .btn-poiuni-main:active:focus, .btn-poiuni-main:active:hover, .btn-poiuni-main:active.focus,
.btn-poiuni-main.active, .btn-poiuni-main.active:focus, .btn-poiuni-main.active:hover, .btn-poiuni-main.active.focus,
.open > .dropdown-toggle.btn-poiuni-main, 
.open > .dropdown-toggle.btn-poiuni-main:hover,
.open > .dropdown-toggle.btn-poiuni-main:focus, 
.open > .dropdown-toggle.btn-poiuni-main.focus,
.btn-poiuni-main.disabled:hover, .btn-poiuni-main[disabled]:hover, fieldset[disabled] .btn-poiuni-main:hover,
.btn-poiuni-main.disabled:focus, .btn-poiuni-main[disabled]:focus, fieldset[disabled] .btn-poiuni-main:focus,
.btn-poiuni-main.disabled.focus, .btn-poiuni-main[disabled].focus, fieldset[disabled] .btn-poiuni-main.focus {
    background: #3BB0E1; /*好きな色; //ボタンの上にポインタを持ってきたり、クリックしたりした時の背景色*/
    color: white; /*ボタンの上にポインタを持ってきたり、クリックしたりした時のテキストの色*/
}

.btn-outline-poiuni-main {
	background: none;
    border: 1px solid #6EC5E9; /*好きな色; //アウトラインのみのボタンの線の色*/
    color: #6EC5E9; /*//アウトラインのみのボタンのテキストの色*/
}
.btn-outline-poiuni-main:hover, .btn-outline-poiuni-main:focus, 
.btn-outline-poiuni-main:active, .btn-outline-poiuni-main:active:focus, .btn-outline-poiuni-main:active:hover, .btn-outline-poiuni-main:active.focus,
.btn-outline-poiuni-main.active, .btn-outline-poiuni-main.active:focus, .btn-outline-poiuni-main.active:hover, .btn-outline-poiuni-main.active.focus,
.open > .dropdown-toggle.outline-btn-poiuni-main, 
.open > .dropdown-toggle.outline-btn-poiuni-main:hover,
.open > .dropdown-toggle.outline-btn-poiuni-main:focus, 
.open > .dropdown-toggle.outline-btn-poiuni-main.focus,
.outline-btn-poiuni-main.disabled:hover, .outline-btn-poiuni-main[disabled]:hover, fieldset[disabled] .outline-btn-poiuni-main:hover,
.outline-btn-poiuni-main.disabled:focus, .outline-btn-poiuni-main[disabled]:focus, fieldset[disabled] .outline-btn-poiuni-main:focus,
.outline-btn-poiuni-main.disabled.focus, .outline-btn-poiuni-main[disabled].focus, fieldset[disabled] .outline-btn-poiuni-main.focus 
{	
    background: #6EC5E9; /*好きな色; //ボタンの背景色*/
    color: white; /*//ボタンのテキストの色*/
}
/*
.bg-poiuni-sub a{
	color:gray;
}*/
/*Class Colors*/
.bg-basics{background-color:#39B54a}
.bg-beginners{background-color:#008Bd2}
.bg-intermediates{background-color:#fbb03b}
.bg-advanced{background-color:#ed1c24}

.btn-basics{background-color:#39B54a}
.btn-beginners{background-color:#008Bd2}
.btn-intermediates{background-color:#fbb03b}
.btn-advanced{background-color:#ed1c24}

.btn-poilab:hover{
	opacity: 80%;
}
.btn-poiuni:hover{
	opacity: 80%;
}
.border-basics{border-color:#39B54a!important}
.border-beginners{border-color:#008Bd2!important}
.border-intermediates{border-color:#fbb03b!important}
.border-advanced{border-color:#ed1c24!important}



/*Text*/

h1.blog-post-title {
	font-size: 1.2rem;
}
.blog-post h3 {
	font-size: 1.1rem;
}
.blog-post h4 {
	font-size: 1.05rem;
}
#collapserecommendeditems h5{
    font-size: 1.05rem;
}

.text-yellow{color: yellow}
/*
.primary-cateogory h3{
	font-size: 0.7rem;
}
*/
/*Layout Design*/
.sectionheader{margin-top:15px;}

/*button category list*/
.btn-category {
	color: #fff;
	background-color: #3EA6FF;
	border-color: #3EA6FF;
}
.btn-outline-category {
	color: #3EA6FF;
	border-color: #3EA6FF;
}
.badge-category{
	color: white;
	background-color: #3EA6FF;
}
/*Card Entry　カード
.card-entries h5.card-title{
	font-size: 1.0rem;
	margin-bottom: .3rem;	
}
.category-card-entries h5.card-entries{
	font-size: 1.2rem;
	margin-bottom: .3rem;	
}
.recommended-item h4.card-title{
	font-size: 1.0rem;
	margin-bottom: .3rem;	
}
.recommended-item .card-text{
	font-size: 0.7rem;
}
.card-entries .card-text{
	font-size: 0.7rem;
}
.card-entries p{
	margin-bottom:0.5rem; 
}
.card-entries ul{
	margin-bottom:0.5rem; 
}
*/
.card-entries .card img {
	width: 250px;
}

.active-entry{
	background: #F1F1F1;
}

/*メイン情報
.main-entry-relatedlinks h3{
	font-size: 	1.0 rem;
}
.main-entry-relatedlinks a{
	font-size: 1.0	rem;
}
*/
/*カルーセル*/
.carousel-multi-item .carousel-indicators li {
    height: 1.25rem;
    width: 1.25rem;
    max-width: 1.25rem;
    background-color: #4285f4;
    margin-bottom: -3.75rem;
}
.carousel-multi-item .carousel-indicators .active {
    height: 1.56rem;
    width: 1.56rem;
    max-width: 1.56rem;
    background-color: #4285f4;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

/*collapse icon*/
[data-toggle="collapse"] .fa:before {  
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f13a";
}

/*Playlist OverLay*/

.card-playlist .card-img-overlay{
	bottom: 80%;
    opacity: 90%;
    background: skyblue;
}

.card-toppage-playlist .card-img-overlay{
	background: url(http://www.poi-uni.com/img/youtubethumnail-oppcty-30.png);
}
.card-toppage-playlist .card-title{
    color: white;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

/*Top Page Jambotron Carousel*/
#TopJambotronCarousel .carousel-item{
	height: 20rem;
}
#TopJambotronCarousel .carousel-item img{
	height: auto;
	width:100%;
}

@media (max-width: 576px){
#TopJambotronCarousel .carousel-item img {
   height: 100%;
   width:auto;
}
}
/*Poi Uni Top About Yuta*/
#aboutYuta #yutaprofilephoto img{ max-height: 25rem}


/*Opacity*/
.opacity-0 {
  opacity: 0; }

.opacity-10 {
  opacity: 0.1; }

.opacity-20 {
  opacity: 0.2; }

.opacity-30 {
  opacity: 0.3; }

.opacity-40 {
  opacity: 0.4; }

.opacity-50 {
  opacity: 0.5; }

.opacity-60 {
  opacity: 0.6; }

.opacity-70 {
  opacity: 0.7; }

.opacity-80 {
  opacity: 0.8; }

.opacity-90 {
  opacity: 0.9; }

.opacity-100 {
  opacity: 1; }


/*Circle Buttons*/
/* https://codepen.io/jnbruno/pen/vNpPpW */
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}
/* original
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}
*/
.btn-circle {
    FONT-WEIGHT: 100;
    width: 20px;
    height: 20px;
    padding: 6px 0px;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 6px;
}
.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

/*カテゴリ記事カード　ダウンロード
a.card-download {position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1;
      width: 55px;
      height: 55px;
      padding: 12.5px 0;
	  border-radius: 100%;
	vertical-align: middle;
      font-weight: 700;
      text-align: center;
}
*/
@media (max-width: 600px){
.sticky-mobile {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1
}
	}

.navbar-research-result #search{width: 80%}

iframe#instagram-embed-0{margin:auto}

/*記事のサブインフォメーション
*/
#entry-sub-information .btn {
	font-size: x-small;
}