@charset "utf-8";

/**********

all.css

3サイトに係る全ページ共通のCSSです。

-01 共通
-02 モーダル関連
-03 ハンバーガーメニュー
-04 ハンバーガーメニュー押下後のサイトマップ
-05 「閉じる」ボタン
-06 ヘッダー
-07 メインビジュアル
-08 スクロールダウンアニメーション
-09 メインビジュアル右のサイド
-10 バナーカルーセル
-11 バナー
-12 テロップモーダル、Twitter埋め込み
-13 所在地バルーン
-14 ブックマークバルーン
-15 メインビジュアルの中の飛遊オブジェクト
-16 メインビジュアルのキャッチコピー
-17 メインコンテンツ
-18 行頭Wi-Fiアイコン
-19 「続きを読む」ボタン
-20 index.html
-21 組織紹介
-22 所在地
-23 スペーサー
-24 CTA
-25 お問合せ
-26 お問合せフォーム
-27 サイト内検索
-28 フッター
-29 ハンバーガーおよびフッターのサイトマップ
-30 著作権表示
-31 トップへ戻るボタン
-32 ボトムメニュー
-33 行末アイコン
-34 レスポンシブ
-35 Edge対応
-36 IE対応
-37 Safari対応
-38 印刷用CSS(全ページ共通)
-39 スキップリンク
-40 GDPR同意ボタン

**********/


/**

01.共通

*/

:root {
    color-scheme: light !important;
}

html {
    background: #333;
}

header {
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	padding-top: 1rem;
	z-index: 9999;
	background: #f8f8ff;
	border-bottom: 1px solid #999;
	/*height: 125px;*/
	display: block;
}

.menubox {
    width: 97%;
    height: auto;
    display: block;
}

/*幅が狭い場合にメニューを見せなくする*/
@media screen and (max-width: 1260px) {
		.menubox {
			display: none;
		}
}

/*メニューバー*/
.menu {
    width: 42rem;
    height: 100%;
    margin: 0 0 0 0;
}

.menu ul {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .5rem 0;
}
/*メニューバー ここまで*/

/*メニューバー*/
.topmenu {
    width: 42rem;
    text-align: right;
    font-family: "Segoe UI Semibold", "Segoe UI", sans-serif;
}

/*一段下の幅設定*/
.topmenu li {
    width: 9rem;
    position: relative;
    /* ここで親要素を指定 */
}

.topmenu li a {
    border-right: 1px solid #8c8c8c;
    text-align: center;
    font-size: 0.8rem;
    display: block;
    padding: .3rem 0;
    text-decoration: none;
    color: #999;
    position: relative;
    /* z-index用のpositionプロパティ */
    z-index: 100;
    /* z-indexで前面に表示 */
    transition: .5s;
}

.topmenu li:last-child a {
    border: none;
}

.topmenu > li:hover > a {
    /*layer-1*/
    color: #002272;
    /*background: #afc6e2;*/
}

.topmenu > li li:hover > a {
    /*layer-2*/
    color: #fff;
    background: rgba(0, 34, 114, 0.85);
}

.topmenu li ul {
    position: absolute;
	z-index: 10;/*重ねて表示する設定*/
	display: none;/*クリックしない場合に表示されない設定*/
}

/*一段下の表示設定*/
.topmenu li ul li a {
    float: none;
    background: rgba(245, 245, 245, 0.9);
    border-right: none;
    border-bottom: 1px solid #1a1a1a;
    display: block;
    font-size: 0.6rem;
    padding: 0.7rem 0 0.7rem 0;
    color: #474159;
    font-weight: 500;
	font-family: "メイリオ", "Yu Gothic UI", sans-serif;
}

/*submenuが下に列をなして表示する設定*/
.submenu {
    display: flex;
    flex-direction: column;
}

/*google検索を幅が狭い場合に見せなくする*/
.serch_hidden {
	/*text-align: right;*/
}

/*google検索を幅が狭い場合に見せなくする*/
@media screen and (max-width: 1480px) {
		.serch_hidden {
			display: none;
		}
}

/*画像の幅設定*/
.tacenter img {
	width: 55%;
	height: auto;
	text-align: center;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-size: 110%;
    overflow-x: hidden;
    max-width: 100vw;
    min-height: 100vh;
    position: relative;
    background: #fff;
}

a {
    text-decoration: none;
	/*text-decoration-style: dotted;*/
    color: #333;
}

a:visited {
    color: #2a4073;
}

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

a:hover img {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

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

rwd {
    display: none;
}

.rwd {
    display: block;
}

.ti1em {
    text-indent: 1em;
}

.ti2em {
    padding-left: 3em;
    text-indent: 0;
}

.ml1em {
    margin-left: 1em;
}

.w100 {
    width: 100%;
}

.mw100 {
    max-width: 100%;
}

.mw80 {
    max-width: 80%;
}

.m0 {
    margin: 0;
}

.m0a {
    margin: 0 auto;
}

fontx70 {
    font-size: 70%;
}

.u {
    text-decoration: underline;
}

.tacenter {
    text-align: center;
}

.wrbw {
    word-wrap: break-word;
}

.dinone {
    display: none;
}

.diblk {
    display: block;
}

@media screen and (max-width: 1280px) {
    flex {
        flex-direction: column;
        align-items: center;
    }
    .dinone {
        display: block;
    }
    .diblk {
        display: none;
    }
}

.evernone {
    display: none;
}

iframe {
    border: none;
}

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

/**

02.モーダル関連

*/

.modal {
    display: none;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 500001;
}

@media screen and (min-width: 900px) {
    #p0000100 .modal,
    #p4000100 .modal {
        top: -8px;
    }
}

.modal__bg {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: fixed;
    width: 100%;
    /*    opacity: .7;*/
    z-index: 499990;
}

.modal__content {
    background: #fff;
    left: 50%;
    padding: 20px;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-height: 70vh;
    min-height: 6em;
    max-width: 600px;
    min-width: 10em;
    z-index: 500000;
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow-y: auto;
}

#modal-share .modal__content {
    width: 90%;
}


/**

03.ハンバーガーメニュー

*/

hmenu {
    display: block;
    background: #333;
    position: absolute;
    left: 0;
    top: 0;
    padding: 18px;
    margin: 0;
    padding: 0;
    height: auto;
    z-index: 100001;
}

hbg {
    display: flex;
    flex-direction: column;
    margin: 1em;
    text-align: center;
}

hbg span {
    display: block;
    margin: 5px auto 5px auto;
    width: 40px;
    height: 1px;
    background: aliceblue;
}

letter {
    font-size: 80%;
    color: aliceblue;
}


/**

04.ハンバーガーメニュー押下後のサイトマップ

*/

space {
    position: fixed;
    top: 0;
    bottom: auto;
    left: -100%;
    width: 50%;
    max-width: 1000px;
    height: auto;
    z-index: 100000;
    background: #555;
    opacity: .9;
    color: #fff;
    overflow-y: auto;
}

@media screen and (max-width: 900px) {
    space {
        width: 100%;
    }
}

#hbg-search {
    outline: none;
    border: #333 solid 1px;
    display: block;
    width: 12em;
    height: 2em;
    margin: 1em;
    padding: 1em;
    background: #eee;
    position: absolute;
}

