@charset "utf-8";

/**********

each.css

index.html以外の全ページで有効です。

-01 背景色
-02 ヘッダー
-03 メガドロップダウン
-04 ジャンボトロン
-05 ブレッドクラム
-06 ブロック間の区切り線
-07 リスト表示
-08 ニュースのパーツ
-09 テーブル
-10 カテゴリ表示
-11 カテゴリチューザー
-12 メインコンテンツ
-13 研究者
-14 FFPJ公開資料
-15 リスト
-16 告知欄
-17 ギャラリー
-18 タブテンプレート
-19 メディア・ロゴ・マップ
-20 見出し
-21 フォーム
-22 ホバーポインター
-23 ぱぶまるブログ
-24 施設見学
-25 動画
-26 ぱぶまるブログのページネーション
-27 共同研究
-28 技術をつかう
-29 印刷用
-30 レスポンシブ
-31 Edge対応
-32 IE対応
-33 Safari対応

**********/


/**

01.背景色

*/

/*header {
    background: #fff;
}*/


/**

02.ヘッダー

*/

header {
    display: flex;
}

miniheart {
    display: none;
}

/*#hdr-search,
header form {
    display: none;
}*/

.line_doublecolor {
    position: relative;
    width: 90%;
    padding-bottom: 10px;
    color: #222;
    border-bottom: 3px solid #888;
}

.line_doublecolor:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 10%;
    height: inherit;
    border-bottom: 3px solid #e94e66;
}

.w90p {
    width: 90%;
}


/**

03.メガドロップダウン

*/


/**

04.ジャンボトロン

*/

section {
    display: flex;
    height: auto;
}

jumbotron {
    display: flex;
    width: 100%;
    min-height: 15em;
    background-image: url(sp2.png);
    background-size: cover;
    background-position: center right;
    background: #fd0e6e;
}

pagetitle {
    display: block;
    flex: 2;
}

pagetitle h1 {
    color: #fff;
    font-size: 240%;
    margin-left: 10vw;
    word-break: break-all;
}

pagelink {
    flex: 1;
    display: block;
    background: #eee;
    opacity: .8;
    height: auto;
    z-index: 10;
}

contentlink {
    display: block;
    font-weight: bold;
    padding: 8px 21px;
    color: #2a4073;
    border-bottom: 1px transparent solid;
}

contentlink a {
    padding-left: 18px;
    background: url(arrow.png) no-repeat center left;
    background-size: auto;
    background-size: 8px auto;
}

contentlink a:hover {
    border-bottom: 2px #333 solid;
    transition: .1s;
}


/**

05.ブレッドクラム

*/

breadcrumb {
    display: inline-flex;
    padding: 1em 2em;
    font-size: 75%;
}

breadcrumb a {
    text-decoration: underline;
}

breadcrumb span:first-child a {
    text-decoration: none;
}

breadcrumb a:hover {
    color: #fd0e6e;
}

breadcrumb span {
    margin: 0 .75em;
}

breadcrumb img {
    width: 1.25em;
    height: 1.25em;
}


/**

06.ブロック間の区切り線

*/

blockline-lg {
    display: block;
    width: 100%;
    height: 1em;
    background: #fecee2;
    margin: 48px auto;
}

blockline-nr {
    display: block;
    width: 80%;
    height: .5em;
    background: #fecee2;
    margin: 24px auto;
    border-radius: 1em;
}

@media print {
    #p0600100 blockline-nr,
    #p0600100 blockline-lg,
    #p4600100 blockline-nr,
    #p4600100 blockline-lg {
        page-break-after: always;
    }
}


/**

07.リスト表示

*/

listview {
    display: block;
    height: auto;
    width: 95%;
    margin: 40px auto;
    background: #fff;
}

listview abstract {
    width: 90%;
    margin: 0 90px; /*後でこの数値を調整必要*/
}

@media screen and (max-width: 900px) {
    listview abstract {
        margin-right: 0;
    }
}

/*.fiscal {
    justify-content: flex-end;
    font-size: 80%;
}*/

tabwhite {
    display: inline-flex;
    justify-content: flex-start;
    height: 2em;
    margin: 4px;
    border-top: solid 2px #fff;
}

tabwhite a {
    padding: 8px;
    display: block;
    height: auto;
    width: auto;
    color: #333;
    border-radius: 4px 4px 0 0;
    margin-left: 2px;
    border: 0;
}

tabwhite:hover {
    border-bottom: solid 2px #aaa;
}

tabwhite.fiscal_gray {
    cursor: default;
}

tabwhite.fiscal_gray a {
    color: #ddd;
    pointer-events: none;
}

tabwhite.fiscal_gray:hover {
    border-bottom: solid 2px transparent;
}

.underbar,
.underbar:hover {
    border-bottom: solid 2px #333;
    font-weight: 900;
}

.underbar {
    border-top: solid 2px #274765;
}

list {
    table-layout: fixed;
    height: auto;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
}

list#lstA,
list.lst {
    counter-reset: thesiscounter;
    flex-direction: column-reverse;
}

list#lstA thesis::before,
list.lst thesis::before {
    counter-increment: thesiscounter 1;
    content: counter(thesiscounter) " .";
    width: 3em;
    padding: 1vw;
}

thesis {
    display: flex;
    height: auto;
    width: 100%;
    background: #fff;
    margin: 2px auto;
}

a[name] {
    display: block;
}

thesis a[id^="n"] {
    margin-top: -30px;
}

fiscal {
    background: #fff;
    display: flex;
    justify-content: center;
    margin-top: 0;
	margin-bottom: 0;
	/*margin-bottom: 2em;*/
}

.grad-wrap {
    position: relative;
    margin-top: -120px;
}

subtitle[id^='area'] {
    margin-top: 140px;
}

.grad-btn {
    border-radius: 32px;
    padding: .25em 1.5em;
    background: #fff;
    border: 2px solid #aaa;
    color: #666;
    font-size: 90%;
    position: absolute;
    right: 50%;
}

.grad-btn:hover {
    background: #fafafa;
    transition: .2s;
}

.grad-btn small::before {
    font-weight: bold;
}

.grad-pub.btnblock {
    margin-top: 14em;
}

.grad-pub.seemorebtn {
    display: none;
}

.grad-item {
    position: relative;
    overflow: hidden;
    height: 200px;
    z-index: 10;
}

.grad-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: -ms-linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
    content: "";
}

.grad-clear::before {
    background: none;
}

.item-list {
    font-size: 85%;
    width: 90%;
    margin: 0 0 0 auto;
}

.item-list li {
    display: flex;
}

@media screen and (max-width: 1080px) {
    .item-list li {
        flex-direction: column;
    }
}

#listA6 {
    height: 10em;
}

#listA6::before {
    background: none;
}

#listAll {
    display: none;
}

.grad-trigger {
    display: none;
}

.seemore:checked~.grad-item-open {
    height: auto;
}

.seemore:checked~.grad-item-open::before {
    display: none;
}

.btnblock {
    width: 6em;
    text-align: center;
    padding: .5em 1em;
    margin-left: 45vw;
    margin-top: -5px;
    z-index: 10;
}


/**

08.ニュースのパーツ

*/

cat {
    display: block;
    width: 10em;
	/*width: 13em;*/
    height: auto;
    padding: 1em;
    color: #555;
    font-weight: bold;
}

table {
    margin: 1.5em 0;
}

#news cat {
    display: flex;
    max-width: 8em;
	/*max-width: 10em;*/
    height: auto;
    padding: 1em;
    justify-content: right;
    align-items: flex-start;
    /*margin-left: 10%;*/
    background: #fff;
    /*    border-bottom: 1px solid #666;*/
}

sentence {
    display: block;
    width: 100%;
	/*width: 80%;*/
    height: auto;
    padding: 1em;
}

#news sentence {
    padding: 1em;
    /*margin-right: 10%;*/
    background: #fff;
}

#news sentence p {
    line-height: 1.6;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

#news ul {
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

#news sentence table {
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

#news sentence table p {
    line-height: 1.35;
    margin: 0;
    display: list-item;
    list-style-type: none;
}

#news sentence table p span {
    margin-left: 2em;
}

#news sentence table chapter {
    margin: 0;
}

#news a[name^='ny'] {
    display: block;
}

.arrow::before {
    content: url('arrow.png');
}

#news p a:visited {
    color: #274765;
}

#news p a:hover {
    color: #fd0e6e;
    transition: .2s;
}

#news thesis {
    padding: 1em 0;
    margin: 0;
    transform: translateY(20px);
    transition: all 1s;
}

sentence h5 {
    font-size: 135%;
}

#news sentence h5 {
    border-bottom: 2px solid #aaa;
    margin: 0;
    color: #fd0e6e;
}

body:not(.en) #news sentence h5 {
    letter-spacing: 1.5px;
}

#news sentence div {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

sentence div span {
    display: inline-block;
    margin: .25em;
    padding: .25em;
    background: #eee;
}

#news sentence div span {
    display: flex;
    font-size: 75%;
    width: 14em;
    justify-content: center;
    align-items: center;
}

#news .clicklab {
    cursor: pointer;
}

