@charset "utf-8";
/* webフォント「Noto Serif JP」 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
/* fontawesomeの読み込み */
@import url('https://use.fontawesome.com/releases/v5.5.0/css/all.css');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
	padding: 0;
}

body {
	background: #fffffe;
	color: black;
	font-family: "Noto Sans JP", "Meiryo", "Hiragino Kaku Gothic ProN",
				"Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	background-attachment: fixed;
	background: white;
	overflow-x: hidden;
}

header {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    color: white;
}

h1 {
    text-align: center;
    font-size: 48pt;
}

h2 {
    font-size: 30pt;
    margin: 30px auto;
    margin-top: 0px;
    text-align: center;
    padding-top: 30px;
    font-weight: 1;
    position: relative;
}

h2::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 0px;
    border-bottom: 15px dotted #c8c8c8;
}

h2.white {
    color: white;
}

a { text-decoration: underline dotted; }

small {
    display: block;
    text-align: center;
    color: white;
}

small a {
    color: white;
}

img { width: 100%; }

.wrapper {
    width: 100%;
    height: auto;
    z-index: 1;
}

.wrapper > .inner {
    width: 100%;
    height: auto;
    background: white;
}

.container {
    display: block;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
}

.edge-left {
    width: 100%;
	height: 200px;
	position: absolute;
	right: 30%;
	bottom: -100px;
	transform: rotate(6deg);
}

/*************************/
/*      目次スタイル      */
/*************************/
.table-of-contents-box {
    display: flex;
    align-items: center;
    align-content: stretch;
    justify-content: center;
    flex-flow: row wrap;
    width: 100%;
    background: #FF9900;
}

.table-of-contents-box > .label {
    flex-basis: 20%;
    padding: 20px;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
    color: white;
}

.table-of-contents-box > .table-of-contents {
    flex-basis: 80%;
    display: flex;
    align-content: stretch;
    justify-content: center;
    flex-flow: row wrap;
}

.jump-link {
    flex-basis: 25%;
    background: rgb(179, 107, 0);
    padding: 15px;
    transition: all .6s;
}

.jump-link:hover {
    background: #FF9900;
}

.jump-link a {
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 12pt;
}

.return-link {
    display: block;
    width: 250px;
    margin: 0 auto;
    padding: 15px;
    border: 3px solid black;
    color: black;
    font-size: 14pt;
    text-decoration: none;
    text-align: center;
    transition: all .6s;
}

.return-link.white {
    border: 3px solid white;
    color: white;
}

.return-link:hover {
    color: white;
    background: black;
}

.return-link.white:hover {
    color: black;
    background: white;
}

/*=======================*/
/*   テーブルスタイル     */
/*=======================*/
.table-basebox {
    width: 100%;
    margin-bottom: 60px;
}

.table-style {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    cursor: default;
}

.table-style tr {
    padding: .35em;
    border-bottom: 1px solid #bbb;
    font-size: 13pt;
    background-color: #fff;
    transition: all .5s;
    display: block;
    font-size: 0;
    line-height: 0;
}

.table-style tr:hover {
    background-color: #f8e2c0;
}

.table-style thead {
    display: block;
    border-bottom: 5px solid #ff9900;
}

.table-style tbody {
    display: block;
    height: 700px;
    overflow-y: scroll;
    scrollbar-width: thin;
    /*scrollbar-color: #ffefd5 #ffcb7c;*/
    -webkit-overflow-scrolling: touch;
}

.table-style thead tr:hover {
    background-color: #fff;
}

.table-style th {
    text-align: center;
    padding: 20px;
    display: inline-block;
    font-size: 13pt;
    line-height: normal;
}

.table-style td {
    padding: 20px;
    display: inline-block;
    font-size: 13pt;
    line-height: normal;
}

.table-style .names-rec {
    width: 20%;
}

.table-style .content-rec {
    width: 48%;
}

.table-style .place-rec {
    width: 12%;
    text-align: center;
}

.table-style .date-rec {
    width: 19%;
    text-align: center;
}

.focus-move {
    width: 0px;
    height: 0px;
    display: none;
}

.focus-btn {
    display: none;
}

tr.is-visible {
    visibility: collapse;
}

/*************************/
/*    ヘッダーコンテンツ   */
/*************************/
#top-slide {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/*  particlegroundのスタイル修正 */
.pg-canvas {
    position: absolute;
    top: 0;
    left: 0;
}