space a {
    display: block;
}

space a:visited {
    color: #fff;
}

space a:hover {
    color: #cdcdcd;
    text-decoration: underline;
    transition: 0s;
}

space .plus::after {
    content: url(../assets/plus-solid.svg);
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    margin: 0 .5em 0 0;
}

space headitem.next a::after {
    content: url(../assets/caret-right-solid.svg);
    display: inline-block;
    position: absolute;
    right: 0;
    width: 12px;
    height: 12px;
    margin: 0 .5em 0 0;
}

space page.next a::after {
    content: url(../assets/caret-right-solid.svg);
    display: inline-block;
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    margin: 0 2em 0 0;
}

space page.ti2em a::after {
    content: url(../assets/caret-right-solid.svg);
    display: inline-block;
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    margin: 0 calc(1em - 4px) 0 0;
}

space directory {
    text-indent: 1em;
}

space ul {
    text-indent: 2em;
}

page a {
    color: #fff;
    letter-spacing: 1.2px;
}


/**

05.「閉じる」ボタン

*/

close {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 180%;
    color: #fff;
    display: none;
}

closer {
    position: absolute;
    right: 18px;
    top: 8px;
    font-size: 200%;
    color: #fff;
    padding: 0 9px;
    display: block;
    background: #ccc;
    border-radius: 27px;
    height: 2.8rem;
}

closerbottom {
    position: absolute;
    right: 18px;
    top: 8px;
    font-size: 180%;
    color: #555;
    padding: 0 9px;
    /*    display: block;*/
    display: none;
    background: #fff;
}


/**

06.ヘッダー

*/

header {
    height: 125px;
	/*display: inline-block;*/
    display: block;
}

logo {
    display: block;
    text-align: right;
    padding: 8px;
    margin: 0 0 0 auto;
}

logo img {
    width: auto;
    max-width: 100%;
    max-height: 45px;
}

[id^='p1'] logo img,
[id^='p5'] logo img,
[id^='p2'] logo img,
[id^='p6'] logo img {
    max-width: 90%;
    height: 45px;
}

[id^='p0'] logo img,
[id^='p7020'] logo img,
[id^='p7620'] logo img {
    width: 50vw;
    max-width: 440px;
    height: auto;
}

lang {
    display: flex;
    font-size: 80%;
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 70px;
    cursor: pointer;
    z-index: 100001;
}

lang * {
    width: 3em;
    height: 2em;
    background: #bbb;
    text-align: center;
    line-height: 2;
}

lang a {
    display: block;
}

lang a:visited {
    color: #001d42;
}

lang a:hover {
    color: #fd0e6e;
}

lang .current {
    background: #001d42;
    color: #fff;
    cursor: default;
}

headericon {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    position: absolute;
    top: 70px;
    /*    right: 240px;*/
    right: 120px;
}

headericon>* {
    margin: 0 7px;
}

headericon i {
    margin: 0 .125em;
    padding: 0 .125em;
}

headericon img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background: #fff;
    padding: 4px;
    border-radius: 2px;
}

headericon span {
    display: inline-block;
    font-size: 80%;
    font-weight: 900;
    font-family: 'Lato', 'Meiryo UI', sans-serif;
    padding: 0 .25em;
    max-width: 5em;
    line-height: 1;
    vertical-align: middle;
    color: #555;
}

tw {
    margin: 0 0 0 14px;
    display: inline-block;
    cursor: pointer;
}

tw img {
    background: #000;
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

headericon a[href*="instagram"] {
    margin: 0 10px;
    display: inline-block;
}

headericon a[href*="instagram"] img {
    background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

hot {
    cursor: pointer;
    display: block;
}

hot img {
    animation: kneadspin 1.5s ease infinite;
}

@keyframes fanfare {
    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);
    }
}

@keyframes kneadspin {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-12deg);
    }
    30% {
        transform: rotate(12deg);
    }
    40% {
        transform: rotate(-8deg);
    }
    60% {
        transform: rotate(8deg);
    }
    80% {
        transform: rotate(-4deg);
    }
    90% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


/**

07.メインビジュアル

*/

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 90vh;
}

#top section {
    height: auto;
    background-image: url(../png/bg_cut.png);
    background-position: top right;
    background-repeat: no-repeat;
}

top {
    display: block;
    height: auto;
    max-height: 700px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

top img {
    width: 100%;
    max-height: 75vh;
}

@media screen and (max-width: 900px) {
    top {
        max-height: none;
    }
}

@media screen and (max-width: 486px) {
    top {
        min-height: 400px;
    }
}

canvas {
    pointer-events: auto;
    cursor: pointer;
}

canvas#tablet,
canvas#minis {
    display: none;
}

canvas#lines {
    min-width: 100vw;
    min-height: 700px;
    z-index: 10;
    opacity: .6;
    overflow: hidden;
}

canvas#rains {
    position: absolute;
    right: 400px;
    top: 0;
    z-index: 2;
}

.cg {
    pointer-events: auto;
    cursor: pointer;
}

.cg#tablet,
.cg#mini {
    display: none;
}

.cg#line {
    min-width: 100vw;
    min-height: 700px;
    z-index: 10;
    opacity: .6;
    overflow: hidden;
    right: 400px;
    top: 0;
    z-index: 2;
}

.cg#line canvas {
    min-width: 100vw;
    min-height: 700px;
}

@keyframes fluffy {
    0% {
        margin-top: 0;
        margin-left: 0;
    }
    16% {
        margin-top: -1px;
        margin-left: -4px;
    }
    33% {
        margin-top: 1px;
        margin-left: -4px;
    }
    50% {
        margin-top: 0;
        margin-left: 0;
    }
    66% {
        margin-top: -1px;
        margin-left: 4px;
    }
    83% {
        margin-top: 1px;
        margin-left: 4px;
    }
    100% {
        margin-top: 0;
        margin-left: 0;
    }
}

swing {
    display: block;
    position: absolute;
    height: auto;
    width: 100%;
    top: 0;
}

swing a:visited {
    color: #333;
}

top h1 {
    display: flex;
    font-size: 200%;
    position: absolute;
    padding: .2em;
    z-index: 50;
    animation: fluffy 2s linear infinite;
}

top h1:hover {
    color: #fd0e6e;
}

top h1:hover a {
    color: #fd0e6e;
}

#hoverletteren1 {
    top: 90px;
    right: 390px;
    animation-delay: 500ms;
}

#hoverletteren2 {
    top: 170px;
    right: 400px;
    animation-delay: 200ms;
}

#hoverletteren3 {
    top: 250px;
    right: 330px;
    animation-delay: 700ms;
}

#hoverletteren4 {
    top: 330px;
    right: 360px;
    animation-delay: 100ms;
}

#hoverletteren5 {
    top: 410px;
    right: 390px;
    animation-delay: 600ms;
}

#hoverletteren6 {
    top: 490px;
    right: 410px;
    animation-delay: 400ms;
}

#hoverletteren7 {
    top: 570px;
    right: 440px;
    animation-delay: 800ms;
}

swing miniheart {
    display: none;
    position: absolute;
}

swing miniheart img {
    width: 40px;
    height: 40px;
    animation: beat 1s infinite;
}

