@charset "utf-8";
/*================================
__   __     _      _     _   _____ _
\ \ / /   _(_) ___| |__ (_) | ____| |_ ___
 \ V / | | | |/ __| '_ \| | |  _| | __/ _ \
  | || |_| | | (__| | | | | | |___| || (_) |
  |_| \__,_|_|\___|_| |_|_| |_____|\__\___/

- CSS TABLE OF CONTENTS -
  1. Theme
  2. General
  3. Contents
    3.1. biography.html / #biography
    3.2. contact.html / #contact
    3.3. index.html / #indexHtml_main
    3.4. post.html / #posts
    3.5. past.html / .past
    3.6. space.html / #space
    3.7. works.html / .works .work_img
  4. Responsive

=================================*/

/* 1. Theme */
/* ================== */
:root {
    --bg-color: #e1e6e5;
    --font-color: #2d458a;
}
body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
}
/* 2. General */
/* ================== */
a.link_url {	
    color: var(--font-color);	
    text-decoration: none;
    border-bottom: 2px dotted var(--font-color);
}	
a.link_url:hover {
    border-bottom: 2px solid var(--font-color);
}
body {
    background: var(--bg-color);
    color: var(--font-color);
    position: relative;
    margin: 0;
}
body, div, main, p, h1 {
    display: block;
    margin: 0;
}
footer {
    width: 100%;
    text-align: center;
    position:inherit;
    bottom: 0;
}
footer a {
    font-size: 0.8rem;
    color: var(--font-color);
    text-decoration: none;
    padding-bottom: 1rem;
}
div#top_button, div#top_button a {
    font-size: 0;
}
div#top_button a:hover img, .works_to_past a:hover img {
    padding-top: 1px;
    margin-bottom: -1px;
}
div.horizon{
    display: block;
    width: 100vw;
    height: 1rem;
    background: url(img/tensen.png);
    background-repeat: repeat-x;
    background-size: contain;
    margin-top: 5rem;
    margin-bottom: 3rem;
}
h1 {
    margin: 0 0 0 1rem;
}
h1 img {
    width: 20rem;
}
h2 {
    font-size: 1.5rem;
}
table {
    margin: 1rem 0 4rem;
    border-spacing: 0px 0.25rem;
}
th {
    padding-right: 2rem;
    text-align: left;
    vertical-align: top;
}
time {
    font-size: 1.5rem;
}

/* 3.1. biography.html */
/* ================== */
section#biography {
    max-width: 80%;
    padding: 0 12rem;

}
th.bio_title {
    font-weight: bold;
    padding-top: 2rem;
    font-size: 1.2rem;
}

/* 3.2. contact.html */
/* ================== */
#contact div {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
#contact img {
    width: 6rem;
    height: 6rem;
    padding: 3rem 3rem 8rem;
}

/* 3.3. index.html */
/* ================== */
#indexHtml_main {
    width: 100vw;
    height: 100vh;
    position: relative;
    /*background: url(img/top.png) no-repeat center center;*/
    /*background-size: contain;*/
}
h1#indexHtml_h1 {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
}
h1#indexHtml_h1 a:hover img {
    width: calc(100% + 2px);
    top: -1px;
    left: -1px;
}
h1#indexHtml_h1 img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
}
@keyframes change-img {
    0%{ opacity: 0;}
    20%{ opacity: 1;}
    80%{ opacity: 1;}
    100%{ opacity: 0;}
}
.topSwiper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 36.2vw;
    height: 25.8vw;
}
.top_img::nth-of-type(1) {
    opacity: 1;
}
.top_img:nth-of-type(2) {
    animation-delay: 4s;
    animation: change-img 12s infinite;
}
.top_img:nth-of-type(3) {
    animation-delay: 8s;
    animation: change-img 12s infinite;
}

#indexHtml_Box {
    text-align: center;
    margin: 0 auto;
    padding: 3em;
    width: 80%;
    max-width: 600px;
}
footer#footer_Main {
    -webkit-text-size-adjust: 100%;
    font-size: 0.8rem;
    position: fixed;
    bottom: 1rem;
}
footer#footer_Main span{
    -webkit-text-size-adjust: 100%;
    display: inline;
    font-style: normal;
    font-size: 0.8rem;
}