#news .clicklab:hover {
    background: #888;
    color: #fff;
    transition: .1s;
}

sentence img {
    width: 100%;
}

#news sentence img {
    max-width: 400px;
}

newsbutton {
    display: block;
}

.exicon newsbutton a.button::after {
    content: none;
}

newsbutton button[onclick] {
    margin: .5em auto;
    padding: 0 1em;
}

#news sentence p strong {
    line-height: 2em;
}

chapter {
    display: list-item;
    list-style-type: none;
    padding-left: 30px;
    line-height: 2em;
    margin: 2em 0 -.75em 0;
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: #274765;
    background: url(../png/strong.png) left 0px bottom 8px no-repeat;
    background-size: 21px auto;
}

h3 chapter {
    background-size: 27px auto;
    padding-left: 36px;
}

#news figure img {
    display: block;
    margin: 0 auto;
}

#news .narrowrow {
    line-height: 1;
}

#news table chapter {
    background: none;
    padding: 0;
}

#news table p strong {
    padding-left: 24px;
    background: url(../svg/wifi.svg) no-repeat center left;
    background-size: 12px auto;
}

#news a:not([name]) {
    text-decoration: underline dotted #ccc;
    background: none;
    color: #274765;
}

#news cm ul {
    line-height: 1.35;
    font-size: 80%;
}

#news cm li a:hover {
    color: #fd0e6e;
}

#news .fas-sns {
    width: 1em;
    height: 1em;
}

@media screen and (max-width: 900px) {
    #news cat {
        display: block;
        margin-top: 2em;
        text-align: center;
        width: auto;
        padding: 0;
        margin-bottom: .5em;
    }
    #news sentence h5 {
        margin: 1em 0 0 0;
    }
    #news sentence div span {
        position: static;
        margin: -1.35em 0 0 auto;
    }
}


/**

09.テーブル

*/

#news sentence table,
#p0300300 table,
#p0300400 table,
#p4300400 table,
#p0801001 table {
    border-collapse: collapse;
}

#news .news_wtp2021 table {
    width: 100%;
    margin-left: 2rem;
}

@media screen and (max-width: 900px) {
    #news .news_wtp2021 table {
        margin-left: 0;
    }
}

#news .news_wtp2021 table strong {
    display: block;
    padding: .5em 0;
}

#news .news_wtp2021 .wtp2021_date {
    display: block;
    margin-top: 2em;
    margin-bottom: -1em;
    font-size: 115%;
}

#news .news_wtp2021 .wtp2021_image {
    width: 100%;
    max-width: 100vw;
}

#news .news_wtp2021 th {
    width: 7em;
}

#news .news_wtp2021 li {
    margin-top: 12px;
}

#p4300400 table {
    margin: 0 10%;
}

#p0300300 table,
#p0300400 table {
    margin: 0 auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
	table-layout: fixed;
	width: 80%;
	/*max-width: 1000px;*/
}

#p0300300 table {
    width: 80%;
}

#p0801001 table {
    margin: 0 auto;
}

#p0801001 table th {
    font-size: 80%;
    min-width: 4em;
}

sentence tr,
#p0801001 tr {
    vertical-align: middle;
    height: 2em;
}

#news sentence tr,
#p0300300 tr,
#p0300400 tr,
#p4300400 tr,
#p0801001 tr {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

#p0300300 tr {
    vertical-align: middle;
    height: 6em;
    min-height: 6em;
    padding: 1em 0;
}

#p0300400 tr,
#p4300400 tr {
    vertical-align: middle;
    height: 8em;
    min-height: 8em;
    padding: 1em 0;
}

sentence th {
    background: #eee;
    padding: 1em;
    text-align: justify;
}

#p0801001 th {
    background: #eee;
}

#news sentence td,
#p0300300 td,
#p0300400 td,
#p4300400 td,
#p0801001 td {
    padding: .5em;
}

#p0300400 td:first-child {
	width: 10rem;
	text-align: left;
	color: #677e93;
	font-weight: bold;
}

#p0300400 td:nth-child(2) {
	text-align: left;
	color: #677e93;
	font-weight: bold;
}

#p0300400 td:last-child {
	width: 12rem;
	text-align: left;
	color: #677e93;
	font-size: 80%;
	font-weight: bold;
}



#p0300300 td:first-child,
/*#p0300400 td:first-child,*/
#p4300400 td:first-child {
	width: 8em;
    text-align: left;
    color: #677e93;
    font-weight: bold;
}

#p4300400 td:first-child {
    width: 6em;
}

#news_old sentence td {
    text-indent: 1em;
}

caption {
    text-align: left;
    padding: .5em .25em;
}


/**

10.カテゴリ表示

*/

categoryview {
    display: block;
    height: auto;
    width: 95%;
    margin: 50px auto;
    background: #fff;
}

categoryview abstract {
    width: 80%;
    margin: 0 auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

categoryview p,
categoryview li,
.proj {
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

cardarea {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

cardarea a {
    display: block;
}

card {
    display: flex;
    max-width: 280px;
    min-width: 280px;
    height: auto;
    margin: 32px;
}

card.empty {
    background: none;
}

card sentence {
    background: #eee;
    font-weight: bold;
    padding: .7em;
}

viewarea {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 50%;
    padding: 1em;
    flex-wrap: wrap;
}

description {
    display: block;
    flex: 1;
    padding: .7em;
    justify-content: flex-start;
    line-height: 1.6;
}

#p4300700 description {
    flex: inherit;
}

images {
    display: block;
    width: 100px;
    height: 133px;
    justify-content: flex-end;
}

images img {
    max-width: 120px;
    min-width: 120px;
    max-height: 180px;
    min-height: 180px;
}

locallabel {
    display: flex;
    justify-content: flex-end;
    width: 80%;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

loc {
    display: block;
    margin: .5em;
    background: #eee;
    padding: .65em 1.75em;
    font-weight: bold;
}


/**

11.カテゴリチューザー

*/

category {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 0 10%;
}

category img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    /*    border: 1px #333 solid;*/
}

category .asc::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(direction.svg);
    background-size: contain;
    vertical-align: middle;
    /*    border: 1px #333 solid;*/
    margin-left: 3px;
}

category .desc::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(direction.svg);
    background-size: contain;
    transform: rotate(180deg);
    vertical-align: middle;
    /*    border: 1px #333 solid;*/
    margin-left: 3px;
}

category .init {
    /*    border: 1px #333 solid;*/
    padding: 5px;
    margin: 3px;
    background: #eee;
}

type {
    display: flex;
}

type tag {
    display: none;
}

type img {
    display: none;
}

#p0500103 type img {
    display: block;
}

tag {
    display: inline-block;
    border-left: 1px #999 solid;
    border-right: 1px #999 solid;
    border-bottom: .5px #999 solid;
    padding: 1.25em 1em;
    background: #fff;
}

tag a {
    display: block;
}

tag:hover {
    background: #fafafa;
    color: #333;
    transition: .05s;
}

tag:first-child {
    border-top: 1px #999 solid;
    border-radius: 24px 24px 0 0;
}

tag:last-child {
    border-bottom: 1px #999 solid;
    border-radius: 0 0 24px 24px;
}

type {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    padding: .1em .5em;
    border-radius: 2px;
    margin: .5em 1em .5em 0;
    background: #eee;
    font-size: 90%;
}

type:hover drop {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-top .2s, opacity .3s;
}

drop {
    margin-top: -12px;
    opacity: 0;
    transition: margin-top .7s, opacity 1s;
    visibility: hidden;
    position: absolute;
    top: 90%;
    left: 0;
    right: 0;
    transition: .1s ease-out;
    width: auto;
    z-index: 100;
}

drop.droplong {
    width: 10em;
}

drop.dropmedium {
    width: 8em;
}

drop.dropnarrow {
    width: 6em;
}

drop::before {
    top: -14px;
}

drop::after {
    top: -12px;
}

type tag {
    font-size: 90%;
    display: block;
    position: relative;
    color: #313a4f;
}

type {
    border-radius: 32px;
    padding: .5em 1.5em;
    background: #fff;
    border: 2px solid #aaa;
    color: #666;
}


/*

12.メインコンテンツ

*/

content {
    display: block;
    height: auto;
    width: 95%;
    margin: 50px auto;
    background: #fff;
}

contentblock {
    display: block;
    width: 90%;
    margin: 0 auto;
}

contentblock abstract {
    width: 80%;
    margin: 0 auto;
}

contentblock abstract p {
    width: 95%;
}

contentblock abstract mail p {
    width: 100%;
}

listview figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 450px;
    margin: 0 auto;
}

.vertical-width {
    max-width: 300px;
    height: auto;
}

.horizontal-width {
    max-width: 450px;
    width: 100%;
    height: auto;
}

h5 {
    font-size: 114%;
}

relates {
    display: block;
}

abstract {
    width: 80%;
    margin: 0 auto;
    line-height: 1.6;
}