header > .cover {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0px -20px 20px 10px rgba(6, 6, 6, 0.4) inset;
}

.cover > .topics {
    width: 70%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.topics > .abstract {
    text-align: center;
    margin-top: 20px;
    font-size: 14pt;
}

.college-name-box {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(50%, -50%);
    padding: 50px;
    border: 3px solid white;
    border-radius: 100%;
    width: 500px;
    height: 400px;
}

.college-name {
    font-size: 48px;
    margin-top: 40%;
    display: block;
    text-align: center;
}

.logo-img {
    width: 80px;
}

/***************************/
/*      コンテンツ領域      */
/***************************/
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

/*  制作スキル一覧のスタイル  */
.skills-erea-bg {
    width: 100%;
    min-height: 500px;
    height: 100%;
    background-image: url('../img/developers.jpg');
    background-attachment: fixed;
    background-size: cover;
}

.skills-erea-bg > .cover {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: relative;
}

.skills-entry-box {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin-bottom: 60px;
}

.skills-entry-box > .skills-entry {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    padding: 120px 5px 5px 5px;
}

.skill-item-card {
    border-radius: 5px;
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    color: black;
    background-size: 100%;
    background-attachment: fixed;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 244, 203, 0.5)), to(rgba(255, 255, 255, 0.5))), url("../img/developers-blur.jpg");
    background-image: -o-linear-gradient(bottom, rgba(255, 244, 203, 0.5), rgba(255, 255, 255, 0.5)), url("../img/developers-blur.jpg");
    background-image: linear-gradient(0deg, rgba(255, 244, 203, 0.5), rgba(255, 255, 255, 0.5)), url("../img/developers-blur.jpg");
    width: 100%;
    height: 100%;
    position: relative;
}

.skill-item-sticker {
    position: absolute;
    bottom: calc(100% - 25px);
    right: 1%;
    width: 120px;
}

.skill-item-movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 10px;
    display: block;
}

.skill-item-movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

.skill-item-card h3.skill-item-title {
    border-bottom: 2px dotted black;
    margin: 10px 0;
    padding-bottom: 10px;
    font-size: 14pt;
    font-weight: 1;
    text-align: center;
}

.author-box {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    align-content: stretch;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
}

.author-box > .label {
    flex-basis: 20%;
    text-align: center;
    padding: 10px;
    border-right: 2px dotted black;
}

.author-box > .names {
    flex-basis: 80%;
    padding: 10px;
    text-align: center;
}

.skill-item-source {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: orange;
    color: white;
    text-align: center;
    font-size: 14pt;
    border: 2px dotted orange;
    text-decoration: none;
    transition: all .6s;
}

.skill-item-source:hover {
    background: rgb(205, 136, 7);
}

/*  資金獲得・受賞等一覧のスタイル  */
.flex-table {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    margin-bottom: 60px;
}

.flex-table.overflow {
    height: auto;
    max-height: 500px;
    overflow-y: scroll;
}

.table-record {
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    cursor: default;
    border-bottom: 1px solid #bbb;
    transition: all .6s;
}

.table-record.efect-green:hover {
    background: rgb(222, 250, 179);
}

.table-record.efect-aqua:hover {
    background: rgb(170, 251, 251);
}

.award-table-label {
    border-bottom: 10px solid greenyellow;
    padding: 20px;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    cursor: default;
}

.award-table-data {
    padding: 20px;
}

.award-table-label.names,
.award-table-data.names {
    flex-basis: 20%;
    text-align: center;
}

.award-table-label.project,
.award-table-data.project {
    flex-basis: 49%;
}

.award-table-label.place,
.award-table-data.place {
    flex-basis: 15%;
    text-align: center;
}

.award-table-label.date,
.award-table-data.date {
    flex-basis: 16%;
    text-align: center;
}

/*  資金獲得・受賞のエリアスタイル  */
.funding-table-label {
    border-bottom: 10px solid aqua;
    padding: 20px;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    cursor: default;
}

.funding-table-data {
    padding: 20px;
}

.funding-table-label.names,
.funding-table-data.names {
    flex-basis: 20%;
    text-align: center;
}

.funding-table-label.funding,
.funding-table-data.funding {
    flex-basis: 58%;
}

.funding-table-label.period,
.funding-table-data.period {
    flex-basis: 22%;
    text-align: center;
}

