﻿/* ------ root ------ */

:root {

    /* アンファーブルー */
    --angfa_blue: #00B5E6;

    /* メインテキストカラー */
    --main_text_color: #111111;

    /* コンテンツ背景色_薄水色 */
    --contents_color_1: #DAEFF5;
    /* コンテンツ背景色_薄灰色 */
    --contents_color_2: #F0F0EE;

    /* フッター */
    --footer_color: #F0F0EE;

    /* スペース */
    --space_30: 20px;

}


/* ------ 追加スタイルここに記載する ------*/
/* ------ 追加スタイルここに記載する ------*/

.main-content {
    margin: 0 auto;
    width: 60vw;
    height: auto;
}

.news-date {
    width: 100%;
    height: 10vh;
    background: var(--contents_color_2);

    text-align: center;

    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    color: #3d3d3d;
}

.news-date p span {
    font-size: 1em;
    font-weight: lighter;
}

.news_main_title {
    padding: 3em 0 0 0;
    width: 100%;
    height: auto;

    background: var(--contents_color_2);

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #3d3d3d;
}

.news_main_title h1 {
    margin: 0;
    padding: 0;
    font-size: 2em;
    line-height: 1.5em;
}

.news-attention {
    font-weight: bold !important;
}

.news-attention-title {
    font-size: 1.3em;
}

.attention-color {
    color: #00B5E6;
}


/* ------ under_main_title ------ */
/* ------ under_main_title ------ */

.under_main_title {
    width: 100%;
    height: 230px;

    background: var(--contents_color_2);

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #3d3d3d;
}

/* ------ under_contents_wrap ------ */
/* ------ under_contents_wrap ------ */

.under_contents_wrap {
    width: 100%;
    height: auto;

    padding: 40px 0;
    margin-top: var(--space_30);
    margin-bottom: var(--space_30);

    background: var(--contents_color_2);
}

/* ------ under_contents_main_wrap ------ */
/* ------ under_contents_main_wrap ------ */

.under_contents_main_photo {
    width: 900px;
    height: auto;

    border-radius: 30px;

    margin: 0 auto;

    /*background: var(--angfa_blue);*/

    overflow: hidden;
}

/* ------ under_contents ------ */
/* ------ under_contents ------ */

.under_contents {
    width: 900px;
    height: auto;

    padding: var(--space_30);

    margin: 0 auto;
    margin-top: var(--space_30);
}



.under_main_site_wrap {
    width: 100%;
    height: auto;
    padding-bottom: var(--space_30);

    background: var(--contents_color_1);

    text-align: center;

    color: #3d3d3d;
}

.under_main_site_wrap > h1 {
    padding-top: 50px;
    margin-top: 0;

    font-size: 4em;
}

.under_main_site_other {
    width: 1200px;
    height: auto;

    padding: var(--space_30) 0;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
}



.corporate_txt_h1 {
    display: none;
}

.corporate_txt_h4 {
    display: none;
}

.firstview_text_hidden {
    display: none;
}

.research_wrap {
    width: 100%;
    height: auto;
    margin-bottom: 35px;
}

.research_wrap > dt {
    width: 100%;
    font-size: 1.6rem;

    padding-bottom: 8px;
    border-bottom: 3px solid #555555;
}

.research_wrap > dd {
    max-width: 900px;
    margin: 0;
    padding: 1.6em 0 1.6em 3.5em;
    font-size: 1.1rem;
    border-bottom: 1px solid #555555;
    line-height: 1.7rem;

    position: relative;
}

.research_year {
    font-size: 0.7em;
}


.research_wrap > dd .research_month {
    position: absolute;
    top: 1.6em;
    left: 0;
    /*display: inline-block;*/
    /*margin: 0 0 0 -1em; */
}



.under_contents > p {
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 200%;
    letter-spacing: 4px;
    text-align: justify;
}

.under_contents > p:nth-child(2) {
    margin-bottom: 50px;
}













/* ------ sp ------ */
/* ------ sp ------ */
/* ------ sp ------ */
/* ------ sp ------ */
/* ------ sp ------ */