abstract p {
    margin: .5em auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

abstract li {
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

sentence p strong {
    color: #274765;
}

vision {
    display: block;
    margin: 0 auto;
    text-align: center;
}

vision a {
    display: block;
    max-width: 100vw;
}

vision img,
tmpl vision img {
    width: 100%;
    height: 100%;
}

tmpl {
    display: flex;
    height: auto;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: baseline;
}

#p0700400 tmpl,
#p4700400 tmpl {
    display: block;
    height: auto;
    width: 90%;
    margin: 0 60px;
}

#p0200400 tmpl,
#p4200400 tmpl {
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 900px) {
    #p0700400 tmpl,
    #p4700400 tmpl {
        margin: 0 5%;
    }
}

tmpl abstract {
    align-self: flex-start;
}

tmpl img {
    width: 33%;
    height: auto;
    margin: 12px;
}

tmpl#fsp img {
    width: 100%;
    height: auto;
}

#relatedwords {
    border: 1px solid #333;
    padding: 1em;
    margin: 1em auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

#pjback {
    margin: 1rem auto;
    width: 16em;
    border: 1px solid #fd0e6e;
    background: #fff;
    text-align: center;
}

@media screen and (max-width: 26em) {
    #pjback {
        max-width: 90%;
    }
}

#pjback:hover {
    border-color: #fecee2;
    transition: .2s;
}

#pjback a {
    font-weight: bold;
    color: #fd0e6e;
    padding: 1rem;
    display: block;
}

#pjback a:hover {
    color: #fecee2;
    transition: .2s;
}

tmpa {
    display: flex;
    height: auto;
    width: 80%;
    margin: 0 auto;
}

tmpm {
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
    justify-content: center;
}


/**

13.研究者

*/

profile {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    margin: 50px auto;
}

researcher {
    display: flex;
    flex-direction: column;
}

jname h2,
ename h2 {
    display: block;
    font-size: 200%;
    margin: 0;
    padding: 0;
    color: #333;
    max-width: 27em;
}

ename h3 {
    display: block;
    font-size: 160%;
    margin: 0;
    padding: 0;
    max-width: 27em;
}

degree,
postname,
belongto,
role,
mailto,
message,
pubtype {
    display: inline;
    margin: 1em 0;
    padding: 0;
}

degree span {
    display: block;
    font-weight: bold;
    font-size: 180%;
    margin: 0;
    padding: 0;
    max-width: 27em;
    color: #555;
}

.en degree {
    margin: 0;
}

.en degree span {
    font-weight: normal;
    font-size: 160%;
}

postname h3,
belongto h3,
role h3,
mailto h3,
message h3,
pubtype h3 {
    display: block;
    font-weight: bold;
    font-size: 110%;
    margin: 0;
    padding: 0;
    color: #555;
    position: relative;
}

pubtype h3 {
    margin-left: 5%;
}

.en postname h3::before,
belongto h3::before,
role h3::before,
mailto h3::before,
message h3::before,
pubtype h3::before {
    position: absolute;
    display: inline-block;
    left: 0;
    bottom: -5px;
    width: 60%;
    height: 2px;
    content: '';
    background-color: #f09199;
}

postname span,
belongto span,
role span,
mailto span,
message span,
pubtype span {
    display: list-item;
    list-style-type: none;
    margin: 8px;
    word-wrap: break-word;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

pubtype~p {
    display: block;
    margin-left: 1em;
}

role span {
    padding-left: 18px;
    max-width: 30em;
    background: url(../svg/wifi-mini.svg) no-repeat left top;
    background-size: 10px auto;
}

message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: auto;
    max-width: 100%;
}

message p {
    word-wrap: break-word;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

message ul {
    padding: 0;
    margin: 4px 0;
}

message ul li {
    padding-left: 18px;
    margin: 4px 8px;
    list-style-type: none;
    background: url(../svg/wifi-mini.svg) no-repeat left top;
    background-size: 10px auto;
}

cvlist {
    display: block;
    height: auto;
    width: 75%;
    line-height: normal;
    margin: 0 auto;
}

cv {
    display: flex;
    height: auto;
    width: 100%;
    background: #eee;
    margin: 2px auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

jdate {
    display: block;
    height: auto;
    padding: 1vw;
    width: 14em;
    text-align: right;
    color: #677e93;
    font-weight: bold;
}

[id^='p56'] jdate,
[id^='p66'] jdate {
    width: 9em;
}


/**

14.FFPJ公開資料

*/

.ffpj jdate {
    display: flex;
    padding: 0;
    width: 12em;
}

.ffpj jtitle {
    font-weight: bold;
    font-size: 110%;
    width: auto;
}

.ffpj buttonlayout {
    margin: 0 .25em;
}

.ffpj button[onclick] {
    height: auto;
    font-size: 108%;
    background: #ededed;
    color: #001d42;
    border: 1px solid #001d42;
    box-shadow: 1px 1px 1px 1px #001d42;
    border-radius: 3px;
    padding: .58rem .8rem;
}

.ffpj button[onclick]:hover {
    color: #fd0e6e;
    background: #fecee2;
    transition: .1s;
}

.ffpj jdate a {
    color: #fff;
    font-size: 90%;
}

.ffpj {
    display: block;
    margin: 1em auto;
}

.ffpj p,
.ffplink {
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

.ffpjlist button {
    width: 7.5rem !important;
    height: 3rem !important;
    margin-right: .5rem !important;
    font-size: 1.2rem !important;
}

jtitle {
    display: block;
    height: auto;
    padding: 1vw;
    width: 70vw;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

jdata {
    display: block;
    height: auto;
    padding: 1vw;
    width: 8em;
    text-align: right;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

jdata a {
    background: linear-gradient(#555, #555) no-repeat;
    background: -ms-linear-gradient(#555, #555) no-repeat;
    background: -webkit-linear-gradient(#555, #555) no-repeat;
    background-size: auto 1px;
    background-position: 0 1.15em;
    text-shadow: .05em 0 #fff, -.05em 0 #fff;
}

.ffpj jdata {
    border: 1px solid #333;
    padding: .5em;
    width: 8em;
    text-align: center;
}

ol.lst-none>li::before,
ol.lst-rome>li::before,
ol.lst-abet>li::before {
    content: '';
}

.lst-none {
    list-style-type: none;
}

.lst-rome {
    margin-left: 1em;
    list-style-type: upper-roman;
}

.lst-abet {
    margin-left: 1em;
    list-style-type: upper-alpha;
}

.ffplink li {
    list-style-type: none;
    padding-left: 50px;
    line-height: 2em;
    margin: 1em 0;
    width: 100%;
    height: 100%;
    background: url(ffpj.png) left 0px top 8px no-repeat;
    background-size: 35px auto;
}

.dl a.mailto {
    text-decoration: underline dotted #ccc;
    background: none;
    color: #274765;
}

.dl a.mailto:hover {
    color: #fd0e6e;
    transition: .1s;
}


/**

15.リスト

*/

.awardlist list {
    font-size: 80%;
}

.awardlist jdata {
    text-align: left;
}

.presslist jdata {
    width: 16em;
    text-align: left;
    font-size: 90%;
}

ol {
    counter-reset: indexlist;
    list-style-type: none;
    padding-left: 0;
}

ol>li::before {
    counter-increment: indexlist;
    content: counters(indexlist, ". ") ". ";
}

ol.noorder {
    margin: 0;
    padding-left: 10px;
}

@media screen and (max-width: 900px) {
    ol.noorder {
        counter-reset: none;
        padding-left: 10px;
    }
    ol.noorder>li:before {
        counter-increment: none;
        content: none;
    }
}

dt {
    float: left;
    width: 15em;
}

#news dt {
    float: none;
    width: auto;
}


/**

16.告知欄

*/

cm {
    display: block;
    background: #eee;
    padding: 1em 2em;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

cm.alert {
    padding: 1em;
    max-width: 550px;
    margin: 0 auto;
}

pr {
    order: 5;
    border: 1.5px #666 solid;
    padding: 1em;
    display: block;
    transition: .2s;
}

pr a {
    background: #274765;
    color: #fff !important;
    display: block;
    text-align: center;
    padding: 1em;
    max-width: 25em;
    margin: 0 auto;
}

pr a:hover {
    background: #005fc5;
    color: #efefef;
}


/**

17.ギャラリー

*/

gallery {
    display: flex;
    width: inherit;
    height: auto;
    align-items: baseline;
    margin: 0 auto;
    justify-content: center;
}

tmpl+img {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto;
}

portrait {
    display: block;
    order: 4;
}

portrait img {
    width: 280px;
    max-width: 75vw;
    margin: 1em;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
}

photogallery {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

photogallery img {
    margin: 0 1em;
}

@media screen and (max-width: 900px) {
    photogallery {
        flex-direction: column;
        align-items: center;
    }
    photogallery img {
        margin: 1em 0;
    }
}

.fullsize {
    max-width: 700px !important;
    width: 100%;
}

.middlesize {
    width: 90%;
    height: 90%;
}

.halfsize {
    width: 50%;
    height: 50%;
}

.smallsize {
    width: 30%;
    height: 30%;
}

.minisize {
    width: 15%;
    height: 15%;
}

.flex-set {
    display: flex;
}

@media screen and (max-width: 1080px) {
    .flex-set {
        flex-direction: column;
    }
    .middlesize,
    .halfsize {
        width: 100%;
        height: 100%;
    }
}


/**

18.タブテンプレート

*/

subtmpa {
    display: block;
    width: 90%;
    height: auto;
    margin: 30px auto;
}

subtmpm {
    display: flex;
    width: auto;
    max-width: 80%;
    height: auto;
    margin: 10px auto;
    justify-content: space-between;
    font-size: 85%;
}

[id^='p02003'] subtmpm,
[id^='p42003'] subtmpm,
[id^='p16001'] subtmpm,
[id^='p56001'] subtmpm,
[id^='p26001'] subtmpm,
[id^='p66001'] subtmpm {
    font-size: 110%;
    max-width: 70%;
}

@media screen and (max-width: 900px) {
    [id^='p02003'] subtmpm,
    [id^='p42003'] subtmpm,
    [id^='p16001'] subtmpm,
    [id^='p56001'] subtmpm,
    [id^='p26001'] subtmpm,
    [id^='p66001'] subtmpm {
        font-size: 90%;
        max-width: 90%;
    }
    role span {
        max-width: 100%;
    }
    cvlist {
        width: 90%;
    }
}

subtmpm index {
    line-height: 1.2;
}

subtmpm li {
    margin: .5em;
}

subtmpm ul {
    padding-left: 6px;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

listview subtmpm {
    max-width: 100%;
}

#s5gdl ul {
    padding-left: 0;
}


/**

19.メディア・ロゴ・マップ

*/

media {
    display: block;
    margin: 4px;
}

media.empty {
    background: none;
    height: 0;
}

logoarea media img {
    width: 300px;
}

logoarea {
    display: block;
    margin: 0 auto;
    width: 80%;
}

logoarea a:hover {
    background: #eee;
}

eventlogo {
    display: flex;
    margin: 1em;
    justify-content: center;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

eventlogo media {
    display: flex;
    align-items: center;
}

eventlogo media img {
    width: 360px;
    height: auto;
}

mapimage {
    display: block;
    width: 70%;
    position: relative;
}

#p0600100 mapimage,
#p4600100 mapimage {
    width: 100%;
}

mapimage img {
	width: 70%;
	/*width: 100%;*/
}

mapimage small,
maparea small {
    display: block;
    max-width: 30em;
    margin: 0 auto;
}

maparea {
    display: block;
    width: 80%;
    margin: 0 auto;
    position: relative;
}

maparea img {
    width: 100%;
}

textmask {
    text-align: center;
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(253, 14, 110, .3);
    transition: all .2s ease;
    color: #fff;
}

mapimage a:hover>textmask,
maparea a:hover>textmask {
    opacity: 1;
}

mediaarea {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#publst mediaarea {
    justify-content: flex-start;
}

mediaarea a {
    display: block;
    position: relative;
    margin: 8px;
}

mediatile {
    display: block;
    width: 280px;
    max-width: 70vw;
}

mediafigure {
    display: block;
    background: #ddd;
    height: 200px;
    width: 280px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

mediafigure img {
    height: auto;
    min-width: 75%;
    max-height: 90%;
    max-width: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

mediacaption {
    display: block;
    background: #eee;
    text-align: center;
    padding: 12px;
    font-size: 110%;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

mediaarea a:hover>textmask {
    opacity: 1;
}

mediaarea textmask {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pj_scl mediaarea {
    display: flex;
    flex-wrap: wrap;
}

#pj_scl mediaarea a {
    margin: 1em auto;
}

#pj_scl projecttitle {
    display: block;
    font-weight: bold;
    margin: .25em;
    height: 3em;
    text-align: left;
}

#pj_scl shorttext {
    display: block;
    font-weight: normal;
    margin: .25em;
    line-height: 1.8;
    text-align: left;
}

@media screen and (min-width: 1280px) {
    #pj_scl mediaarea {
        display: block;
        width: 80%;
        margin: 0 auto;
    }
    #pj_scl mediaarea a {
        width: 100%;
    }
    #pj_scl mediatile {
        display: flex;
        width: 100%;
    }
    #pj_scl mediafigure img {
        width: 100%;
    }
    #pj_scl mediacaption {
        width: 100%;
        text-align: left;
        z-index: 1;
    }
    #pj_scl projecttitle {
        margin: .5em 3em;
        height: 2em;
    }
    #pj_scl shorttext {
        margin: .5em 3em;
        line-height: 1.8;
    }
    #pj_scl textmask {
        width: 280px;
    }
}

@media screen and (max-width: 486px) {
    #pj_scl {
        width: 100%;
    }
    #pj_scl mediaarea {
        width: 100%;
    }
}


