﻿/* Move down content because we have a fixed navbar that is 50px tall */

html{
    /*font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    /*font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;*/

}

body {
    /*padding-top: 50px;
    padding-bottom: 20px;*/

    /*font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    /*font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;*/

    /*background-color:#e9f6ff;*/
    /*background-color:#f2faff;*/
        
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 100%;
    /*max-width: 280px;*/
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

.jumbotron-extend {
    max-height: 220px;
    /*min-height: 180px;*/
    /*margin-top: -70px;*/
    margin-bottom: 10px;
    /*background: no-repeat center center;*/
    background: url(../img/highway2.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 5px;
    min-height:150px;
 
}
.jumbotron-container {
    position: relative;
    /*top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 30px;
    padding-right: 30px;*/
}

@media screen and (min-width: 991px) {
    .jumbotron-extend {
        margin-top: -70px;
    }
}

@media screen and (max-width: 990px) {
    .jumbotron-extend {
        margin-top: -70px;
    }
}

@media screen and (max-width: 767px) {
    .jumbotron-extend {
        margin-top: -35px;
    }
}

.site-name1, .site-name2 {
    margin-bottom: 10px;
    /*font-family: 'Playfair Display', serif;*/

    color: #416eff;
    /*color: #029cda;*/

    /*color: white;*/
    font-weight: bold;
    opacity: 0;

    /* 縁取り 白 */
    /*text-shadow: 2px 2px 1px #ffffff,
    -2px 2px 1px #ffffff,
    2px -2px 1px #ffffff,
    -2px -2px 1px #ffffff;*/

    /* 縁取り 灰色 */
    /*text-shadow: 2px 2px 1px #636363,
    -2px 2px 1px #636363,
    2px -2px 1px #636363,
    -2px -2px 1px #636363;*/

    /* 縁取り 黒 */
    /*text-shadow: 2px 2px 1px #000,
    -2px 2px 1px #000,
    2px -2px 1px #000,
    -2px -2px 1px #000;*/

    /* 影 白 */
    text-shadow: 2px 2px 1px #ffffff;

    /* 影 黒 */
    /*text-shadow: 2px 2px 1px #000000;*/

    /* 影 灰色 */
    /*text-shadow: 2px 2px 1px #999999;*/

    text-align: justify;
    letter-spacing: .1em;

    max-width: 100%;

}

.site-name1{
    /* 株式会社 */

    /* レスポンシブ */
    font-size: 4.2vmin;

    /*font-size: 32px;*/
}
.site-name2 {
    /* 東光コンサルタンツ */

    /* レスポンシブ */
    font-size: 5.3vmin;

    /*font-size: 32px;*/
}

.company-name1, .company-name2 {
    
    /*margin-bottom: 10px;*/
    /*font-family: 'Playfair Display', serif;*/

    color: #416eff;
    /*color: #029cda;*/

    /*color: white;*/
    font-weight: bold;

    /* 影 白 */
    /*text-shadow: 2px 2px 1px #ffffff;*/

    text-align: justify;
    letter-spacing: .1em;
    max-width: 100%;

}

.company-name1{
    /* 株式会社 */

    /* レスポンシブ */
    font-size: 3.2vmin;
    /*font-size: 32px;*/
    color:#0000ff;
    /*margin-bottom:5px;*/
}

.company-name2{
    /* 東光コンサルタンツ */

    /* レスポンシブ */
    font-size: 3.8vmin;
    /*font-size: 32px;*/
    color:#0000ff;
    /*margin-bottom:5px;*/
}

@media (max-width: 767px) {

    #company-name1, #company-name2{
        /*font-size: 5.2vmin;*/
    }

    #sub-title1, #sub-title2{
        font-size: 4vmin;
    }

}

.pronoun1{
    font-size: 2.5vmin;
    /*font-weight:bold;*/
    /*padding-bottom:5px;*/
    /*margin-bottom:-10px;*/
    text-align: justify;
    letter-spacing: .1em;
    max-width: 100%;
}

.pronoun2{
    font-size: 2.7vmin;
    /*font-weight:bold;*/
    text-align: justify;
    letter-spacing: .1em;
    max-width: 100%;
}

.jumbotron2{
    margin-top:5px;
    margin-bottom:0px;
    padding-top:15px;
    padding-bottom:0px;
    background-color:white;

    text-align: justify;
    letter-spacing: .1em;

}

.jumbotron2 img{
    margin-right:20px
}

.jumbotron2 p{
    /*padding-left:100px;
    padding-right:160px*/
}

@media screen and (max-width: 990px) {
    .jumbotron2 img{
        margin-right:10px
    }

    .jumbotron2 p{
        padding-left:35px;
        padding-right:0px
    }
}

@media (max-width: 767px) {
    .jumbotron2 img{
        margin-right:10px
    }

    .jumbotron2 p{
        padding-left:0px;
        padding-right:0px
    }

    .jumbotron2 .pull-left {
      float:none !important;
      text-align:center;
    }

}

.jumbotron3{
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
    background-color:white;

    text-align: justify;
    letter-spacing: .1em;

}