swing copylabel {
    display: none;
    position: absolute;
    color: #222;
    font-weight: bold;
}

swing svg {
    position: absolute;
    display: none;
    z-index: 10;
}

#hoverring1 {
    top: 70px;
    right: 490px;
}

#hoverring2 {
    top: 150px;
    right: 460px;
}

#hoverring3 {
    top: 230px;
    right: 450px;
}

#hoverring4 {
    top: 310px;
    right: 460px;
}

#hoverring5 {
    top: 390px;
    right: 480px;
}

#hoverring6 {
    top: 470px;
    right: 530px;
}

#hoverring7 {
    top: 550px;
    right: 570px;
}

#hoverletteren1:hover~#hoverletterjp1 {
    display: block;
    top: 95px;
    right: 280px;
}

#hoverletteren1:hover~#hoverheart1 {
    display: block;
    top: 90px;
    right: 340px;
}

#hoverletteren2:hover~#hoverletterjp2 {
    display: block;
    top: 175px;
    right: 280px;
}

#hoverletteren2:hover~#hoverheart2 {
    display: block;
    top: 170px;
    right: 340px;
}

#hoverletteren3:hover~#hoverletterjp3 {
    display: block;
    top: 255px;
    right: 220px;
}

#hoverletteren3:hover~#hoverheart3 {
    display: block;
    top: 250px;
    right: 280px;
}

#hoverletteren4:hover~#hoverletterjp4 {
    display: block;
    top: 335px;
    right: 210px;
}

#hoverletteren4:hover~#hoverheart4 {
    display: block;
    top: 330px;
    right: 310px;
}

#hoverletteren5:hover~#hoverletterjp5 {
    display: block;
    top: 415px;
    right: 210px;
}

#hoverletteren5:hover~#hoverheart5 {
    display: block;
    top: 410px;
    right: 340px;
}

#hoverletteren6:hover~#hoverletterjp6 {
    display: block;
    top: 495px;
    right: 180px;
}

#hoverletteren6:hover~#hoverheart6 {
    display: block;
    top: 490px;
    right: 240px;
}

#hoverletteren7:hover~#hoverletterjp7 {
    display: block;
    top: 575px;
    right: 180px;
}

#hoverletteren7:hover~#hoverheart7 {
    display: block;
    top: 570px;
    right: 240px;
}

#hoverletteren1:hover+#hoverring1,
#hoverletteren2:hover+#hoverring2,
#hoverletteren3:hover+#hoverring3,
#hoverletteren4:hover+#hoverring4,
#hoverletteren5:hover+#hoverring5,
#hoverletteren6:hover+#hoverring6,
#hoverletteren7:hover+#hoverring7 {
    display: block;
}

@media screen and (max-width: 1280px) {
    #hoverletteren1 {
        right: 290px;
    }
    #hoverletteren2 {
        right: 300px;
    }
    #hoverletteren3 {
        right: 230px;
    }
    #hoverletteren4 {
        right: 260px;
    }
    #hoverletteren5 {
        right: 290px;
    }
    #hoverletteren6 {
        right: 310px;
    }
    #hoverletteren7 {
        right: 340px;
    }
    #hoverring1 {
        right: 390px;
    }
    #hoverring2 {
        right: 360px;
    }
    #hoverring3 {
        right: 350px;
    }
    #hoverring4 {
        right: 360px;
    }
    #hoverring5 {
        right: 380px;
    }
    #hoverring6 {
        right: 430px;
    }
    #hoverring7 {
        right: 470px;
    }
    #hoverletteren1:hover~#hoverletterjp1 {
        right: 180px;
    }
    #hoverletteren1:hover~#hoverheart1 {
        right: 240px;
    }
    #hoverletteren2:hover~#hoverletterjp2 {
        right: 180px;
    }
    #hoverletteren2:hover~#hoverheart2 {
        right: 240px;
    }
    #hoverletteren3:hover~#hoverletterjp3 {
        right: 120px;
    }
    #hoverletteren3:hover~#hoverheart3 {
        right: 180px;
    }
    #hoverletteren4:hover~#hoverletterjp4 {
        right: 110px;
    }
    #hoverletteren4:hover~#hoverheart4 {
        right: 210px;
    }
    #hoverletteren5:hover~#hoverletterjp5 {
        right: 110px;
    }
    #hoverletteren5:hover~#hoverheart5 {
        right: 240px;
    }
    #hoverletteren6:hover~#hoverletterjp6 {
        right: 80px;
    }
    #hoverletteren6:hover~#hoverheart6 {
        right: 140px;
    }
    #hoverletteren7:hover~#hoverletterjp7 {
        right: 80px;
    }
    #hoverletteren7:hover~#hoverheart7 {
        right: 140px;
    }
}


/**

08.スクロールダウンアニメーション

*/


/**

09.メインビジュアル右のサイド

*/

windowarea {
    font-size: 70%;
    display: flex;
    width: 80%;
}

windowarea img {
    width: 30px;
    height: 30px;
    margin: 0 15px;
}

windowarea h2 {
    border-bottom: 0;
}


/**

10.バナーカルーセル

*/

.slick-arrow {
    z-index: 100;
}

.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
    left: 0;
    width: 70px;
    height: 130px;
    background: #65757d;
}

.slick-next,
.slick-next:hover,
.slick-next:focus {
    right: 0;
    width: 70px;
    height: 130px;
    background: #65757d;
}

.slick-prev::before {
    content: url(../assets/prev.png);
    opacity: 1;
}

.slick-next::before {
    content: url(../assets/next.png);
    opacity: 1;
}


/**

11.バナー

*/

.bannerpic.wtpbanner img {
    width: 463px;
}


/**

12.テロップモーダル、Twitter埋め込み

*/

newsarea {
    overflow: hidden;
    margin: 0;
    display: none;
    width: 100%;
    position: absolute;
    z-index: 120000;
    top: 110px;
    right: 60px;
}

newsarea span {
    margin: 1.2em 0 1.2em 1em;
    font-weight: 900;
}

newsicon {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    background: #fff;
    padding: .5em 0 .5em 2em;
}

newsicon a {
    display: flex;
    align-items: baseline;
}

newsicon img {
    width: 1em;
    height: 1em;
    display: inline-block;
    padding-right: 6px;
}

teloparea,
tweetarea {
    display: flex;
    flex-direction: column;
    width: auto;
    flex-wrap: nowrap;
    height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    margin-bottom: 2em;
}

tweetarea {
    display: block;
}

teloparea::-webkit-scrollbar,
tweetarea::-webkit-scrollbar {
    width: 3px;
}

teloparea::-webkit-scrollbar-track,
tweetarea::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 3px;
}

teloparea::-webkit-scrollbar-thumb,
tweetarea::-webkit-scrollbar-thumb {
    background: #fd0e6e;
    border-radius: 3px;
}

telop {
    display: block !important;
    margin: .5em;
    word-wrap: break-word;
    font-size: 85%;
    width: 90%;
    height: auto;
}

utime {
    display: block;
    padding: 2px 8px;
    margin: 8px;
    width: 9em;
    background: #eee;
    text-align: center;
    border: 1px solid #aaa;
}