@media screen and (max-width: 640px) {

    /* ------ 追加スタイルここに記載する ------*/
    /* ------ 追加スタイルここに記載する ------*/

    .main-content {
        width: inherit;
    }

    .news-date {
        width: 92%;
    }

    .news_main_title h1 {
        width: 85%;
        font-size: 1.25rem;
        text-align: justify;
    }

    .news-attention-title {
        font-size: 1em;
    }














    /* ------ under_main_title ------ */
    /* ------ under_main_title ------ */

    .under_main_title {
        width: 100%;
        height: 200px;
    }

    .under_main_title > h1 {
        font-size: 2em;
    }

    /* ------ under_contents_wrap ------ */
    /* ------ under_contents_wrap ------ */

    .under_contents_wrap {
        width: 100%;
        height: auto;

        padding: 0 0 40px 0;
        margin-top: var(--space_30);
        margin-bottom: var(--space_30);

        background: var(--contents_color_2);
    }

    /* ------ under_contents_main_wrap ------ */
    /* ------ under_contents_main_wrap ------ */

    .under_contents_main_photo {
        width: 100%;
        height: 160px;
        border-radius: 0;
        margin-bottom: 40px;
    }

    /* ------ under_contents ------ */
    /* ------ under_contents ------ */

    .under_contents {
        width: 85%;
        height: auto;

        margin: 0 auto;
        padding: 0;
    }



    .research_wrap {
        margin-bottom: 40px;
    }

    .research_wrap > dt {
        font-size: 2rem;
        font-weight: normal;

        padding-bottom: 15px;
        border-bottom: 3px solid #555555;
    }

    .research_wrap > dd {
        font-size: 1.1rem;
        font-weight: normal;
        border-bottom: 1px solid #555555;
        padding-bottom: 20px;
    }

    .research_year {
        font-size: 1.5rem;
    }


    .under_contents > p {
        font-weight: normal;
        padding: 0;
        letter-spacing: 4px;
        font-size: 0.9rem;
        line-height: 1.7em;
        letter-spacing: 1px;
    }

    .under_contents > p:nth-child(2) {
        margin-bottom: 50px;
    }



}






/**/
/* タブ全体 */
.wrapper_research_contents {
    font-size: 1.4rem;
    padding: 2rem 0 0 0;
}

hr.tabs_bottom_border {
    margin: 1.2em 0 1.4em;
    border-top: 3px solid #555555;
}

/*タブ切り替え全体のスタイル*/
.tabs {
    /*
    margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;
*/
    margin-top: 50px;
    padding-bottom: 40px;


    margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
    /*
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  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;
  */
    width: calc(100%/4);
    /* height: 50px; */
    /* line-height: 50px; */
    display: inline-block;
    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: 0;
    overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}*/
#tab_1:checked ~ #tab_1_content,
#tab_2:checked ~ #tab_2_content,
#tab_3:checked ~ #tab_3_content,
#tab_4:checked ~ #tab_4_content,
#tab_5:checked ~ #tab_5_content,
#tab_X:checked ~ #tab_X_content {
    display: block;
}

/*選択されているタブのスタイルを変える
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}*/
.tabs label > div {
    background-image: url(images/arrow.svg);
    background-repeat: no-repeat;
    background-size: 0.4em;
    background-position: left 1.2em center;
    padding: 0.7em 1em;
}

.tabs label > div:hover {
    background-image: url(images/arrow_colored.svg);
    color: rgb(0, 179, 227);
}

.tabs input:checked + .tab_item > div,
.tabs input:checked + .tab_item > div:hover {
    background-image: url(images/arrow.svg);
    background-color: #b9b9b9;
    border: solid 2px;
    box-sizing: border-box;
    color: inherit;
}

.tabs input:checked + .tab_item .checked_num {
    font-size: 1.2em;
}

/* タブ内容 */
.tab_content_description ul {
    margin: 0;
    padding: 0;
}

.unit {
    list-style: none;
    position: relative;
    border-top: 1px solid #999;
    padding: 1.8em 0 1.8em 9em;
    font-size: 1rem;
}

.unit * {
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 1em;
    margin: 0;
    padding: 0;
}

.unit:first-child {
    border-top: none;
    padding-top: 0;
}

.tab_content_description .unit .title {
    font-weight: bold;
    line-height: 1.4em;
    padding-bottom: 0.7em;
}

.tab_content_description .unit .title .date {
    display: block;
    line-height: 1.2em;
    font-size: 0.9em;
    font-weight: normal;
    padding-bottom: 0.7em;
    position: absolute;
    left: -9em;
}

.tab_content_description .unit .content {
    padding-top: 0.9em;
    line-height: 1.6em;
}

.tab_content_description .unit .title + .content {
    padding-top: 0;
}

.tab_content_description .unit .content span:nth-last-of-type(2) {
    display: inline;
    padding-right: 1.6em;
}

.tab_content_description .unit .venue {
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.4em;
    font-size: 0.9em;
}

.tab_content_description .unit .certification {
    color: rgb(0, 179, 227);
    font-weight: bold;
    padding: 0.7em 0 0;
}


@media screen and (max-width: 640px) {

    /**/
    .wrapper_research_contents {
        font-size: 1rem;
    }

    .tab_item {
        width: calc(100%/2);
    }

    .unit * {
        font-size: 1em;
    }

    .unit {
        padding: 1.4em 0;
    }

    .tab_content_description .unit .title .date {
        position: inherit;
        font-size: 1em;
    }

    /**/
}