.jumbotron3 img{
    margin-right:20px
}

.jumbotron3 p{
    font-size:17px;
    padding-left:160px;
    padding-right:110px
}

@media screen and (max-width: 990px) {
    .jumbotron3 img{
        margin-right:15px
    }

    .jumbotron3 p{
        padding-left:0px;
        padding-right:0px
    }
}

@media (max-width: 767px) {
    .jumbotron3 img{
        margin-right:10px;
        display: block;
		text-align: center;
    }

    .jumbotron3 p{
        padding-left:0px;
        padding-right:0px
    }

    .jumbotron3 .pull-left {
      float:none !important;
      text-align:center;
    }

}

.sub-title1, .sub-title2 {
    color: white;
    font-weight: bold;
    text-align: justify;
    letter-spacing: .1em;
    margin-right: 30px;

    opacity: 0;

    /* レスポンシブ */
    font-size: 3.4vmin;
}

.sub-title1{
    /* 影 */
    text-shadow: 1px 1px 1px green;
}

.sub-title2{
    /* 影 */
    text-shadow: 1px 1px 1px #416eff;
}

.toko-logo{
    position: absolute;
    right: 0;
    top: 0;
}

#page-top {
    position: fixed;
    bottom: 18px;
    right: 20px;
    /*font-size: 80%;*/
}
 
#page-top a {
    display: block;
    background: #666;
    color: #fff;
    width: 185px;
    padding: 13px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}
 
#page-top a:hover {
    background: #999;
    text-decoration: none;
}

@media (max-width: 767px) {
    #page-top {
        position: fixed;
        bottom: 8px;
        right: 10px;
        /*font-size: 80%;*/
    }

    #page-top a {
        display: block;
        background: #666;
        color: #fff;
        width: 150px;
        padding: 4px 0;
        text-align: center;
        text-decoration: none;
        border-radius: 6px;
        font-size: 13px;
    }
}

.caption-extend{
    /* ブルーグレー */
    /*color: #637282;*/ 

    text-align: justify;
    letter-spacing: .1em;
}

.text
{
    line-height: 150%;
    margin: 1em;
    text-align: justify;
    letter-spacing: .1em;
}

.text2
{
    line-height: 150%;
    margin-left: 1em;
    text-align: justify;
    letter-spacing: .1em;
}

.big-text{
    font-weight: bold;
    /*color: steelblue;*/
    color: #416eff;
    text-align: justify;
    letter-spacing: .1em;
}


/* パネル内部の余白を相殺 */
.panel-body{
    /*padding-top: 0px;
    margin-top: -15px;*/
}

.row-eq-height { 
    display: flex; 
    flex-wrap: wrap; 
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.boxbox{
  float: left;
}
@media(max-width: 768px) {
  .boxbox{
    float: none;
  }
}

@media(max-width: 768px) {
  p,img{
    float: none;
  }
}

.work-title{
    font-size:20px;
    font-weight:bold;
    text-align: justify;
    letter-spacing: .1em;
}

.work-sub{
    padding-top: 30px;
    text-align: justify;
    letter-spacing: .1em;
}

.work-caption
{
    font-size:18px;
    font-weight:bold;
    line-height: 150%;
    text-align: justify;
    letter-spacing: .1em;
}

.work-text
{
    /*margin-top:-5px;*/
    line-height: 150%;
    text-align: justify;
    letter-spacing: .1em;
}

.list-group .list-group-item{
    padding-top: 3px;
    padding-bottom: 3px

}

@media screen and (min-width: 990px) {
    .navbar-nav > li > a {
        text-align: center;
        width: 145px;
    }

}

@media screen and (min-width: 768px) {
    .panel-indent{
        margin-left:32px;
    }
}

@media (max-width: 767px) {
    .table{
        margin-left: 0px;
    }
}

.title {
    background-color: #428bca;
    /*background-color: #416eff;*/
    color:white;
    font-size: 18px;
    font-weight:bold;
    text-align: justify;
    letter-spacing: .1em;
}

.img-responsive-overwrite{
    margin: 0 auto;
}

@media (max-width:768px){
     /*.col-sm-3, .col-sm-4 .col-sm-6 {
        width: 100%;
     }*/
}

/* カラムの幅をひろげる */
.no-gutter > [class*='col-'] {
    padding-right:15px;
    padding-left:15px;
}

.image-bordered{
    border: 1px ridge #fefefe;
}

.underline1{
    border-bottom: 2px solid lightgrey;
    padding-bottom: 15px;
}

/**********アニメーション設定**********/
/*右から左*/
@keyframes RightToLeft {
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(50px);/* X軸方向に50px */
    }
    20% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);/* X軸方向に0px */
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);/* X軸方向に0px */
    }
}

/*下から上*/
@keyframes SlideUp {
    0% {
        opacity: 0;/* 透明 */
        transform: translateY(50px);/* Y軸方向に50px */
    }
    20% {
        opacity: 1;/* 不透明 */
        transform: translateY(0);/* Y軸方向に0px */
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateY(0);/* Y軸方向に0px */
    }
}