telop a {
    display: block;
    padding: 2px;
    margin: 8px;
}

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

past {
    display: inline-block;
    font-size: 60%;
    text-decoration: underline;
    font-family: sans-serif;
}


/**

13.所在地バルーン

*/

locarea {
    overflow: hidden;
    margin: 0;
    display: none;
    width: 13em;
    font-size: 85%;
    position: absolute;
    z-index: 120000;
    top: 110px;
    right: 260px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .4);
    border: 1px solid #ddd;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
}

locarea span {
    margin: 1.2em 0 .5em 1em;
    font-weight: 900;
}

locname {
    display: block;
    margin: .5em -1em;
    padding: .25em 1em;
    font-size: 90%;
    width: 100%;
    text-indent: 1em;
    line-height: .5;
}

locname:hover {
    background: #fecee2;
}

locname a {
    display: block;
}

pin {
    display: block;
    cursor: pointer;
}


/**

14.ブックマークバルーン

*/

bookarea {
    overflow: hidden;
    margin: 0;
    display: none;
    width: auto;
    min-width: 200px;
    font-size: 85%;
    position: absolute;
    z-index: 120000;
    top: 110px;
    right: 60px;
}

bookarea span {
    margin: 1.2em 0 .5em 1em;
    font-weight: 900;
}


/**

15.メインビジュアルの中の飛遊オブジェクト

*/

heart {
    display: block;
    position: relative;
}

heart img {
    width: 50px;
    height: 50px;
    z-index: 100;
    position: absolute;
    animation: beat 1s infinite;
    top: 550px;
    left: 50px;
}

horizon {
    position: absolute;
    top: 570px;
    right: 300px;
    left: 60px;
    width: 0;
    height: 5px;
    background: #fd0e6e;
    z-index: 1;
}

anotherheart {
    display: none;
    position: relative;
}

anotherheart img {
    width: 50px;
    height: 50px;
    z-index: 100;
    position: absolute;
    animation: beat 1s infinite;
    top: 550px;
    right: 200px;
}

@keyframes flying {
    0% {
        top: calc(45vw - 330px * 0.45);
        left: calc(3vw - 330px * 0.03);
    }
    25% {
        top: calc(50vw - 330px * 0.5);
        left: calc(35vw - 330px * 0.35);
    }
    50% {
        top: calc(35vw - 330px * 0.35);
        left: calc(95vw - 330px * 0.95);
    }
    75% {
        top: calc(25vw - 330px * 0.25);
        left: calc(50vw - 330px * 0.5);
    }
    100% {
        top: calc(45vw - 330px * 0.45);
        left: calc(3vw - 330px * 0.03);
    }
}

@keyframes beat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes flyingRWD {
    0% {
        top: 45vw;
        left: 3vw;
    }
    25% {
        top: 50vw;
        left: 35vw;
    }
    50% {
        top: 35vw;
        left: 95vw;
    }
    75% {
        top: 25vw;
        left: 50vw;
    }
    100% {
        top: 45vw;
        left: 3vw;
    }
}


/**

16.メインビジュアルのキャッチコピー

*/

catchcopy {
    display: block;
    text-align: left;
    font-size: 360%;
    width: auto;
    height: auto;
    padding: 12px;
    margin: 36px;
    line-height: .4;
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 180px;
    z-index: 1;
    background: none;
}

catchcopy p {
    margin: 0;
    line-height: 1;
}


/**

17.メインコンテンツ

*/

main#top {
    position: relative;
}

main {
    flex-direction: column;
    background: #fff;
}

titlearea {
    display: flex;
    width: auto;
    /*margin: 2em 0 .5em 0;*/
	margin: 0 0 .2em 0;
}

titlearea img {
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    width: 80px;
    height: 80px;
}

headingarea {
    display: block;
    margin-bottom: 1em;
}

h2 {
    text-align: left;
    font-size: 180%;
    font-weight: 900;
    color: #fd0e6e;
    width: auto;
    border-bottom: 2px solid #ddd;
    margin: 4px 0;
    word-wrap: break-word;
}

h6 {
    text-align: left;
    font-size: 120%;
    font-weight: 900;
    color: #fd0e6e;
    width: auto;
    border-bottom: 2px solid #ddd;
    margin: 4px 0;
    word-wrap: break-word;
}

line {
    display: block;
    font-size: 90%;
    font-weight: 900;
    margin: 0;
}

contents {
    display: block;
    z-index: 5;
}

bg {
    display: flex;
    position: relative;
}

bg img {
    /*width: 50%;*/
    /*height: 100%;*/
	width: 60%;
	height: auto;
	max-width: 300px;
	box-shadow: 2px 2px 4px gray;
}

bg wallpaper img {
	width: 1600px;
	max-width: 100%;
	height: auto;
}

wallpaper {
	text-align: center;
}

wallpaper figure img {
	width: 750px;
	height: auto;
	position: relative;
}

wallpaper figcaption{
	color: #fff;
	font-weight: 700;
	line-height: 30px;
	width: 80%;
	height: 40%;
	position: absolute;
	left: 50%;
	/*top: 100%;*/
	transform: translate(-50%,-50%);
	text-align: center;
	text-shadow: 3px 3px 9px rgba(0,0,0,.9),-3px 3px 9px rgba(0,0,0,.9),3px -3px 9px rgba(0,0,0,.9),-3px -3px 9px rgba(0,0,0,.9);
	/*background: rgba(0,0,0,.3);*/
}

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

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

bg figure {
	text-align: center;
    margin: 0;
}

bg figure img {
    /*width: 280px;*/
	width: 180px;
    height: auto;
    max-width: 85vw;
	box-shadow: 2px 2px 4px gray;
}

icons {
	display: flex;
	align-items: center;
	/*align-items: flex-end;*/
	position: relative;
}

icons figure img {
	width: 250px;
	height: auto;
	box-shadow: 2px 2px 4px gray;
}

icons figure figcaption {
	inline-size: 0;
	min-inline-size: fit-content;
	margin-inline: auto;
}

#about bg figure img {
    *max-width: 100%;
}

bg figcaption {
    text-align: center;
    font-size: 90%;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

organization {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-left: 95px;
}

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

intro {
    display: flex;
    flex-direction: column;
    /*width: 50%;*/
	width: 75%;
    align-items: flex-start;
    /*margin-left: 95px;*/
	margin-left: 10px;
}

h5 {
    font-size: 100%;
}

intro h5 {
    display: inline-block;
    text-align: left;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

abstract {
    display: block;
    line-height: 150%;
    z-index: 10;
}

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

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

body:not(.en) abstract p {
    letter-spacing: 2px;
}

@media screen and (max-width: 900px) {
    abstract p,
    abstract li {
        font-size: 90%;
    }
}

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

#about intro abstract {
    width: 90%;
}

@media screen and (max-width: 900px) {
    intro abstract,
    #about intro abstract {
        width: 100%;
    }
}


/**

18.行頭Wi-Fiアイコン

*/

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

wifi ul {
    padding-left: 1em;
}