/**

20.見出し

*/

contents h3 {
    max-width: 35em;
    display: block;
    text-align: left;
}

relates h3 {
    display: inline-block;
    font-size: 90%;
    margin: 0;
    padding: 0;
}

subtitle {
    display: flex;
    align-items: center;
    width: 85%;
    margin: .5em 90px;
}

subtitle img {
    display: inline-block;
    vertical-align: baseline;
    width: 42px;
    height: 42px;
    margin: 0;
}

subtitle h3 {
    text-align: left;
    width: auto;
    margin: 0;
    padding: 10px;
    line-height: normal;
    font-size: 120%;
    letter-spacing: 2px;
}

subtitle[id^='n20'] h3 {
    border: 1px solid #666;
    padding: .25em 1.5em;
    background: #fff;
}

profile subtitle h3 {
    font-size: 180%;
    color: #fd0e6e;
}

profile subtitle img {
    margin-left: 4vw;
}


/**

21.フォーム

*/

/*form h3 {
    text-align: left;
}*/


/**

22.ホバーポインター

*/

tabwhite,
type,
label.grad-btn,
drop,
.desc,
.asc,
.init {
    cursor: pointer;
}


/**

23.ぱぶまるブログ

*/

blog {
    display: flex;
    justify-content: space-between;
    border: 1px double #888;
    padding: 1em;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.25);
    margin: 2em 0;
    height: 300px;
    /*    height: auto;*/
}

blog:hover {
    cursor: pointer;
}

.ig_blog {
    width: 75%;
    margin: 0 auto;
}

#tw_message {
    display: block;
    margin: 2rem 0 2rem auto;
    margin: 2rem auto;
    width: 75%;
}

#tw_message a {
    text-decoration: underline;
}

#blog_archive a,
#tw_aclink a,
#insta_aclink a {
    display: block;
    border: 1px solid #333;
    padding: 2rem 6rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    width: 10rem;
}

#blog_archive a:hover,
#tw_aclink a:hover,
#insta_aclink a:hover {
    background: #333;
    color: #efefef;
    transition: .25s;
}

#blog_archive a,
#tw_aclink a,
#insta_aclink a {
    margin: 1rem auto 2rem;
}

#tw_embed {
    display: flex;
    justify-content: center;
}

postarray {
    display: block;
    width: 90%;
    margin: 0 auto;
}

postarray img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    margin: 6px;
}

@media screen and (max-width: 1180px) {
    #tw_message {
        flex-direction: column;
        margin: 0 auto;
    }
    #tw_message p {
        width: 80%;
        margin: 2rem auto;
    }
}

@media screen and (max-width: 800px) {
    #tw_message {
        margin: 0 auto;
        width: 80%;
    }
    #blog_archive a,
    #insta_aclink a,
    #tw_aclink a {
        padding: 1.5rem 3rem;
        margin: 1rem auto 2rem;
    }
    postarray {
        width: 100%;
    }
}

blog h2 {
    font-size: 120%;
    border-bottom: 1px #fd0e6e solid;
    margin: 0 0 .5em 0;
}

blog h2 a {
    color: #fd0e6e;
}

blog figure img {
    max-height: 350px;
    min-height: 220px;
}

blog .vertical-width {
    height: 220px;
    width: auto;
}

blog .horizontal-width {
    height: 220px;
    width: auto;
}

blogmore {
    display: none;
}

avatar {
    display: block;
    position: relative;
    margin-top: 2em;
}

authorarea avatar img {
    position: absolute;
    width: 48px;
    height: 48px;
    top: -42px;
}

blog avatar img {
    position: absolute;
    width: 36px;
    height: 36px;
    top: -32px;
}

tag avatar {
    display: inline;
}

#p0500103 type img {
    display: inline;
}

#p0500103 tag:first-child {
    border-top: 1px #999 solid;
}

tag avatar img {
    width: 24px;
    height: 24px;
}

@media screen and (min-width: 1280px) {
    blogmore {
        display: block;
        position: relative;
        overflow: hidden;
        height: 120px;
    }
    blogmore::before {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: -webkit-linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
        background: -ms-linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
        content: "";
    }
    authorarea avatar img {
        top: -54px;
    }
    blog avatar img {
        top: -32px;
    }
}

blog more {
    margin: 0 auto;
    background: #bbb;
    color: #fff;
    font-size: 80%;
    border-color: #bbb;
    padding: .125em;
    width: 8em;
}

blog more:after {
    content: '';
    border: 0;
    border-top: 0;
    border-right: 0;
}

figures {
    display: block;
    text-align: center;
}

sortarea {
    display: flex;
    justify-content: flex-end;
    font-size: 75%;
}

sortarea type {
    border: none;
    border-radius: 0;
    background: #666;
    color: #fff;
}