/*  関連記事部分のスタイル（筑波技術大学Webページ）  */
.other-bg {
    width: 100%;
    min-height: 700px;
    background: -o-linear-gradient(135deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)), url('../img/other-bg.jpg');
    background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)), url('../img/other-bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.other-bg > .cover {
    width: 100%;
    min-height: 700px;
    background: rgba(0, 0, 0, 0.2);
}

.triangle-curtain {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url('../img/triangle.png');
    background-repeat: repeat-x;
    background-size: contain;
}

.sub-title {
    display: block;
    text-align: center;
    font-size: 14pt;
}

.sub-title.white {
    color: white;
}

.flex-link-box {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*align-items: center;*/
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}

.flex-link-box > .link-box {
    -ms-flex-preferred-size: calc(100% / 3);
        flex-basis: calc(100% / 3);
    padding: 20px;
}

.link-box a {
    text-decoration: none;
}

.official-link-box {
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    border: 4px solid #CD6E6B;
    color: rgb(192, 94, 90);
    z-index: 0;
    position: relative;
    overflow: hidden;
}

.official-link-box::before {
    position: absolute;
    content: '';
    top: 0;
    left: 18%;
    width: 82%;
    height: 100%;
    background: rgba(205, 110, 107, 0.8);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    z-index: 0;
}

.official-link-box:hover::before {
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}

.official-link-box::after {
    position: absolute;
    content: 'Open link';
    top: 50%;
    right: 0;
    width: 82%;
    color: white;
    font-size: 18pt;
    text-align: center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0;
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
}

.official-link-box:hover::after {
    opacity: 1;
}

.official-link-content {
    display: block;
    padding: 15px 15px 35px 22%;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.official-link-content::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 18%;
    height: 100%;
    background: #CD6E6B;
    z-index: 5;
}

.official-link-content::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: '\f0c1';
    top: 50%;
    left: 0;
    width: 18%;
    font-size: 20pt;
    color: white;
    font-weight: 900;
    text-align: center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 6;
}

.post-date {
    position: absolute;
    display: block;
    width: 82%;
    bottom: 10px;
    right: 16px;
    text-align: right;
}

.homepage-link {
    width: auto;
    padding: 10px;
    background: #CC6461;
    color: white;
    text-align: center;
    margin: 0 auto;
    text-decoration: none;
    transition: all .6s;
}

.homepage-link:hover {
    background: rgb(157, 79, 76);
}

/*  関連記事（筑波技術大学webページ以外・外部リンク）  */
.outside-link-box {
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    border: 4px solid #DF9657;
    color: rgb(161, 108, 74);
    z-index: 0;
    position: relative;
    overflow: hidden;
}

.outside-link-box::before {
    position: absolute;
    content: '';
    top: 0;
    left: 18%;
    width: 82%;
    height: 100%;
    background: rgba(223, 151, 87, 0.8);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    z-index: 0;
}

.outside-link-box:hover::before {
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}

.outside-link-box::after {
    position: absolute;
    content: 'Open link';
    top: 50%;
    right: 0;
    width: 82%;
    color: white;
    font-size: 18pt;
    text-align: center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0;
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
}

.outside-link-box:hover::after {
    opacity: 1;
}

.outside-link-content {
    display: block;
    padding: 15px 15px 35px 22%;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.outside-link-content::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 18%;
    height: 100%;
    background: #DF9657;
    z-index: 5;
}

.outside-link-content::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: '\f0c1';
    top: 50%;
    left: 0;
    width: 18%;
    font-size: 20pt;
    color: white;
    font-weight: 900;
    text-align: center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 6;
}

/*  参考情報（外部リンク）  */
.link-box.width50 {
    flex-basis: 50%;
}

/*  問い合わせ先エリアスタイル  */
.contact-items {
    display: flex;
    align-content: stretch;
    justify-content: center;
    flex-flow: row wrap;
    width: 100%;
}

.contact-items > .contact-item {
    flex-basis: 50%;
    padding: 30px;
}

.contact-item > .name-text {
    font-size: 20pt;
    text-align: center;
    margin-bottom: 30px;
    display: block;
}

.contact-item > .affiliation-text {
    text-align: center;
    display: block;
    font-size: 13pt;
}

.contact-link {
    display: block;
    max-width: 80%;
    margin: 0 auto;
    padding: 10px;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: black;
}