wifi li {
    list-style-type: none;
    padding-left: 18px;
    background: url(../svg/wifi-mini.svg) no-repeat top left;
    background-size: 12px auto;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

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

wifi a {
    color: #274765;
}

.wifi {
    padding-left: 24px;
    list-style-type: none;
    background: url(../svg/wifi-mini.svg) no-repeat top left;
    background-size: 12px auto;
}


/**

19.「続きを読む」ボタン

*/

more {
    display: block;
    text-align: center;
    padding: .75em;
    margin: .5em .5em .5em auto;
    width: 240px;
    border: 1px solid #333;
    border-radius: 2em;
    background: #eee;
    font-size: 90%;
    font-weight: 700;
    position: relative;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

more:hover {
    background: #e94e66;
    color: #fff;
    transition: .3s;
    border: 1px solid transparent;
}

more:after {
    content: '';
    border: 0;
    border-top: solid 1.5px #000;
    border-right: solid 1.5px #000;
    display: inline-block;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%) rotate(45deg);
}

more:hover:after {
    animation: goright .45s both;
    border-color: #fff;
    transition: .3s;
}

@keyframes goright {
    100% {
        right: 18px;
    }
}

.readmore {
    margin: 0 auto;
}

.hide-text {
    display: none;
}

.on-click {
    display: none;
}


/**

20.index.html

*/

relates {
    padding: 8px 0;
    margin: 12px 0 12px 1.5em;
    width: 90%;
}

topsection {
    display: block;
    height: auto;
    width: 80%;
    opacity: 0;
    margin: 0 auto;
    transform: translateY(20px);
    transition: all 1s;
    padding-top: 2em;
}

topsection relates {
    display: flex;
    flex-wrap: wrap;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

topsection relates a {
    padding-left: 18px;
    background: url(../svg/wifi.svg) no-repeat center left;
    background-size: 12px auto;
}

topsection relates a:hover {
    background: url(../svg/wifi-hover.svg) no-repeat center left;
    background-size: 12px auto;
}

topsection relates a[tabindex="-1"]:hover {
    background: url(../svg/wifi.svg) no-repeat center left;
    background-size: 12px auto;
    border-bottom-color: #333;
    color: #333;
}

h4 {
    display: inline-block;
    text-align: left;
    word-wrap: break-word;
    margin: 0 1em .5em 0;
}

h4 a {
    display: block;
    border-bottom: 2px solid #333;
}

h4 a:hover {
    border-bottom-color: #fd0e6e;
}

figcaption {
    text-align: center;
    line-height: 1;
    color: #677e93;
    margin: .5em 0;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}


/**

21.組織紹介

*/

#about contents {
    margin: 0;
}

#about bg {
    justify-content: flex-start;
}

#about figure {
    margin: 0 auto;
}

#profile figcaption {
    color: #fff;
    background: #8497b0;
    padding: .5em;
    width: 10em;
    margin: 0 auto;
    font-weight: bold;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

#profile:hover figcaption {
    background: #2a4073;
    transition: .2s;
}

/*お知らせ*/
.news .contents ul {
	list-style: none;
}

/*組織体制について*/
.organisation .contents ul {
	list-style: none;
}

/*成果*/
.achievements .contents ul {
	list-style: none;
}

/*研究紹介*/
.research .contents ul {
	list-style: none;
}

/*あなたと共に*/
.withyou .contents ul {
	list-style: none;
}

/*関連リンク*/
.links .contents ul {
	list-style: none;
}

/**

22.所在地

*/

#location {
    display: block;
    height: auto;
    width: 80%;
    margin: 0 auto;
}

access {
    display: flex;
    justify-content: space-around;
    height: auto;
}

access a {
    position: relative;
}

areamap {
    text-align: center;
    display: block;
    background: #eee;
    width: 30vw;
    height: auto;
    margin: 0 1em;
}

areamap h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 116%;
    min-height: 1.6em;
}

body:not(.en) areamap h3 {
    letter-spacing: 4px;
}

areamap img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