/* menu
----------- */
#topSpace {
    width: 11.5vw;
    height: calc(11.5vw * 1.04);
    position: fixed;
    top: 0;
    left: 0;
}
#topSpace:hover {
    top: 1px;
    left: 1px;
}
#topBiology {
    width: calc(10.7vw * 1.19);
    height: 10.7vw;
    position: fixed;
    bottom: 0;
    left: 0;
}
#topBiology:hover {
    bottom: 1px;
    left: 1px;
}
#topContact {
    width: calc(12.15vw * 1.03);
    height: 12.15vw;
    position: fixed;
    bottom: 0;
    right: 0;
}
#topContact:hover {
    bottom: 1px;
    right: 1px;
}
#topWork {
    width: 10.05vw;
    height: calc(10.05vw * 1.16);
    position: fixed;
    top: 0;
    right: 0;
}
#topWork:hover {
    top: 1px;
    right: 1px;
}
main#Main {
    margin-top: 7rem;
    margin-bottom: 10rem;
}

/* 3.4. post.html */
/* ================== */
/* modal
----------- */
#modal {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}
#modal.is-open {
    display: block;
}

.modal_open_btn {
    cursor: pointer;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

#modal button#modal_close_btn {
    display: block;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
    box-sizing: border-box;
    border: 0;
    position: fixed;
    top: 10vh;
    right: 10vw;
    background: none;
    color: white;
    opacity: 0.8;
    cursor: pointer;
}
#modal button#modal_close_btn:hover {
    opacity: 1;
}
#modal button#submit_btn {
    width: 6rem;
    height: 2rem;
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    text-align: right;
    z-index: 10;
    color: var(--font-color);
    border: 1px solid var(--font-color);
    border-radius: 5px;
    box-shadow: 1px 1px var(--font-color);
    background-color: #e1e6e5;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
}
#modal button#submit_btn:hover {
    bottom: calc(.5rem - 1px);
    right: calc(.5rem - 1px);
}
#modal button#submit_btn:hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(200,200,200,0.2);
}
#modal .comment_wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
#modal .comment_wrap label {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem 1rem 3rem;
    box-sizing: border-box;
    font-size: 0;
    background: white;
    border-radius: 2px;
}
#modal .comment_wrap label:has(#comment:focus-visible) {
    outline: -webkit-focus-ring-color auto 1px;
}
#modal form {
    margin-bottom: 3rem;
}
#modal textarea#comment {
    width: 100%;
    height: 8rem;
    box-sizing: border-box;
    border: 0;
    color: var(--font-color);
    resize: none;
}
#modal textarea#comment:focus-visible {
    outline: 0;
}
#modal #modal_bg {
    width: 80vw;
    height: 80vh;
    margin: 10vh auto;
    padding: 5rem;
    box-sizing: border-box;
    background-color: rgba(50,50,50,0);
    overflow: scroll;
}
#modal.is-open #modal_bg {
    background-color: rgba(50,50,50,0.8);
    transition: background-color 0.5s;
}
#modal #modal_contents {
    overflow-y: scroll;
    opacity: 1;
    visibility: visible;
    transition: height 0.5s, opacity 0.5s, visibility 0.5s;
}
#modal #modal_contents.done {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 0.5s, opacity 0.5s, visibility 0.5s;
}
#modal p, #modal time {
    color: white;
    margin-bottom: 1rem;
}
#modal p.time_description {
    text-align: center;
}
#modal time.not_open {
    color: #999!important;
}
#modal p#done_message {
    text-align: center;
}
#modal #post_comment {
    opacity: 1;
    visibility: visible;
    transition: height 0.5s, opacity 0.5s, visibility 0.5s;
}
#modal #post_comment.done {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 0.5s, opacity 0.5s, visibility 0.5s;
}
#modal .comment_hr{
    width: 100%;
    margin: 2rem 0!important;
    background: url(img/tensen_w.png)!important;
}

/* when comment is sent
----------------------- */
.is-posted #modal_contents,.is-posted #post_comment {
    animation-name: fadeout;
    animation-duration: 0.3s;
    animation-fill-mode:forwards;
}
@keyframes fadeout{
    0% {
        opacity: 1;
        visibility: visible;
    }
    90% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}
#modal.is-posted #modal_bg {
    height: 15.5rem;
    padding: 4rem 5rem;
    transition: height 0.5s;
}
.is-posted #modal_post_complete {
    display: block;
    opacity: 0;
    animation-name: fadein;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    text-align: center;
}
@keyframes fadein{
    0% {
        opacity: 0;
        transform: translateY(5rem);
    }
    50% {
        opacity: 0;
        transform: translateY(5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
#modal_post_complete {
    display: none;
    margin: auto;
    width: 100%;
    box-sizing: border-box;
}
#post_complete_text {
    margin: 0!important;
    text-align: center;
}
#modal_post_complete img {
    display: inline-block;
    width: 3rem;
    margin-top: 1rem;
}