/***************************/
/*     フッターデザイン     */
/***************************/
footer {
    display: block;
    width: 100%;
    background: #5b4785;
}

small {
    display: block;
    width: 100%;
    text-align: center;
    color: white;
}

/*  修正パッチ  */
.research-list-label {
    border-bottom: 10px solid #FF9900;
}

.research-list-data:hover {
    background: #f8e2c0 !important;
}

/*  スクリーンリーダーモード  */
#sncl-control {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

/***************************/
/*   ブラウザーごとの設定   */
/*************************+*/
/*  IE11  */
_:-ms-lang(x)::-ms-backdrop,
.skills-entry-box > .skills-entry {
    flex-basis: 49.2%;
}

_:-ms-lang(x)::-ms-backdrop,
.award-table-label.names, .award-table-data.names,
.funding-table-label.names, .funding-table-data.names {
    flex-basis: 15%;
}

_:-ms-lang(x)::-ms-backdrop,
.award-table-label.project, .award-table-data.project {
    flex-basis: 47%;
}

_:-ms-lang(x)::-ms-backdrop,
.award-table-label.date, .award-table-data.date {
    flex-basis: 10%;
}

_:-ms-lang(x)::-ms-backdrop,
.funding-table-label.funding, .funding-table-data.funding {
    flex-basis: 55%;
}

_:-ms-lang(x)::-ms-backdrop,
.funding-table-label.period, .funding-table-data.period {
    flex-basis: 20%;
}

_:-ms-lang(x)::-ms-backdrop,
.flex-link-box > .link-box {
    flex-basis: 30.2%;
}

_:-ms-lang(x)::-ms-backdrop,
.table-of-contents-box > .label {
    flex-basis: 16%;
}

_:-ms-lang(x)::-ms-backdrop, .jump-link {
    flex-basis: 22.1%;
}

_:-ms-lang(x)::-ms-backdrop,
.table-of-contents-box > .table-of-contents {
    flex-basis: 80.9%;
}

_:-ms-lang(x)::-ms-backdrop,
.contact-items > .contact-item {
    flex-basis: 45.3%;
}

_:-ms-lang(x)::-ms-backdrop,
.author-box > .label {
    flex-basis: 18%;
}

_:-ms-lang(x)::-ms-backdrop,
.author-box > .names {
    flex-basis: 74.9%;
}


/***************************/
/*      レスポンシブ処理    */
/***************************/
@media screen and (max-width: 660px) {
    header {
        height: 120vh;
    }

    h1 { font-size: 28pt; }

    .cover > .topics {
        top: 60%;
        width: 90%;
    }

    .container {
        padding: 30px 15px;
    }

    #top-slide {
        height: 120vh !important;
    }

    .table-style .names-rec,
    .table-style .content-rec {
        width: 100%;
    }

    .table-style .names-rec {
        text-align: center;
    }

    .table-style .place-rec {
        width: 50%;
        border-right: 2px dotted white;
    }

    .table-style .date-rec {
        width: 50%;
    }

    .table-style th {
        background: #f8e2c0;
        border-bottom: 2px dotted white;
    }

    .focus-move, .focus-btn {
        display: inline;
    }

    tr.is-visible {
        visibility: visible;
    }

    .skills-entry-box > .skills-entry {
        flex-basis: 100%;
    }

    .author-box > .label {
        writing-mode: vertical-rl;
    }

    .award-table-label, .award-table-data,
    .funding-table-label, .funding-table-data {
        flex-basis: 100% !important;
    }

    .award-table-label {
        border-bottom: 2px dotted white;
        background: greenyellow;
    }

    .funding-table-label {
        border-bottom: 2px dotted white;
        background: aqua;
    }

    .flex-link-box > .link-box {
        flex-basis: 100%;
    }

    .skill-item-card {
        background-image: linear-gradient(0deg, rgba(255, 244, 203, 0.8), rgba(255, 255, 255, 0.8)), url("../img/developers-blur.jpg");
    }

    .other-bg, .skills-erea-bg {
        background-attachment: unset;
    }

    .contact-items > .contact-item {
        flex-basis: 100%;
    }

    .contact-link {
        max-width: 100%;
    }

    .jump-link {
        flex-basis: 100%;
    }

    .research-list-label {
        border-bottom: none;
        background: #FF9900;
    }
}