guide {
    display: block;
    text-align: center;
    padding: .75em;
    margin: 1.5em 2.5em 1.5em auto;
    width: 10em;
    border: 1px solid #333;
    border-radius: 2em;
    background: #fff;
    font-weight: 700;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

a:hover guide {
    color: #fff;
    background: #e94e66;
    transition: .3s;
    border: 1px solid transparent;
}

.directionguide {
    margin: 1.6rem auto 1rem;
}

.guidenotion {
    text-align: center;
}

.takingtime {
    max-width: 23rem;
    background: #eee;
    margin: 0 auto;
    padding: .5rem 1.6rem;
    border-radius: 4px;
}

.standguide {
    background: palegoldenrod;
    padding: 1rem 1rem 1rem 1.3rem !important;
    margin: 1rem 0;
    border-radius: 4px;
}

access a:not([href^=tel]) {
    display: block;
}

access a[href]:after {
    content: '';
    border: 0;
    border-top: solid 1.5px #000;
    border-right: solid 1.5px #000;
    display: inline-block;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 52%;
    right: 4.5em;
    transform: translateY(-50%) rotate(45deg);
}

access a[href^=tel]:after {
    content: none;
}

access a[href]:hover:after {
    animation: gorightcenter .45s both;
    border-color: #fff;
    transition: .3s;
}

@keyframes gorightcenter {
    100% {
        right: 3.75em;
    }
}

addressinfo {
    display: block;
    height: auto;
}

addressinfo p {
    margin: 8px;
    padding: 4px;
    line-height: 1.4;
    text-align: left;
    font-size: 90%;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

#cat2 abstract dl {
    max-width: 30rem;
    margin: 1rem auto;
}


/**

23.スペーサー

*/

spacer {
    display: block;
    height: 30px;
    background: none;
    width: 90%;
}

spacer10px {
    display: block;
    height: 10px;
}

menuspacer {
    display: none;
    height: 20px;
}


/**

24.CTA

*/

cta {
    display: block;
    width: 100%;
    margin-top: 2rem;
}

action {
    display: flex;
    justify-content: center;
    background: #333;
}

call {
    display: flex;
    flex-direction: column;
    width: 180px;
    height: auto;
    margin: 8px;
    font-size: 120%;
    color: #fff;
    text-align: center;
    border: 4px transparent solid;
    padding: 8px 4px;
    justify-content: center;
    align-items: center;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

call:hover {
    background: #e94e66;
    border: 4px #fff solid;
    border-radius: 8px;
    transition: .2s;
    animation-name: cta;
    animation-timing-function: linear;
    animation-duration: .4s;
}

call i {
    font-size: 3em;
    padding: 8px;
}

call img {
    width: 3.5em;
    height: 3.5em;
    padding: 8px;
}

call p {
    font-size: 80%;
    letter-spacing: 2px;
}

@keyframes cta {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}


/**

25.お問合せ

*/

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

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

.contact_bar {
	color: #fff;
	background: #8497b0;
	padding: .5em;
	width: 10em;
	margin: 0 auto;
	font-weight: bold;
	font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

.contact_bar:hover {
	color: #fff;
	background: #2a4073;
	transition: .2s;
}

@media screen and (max-width: 900px) {
    contact p {
        font-size: 90%;
    }
}

mail {
    display: block;
    text-align: center;
    font-size: 110%;
    padding: 10px 0;
    margin: 1em;
    line-height: 1.6;
}

mail img {
    width: 2em;
    height: 2em;
}

mail p {
    font-size: 90%;
    margin: 0;
}

abstract mail p {
    margin: 0;
    font-size: 100%;
}

@keyframes comtool {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-10deg) scale(1.2);
    }
    40% {
        transform: rotate(10deg) scale(1.2);
    }
    60% {
        transform: rotate(0deg);
    }
}

mail i {
    font-size: 2em;
}

mail i:hover {
    animation-name: comtool;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

a[href^="tel:"] {
    text-decoration: none;
}

.inquirybtn {
    margin: 3em auto 5em;
    text-align: center;
}

.btn {
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    cursor: pointer;
    user-select: none;
    transition: all .3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: .1em;
    color: #212529;
}

a.btn-flat {
    overflow: hidden;
    color: #fff;
    border-radius: 0;
    background: darkmagenta;
}

a.btn-flat span {
    position: relative;
    font-size: 120%;
    letter-spacing: .35em;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

.en a.btn-flat span {
    letter-spacing: 0;
}

a.btn-flat::before {
    position: absolute;
    top: 0;
    left: 35px;
    width: 140%;
    height: 500%;
    content: '';
    transition: all .5s ease-in-out;
    transform: translateX(-98%) translateY(-70%) rotate(135deg);
    background: linear-gradient(45deg, blue, purple);
}

a.btn-flat:hover::before {
    transform: translateX(-9%) translateY(-25%) rotate(135deg);
}


/**

26.お問合せフォーム

*/

form {
    display: flex;
    width: 100%;
    padding: 3%;
    background: #eee;
    margin: 0 auto;
}

form h3 {
    font-size: 145%;
    margin: 0 0 1em 0;
}

form label {
    font-weight: 700;
    padding: 0 10px;
    margin: 6px 0 0 0;
    text-align: left;
}

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

input,
textarea,
select {
    padding: 10px;
    border: none;
    border-bottom: #999 2px solid;
    outline: none;
    background: #fff;
    margin: 10px;
    text-align: left;
}

input,
textarea {
    width: 93%;
}

select {
    width: 95%;
}

input:focus,
textarea:focus {
    border-color: #e94e66;
    background: #fff;
    border-bottom-width: 2px;
}

form button,
button[onclick] {
    background: #001d42;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 10px;
    border-radius: 4px;
    margin: 10px auto;
    font-weight: 900;
    font-size: 135%;
    width: 50%;
    color: #fff;
}

form button:hover,
button[onclick]:hover {
    background: #e94e66;
    color: #fff;
    transition: .5s;
}

.submitbox {
    margin: 0 auto;
}

.submitbox input {
    background: transparent;
    border-bottom: 0;
    text-align: center;
}

.submitbox #download,
.submitbox input,
.submitbox div {
    background: #001d42;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 10px;
    margin: 10px auto;
    font-weight: 900;
    font-size: 135%;
    width: 7em;
    color: #fff;
}

.submitbox buttonlayout * {
    margin: 2em 1em 1em;
}

.submitbox input[name="back"] {
    background: #666;
}

.submitbox #download:hover,
.submitbox input:hover,
.submitbox div:hover {
    background: #fd0e6e;
    transition: .2s;
}

::placeholder {
    color: #999;
}

input,
textarea,
select,
button {
    font-family: inherit;
}

label {
    display: block;
}

button[disabled] {
    background-image: none;
    background-color: #ccc;
    border: none;
    pointer-events: none;
}

button[onclick] {
    margin: 10px auto 50px auto;
    font-size: 100%;
    width: auto;
    height: 3em;
}

.disclosure>li {
    margin: 1rem 0;
}

.inqanswer li {
    margin-top: 0;
}

.btnlayout {
    margin: 0 0 3rem;
}


/**

27.サイト内検索

*/

#ftr-search {
    outline: none;
    margin: 0;
    padding: 0;
    background: none;
    flex-direction: row;
    max-width: 25em;
    display: flex;
}

#ftr-search:focus {
    border-color: #f09199;
    background: #fff;
}

[name="q"],
[name="q"]::placeholder {
    background: rgb(255, 255, 255) url("https://www.google.com/cse/static/images/1x/googlelogo_lightgrey_46x16dp.png") no-repeat scroll left center;
}

[name="sa"] {
    width: 6em;
    text-align: center;
    border: 0;
    border-radius: 2px;
}

[name="sa"]:hover {
    background: #fd0e6e;
    color: #fff;
}


/**

28.フッター

*/

footer {
	display: block;
	/*display: flex;*/
    justify-content: center;
    height: auto;
    width: 100%;
	background: #333;
	/*background: #666;*/
    color: #fff;
}

footer page a:visited,
footerarea page a:visited {
    color: #fff;
}

footer page a:hover,
footerarea page a:hover {
    color: #cdcdcd;
    transition: 0s;
    text-decoration: underline;
}

footerarea {
    display: block;
    background: #666;
    height: 100px;
    width: 100%;
    padding: 12px 0;
}

footerarea img {
    padding: 15px 0 0 15px;
    height: 40px;
    max-width: 90%;
    float: left;
}

footerarea page {
    font-weight: bold;
    font-size: 135%;
    padding: 5px 20px;
}

footerarea listgroup {
    display: flex;
    justify-content: space-between;
    width: auto;
    margin-left: 1.5%;
}

footerlink {
    display: block;
    background: #333;
    margin: 0 auto;
}

footerlink a {
	padding: 16px;
	/*padding: 12px;*/
    margin: 0 24px;
    color: #fff;
    font-size: 90%;
}

footerlink a:visited {
    color: #fff;
}

footerlink a:hover {
    color: #aaa;
}

siteinfo {
    display: flex;
    justify-content: center;
}

footerlink shareicons {
    display: flex;
    justify-content: center;
}

footerlink i {
    color: #fff;
    font-size: 150%;
}

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


/**

29.ハンバーガーおよびフッターのサイトマップ

*/

listgroup {
    display: block;
    width: auto;
}

columnpair {
    flex-direction: column;
    width: 24vw;
}

space columnpair {
    display: block;
    width: 100%;
}

space columnpair:first-child {
    margin-top: 100px;
}

directory {
    display: list-item;
    margin: 1em;
    list-style-type: none;
}

headitem {
    font-weight: 900;
    font-size: 130%;
    padding: 18px 0 18px 30px;
    display: block;
    border-bottom: 1px solid #aaa;
    letter-spacing: 2px;
}

headitem a {
    color: #fff;
}

#l1 headitem {
    border-bottom: 1px solid #aaa;
}

space directory {
    margin: 0;
}

page {
    display: list-item;
    margin: 6px;
    font-size: 90%;
}

page:first-child {
    font-weight: 900;
    font-size: 110%;
    list-style-type: none;
}

page:not(:first-child) {
    margin-left: 2em;
}

space page {
    font-size: 100%;
    margin: 0;
    padding: 12px;
    background: #333;
    border-bottom: 1px solid #aaa;
}

space page:first-child {
    font-weight: normal;
    font-size: 100%;
}

space page:not(:first-child) {
    margin-left: 0;
}

page #search {
    position: static;
}

directory ul {
    margin: 0;
    padding-left: 1em;
}