/*上から下*/
@keyframes SlideDown {
    0% {
        opacity: 0;/* 透明 */
        transform: translateY(-50px);/* Y軸方向に-50px */
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateY(0);/* Y軸方向に0px */
    }
}

/**********アニメーション設定end**********/

/*ヘッダーを上から下へ*/
#blog-title {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*グローバルナビを上から下へ*/
#top-editarea {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*記事一覧を下から上へ*/
.page-archive .archive-entries .archive-entry {
animation-name: SlideUp;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*記事タイトルを右から左へ*/
.page-entry .entry-title {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

.table{
    max-width: 97%;

}

.heading {
  background: #2a9324;
  padding: 5px 15px;
  border-radius: 5px 5px 5px 5px;
  color: #fff;
  font-weight:bold;
}

.topics-date{
    /*margin-top: 0;*/
    text-align:right;
    margin-bottom: 0;
    margin-right:20px;
    text-align: justify;
    letter-spacing: .1em;
    color:#696969;
    font-weight:bold;
}

.topics-caption{
    margin-top: 0;
    /*margin-bottom: 0;*/
    text-align: justify;
    letter-spacing: .1em;
}

.senior-text{
    line-height: 150%;
    /*text-align: justify;*/
    letter-spacing: .1em;
}

/* */
table {
	 border-collapse: collapse;
 }
 
@media (max-width: 767px) {
	table {
		width: 100%;
	}
	th,td {
		display: block;
		text-align: left;
		width: 100%;
	}
}

th, td {
    padding-right: 18px;
    padding-bottom: 10px;
    vertical-align:top;
}
 
.media{
    margin-bottom:20px;

}

.heading1{
    position: relative;
    padding: .25em 0 .5em .75em;
    margin-top: .85em;
    margin: .85em 0;
    border-left: 6px solid #3498db;
    font-weight:bold;
}
.heading1::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
}

.heading2{
    padding: .6em .75em;
    margin-top: 0;
    margin-bottom: .75em;
    background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
    background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);

    font-size: 19px;
    font-weight:bold;
    text-align: justify;
    letter-spacing: .1em;

    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 

}

/* パンくずリスト */
.breadcrumb {
    margin-top:-10px;
}

.breadcrumb li {
    float: none;
    display: inline;
}
.breadcrumb > li + li:before {
    content: "/";
    /*content: "-";*/
}

/* 
    2019-01-24 Thu.
    navbarの色をカスタマイズ
    text-primary に合わせる

    **************************************************************************
    ここから
*/

.navbar-default {
  background-color: #ffffff;
  border-color: #babcba;
}
.navbar-default .navbar-brand {
  color: #3d3d3d;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #3d3d3d;
}
.navbar-default .navbar-text {
  color: #3d3d3d;
}
.navbar-default .navbar-nav > li > a {
  color: #3d3d3d;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #3d3d3d;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #f3f3f3;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #3d3d3d;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #69b4e6;
  /*background-color: #428bca;*/
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #babcba;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #69b4e6;
  /*background-color: #428bca;*/
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #69b4e6;
  /*background-color: #428bca;*/
}
.navbar-default .navbar-toggle {
  border-color: #69b4e6;
  /*border-color: #428bca;*/
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #69b4e6;
  /*background-color: #428bca;*/
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #3d3d3d;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #3d3d3d;
}
.navbar-default .navbar-link {
  color: #3d3d3d;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #3d3d3d;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #69b4e6;
        /*background-color: #428bca;*/
    }
}

/*
    ここまで
    ****************************************************************************
*/

.pagination {
    margin: 0px !important;
}

.control-label{
    padding: 0px;
}

.navbar-brand {
    background: url("../img/toko.png") no-repeat center center;
    background-size: contain;
    height: 50px;
    width: 50px;
}

/* ハンバーガーメニュー変更 */
.navbar-toggle:before {
    /*color: #3d3d3d;
    font-size:13px;
    font-weight:bold;
    content: "MENU";*/
    /*padding-left: 3px;
    padding-right: 3px;
    padding-top: 16px;
    padding-bottom: 16px;*/
}

.navbar-toggle {
    color:#3498db;
    font-size:15px;
    font-weight:bold;

}

.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus {
    color:white;
}

.navbar-nav .open .dropdown-menu > li > a {
    line-height: 25px;
}
  
.red-text{
    color:red;
}

@media screen and (min-width: 991px) {
    #homebar{
        margin-top:0px;
        margin-right:5px;
    }

    #header1 {
        
    }

    #header2 {
       
    }
}

@media screen and (max-width: 990px) {
    #header1 {
        
    }

    #header2 {
        text-align:center;
        
    }
}

@media screen and (min-width: 768px) {
    #homebar{
        margin-top:0px;
        margin-right:5px;
    }

    #menu{
        display:block;
    }

    #mynavbar{
        display:none;
    }
}

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

    }

    #header2 {


    }

    #homebar{
        margin-top:50px;
    }

    #menu{
        display:none;
    }

    #mynavbar{
        display:block;
    }
}

.btn {
    /*padding:5px;*/

}

.li-extend{
    margin:7px;

}