sortarea tag {
    font-size: 100%;
}

sortbtn {
    display: flex;
    justify-content: space-around;
}

drop.dropexlong {
    width: 12em;
}

postdate {
    border: 1px solid #666;
    padding: .25em .5em;
    font-size: 80%;
}

@media screen and (max-width: 900px) {
    main#top listview {
        width: 95%!important;
    }
    main#top listview#tmp {
        margin-top: 2em;
    }
}

blog postdate {
    border: none;
    display: block;
    padding: 0;
}

blogtitle h2 {
    border-bottom: 0;
}

blogmeta {
    display: flex;
    justify-content: space-between;
}

authorarea {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    margin-right: 32px;
}

authorarea span {
    background: #ddd;
    font-size: 70%;
    padding: 0 1em;
    margin: .5em;
}

writer {
    font-size: 80%;
}

writer.blogwriter {
    cursor: pointer;
    background: linear-gradient(#ddd, #ddd) no-repeat;
    background: -ms-linear-gradient(#ddd, #ddd) no-repeat;
    background: -webkit-linear-gradient(#ddd, #ddd) no-repeat;
    background-size: auto 1px;
    background-position: 0 1.5em;
    text-shadow: .05em 0 #fff, -.05em 0 #fff;
}

writer.blogwriter:hover {
    color: #fd0e6e;
}

writer a {
    text-decoration: underline;
}

blogbody {
    display: flex;
    flex-direction: column;
}

blogbody p {
    margin: .5em;
}

blogbody flex figure:not(.smallsize) {
    min-width: 30vw;
}

blogbody flex img {
    margin: 0 auto;
    max-width: 80vw;
    width: 400px;
}

blogbody flex img.acher {
    width: 150px;
}

blogimgarea {
    display: block;
}

@media screen and (max-width: 700px) {
    blogbody flex img.acher {
        width: 80%;
    }
}

#p0501113 blogbody figure {
    order: initial;
}

snsicon {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

twitter,
instagram {
    position: relative;
    margin: .5em 0;
}

tmpl twitter img {
    background: #1da1f2;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    padding: 4px;
    margin: 0;
    position: absolute;
    top: 0;
    left: -2em;
}

tmpl instagram img {
    background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    padding: 4px;
    margin: 0;
    position: absolute;
    top: 0;
    left: -2em;
}

inline-border a {
    word-break: break-all;
}

blog figure {
    display: flex;
    align-items: center;
    width: 500px;
}

blog figure img {
    max-width: 100%;
    min-width: 33%;
}

blog p {
    font-size: 80%;
}

#sesame {
    margin: 10px auto;
    display: block;
    height: 10px;
    width: 30px;
}


/**

24.施設見学

*/

visitor {
    display: block;
    width: 60%;
    margin: 0 auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

exhibition {
    display: block;
    width: 70%;
    margin: 0 auto;
}

exhibition bg {
    width: 100%;
}

exhibition img {
    max-width: 400px;
}

exhibition subtitle {
    margin: 0;
}


/**

25.動画

*/

video {
    width: 360px;
    height: 280px;
    max-width: 90vw;
    background: #000;
}

#collection video {
    width: 100%;
    height: auto;
    margin: 1em 0;
}

#collection {
    text-align: center;
}

movietitle {
    display: block;
    font-weight: bold;
    color: #2a4073;
    font-size: 108%;
}

movietitle a {
    color: #2a4073;
}

movielist {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 0 0 auto;
}

moviearea {
    display: block;
    width: auto;
    /*    min-width: 360px;*/
    max-width: 90vw;
    height: auto;
    min-height: 280px;
    margin: 0 24px;
}

moviearea:hover media {
    filter: sepia(25%);
    transition: .25s;
}

moviearea media {
    position: relative;
}

moviearea iframe {
    width: 360px;
    height: 280px;
    max-width: 90vw;
}

moviearea viewarea {
    width: 18em;
    max-width: 90vw;
    word-wrap: break-word;
    padding: 4px 0 4px 12px;
    margin-bottom: 48px;
}

viewarea i {
    margin-top: 8px;
    font-size: 75%;
}

viewarea i.fab {
    color: #da1725;
}

youtube {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
}

youtube img {
    width: 1.25em;
    height: 1.25em;
}

youtubelabel {
    display: inline;
    font-size: 80%;
    margin-left: 6px;
}

movielapse {
    display: inline;
    position: absolute;
    bottom: -12px;
    right: 0;
    background: #333;
    color: #fff;
    width: 3em;
    height: 1em;
    font-size: 60%;
    padding: 3px;
    text-align: center;
}


/**

26.ぱぶまるブログのページネーション

*/

pagination {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1em;
    font-size: 80%;
    background: #274765;
    color: #fff;
    margin: 0;
    padding: 1em;
    height: 3rem;
}

pageback a,
pagenext a {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    font-size: 130%;
}

pageback a:visited,
pagenext a:visited {
    color: #fff;
}

pageback.disabled a,
pagenext.disabled a {
    color: #888;
    pointer-events: none;
}

pagenext a::before {
    content: url('../assets/pagenext.png');
}

pageback a::after {
    content: url('../assets/pageback.png');
}


/**

27.共同研究

*/

#interview {
    width: 90%;
}

collabo {
    display: block;
}

collabocontent {
    display: block;
    border: 1px solid #aaa;
    padding: 2em;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

collabobanner {
    display: block;
    position: relative;
    background: #171513;
    width: 100%;
    height: 300px;
}

collabobanner img {
    max-width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    max-height: 300px;
}

casenum {
    display: block;
    background: #fd0e6e;
    color: #fff;
    position: absolute;
    text-align: center;
    top: -35px;
    left: -20px;
    right: 0;
    width: 70px;
    height: 70px;
    margin: auto;
    transform: rotate(45deg);
    overflow: hidden;
}

no {
    font-weight: bold;
    font-size: 120%;
    display: inline;
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #fff;
    background: transparent;
    transform: rotate(-45deg);
}

projectinfo {
    display: block;
    line-height: 1.6;
}

projectinfo span {
    background: #ddd;
    padding: .25em .5em;
    margin: .5em;
}

projectname {
    display: inline-block;
    font-weight: bold;
    font-size: 1.8em;
    color: #333;
    width: auto;
    margin: .5em 0;
}

leadcopy {
    display: block;
    max-width: 85%;
    position: absolute;
    left: 40px;
    right: 40px;
    top: 40px;
}

collabobanner hr {
    background-color: #fd0e6e;
    color: #fd0e6e;
    border: none;
    position: absolute;
    top: 140px;
    width: 70%;
    height: 2px;
}

leadcopy h4 {
    color: #fff;
    font-size: 175%;
    line-height: 1.4;
}

partner {
    display: block;
    position: absolute;
    left: 40px;
    right: 40px;
    top: 160px;
    color: #f4f4f4;
    line-height: 1.2;
    font-size: 100%;
    font-weight: bold;
    text-shadow: 1px 1px 1px #333;
}

collaboitem {
    display: flex;
    background: #ddd;
    font-weight: bold;
    justify-content: center;
    width: 10em;
    padding: .5em;
    align-items: center;
    word-break: break-all;
}

collaboname {
    display: block;
    word-break: break-all;
    width: auto;
    font-size: 140%;
}

interview {
    display: block;
    margin: .25em;
}

interviewinfo {
    display: block;
    padding: 1em;
    text-align: left;
    line-height: 1.2;
}

interviewcontent {
    display: block;
    background: #fff;
    width: auto;
    padding: 1em;
    margin: 1em;
    clear: both;
}

interviewhead {
    color: #fff;
    background: #274765;
    display: block;
    font-size: 130%;
    font-weight: bold;
    text-align: center;
    height: 40px;
    /*    height: 80px;*/
}

@keyframes arrowing {
    0% {
        margin-top: 0;
    }
    25% {
        margin-top: -4px;
    }
    50% {
        margin-top: 0;
    }
    75% {
        margin-top: 4px;
    }
    100% {
        margin-top: 0;
    }
}

interviewhead img {
    display: block;
    margin: 1em auto;
}

.interview-arrow-anim {
    animation: arrowing .75s linear infinite;
}

interviewer {
    display: block;
    padding: 1em;
    float: right;
    line-height: 1.6;
}

interviewer span {
    background: #ddd;
    padding: .25em .5em;
    margin: .5em;
}

who {
    display: inline;
}

who a {
    text-decoration: underline;
}

ee,
er {
    display: inline-block;
    text-align: left;
    font-weight: bold;
    color: #274765;
}

question {
    display: block;
    color: #274765;
    font-weight: bold;
    font-size: 120%;
    word-break: break-all;
    margin-bottom: .5em;
}

answer {
    display: block;
    word-break: break-all;
    margin-bottom: 1em;
}

answer span::before {
    content: '　';
}

answer span::after {
    white-space: pre;
}

interviewphoto {
    display: block;
    background: #fff;
    text-align: center;
    padding: .25em;
    margin: 0;
}

interviewphoto.right {
    float: right;
}

interviewphoto.left {
    float: left;
}

interviewphoto.center {
    float: none;
}

interviewphoto figure {
    margin: 1em;
}

interviewphoto figure img {
    width: 100%;
    max-width: 270px;
    min-width: 150px;
}

interviewlink linkbutton {
    display: block;
    margin: 2em auto;
    width: 19em;
}

interviewlink linkbutton a {
    display: block;
    background: #8497b0;
    max-width: 15em;
    text-align: center;
    box-shadow: 4px 4px #666;
    font-weight: bold;
    font-size: 100%;
    color: #fff;
    padding: .25em 1.5em;
}

interviewlink linkbutton a:hover {
    color: #ddd;
    transition: .1s;
}

collaboinquiry a {
    display: block;
    background: #fd0e6e;
    text-align: center;
    margin: 2em auto;
    padding: 1.6em;
    width: 60%;
    border-radius: 4px;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 140%;
}

collaboinquiry a:visited {
    color: #fff;
}

collaboinquiry a:hover {
    color: #ddd;
    transition: .1s;
}

interviewfoot {
    color: #274765;
    display: none;
    font-size: 130%;
    font-weight: bold;
    text-align: center;
}


/**

28.技術をつかう

*/

.concierge {
    position: relative;
}

.concierge b {
    color: #555;
}

labname {
    display: block;
    position: absolute;
    top: 2em;
    right: 10%;
    color: #333;
    padding: 2px;
    width: 12em;
    text-align: center;
    margin: 0 0 0 auto;
}

labname interviewlink a {
    margin-top: 0em;
    margin-bottom: 1em;
}

labname interviewlink a:hover {
    background: #2a4073;
    transition: .2s;
}

dropdownlink {
    display: block;
    border: 1px solid #333;
    position: absolute;
    right: 10%;
    background: #fff;
    color: #333;
    padding: 2px;
    width: 10em;
    text-align: center;
}

pjcatch {
    display: block;
    font-size: 140%;
    font-weight: bold;
    margin-top: 2em;
    word-break: break-all;
}

.concierge_home visual img {
    width: 100%;
}

.concierge abstract {
    margin: 1em;
    width: 95%;
    font-size: 135%;
}

[id="p0210100"] h1 {
    font-size: 200%;
}

[id="p0210100"] line {
    font-size: 130%;
}

.concierge abstract p {
    font-size: .85em;
}

.concierge visual a {
    width: 80%;
}

.concierge visual img {
    height: auto;
    pointer-events: all;
}

.concierge flex {
    align-items: center;
    flex-direction: column;
    width: 95%;
    margin: 0 auto;
}

.concierge #photogallery flex {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
}