directory ul li {
    list-style-type: none;
    font-size: 90%;
    margin: 6px;
}

directory ul a {
    color: #fff;
}

space directory ul {
    padding-left: 0;
}

space directory ul li {
    font-size: 100%;
    margin: 0;
    border-bottom: 1px solid #aaa;
}


/**

30.著作権表示

*/

credit {
    display: block;
    text-align: center;
    font-size: 60%;
    background: #333;
    color: #fff;
    padding: 1em;
}


/**

31.トップへ戻るボタン

*/

gototop {
    display: block;
    width: 36px;
    height: 60px;
    position: fixed;
    bottom: 90px;
    right: 16px;
    padding: 4px;
    z-index: 100;
}

return {
    display: block;
    width: 48px;
    height: 48px;
}


/**

32.ボトムメニュー

*/

bottombutton {
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0;
    text-align: center;
    background: #001d42;
    color: #fff;
    font-size: 80%;
    padding-top: 10px;
    z-index: 90911;
    display: none;
}

bottombutton::before {
    content: url(../assets/hbg.png);
    padding-right: .5em;
}

bottombutton.close::before {
    content: url(../assets/times-solid.svg);
    width: 12px;
    height: 12px;
    display: inline-flex;
}

bottommenu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: calc(100% - 35px);
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    font-size: 100%;
    background: #555;
    z-index: 90900;
    margin-bottom: 40px;
    opacity: .9;
}

bottommenu span {
    color: #fff;
}

bottommenu directory {
    margin: 0;
}

bottommenu a:visited {
    color: #efefef;
}

bottommenu a {
    display: block;
    padding: .25em 0;
    width: 95%;
}

bottommenu a:hover {
    color: #cdcdcd;
    text-decoration: underline;
    transition: 0s;
}

bottommenu .plus::after {
    content: url(../assets/plus-solid.svg);
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    margin: 0 .5em 0 0;
}

bottommenu headitem.next a::after {
    content: url(../assets/caret-right-solid.svg);
    display: inline-block;
    position: absolute;
    right: 0;
    width: 14px;
    height: 14px;
    margin: 0 .5em 0 0;
}

bottommenu page.next a::after {
    content: url(../assets/caret-right-solid.svg);
    display: inline-block;
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    margin: 0 3em 0 0;
}

bottommenu page.ti2em a::after {
    content: url(../assets/caret-right-solid.svg);
    display: inline-block;
    position: absolute;
    right: 0;
    width: 8px;
    height: 8px;
    margin: 0 calc(1em - 4px) 0 0;
}

bottommenu headitem {
    color: #fff;
}

bottommenu page {
    display: block;
    margin: 0;
    padding: .5em 0;
    text-indent: 2em;
    background: #333;
    border-bottom: 1px solid #777;
}

bottommenu page:first-child {
    font-weight: normal;
    font-size: 100%;
}

bottommenu page:not(:first-child) {
    margin-left: 0;
    font-size: 100%;
}


/**

33.行末アイコン

*/

a.exicon:not([name]),
.exicon a:not([name]),
a.internal:not([name]),
.internal a:not([name]),
a.pdf,
.pdf a {
    background: linear-gradient(#555, #555) no-repeat;
    background-size: auto 1px;
    background-position: 0 1.15em;
    text-shadow: .05em 0 #fff, -.05em 0 #fff;
    word-wrap: break-word;
}

a.exicon:not([name])::after,
.exicon a:not([name])::after {
    content: url(../assets/link.png);
}

telop.exicon a,
telop.internal a {
    background: none !important;
}

a.internal:not([name])::after,
.internal a:not([name])::after {
    content: '';
}

a.pdf::after,
.pdf a::after {
    content: url(../assets/icon_pdf.png);
    position: relative;
    top: 3px;
}

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

.dl a {
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    background: none;
}


/**

34.レスポンシブ

*/

/*@media screen and (max-width: 1280px) {
    html {
        height: 100%;
        background: #333;
    }
    body {
        height: 100%;
        background: #fff;
    }
    rwd {
        display: inline;
    }
    .rwd {
        display: none;
    }
    section {
        width: 100%;
        height: auto;
    }
    top {
        padding-bottom: 0;
        display: block;
        width: 100%;
    }
    catchcopy {
        font-size: 300%;
    }
    contents {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin: 0;
    }
    newsarea {
        height: auto;
    }
    location {
        height: auto;
        padding: 12px;
    }
    areamap {
        width: 100%;
        height: auto;
        margin: .5em;
        display: flex;
        flex-direction: column;
    }
    areamap picture {
        height: 200px;
    }
    addressinfo {
        text-align: center;
        font-size: 90%;
    }
    @keyframes marquee {
        0% {
            transform: translate(100vw);
        }
        100% {
            transform: translate(-100vw);
        }
    }
    form {
        padding: 1em;
        width: auto;
        flex-direction: column;
    }
}*/

@media screen and (max-width: 900px) {
    logo {
        text-align: center;
        margin: 0 14px;
        margin-left: 70px;
    }
    logo * {
        margin: 28px 0 0 0;
        max-width: 95%;
    }
    #beat {
        display: inline;
        background: none;
        animation: beat 1s infinite;
    }
    #top section {
        background-image: none;
    }
    newsicon a {
        float: left;
    }
    tw,
    headericon a[href*="instagram"] {
        margin: 0 7px;
    }
    tw img,
    headericon a[href*="instagram"] img {
        width: 22px;
    }
    telop:nth-child(n+6) {
        display: none !important;
    }
    hmenu {
        top: 0;
        background: #666;
    }
    hbg {
        margin: .5em;
    }
    hbg span {
        width: 30px;
    }
    space {
        flex-direction: column;
        max-width: 100vw;
        overflow-x: hidden;
    }
    space columnpair:first-child {
        margin-left: 0;
    }
    space columnpair {
        height: auto;
        display: block;
    }
    lang {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1010;
    }
    lang * {
        display: block;
        width: 63px;
        height: 26px;
    }
    .current {
        display: block;
    }
    header {
        height: auto;
    }
    headericon {
        position: absolute;
        top: 100px;
        right: 0;
        z-index: 90012;
        flex-direction: column;
    }
    headericon img {
        margin: 5px;
        width: 22px;
        height: 22px;
    }
    headericon span {
        display: none;
    }
    newsarea {
        top: 150px;
    }
    .modal__content {
        width: 90%;
    }
    access {
        flex-direction: column;
    }
    locarea {
        top: 120px;
        right: 60px;
    }
    section {
        height: auto;
    }
    swing {
        display: none;
    }
    heart img {
        top: 40vh;
        width: 40px;
        height: 40px;
    }
    .spacelab heart img,
    #p5000100 heart img {
        left: auto;
        right: 50px;
    }
    listgroup,
    footerarea listgroup {
        margin: 0 1em;
    }
    space listgroup,
    bottommenu listgroup {
        margin: 0;
    }
    header #hdr-search {
        display: none;
    }
    hot {
        right: 200px;
    }
    newsarea {
        width: 70%;
    }
    bookarea {
        min-width: 200px;
        top: 180px;
    }
    canvas#lines,
    canvas#minis {
        display: none;
    }
    canvas#tablet {
        display: block;
        min-height: 350px;
    }
    swing {
        top: 120px;
        width: 100%;
    }
    top h1 {
        right: 10px !important;
    }
    catchcopy {
        font-size: 200%;
        margin: 0;
        padding: 2px;
        left: 10px;
        top: 70px;
        width: 80%;
        word-wrap: break-word;
    }
    page,
    page * {
        font-size: 90%;
    }
    intro {
        width: 100%;
        margin-left: 0;
    }
    organization {
        width: 100%;
        margin-left: 0;
    }
    topsection relates {
        font-size: 80%;
        margin-left: 0;
        width: 100%;
        flex-direction: column;
    }
    bg {
        flex-direction: column;
        height: auto;
        align-items: center;
    }
    bg img {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    about {
        height: auto;
    }
    research {
        height: auto;
    }
    closer2u {
        height: auto;
    }
    cta {
        height: auto;
    }
    action {
        flex-direction: column;
    }
    call {
        flex-direction: row;
        justify-content: center;
        margin: 8px 1em;
        width: auto;
        height: auto;
    }
    contact {
        width: 100%;
        margin-top: 2em;
    }
    contact titlearea,
    contact p,
    contact h3 {
        width: 90%;
        margin: 0 auto;
    }
    mail p {
        width: 100%;
        font-size: 90%;
    }
    contact titlearea {
        margin-bottom: 2em;
    }
    /*inquiry {
        padding: 0;
        width: 100%;
        flex-direction: column;
    }*/
    footerarea {
        height: auto;
    }
    /*footerarea listgroup {
        flex-direction: column;
    }*/
    /*footer {
        flex-direction: column;
        justify-content: left;
        height: auto;
    }:*/
    footer listgroup {
        width: 85%;
        align-items: center;
    }
    columnpair {
        width: 100%;
    }
    input {
        width: 80%;
    }
    #ftr-search {
        padding: 0;
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
    }
    #ftr-search input {
        margin: .5em auto;
    }
    /*footerlink {
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 99001;
    }*/
    /*credit {
        position: relative;
        z-index: 99001;
    }*/
    /*siteinfo {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }*/
    bottommenu {
        z-index: 99900;
    }
}