/* articles
----------- */
section.posts {
    width: 80%;
    margin: 0 auto;
    overflow: auto;
}
.posts_title {
    cursor : pointer;
}
.posts_wrap {
    display: grid;
    width: 100%;
    margin: 0;
    grid-template-columns: 70% 30%;
    grid-template-rows: 50% 50%;
}
.posts_wrap+button {
    display: none;
    font-weight: bold;
}
.posts_wrap>h2 {
    margin: 0;
    grid-column: 1/2;
    grid-row: 2/3;
    transition: margin 0.5s;
}
.posts_wrap>img {
    max-width: 7rem;
    max-height: 7rem;
    grid-column: 2/3;
    grid-row: 1/3;
    justify-self: end;
    transition: max-width 0.5s,max-height 0.5s;
}
.posts_wrap>p {
    display: none;
    margin-bottom: 1rem;
}
.posts_wrap>time {
    grid-column: 1/2;
    grid-row: 1/2;
}
.posts_wrap.detail {
    display: block;
}
.posts_wrap.detail+button {
    display: block;
    margin: 0 0 0 auto;
    padding: 0;
    color: var(--font-color);
    border: none;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    background: none;
}
.posts_wrap.detail+button:hover {
    border-bottom: 2px dotted var(--font-color);
}
.posts_wrap.detail+button>img {
    width: 3rem;
    height: 3rem;
}
.posts_wrap.detail>h2 {
    display: block;
    margin: 1rem 0;
}
.posts_wrap.detail>img{
    float: block;
    max-width: 30rem;
    max-height: 30rem;
}
.posts_wrap.detail>p {
    display: block;
}
.posts_wrap.detail>time {
    display: block;
}
.posts_hr{
    margin: 2rem 0!important;
}

/* 3.5. past.html */
/* ================== */
canvas#waveCanvas {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: -1;
}
.past {
    position: relative;
    padding-bottom: 20vw;
    margin-bottom: 5rem;
}
.past_tmb {
    width: 140px;
    height: 140px;
    display: block;
    margin-top: 25vw;
}
.past_tmb:first-child {
    margin-top: 0!important;
}
.past_tmb img {
    width: 100%;
}
.swiper-container {
    width: 100%;
    height: 90vh;
    max-height: calc(100vw * 9 / 16);
    position: relative;
    margin: 5rem auto 000;
    overflow: hidden;
    text-align: center;
}
.swiper-container img{
    max-width: 100%;
    max-height: 100%;
}
.swiper-button-next, .swiper-button-prev {
    color: var(--font-color)!important;
}
.past_child {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
h1.past_h1 {
    margin: 1.5rem 0 0 1rem;
}
main#past_page {
    margin: 0 0 3rem;
}
main#past_page .swiper-container {
    margin-top: 0;
}

/* 3.6. space.html */
/* ================== */
#space {
    position: relative;
}
#space img, #space h2, #space p {
    display: block;
    width: 80%;
    margin: 0 auto;
}
#space p {
    padding: 3rem 2rem 3rem 0;
    position: relative;
    box-sizing: border-box;
}
#space .space1 p::before,#space .space2 p::before {
    display: block;
    width: 5rem;
    height: 2rem;
    position: absolute;
    top: -0.9rem;
    left: 0rem;
    background: var(--bg-color);
}
#space h2 {
    margin-top: 3rem;	
    font-size: 1.3rem;
}
#space #kakushipage{
    width: 4rem;
    height: 4rem;
    opacity: 0;
    position: absolute;
    right: 5%;
    bottom: -7rem;
}
#space #kakushipage:hover {
    opacity: 1;
}
#kakushipage img {width: 100%;}
#stream_centor {
    text-align: center;
}

#stream {
    width: 90vw;
}

/* 3.7. works.html */
/* ================== */
section.works{
    width: 80%;
    margin: 0 auto;
}
.works img {
    max-width: 100%;
    display: inline-block;
    margin: 0 auto;
}
.works h2,.works i, .works p {
    width: 80%;
    margin: 0 auto;
}
.works h2 {
    margin-top: 2rem;
    padding: 0.5rem 0 ;
    text-align: left;
    font-weight: normal;
}
.works i {
    display: block;
    padding: 0;
    font-size: 1.2rem;
    text-align: left;
    font-style: unset;
}
.works p {
    padding: 0.5rem 0;
    font-size: 1.1rem;
    text-align: left;
}
.work_img{
    margin-top: 2rem;
}
.work_img h2 {
    width: fit-content;
    padding: 0.5rem;
    background: #FFF;
    text-align: left;
    margin: 0;
    font-weight: normal;
}
.work_img i {
    width: fit-content;
    max-width: 60%;
    padding: 0.5rem;
    background: #FFF;
    font-size: 1.2rem;
    text-align: left;
    font-style: unset;
}
.work_img p {
    display: inline-block;
    width: 60%;
    padding: 0.5rem;
    font-size: 1.1rem;
    background: #FFF;
    text-align: left;
    margin: 2rem 0 0;
}
.work_img p, .work_img h2, .work_img i {
    margin-left: 12rem;
    display: block;
}
i.work_caption{
    margin-bottom: 2rem;
}
.works_to_past {
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 1rem;
}
.works_to_past img {
    width: 16rem;
    height: 9rem;
}