.concierge div:not(#detail):not(.videowrap):not(.picwrap) {
    border: 1px solid #333;
    padding: 1em;
    margin: 1em auto;
    width: 85%;
}

.concierge .picwrap {
    margin-bottom: 2em;
}

.concierge b {
    font-size: 120%;
    padding: 0 0 1em 0;
    display: block;
}

#photogallery figure img {
    height: 300px;
    pointer-events: all;
}

#photogallery>figure img {
    display: block;
    margin: 0 auto;
}

#photogallery video {
    width: 100%;
    height: auto;
}

[id="p0210100"] #photogallery moviearea {
    display: block;
    margin: 1em 0 2em;
}

@media screen and (max-width: 900px) {
    .concierge flex {
        align-items: center;
    }
    #photogallery figure img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 300px;
    }
    .concierge visual img {
        width: 100%;
    }
    .concierge visual a {
        width: 100%;
    }
}

main#top listview,
main#top breadcrumb,
main#top .concierge {
    width: 80%;
    margin: 0 auto;
}

.vshowroom img {
    max-width: 90%;
}

visual {
    display: block;
    width: 100%;
    margin: 10px auto;
    position: relative;
}

visual img {
    width: 80%;
}

.concierge visual {
    width: 95%;
}

.concierge visual img {
    width: 100%;
}

.concierge visual figcaption {
    width: 100%;
}

.videowrap {
    position: relative;
    padding-bottom: 56.25%;
    margin-bottom: 2em;
}

.videowrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

scene,
keytag,
patent {
    display: block;
    width: 80%;
    margin: 2em auto;
    padding: 10px;
    border: 1px solid #333;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

keytag,
patent {
    min-height: 5em;
}

patent#pjs ul li {
    word-break: break-all;
}

.popup {
    position: relative;
}

utilicons {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 95%;
}

utilicons figure {
    width: 85px;
    margin: 5px;
    padding: 8px;
    border: #fff 4px solid;
}

visual utilicons figure {
    padding: 20px;
    position: absolute;
    top: 0;
    cursor: pointer;
    border: 4px transparent solid;
    background-image: url('more.png');
    background-size: 3.5vw 3.5vw;
    background-repeat: no-repeat;
    animation: fluff-baloon 2s infinite linear;
    display: block;
    width: 2.5vw;
    height: 2.5vw;
}

@keyframes fluff-baloon {
    0% {
        background-position: top;
    }
    50% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }
}

.techhome utilicons figure {
    cursor: pointer;
}

.techhome utilicons figure:hover {
    background: rgba(254, 206, 226, .7);
}

visual utilicons figure:hover {
    transition: .2s;
    background: rgba(254, 206, 226, .7);
    background: url("lockon.svg");
    background-size: 3.7vw;
    background-repeat: no-repeat;
    animation: lockon 2s ease;
}

visual utilicons figure:hover figcaption {
    color: #222;
    transition: .1s;
    font-weight: 900;
}

@keyframes lockon {
    0% {
        transform: scale(.9, .9);
    }
    30% {
        transform: scale(1.1, 1.1);
    }
    50% {
        transform: scale(1, 1);
    }
    60% {
        transform: scale(1.15, 1.15);
    }
    85% {
        transform: scale(1.15, 1.15);
    }
    100% {
        transform: scale(1, 1);
    }
}

utilicons figure img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
}

utilicons figcaption {
    width: 100%;
    margin: 8px auto;
    font-size: 80%;
    text-align: center;
}

visual utilicons figure img {
    width: 3vw;
    height: 3vw;
    animation: light-fluffy 2s linear infinite;
}

@keyframes light-fluffy {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0);
    }
}

tagwords,
tagword {
    display: flex;
    word-break: keep-all;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
    align-items: center;
}

tagwords {
    line-height: 2;
}

tagword hash {
    color: #333;
    cursor: initial;
}

tagword hash:hover {
    text-decoration: none;
}

keytag {
    display: none;
}

#scene figcaption {
    color: #333;
    font-size: 80%;
}

visual figcaption {
    width: 80%;
    text-align: left;
}

hash {
    display: inline;
    padding: 10px;
    cursor: pointer;
    color: #fd0e6e;
}

hash:hover {
    text-decoration: underline;
}

hashuser {
    display: block;
    height: 2em;
    text-shadow: .1em 0 #111, .1em 0 #111;
}

hashpj {
    display: block;
    text-indent: 1em;
    margin: 1em;
}

hashuser hashpj a {
    list-style-type: circle;
    color: #fff;
    text-decoration: underline;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: bold;
}

hashuser hashpj a:visited {
    color: #efefef;
}

hashlink {
    padding: 10px;
}

hashlink a {
    cursor: pointer;
    color: #fd0e6e;
}

hashlink a:hover {
    text-decoration: underline;
}

.modal__all {
    top: 0;
    height: 500vh;
    background: #090909;
    opacity: .1;
}

.modal__center {
    top: 180vh;
    height: 350px;
    width: 80vw;
    background: #090909;
    opacity: .9;
}

#modal-user .modal__center {
    top: 50%;
}

.modal__center windowarea {
    width: 90%;
    text-shadow: .1em 0 #111, .1em 0 #111;
}

.modal__center h2 {
    color: #fff;
    border-bottom: #fd0e6e solid 2px;
    font-size: 1.35em;
}

.modal__center theme {
    font-size: 2em;
    margin: 0 .5em;
}

patentinfo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 95%;
}

patentinfo a::before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 8px solid transparent;
    box-sizing: border-box;
    border-left-color: #222;
}

patentinfo table {
    width: auto;
    margin: 0 auto;
}

patentinfo th,
patentinfo td {
    padding: .5em;
}

@media screen and (max-width: 900px) {
    patentinfo table th {
        display: none;
    }
    patentinfo td:first-child {
        display: list-item;
        list-style-type: disc;
        margin-left: 1em;
    }
    patentinfo td:last-child {
        text-indent: 2em;
    }
}

detail {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    min-height: 5em;
}

printin {
    display: none;
}

detaillink {
    display: block;
}

detaillink a {
    color: #fff;
    font-size: 120%;
    padding: 1em;
}

projectdetail {
    display: flex;
    padding: 2px;
    justify-content: center;
}

projectdetail img {
    width: 60%;
    height: 60%;
    display: none;
}

pjurl {
    display: flex;
    padding: 2px;
    justify-content: flex-start;
    text-indent: 2em;
}

pjurl p {
    margin: .5em 0;
}

contactdetail {
    display: block;
    text-align: left;
}

infodetail {
    display: none;
    font-size: .95em;
    margin: 1em 0;
}

telmail {
    margin: 0;
}

