/* from https://qiita.com/RinoTsuka/items/4181efd43d072e246519 */

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic");
    font-weight: 300;
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic");
    font-weight: 500;
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic");
    font-weight: bold;
}

@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 100;
}

@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 200;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* /\* IE10以上 *\/ */
/* @media all and (-ms-high-contrast: none)  { */
/*   html { */
/*     font-family: Verdana, Meiryo, sans-serif; */
/*   } */
/* } */
/* @media all and (-ms-high-contrast: active) { */
/*   html { */
/*     font-family: Verdana, Meiryo, sans-serif; */
/*   } */
/* } */


body {
    line-height: 1.5;
    background-image: url(./bg.png);
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

div.content {
    margin: auto;
    width: 70%;
}


h1 .labname {
    display: block;
    font-size: 0.5em;
}

h1 {
    text-align: center;
    font-size: calc(70vw / 10);
    /* font-size: 4em; */
    margin-bottom: 0.5em;
    line-height: 1;
}

.with_edition {
    position: relative;
    display: inline-block;
}

.edition {
    position: absolute;
    display: inline-block;
    right: -2.5em;
    bottom: -1.5em;
    font-size: 0.28em;
    color: orange;
    background-color: white;
    border-radius: 0.5em;
    border: 0.15em solid orange;
    padding: 0.3em;

    transform: rotate(-10deg);
    box-shadow: 0.1em 0.1em 0.5em hsla(0, 0%, 0%, 35%);
}

.center {
    text-align: center;
}

.center>div {
    display: inline-block;
    text-align: initial;
}

div.venue {
    /* width: 90%; */
    margin-left: auto;
    margin-right: auto;
}

div.venue dl {
    display: grid;
    grid-template-columns: 10em auto;
    grid-template-columns: max-content auto;
    grid-row-gap: 0.2em;
}

div.venue dt {
    grid-column-start: 1;
    font-weight: bold;
}

div.venue dt:after {
    content: "：";
}

div.venue dd {
    grid-column-start: 2;
    margin-left: 0.1em;
}


/* div.venue p { */
/*     /\* text-align: center; *\/ */
/*     /\* display: inline-block; *\/ */
/*     margin-left: auto;  */
/*     margin-right: auto;  */
/* } */



/* div.venue p:before { */
/*     content: "@"; */
/* } */

.figures {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}

p.link-button {
    text-align: center;
}

a.button {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

    /* background-color: hsl(115, 30%, 54%); */
    background-color: hsl(120, 27%, 37%);
    ;
    color: white;
    border-radius: 2em;
    padding: 1em 2em;
    text-decoration: none;
    box-shadow: 0em 0em 1.5em hsla(0, 0%, 0%, 20%);
}

a.button:hover {
    background-color: hsl(120, 27%, 30%);
}

figure {
    max-width: 80%;
    min-width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding: 0.5em;
}

figure a {
    display: inline-block;
    width: 100%;
}


figure a:hover {
    background-color: hsla(0, 0%, 0%, 10%);
}



@media only screen and (max-width: 600px) {
    .figures {
        flex-wrap: wrap;
    }

    figure {
        max-width: 90%;
        min-width: unset;
    }

    figure img {
        height: unset;
    }
}


figure img {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;

    max-height: 300px;
    width: auto;

    margin-top: 1em;
    margin-bottom: 1em;

    box-shadow: 0.2em 0.2em 1em hsla(0, 0%, 0%, 35%);
}

a figure:hover {
    background-color: hsl(220, 10%, 98%);
}


div.venue figcaption {
    text-align: center;
}

@media only screen and (max-width: 400px) {
    div.venue p:before {
        content: "";
    }
}

h2+p,
p3+p {
    margin-top: 0em;
}

p {
    margin-left: auto;
    margin-right: auto;

    margin-top: 1em;
    margin-bottom: 1em;
}

h2.catch_phrase {
    /* text-align: justify; */
    /* left: -12.5%; */
    /* width: 100%; */
    /* margin: 2em 0em; */
    font-size: calc(70vw/16);
    margin: 5vw 0px;
}

h2 {
    text-align: center;
    margin: 2em 0em;

    font-size: 2em;
    font-weight: bold;
}

@media only screen and (max-width: 600px) {
    h2 {
        text-align: left;
        margin: 1em 0px;

        font-size: 1.5em;
        font-weight: bold;
    }

    h1 {
        font-size: 3em;
    }
}

@media only screen and (max-width: 400px) {
    h1 {
        font-size: 1.8em;
    }
}



.themes,
.schedules {
    margin: 2em auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em 1em;
}

.theme,
.schedule {
    /* width: calc(32% - 2em); */
    padding: 1em;
    text-align: justify;
}

.schedule {
    width: calc(32% - 2.5em);
}

.theme,
.schedule {
    /* border-radius: 1em; */
    /* background-color: rgb(238, 253, 205); */
    background-color: hsl(90, 60%, 91%);
    /* box-shadow: 0em 0em 1.5em hsla(0, 0%, 0%, 5%); */
}

.theme p,
.schedule p {
    margin: 0px;
    width: 100%;
}

.theme h3,
.schedule h3 {
    /* text-align: center; */
    margin-top: 0.1em;
}


.schedule dl {
    margin: 0px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0em 0.5em;
}

.schedule dt {
    /* width: 3em; */
    float: left;
}

.schedule dd {
    margin-left: 0em;
}

.schedule dd:after {
    display: block;
    content: "";
    clear: both;
}

.bachelor ul,
.master ul {
    list-style-type: none;
}

ul {
    padding-left: 1em;
}

li {
    margin-bottom: 0.4em;
    position: relative;
}

.bachelor li,
.master li {
    margin-left: 3em;
}

.bachelor li:before {
    content: "卒論";
    left: -3em;
    position: absolute;
    border: 0.1em solid #585;
    font-size: 80%;
    padding: 0.05em 0.2em;
    border-radius: 0.3em;
    color: #585;
}

.master li:before {
    content: "修論";
    left: -3em;
    position: absolute;
    border: 0.1em solid #559;
    font-size: 80%;
    padding: 0.05em 0.2em;
    border-radius: 0.3em;
    color: #559;
}

summary {
    /* background-color: hsl(110, 10%, 85%); */
    /* padding: 0.2em; */
    cursor: pointer;
    padding: 0.5em;
    margin: -0.5em -0.5em 0;
}

details {
    margin: 2em 0;
    border-radius: 0.5em;
    border: 0.1em solid #aaa;
    /* background-color: hsl(220, 10%, 98%); */
    /* background-color: hsl(90, 20%, 96%); */
    background-color: hsl(90, 10%, 98%);
    padding: 0.5em 0.5em 0;

    /* box-shadow: 0em 0em 1.5em hsla(0, 0%, 0%, 5%); */
}

details[open] {
    padding-bottom: 0.1em;
}

details[open] summary {
    border-bottom: 0.1em solid #aaa;
    margin-bottom: 0.5em;
}



@media only screen and (max-width: 724px) {

    .theme,
    .schedule {
        width: 100%;
        padding: 0.5em;
        margin: 0.5em auto;
    }

    .theme h3,
    .schedule h3 {
        text-align: left;
        margin-top: 0.1em;
    }

    .theme h3,
    .schedule h3 {
        margin-bottom: 0.3em;
    }

    ul {
        padding-left: 2em;
    }
}

.catch_phrase_end p {
    /* text-align: justify; */
    /* left: -12.5%; */
    /* width: 100%; */
    /* margin: 2em 0em; */
    font-size: calc(70vw/20);
    margin: 5vw 0px;
    text-align: center;
}


@media only screen and (max-width: 1280px) {
    div.content {
        width: 80%;
    }

    h2.catch_phrase {
        font-size: calc(80vw/16);
    }

    .catch_phrase_end p {
        font-size: calc(80vw/20);
    }
}

@media only screen and (max-width: 1024px) {
    div.venue {
        width: 100%;
    }

    div.content {
        width: 90%;
    }

    h2.catch_phrase {
        font-size: calc(90vw/16);
    }

    div.catch_phrase_end p {
        font-size: calc(90vw/20);
    }
}

@media only screen and (max-width: 800px) {
    div.content {
        width: 95%;
    }

    h2.catch_phrase {
        font-size: calc(95vw/16);
    }

    div.catch_phrase_end p {
        font-size: calc(95vw/20);
    }
}

/* @media only screen and (max-width: 700px) { */
/*     div.content { */
/*         width: 100%; */
/*     } */
/*     h2.catch_phrase { */
/*         font-size: calc(100vw/16); */
/*     }    */
/*     div.catch_phrase_end p { */
/*         font-size: calc(100vw/20); */
/*     } */
/* } */

@media only screen and (max-width: 600px) {
    div.venue dl {
        display: block;
    }


    div.venue dd {
        margin-left: 2em;
    }

    div.catch_phrase_end p {
        font-size: 1.5em;
        margin: 1.5em 0px;
        text-align: left;
    }

    h2.catch_phrase {
        font-size: 1.5em;
        /* font-weight: normal; */
        margin: 1em 0px;
    }

    ul li {
        padding-left: 0em;
        margin-left: 0em;
    }

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

@media only print {
    html {
        font-size: 11pt;
    }

    div.content {
        width: 100%;
    }

    h2.catch_phrase {
        font-size: calc(90vw/16);
    }

    div.catch_phrase_end p {
        font-size: calc(75vw/20);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
    }

    .themes {
        page-break-inside: avoid;
    }

    /* h2#近年の卒論修論テーマ { */
    /*     page-break-before: always; */
    /* } */

    p {
        orphans: 3;
        widows: 3;
    }

    figure {
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .theme,
    .schedule {
        width: calc(33% - 1.7em);
        padding: 0.6em;
        text-align: justify;
        font-size: 95%;

        /* border-style: solid; */
        /* border-width: 0.5pt; */
        /* border-color: gray; */
        /* padding: 0.5em;  */
    }

    .theme h3,
    .schedule h3 {
        font-size: 105%;
    }

    .noprint {
        display: none;
    }

    .bachelor ul {
        margin-bottom: 0px;
    }

    .master ul {
        margin-top: 5pt;
    }

    h3 {
        margin: 0.5em 0em;
    }

    h2 {
        margin: 0.5em 0em;
    }


    li {
        margin-bottom: 0.15em;
    }

    a[href] {
        color: black;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}





/* div.catch_phrase_end { */
/*     position: relative;  */
/*     display: inline-block; */
/*     width: 100%; */
/*     background: rgb( 255, 224, 161 );     */
/*     min-height: 2em; */
/*     border-radius: 1em; */
/* } */

/* div.catch_phrase_end p { */
/*     margin: 0px;  */
/*     font-size: calc(100vw/30); */
/*     padding: 0.5em; */
/* } */

/* div.catch_phrase_end:before { */
/*     content: ""; */
/*     position: absolute;  */
/*     left:     100%;  */
/*     top:      calc(40% - 15px); */

/*     border-style: solid; */
/*     border-width: 0px 0px 2em 2em; */
/*     border-color: transparent transparent transparent rgb( 255, 224, 161 ); */
/* } */