/*!
Theme Name:   Color Blog
Theme URI:    https://mysterythemes.com/wp-themes/color-blog
Author:       Mystery Themes
Author URI:   https://mysterythemes.com
Description:  Color Blog is the perfect WordPress theme entirely based on any kind of blog such as travel blogs, food blogs, personal blogs and many more. Build an amazing website with the core features and resourceful design that let you feel the awesome experience. Works perfectly with Elementor and Visual Composer that will help you create an enchanting website. It has a minimalist design, responsive and looks great on any kind of devices. Color Blog is Compatible with Gutenberg and GDPR, RTL and Translation ready, WooCommerce Compatible, SEO-Friendly and Compatible with all others popular plugins. Demos ready for download: https://demo.mysterythemes.com/color-blog-landing/ and for support: https://mysterythemes.com/support/
Version:      1.0.3
License:      GNU General Public License v3 or later
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  color-blog
Tags:         blog, portfolio, news, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, footer-widgets, rtl-language-support, theme-options, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Color Blog is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/
h2.company_profile_title{
    padding: 2% 0;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
    margin-bottom: 4%;
    font-size: 4rem;
    margin-top: 0%;
    border-bottom: 1px solid #e1e1e1;
    font-weight: normal;
}
img.company_profile_right_img{
    float: right;
    width: 55%;
    margin: 0 0 2% 2%;
}

h3.company_profile_middle_title{
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem;
    border-bottom: 1px solid #bdbdbd;
    padding-bottom: 2%;
    font-weight: normal;
    text-align: center;
    margin-top: 5%;
}

.company_profile_box p{
    margin-top: 0%;
    font-size: 2rem;
    color: black;
    line-height: 4rem;
}

.company_profile_box p.company_profile_sign{
    display: block;
    text-align: right;
    font-size: 2rem;
    font-weight: normal;
    margin-top: 0;
}

.company_profile_box p.company_profile_sign span{
    font-family: 'Noto Serif JP', serif;
    font-size: 3rem;
}

img.company_profile_left_img{
    float: left;
    margin: 2% 2% 2% 0;
    width: 55%;
}
.president_hello_youtube{
  float: left;
  width: 50%;
}
.president_hello_youtube iframe{
    width: 98%;
    margin-left: 1%;
    height: 250px;
}


.company_profile_wiki_box{
  text-align: right;
}

.president_hello_youtube::after {
  content: "";
  display: block;
  clear: both;
}

.president_hello_img_box{
    display: table;
}

.president_hello_img_inner_box{
    display: table-cell;
    width: 50%;
}

.president_hello_img_box p{
  text-align: center;
}


ul.timeline{
    padding-left: 0%;
    list-style-type: none;
    margin-left: 0;
    padding-top: 10%;
}
ul.timeline:before {
    position: absolute;
    top: 2%;
    left: 1%;
    width: 3px;
    height: 93%;
    content: '';
    background: #ff8000;
}

ul.timeline li.year{
    font-size: 9rem;
    color: #ffd5aa;
    font-weight: bold;
}

ul.timeline li.year:before{
    content: '●';
    font-size: 2rem;
    vertical-align: middle;
    color: #ff8000;
}

ul.timeline li.first{
    margin-top: -11%;
}

ul.timeline li.event{
    margin-left: 10%;
    margin-bottom: 20%;
    padding: 1% 3%;
    font-size: 1.7rem;
    border-left: 1px solid #e8e8e8;
}

ul.timeline li p{
    margin-bottom: 0;
}

ul.timeline li p.timeline_title{
    font-weight: bold;
    font-size: 2rem;
    text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
}
ul.timeline li p.timeline_comment{

}
ul.timeline li p.timeline_comment img{
    width: 35%;
    float: left;
    margin: 0 1% 1% 0;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 40px;
  width: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: 50%;
  height: 50px;
  border-bottom: 3px solid #f77b00;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 1% 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #ffb367;
    color: #454545;
}
.company_profile table{
    font-size: 1.7rem;
}
.company_profile table th{
    font-weight: bold;
    border: 1px solid #CCC;
    padding: 5px 10px;
    background: #efefef;
    text-align: center;
    vertical-align: middle;
}
.company_profile table td{
    padding-left: 2rem;
    padding-right: 2rem;
}
.company_profile table ul{
    list-style-type: none;
    margin-left: 0;
}
.company_profile table ul li.company_profile_title{
    font-weight: bold;
}
.company_profile table ul li.company_profile_body{
    margin-bottom: 5%;
    line-height: 2rem;
}
.company_profile table ul li.company_profile_body iframe{
    width: 100%;
}

ul.company_profile_permission li{

}






@media (max-width:979px) {}
@media (max-width:768px) {}
@media (max-width:480px) {
    .president_hello_youtube {
      float: none;
      width: 100%;
    }
    img.company_profile_right_img {
        float: none;
        width: 80%;
        margin: 0 0 2% 10%;
    }	
    h3.company_profile_middle_title {
        display: block;
        font-family: 'Noto Serif JP', serif;
        font-size: 2.4rem;
        border-bottom: 1px solid #bdbdbd;
        padding: 2%;
        font-weight: normal;
        color: #01018a;
        line-height: 3rem;
    }
    h2.company_profile_title {
        border-top: 5px solid #002990;
        border-bottom: 2px dotted #d8d8d8;
        padding: 2% 0;
        font-family: 'Noto Serif JP', serif;
        text-align: center;
    }
    .company_profile_box p{
        padding: 2%;
    }
    img.company_profile_left_img {
        float: none;
        margin: 0;
        width: 100%;
    }

    .last td:last-child {
        border-bottom: solid 1px #ccc;
        width: 100%;
      }
      .tbl-r02 {
        width: 98%;
        margin-left: 1%;
      }
      .tbl-r02 th,
      .tbl-r02 td {
    　　border-bottom: none;
        display: block;
        width: 100%;
      }
      .company_profile table td.tac {
        text-align: center;
      }
      ul.timeline:before {
        position: absolute;
           top: 2.1%;
           left: 2.5%;
           width: 3px;
           height: 93%;
           content: '';
           background: #ff8000;
        }
        ul.timeline li.first {
            margin-top: -21%;
        }
        ul.timeline li.event {
            margin-left: 6%;
            margin-bottom: 40%;
            padding: 1% 3%;
            font-size: 1.7rem;
            border-left: none;
        }
        ul.timeline li p.timeline_title {
            font-weight: bold;
            font-size: 1.8rem;
            text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
            line-height: 2.5rem;
            margin-bottom: 4%;
        }
        ul.timeline li p.timeline_comment {
            margin-bottom: 3%;
        }

        .president_hello_youtube iframe {
            width: 100%;
            margin-left: 0;
            height: 230px;
        }
        .president_hello_img_box p {
            text-align: center;
            font-size: 1.5rem;
            line-height: 2rem;
        }


}