telmail i {
    font-size: .9em;
    margin: 0 .5em;
}

updateinfo {
    display: block;
    font-size: 60%;
    text-align: right;
}

.concierge collaboinquiry a {
    padding: 1em;
    width: 40%;
    margin: .5em auto;
}

.concierge collaboinquiry a:hover {
    background: #001d42;
    transition: .3s
}

vextop {
    background: navy;
    position: fixed;
    bottom: 10%;
    right: 0;
}

vextop a {
    padding: .25em 1em;
    display: block;
}

vextop a p {
    color: #efefef;
    font-weight: bold;
    font-size: 100%;
}

@media screen and (max-width: 1080px) {
    labname {
        position: static;
        top: 0;
        right: 0;
    }
    visual {
        width: 100%;
    }
    projectdetail {
        flex-direction: column;
    }
    projectdetail img {
        width: 100%;
        height: 100%;
        margin: 1em auto;
    }
    contactdetail {
        margin: 0 auto;
    }
    infodetail {
        margin: .5em 0;
        font-size: 1em;
    }
    scene,
    keytag,
    patent,
    detail {
        margin: .5em 0;
        padding: .5em;
        width: 95%;
        border: none;
    }
    patentinfo {
        padding: .5em;
    }
    .modal__center h2 {
        font-size: 110%;
    }
    .modal__center theme {
        font-size: 150%;
    }
}

qr {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 30px;
    height: 30px;
    display: none;
}

#modal-user {
    overflow: hidden;
    margin: 0;
    width: 100%;
    position: static;
    display: none;
    z-index: 120000;
    height: auto;
}

img[usemap] {
    max-width: 100%;
    height: auto;
}

baloonarea {
    position: static;
    display: block;
}

baloon {
    position: absolute;
    display: block;
    background: rgba(253, 14, 110, .8);
    box-shadow: 2px 2px #333;
    border-radius: 8px;
    padding: 12px;
}

baloon hashuser {
    height: auto;
}

baloon closer {
    font-size: 100%;
    color: #333;
    background: #efefef;
}

.baloon-user {
    top: 20px;
    width: 200px;
    height: auto;
}

area {
    cursor: url(cursor.png), auto;
}

preview {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    font-size: 90%;
    margin-left: auto;
    margin-right: 10%;
}

preview img {
    width: 1.5em;
    height: 1.5em;
}

preview i {
    font-size: 110%;
}

doprint {
    display: block;
    position: relative;
    height: 0;
}

#doPrint {
    position: absolute;
    right: 0;
    left: 0;
}

#popup {
    position: absolute;
    display: none;
    background: #666;
    opacity: .9;
    border: 1px solid #555;
    padding: 1em;
    text-align: center;
    color: #fff;
    max-width: 200px;
}

#popup img {
    max-width: 180px;
}


/**

29.印刷用

*/

.print content {
    margin: 0 auto;
    width: 90%;
}

.print #top {
    width: 100%;
}

.print doprint {
    height: 4em;
}

.print printin {
    display: block;
}

.print printout {
    display: none;
}

.print #detail,
.print #rellink,
.print #secondpic {
    page-break-inside: avoid;
}

.print projectdetail img {
    display: inline;
}

.print telmail {
    display: block;
    margin-top: 1em;
}

.print telmail img {
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: 1em;
}

.print .videowrap {
    display: none;
}

.print labname {
    top: 5em;
    pointer-events: none;
}

.print abstract,
.print scene,
.print keytag,
.print patent,
.print detail {
    width: 90%;
}

.print scene,
.print keytag,
.print patent {
    box-shadow: none;
}

.print titlearea {
    margin: 0 1em 0 1em;
    display: block;
}

.print titlearea img {
    width: 50px;
    height: 50px;
}

.print visual img {
    cursor: default;
    display: block;
}

.print pjcatch {
    margin-top: 0;
}

.print hashlink a,
.print hash {
    pointer-events: none;
}

.print utilicons figure {
    margin: 5px 0 0 0;
    pointer-events: none;
}

.print infodetail {
    display: flex;
    flex-direction: column;
}

.print #photogallery {
    display: none;
}

.print header,
.print category,
.print visual utilicons,
.print detaillink,
.print breadcrumb,
.print pjurl,
.print collaboinquiry,
.print cta,
.print contact,
.print footerarea,
.print footer,
.print footerlink,
.print gototop,
.print bottommenu,
.print credit,
.print vextop,
.print iframe,
.print video,
.print demolink {
    display: none;
}

.print qr {
    display: block;
}

@media print {
    #news thesis {
        opacity: 1 !important;
    }
    .hide-text {
        display: block;
    }
    .readmore {
        display: none;
    }
    .grad-btn {
        display: none;
    }
    .grad-item::before {
        height: auto;
    }
    .grad-item {
        height: auto;
    }
    .grad-item jtitle {
        width: 100%;
    }
    pagination {
        display: none;
    }
    [id^='p021'],
    [id^='p021'] figcaption {
        font-size: 75%;
    }
    [id^='p021'] labname {
        top: 0;
    }
    [id^='p021'] content {
        margin: 0 auto;
        width: 90%;
    }
    [id^='p021'] doprint {
        display: none;
    }
    [id^='p021'] abstract,
    [id^='p021'] scene,
    [id^='p021'] keytag,
    [id^='p021'] patent,
    [id^='p021'] detail {
        width: 90%;
    }
    [id^='p021'] scene,
    [id^='p021'] keytag,
    [id^='p021'] patent {
        box-shadow: none;
    }
    [id^='p021'] titlearea {
        margin: 0 1em 0 1em;
    }
    [id^='p021'] titlearea img {
        width: 50px;
        height: 50px;
    }
    [id^='p021'] pjcatch {
        margin-top: 0;
    }
    [id^='p021'] utilicons figure {
        margin: 5px 0 0 0;
        padding: 0;
        width: 30px;
    }
    [id^='p021'] utilicons img {
        width: 25px;
        height: 25px;
        padding: 5px;
    }
    [id^='p021'] infodetail {
        display: flex;
        flex-direction: column;
    }
    [id^='p021'] printin {
        display: block;
    }
    [id^='p021'] projectdetail img {
        display: inline;
    }
    [id^='p021'] header,
    [id^='p021'] preview,
    [id^='p021'] section,
    [id^='p021'] category,
    [id^='p021'] visual utilicons,
    [id^='p021'] detaillink,
    [id^='p021'] printout,
    [id^='p021'] breadcrumb,
    [id^='p021'] pjurl,
    [id^='p021'] collaboinquiry,
    [id^='p021'] cta,
    [id^='p021'] contact,
    [id^='p021'] footerarea,
    [id^='p021'] footer,
    [id^='p021'] footerlink,
    [id^='p021'] gototop,
    [id^='p021'] credit,
    [id^='p021'] vextop,
    [id^='p021'] iframe,
    [id^='p021'] video,
    [id^='p021'] demolink {
        display: none;
    }
    [id^='p021'] qr {
        display: block;
        position: absolute;
        top: -50px;
        right: 0;
    }
}


/**

30.レスポンシブ

*/

@media screen and (max-width: 1280px) {
    intro {
        width: 100%;
    }
    bg img {
        display: block;
        margin: 0 auto;
    }
    bg figure {
        margin: 0 auto;
        width: 100%;
    }
    bg figure img {
        margin: 0 auto;
    }
    tmpl {
        flex-direction: column;
    }
    #p0200400 tmpl {
        width: 100%;
    }
    contentblock {
        width: 100%;
    }
    tmpl img {
        width: auto;
        height: 80%;
        margin: 0 auto;
    }
    tmpl abstract {
        align-self: center;
        width: 85%;
    }
    subtitle {
        margin: .5em 5%;
    }
    blog {
        height: 150px;
        cursor: pointer;
    }
    blog:hover {
        background: #efefef;
    }
    blog authorarea,
    blog p,
    blog more {
        display: none;
    }
    blog h2 {
        border-bottom: 0;
    }
    blog abstract {
        min-width: 50%;
        margin: 0 1em 0 0;
    }
    blog figure {
        margin: 0;
    }
    blog .horizontal-width {
        width: auto;
        height: auto;
        max-height: 140px;
        min-height: inherit;
        max-width: 100%;
    }
    blog .vertical-width {
        height: 140px;
        min-height: inherit;
        width: auto;
    }
    sortarea type {
        padding: .25em 1em;
    }
    sortarea tag {
        font-size: 90%;
    }
}

@media screen and (max-width: 1080px) {
    #top section {
        background-image: none;
    }
    canvas#lines {
        width: auto;
    }
    jname {
        order: -5;
    }
    ename {
        order: -4;
    }
    degree {
        order: -3;
    }
    portrait {
        order: -2;
        margin: 30px auto;
    }
    postname,
    jname,
    ename {
        padding: 0;
    }
    tmpa {
        flex-direction: column-reverse;
    }
    gallery {
        flex-direction: column;
    }
    role {
        flex-direction: column;
    }
    eventlogo {
        flex-direction: column;
    }
    eventlogo description {
        display: block;
        padding: 1em 0;
        font-size: 90%;
    }
    logoarea {
        width: 100%;
    }
    viewarea {
        width: 80%;
        margin: 0 auto;
    }
    moviearea viewarea {
        margin: 0;
        margin-bottom: 40px;
        max-width: 85vw;
    }
    media {
        margin: 4px auto;
    }
    interviewer {
        font-size: 120%;
    }
    projectinfo {
        font-size: 120%;
    }
    projectinfo span {
        margin: 0;
    }
}