/* 4. Responsive */
/* ================== */

@media screen and (max-width: 900px){
    section.works{
        width: calc(100% - 4rem);
    }
    .work_img p, .work_img h2, .work_img i {
        margin-left: 5.5rem;
        max-width: calc(100% - 12rem);
        width: auto;
    }
    .work_img i {
        margin: 0 auto;
    }
    .work_img p{
        margin: 2rem auto 0;
    }
    .work_img h2 {
        width: fit-content;
    }
    #past_page .work_img p {
        margin-top: 2rem;
    }
    #contact img {
        width: 17vw;
        height: 17vw;
        padding: 15vh 2vw 15vh;
    }
    section#biography {
        max-width: calc(100vw - 6rem);
        padding: 0 3rem;
    }
}

@media screen and (max-width: 520px){
    section.works{
        width: calc(100% - 2rem);
    }
    .work_img p, .work_img h2, .work_img i {
        margin-left: 2.5rem;
        max-width: calc(100% - 6rem);
        width: auto;
    }
    main#Main {
        margin-top: 4rem;
    }
    .past{
        padding-bottom: 30vw;
    }
    #topWork {
        width: calc(10.05vw * 1.5);
        height: calc(10.05vw * 1.16 * 1.5);
    }
    #topSpace {
        width: calc(11.5vw * 1.5);
        height: calc(11.5vw * 1.04 * 1.5);
    }
    #topContact {
        width: calc(12.15vw * 1.03 * 1.5);
        height: calc(12.15vw * 1.5);
    }
    #topBiology {
        width: calc(10.7vw * 1.19 * 1.5);
        height: calc(10.7vw * 1.5);
    }
    section#biography {
        max-width: calc(100vw - 4rem);
        padding: 0 2rem;
        margin-bottom: -2rem;
    }
    footer#footer_Main {
        font-size: 0.6rem;
    }
    footer#footer_Main span{
        display: none;
        font-size: 0.6rem;
    }
    h1 img {
        width: 15rem;
    }
    h1.past_h1 img {
        width: 13rem;
    }
    h1.past_h1 {
        margin: 3rem 0 5rem;
        text-align: center;
    }
    .works_to_past img {
        width: calc(16rem * 0.7);
        height: calc(9rem * 0.7);
    }
    div#top_button img {
        width: 180px;
    }
    div#top_button {
        margin-top: 13rem;
    }
    main#past_page {
        margin: 2rem 0 3rem;
    }
    .work_img h2 {
        width: fit-content;
        font-size: 1.3rem;
    }
    .topSwiper {
        width: 38vw;
        height: 27vw;
    }
    #space h2 {
        font-size: 1rem;
    }
    #top_button img {
        border: 0;
        backface-visibility:unset;
    }
    #top_button a {
        border: 0;
        position: relative;
    }
    #top_button a::before{
        content: "";
        display: block;
        position: absolute;
        width: 10px;
        height: 105px;
        background: var(--bg-color);
        top: -101px;
        left: -2px;
    }
    #modal #modal_bg {
        width: 100vw;
        height: 100vh;
        margin: 0vh auto;
        padding: 2rem;
        background: rgba(50,50,50,0.9);
    }
    #modal.is-posted #modal_bg {
        height: 100vh;
        padding: 5rem 2rem;
        transition: padding 0.5s;
    }
    #modal button#modal_close_btn {
        top: 0;
        right: 0;
    }
    .posts_wrap.detail>img {
        max-width: 100%;
    }
    .posts_wrap.detail+button {
        margin: 1.5rem 0 0 auto;
    }
}
@media screen and (min-width: 1800px){
    #topWork {
        width: calc(10.05vw * 0.9);
        height: calc(10.05vw * 1.16 * 0.9);
    }
    #topSpace {
        width: calc(11.5vw * 0.9);
        height: calc(11.5vw * 1.04 * 0.9);
    }
    #topContact {
        width: calc(12.15vw * 1.03 * 0.9);
        height: calc(12.15vw * 0.9);
    }
    #topBiology {
        width: calc(10.7vw * 1.19 * 0.9);
        height: calc(10.7vw * 0.9);
    }
    footer#contact_footer {
        position: fixed;
        bottom: 1rem;
    }
    .topSwiper {
        width: 30vw;
        height: 21.3vw;
    }
}