@charset "utf-8";
/* CSS Document */
/*PC画面フル用*/
body {
    flex-flow: row-reverse nowrap;
}
/*ヘッダー＆ナビゲーション部共通*/
.left-or-top {
    width: 16vw;
    height: 100vh;
    display: flex;
    flex-flow: row-reverse nowrap;
}
/*ヘッダー部*/
.left-or-top header {
    width: 11vw;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-end;
}
/*劇団ロゴ*/
.flag {
    position: fixed;
    top: 0;
}
.flag a img {
    width: 11vw;
}
/*SNS*/
.fb a img, .tw a img, .ig a img, .yt a img {
    width: 3vw;
    margin: 1.5vw;
}
/*ナビゲーション部*/
.left-or-top nav {
    width: 5vw;
    height: 100vh;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 1.0);
    overflow: hidden;
}
.left-or-top nav ul {
    width: 5vw;
    height: 100vh;
    list-style-type: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
}
.left-or-top nav ul li {
    writing-mode: vertical-rl;
    width: 5vw;
    height: calc(100vh / 4);
}
.left-or-top nav ul li a {
    width: 5vw;
    height: calc(100vh / 4);
    display: grid;
    place-items: center;
}
/*メインコンテンツ＆フッター部共通*/
.right-or-bottom {
    width: 84vw;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.right-or-bottom article {
    width: 84vw;
    height: 95vh;
    padding: 5vh 5vw;
    overflow: scroll;
}
.right-or-bottom article section h2 {
    width: 74vw;
    margin: 2vw;
    padding-left: 1vw;
    box-shadow: -2vw 1px 0 0 rgba(53, 48, 43, 1.00);
    border-radius: 1vw 0 0 0.5vw;
}
.right-or-bottom article section h3 {
    width: 72vw;
    margin: 2vw;
    margin-left: 4vw;
    padding-left: 1vw;
    box-shadow: -2vw 1px 0 0 rgba(53, 48, 43, 0.7);
    border-radius: 1vw 0 0 0.5vw;
}
/*トップページ専用*/
.right-or-bottom article iframe {
    width: 74vw;
    height: calc(74vw * 0.5625);
}
.right-or-bottom article section p.H2 {
    margin-left: 3vw;
    line-height: 2em;
}
.right-or-bottom article section dl {
    margin-left: 5vw;
    line-height: 2em;
}
.right-or-bottom article section dl dd {
    margin-left: 1em;
}
.workshopbtn {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    line-height: 2em;
    padding: 0 1em;
    margin: 1em 0;
}
.topimage img {
    width: 71vw;
    margin-left: 3vw;
}
/*団員紹介ページ専用*/
.right-or-bottom article section p.H3 {
    margin-left: 5vw;
    line-height: 2em;
}
.right-or-bottom article section .memberintro, .right-or-bottom article section .guestintro {
    display: flex;
}
.right-or-bottom article section .memberintro p {
    line-height: 2em;
}
.right-or-bottom article section .memberphoto {
    margin-left: 5vw;
    margin-right: 2vw;
}
.right-or-bottom article section .memberphoto img {
    width: calc(72vw * 0.3);
}
.right-or-bottom article section .guestintro {
    height: calc(72vw * 0.15);
    flex-flow: column wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.right-or-bottom article section .guestphoto {
    margin-left: 5vw;
    margin-right: 2vw;
}
.right-or-bottom article section .guestphoto img {
    width: calc(72vw * 0.15);
}
.guestname, .guesttext {
    margin: 0;
    padding: 0;
    line-height: 2em;
}
.guestname {
    font-family: ryo-display-plusn, serif;
    font-weight: 800;
    font-style: normal;
    font-size: larger;
}
.right-or-bottom footer {
    align-self: center;
    line-height: 5vh;
    font-weight: 100;
    font-size: smaller;
}