@media screen and (max-width: 900px) {
    jumbotron {
        flex-direction: column;
        min-height: 25em;
    }
    breadcrumb {
        display: none;
    }
    pagetitle {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    pagetitle h1 {
        margin: 0 54px 0 0;
        text-align: center;
        font-size: 200%;
    }
    pagelink {
        display: flex;
        flex-direction: column;
        background: #666;
        opacity: 1;
        flex: none;
        flex-wrap: wrap;
    }
    contentlink {
        width: calc(100% - 14px);
        padding: 6px;
    }
    contentlink a {
        font-size: 80%;
        color: #fff;
        position: relative;
        padding-left: 1em;
    }
    contentlink a::before {
        position: absolute;
        top: .15em;
        left: 0;
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
    }
    contentlink a:hover {
        border-bottom: 1px #fff solid;
        color: #ddd;
    }
    section {
        height: auto;
    }
    contents h3 {
        display: flex;
        flex-direction: column;
    }
    content figure img {
        width: 100%;
    }
    utilicons figure img {
        width: 32px;
        height: 32px;
    }
    utilicons figcaption {
        text-align: center;
    }
    .concierge preview,
    .concierge_home preview,
    .concierge category {
        display: none;
    }
    #rsl tmpm {
        flex-direction: column;
    }
    #rsl tmpm abstract {
        width: 35em;
    }
    tmpm {
        flex-direction: column-reverse;
    }
    subtmpm {
        flex-direction: column-reverse;
        justify-content: center;
        max-width: 95%;
    }
    thesis {
        flex-direction: column;
    }
    jdate,
    jtitle,
    jdata {
        width: 100%;
        text-align: left;
        word-wrap: break-word;
    }
    visitor jtitle {
        font-size: 90%;
    }
    cv {
        flex-direction: column;
    }
    cv cat {
        width: auto;
    }
    cv sentence {
        width: auto;
        padding: .7em;
        font-size: 80%;
    }
    table {
        margin: 1.5em auto;
        table-layout: fixed;
    }
    table td,
    table th {
        max-width: 100%;
        display: block;
        padding: .5em;
    }
    #p0801001 table td {
        padding: .25em .5em;
    }
    thead {
        display: none;
    }
    #p0300300 td:first-child,
    #p0300400 td:first-child,
    #p4300400 td:first-child {
        text-align: left;
    }
    #news {
        width: 90%;
    }
    #news titlearea {
        margin-left: 0;
    }
    #news cat {
        margin-left: 0;
    }
    #news thesis:nth-of-type(even),
    #news thesis:nth-of-type(odd) {
        background: none;
    }
    #news sentence {
        padding: 0;
        width: 95%;
    }
    #news sentence table {
        width: 100%;
    }
    #news sentence div span {
        margin: 0;
        margin-top: 5px;
        margin-right: 5px;
    }
    sentence {
        width: 95%;
    }
    #interview {
        width: 100%;
    }
    leadcopy h4 {
        font-size: 140%;
        max-width: 100%;
    }
    partner {
        font-size: 100%;
    }
    collabocontent {
        padding: 0;
    }
    casenum {
        width: 45px;
        height: 45px;
        top: -25px;
    }
    no {
        line-height: 65px;
    }
    leadcopy {
        top: 8vw;
    }
    interviewinfo {
        font-size: 80%;
    }
    .rwd80 {
        width: 80%;
        height: 80%;
    }
    visitor {
        width: 100%;
    }
    exhibition {
        width: 95%;
    }
    blog h2 {
        font-size: 100%;
    }
    #scene .tacenter {
        text-align: left;
        width: 95%;
        margin: 1em auto;
    }
    vextop {
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        z-index: 1000;
    }
}

@media screen and (max-width: 700px) {
    listview {
        width: 90%;
    }
    subtmpa abstract {
        width: 100%;
    }
    listview ol {
        padding: 0;
    }
    list {
        font-size: 90%;
        width: 95%;
    }
    thesis {
        justify-content: space-around;
    }
    categoryview {
        width: 95%;
    }
    categoryview abstract {
        width: 100%;
    }
    categoryview ol {
        padding: 0;
    }
    categoryview li {
        margin-top: 12px;
    }
    category {
        flex-wrap: wrap;
    }
    card.empty {
        display: none;
    }
    abstract {
        width: 80%;
        margin: 0 auto;
    }
    tmpl abstract {
        width: 95%;
    }
    listview abstract {
        margin: 0 auto;
    }
    subtitle {
        margin: 0;
        width: 100%;
    }
    tag {
        font-size: 80%;
    }
    snsicon {
        flex-direction: column;
    }
    person {
        width: auto;
    }
    mapimage {
        width: 100%;
    }
    leadcopy {
        max-width: 100%;
        left: 10px;
        right: 10px;
    }
    leadcopy h4 {
        font-size: 110%;
        margin: 0 1em;
    }
    collabobanner hr {
        top: 120px;
        width: 80%;
    }
    partner {
        font-size: 80%;
    }
    interviewphoto:nth-child(odd) {
        float: none;
    }
    question {
        clear: both;
    }
    #popup {
        max-width: 90px;
        font-size: 60%;
    }
    #popup img {
        max-width: 80px;
    }
    utilicons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    utilicons figure {
        padding: 0;
    }
    visual utilicons figure {
        display: none;
    }
    .ffplink li {
        width: 80%;
    }
}

@media screen and (max-width: 486px) {
    logo img {
        min-width: 220px;
    }
    tmpb {
        display: block;
    }
    tmpl ul,
    tmpl ol {
        padding-left: 1em;
    }
    tmpl li {
        margin: 1em 0;
    }
    subtmpa {
        width: 100%;
    }
    listview abstract {
        width: 100%;
    }
    cardarea viewarea {
        width: 60%;
    }
    cardarea a {
        display: block;
        max-width: 100vw;
    }
    card {
        margin: 1em 0;
    }
    viewarea {
        padding: 0;
    }
    pagetitle h1 {
        font-size: 140%;
        text-indent: 1em;
    }
    content {
        width: 90%;
    }
    #p0200400 content {
        width: 95%;
    }
    sentence {
        padding: .5em;
    }
    locallabel {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    loc {
        width: auto;
        font-size: 75%;
        text-align: center;
    }
    images img {
        max-width: 100px;
        min-width: 100px;
        max-height: 150px;
        min-height: 150px;
    }
    fiscal {
        justify-content: center;
    }
    fiscal.fiscal,
    fiscal.press_fiscal {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        justify-content: normal;
    }
    tabwhite {
        font-size: 90%;
        padding-bottom: 8px;
    }
    tabwhite a:hover {
        border-bottom: none;
    }
    subtitle img {
        display: none;
    }
    subtitle {
        width: 100%;
    }
    subtitle h3 {
        width: 90%;
    }
    subtitle h4 {
        margin-right: 0;
    }
    profile subtitle h3 {
        margin-left: .5em;
    }
    abstract {
        width: 100%;
    }
    cvlist {
        width: 100%;
    }
    eventlogo,
    eventlogo viewarea {
        width: 90%;
    }
    eventlogo media img,
    eventlogo media video {
        max-width: 100%;
    }
    logoarea media img {
        max-width: 100%;
    }
    cv cat {
        padding: 12px;
    }
    .vertical-width,
    .horizontal-width {
        width: 90%;
    }
    subtitle#blog img {
        display: inline;
    }
    blog {
        font-size: 80%;
    }
    blog figure {
        max-width: 45%;
        min-width: 45%;
    }
    interviewcontent {
        padding: 0;
    }
    collabobanner {
        height: 200px;
    }
    leadcopy {
        left: 10px;
        right: 10px;
    }
    leadcopy h4 {
        font-size: 80%;
    }
    collabobanner hr {
        top: 70px;
        width: 80%;
    }
    partner {
        left: 20px;
        right: 20px;
        font-size: 60%;
        top: 100px;
    }
    portrait img {
        max-width: 60vw;
        margin: 0;
    }
    movielist {
        width: 100%;
    }
    [id*='300810'] moviearea {
        margin: 0;
    }
    [id*='300810'] moviearea viewarea {
        width: 75%;
    }
    [id*='300810'] moviearea iframe,
    [id*='300810'] moviearea video {
        width: 100%;
    }
    #twitter-widget-1 {
        width: 90vw !important;
    }
}


/**

31.Edge対応

*/

@supports (-ms-ime-align: auto) {
    sentence a,
    inline-border a,
    writer#blogwriter {
        text-decoration: underline;
        background: none;
    }
}


/**

32.IE対応

*/


/**

33.Safari対応

*/

_::-webkit-full-page-media,
_:future,
:root sentence a,
:root inline-border a,
:root writer#blogwriter {
    text-decoration: underline;
    text-decoration-skip: ink;
    background: none;
}