@media screen and (max-width: 486px) {
    headericon span {
        display: none;
    }
    logo {
        width: 100%;
    }
    [id^='p1'] logo {
        width: 80%;
    }
    [id^='p0'] logo img,
    [id^='p7020'] logo img,
    [id^='p7620'] logo img {
        width: 70vw;
    }
    [id^='p4'] logo img {
        height: auto;
    }

    canvas#lines,
    canvas#tablet {
        display: none;
    }
    canvas#minis {
        display: block;
        height: 100vw;
        width: 100vw;
    }
    telop * {
        font-size: 80%;
    }
    space directory {
        margin-right: 0;
    }
    bg figure img {
        height: auto;
    }
    about,
    research,
    achievements,
    closer2u,
    publication,
    location {
        width: 90%;
    }
    h2,
    location h2 {
        font-size: 135%;
    }
    titlearea img {
        display: none;
    }
    about abstract {
        width: 100%;
        max-width: 100vw;
    }
    intro abstract {
        width: 100%;
    }
    relates {
        width: 90%;
        display: block;
    }
    guide {
        position: static;
    }
    call {
        flex-direction: column;
    }
    textarea {
        width: 80%;
    }
    footerarea img {
        width: 100%;
    }
}


/**

35.Edge対応

*/

@supports (-ms-ime-align: auto) {
    a.exicon:not([name]),
    .exicon a:not([name]),
    a.internal:not([name]),
    .internal a:not([name]),
    a.pdf,
    .pdf a {
        text-decoration: underline;
        background: none !important;
    }
}


/**

36.IE対応

*/


/**

37.Safari対応

*/

_::-webkit-full-page-media,
_:future,
:root telop a:hover,
:root a.exicon:not([name]),
:root .exicon a:not([name]),
:root a.internal:not([name]),
:root .internal a:not([name]),
:root a.pdf,
:root .pdf a {
    text-decoration: underline;
    text-decoration-skip: ink;
    background: none;
}

_::-webkit-full-page-media,
_:future,
:root input,
:root textarea,
:root select,
:root button {
    -webkit-appearance: none;
}

_::-webkit-full-page-media,
_:future,
:root input[type="radio"]:checked {
    background: #e94e66;
}


/**

38.　印刷用CSS(共通)

*/

@media print {
    body {
        min-width: 285mm;
    }
    .en logo img {
        max-width: 60vw;
    }
    hmenu {
        display: none;
    }
    swing {
        display: none;
    }
    #top section {
        background-position: top left;
        height: auto;
        height: 70mm;
    }
    topsection {
        opacity: 1;
    }
    topsection bg {
        flex-direction: column;
    }
    topsection:not(#about) bg img {
        display: none;
    }
    topsection intro {
        width: 220mm;
    }
    organization {
        display: flex;
        flex-direction: column;
        width: 200mm;
        align-items: flex-start;
    }
    call {
        display: none;
    }
    #p0000100 #location {
        height: 600mm;
    }
    access {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    areamap {
        width: 120mm;
        height: 160mm;
        margin: 5mm;
    }
    columnpair {
        width: 60mm;
    }
    #contact h3,
    form,
    #ftr-search {
        display: none;
    }
    gototop {
        opacity: 0;
    }
    #p0200300 #wsl,
    #p4200300 #wsl,
    #p0200300 #scl,
    #p4200300 #scl {
        page-break-before: always;
    }
}


/**

39.　スキップリンク

*/

#skip-link {
    display: none;
    background: #eaf6ff;
}

#skip-link .skip-contents {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
}

#skip-link .skip-contents p {
    float: left;
    margin: 0 0 0 15px;
    padding: 0 0 0 10px;
}

#skip-link .skip-contents div {
    float: right;
    padding: 0 0 0 16px;
}


/**

40.　GDPR同意ボタン

*/

gdpr {
    display: flex;
    z-index: 10000000;
    position: fixed;
    bottom: 0;
    justify-content: center;
    background: #eee;
    padding: 1rem 1.5rem;
    font-size: 80%;
    margin: 0 auto;
    width: 100%;
    font-family: 'Lato', 'Noto Sans JP', 'Meiryo UI', 'Hiragino Kaku Gothic ProN', sans-serif;
}

gdpr button {
    padding: .3rem .8rem;
    margin: .3rem 1rem;
    font-weight: bold;
    border: 1px solid #333;
}

gdpr .gdpr_accept {
    background: rgb(128, 124, 101);
    color: #fff;
}

gdpr .gdpr_accept:hover {
    opacity: .8;
    transition: .1s;
}

gdpr .gdpr_decline {
    background: #efefef;
}

gdpr .gdpr_decline:hover {
    background: #ddd;
    transition: .1s;
}

@media screen and (min-width: 900px) {
    gdpr {
        height: 10vh;
        align-items: center;
        font-size: 110%;
        opacity: .93;
    }
    gdpr button {
        font-size: 110%;
        padding: .6rem 1rem;
    }
}

@media screen and (max-width: 900px) {
    gdpr button {
        width: 4rem;
    }
}