@charset "utf-8";
/* CSS Document */
/*スマートフォン縦画面用*/
body {
    flex-flow: column nowrap;/*全体を縦に並べる*/
}
/*ヘッダー＆ナビゲーション部共通*/
.left-or-top {
    width: 100vw;
    height: 16vh;
    display: flex;
    flex-flow: column nowrap;
}
/*ヘッダー部*/
.left-or-top header {
    width: 100vw;/*幅100vw*/
    height: 11vh;/*高さ11vh*/
    display: flex;
    flex-flow: row nowrap;/*子要素左から右、折り返し無*/
    align-items: flex-end;/*子要素右寄せ*/
    justify-content: space-around;/*子要素横両端余白あり*/
}
/*劇団ロゴ*/
.flag {
    margin-right: auto; /*右側に適当な余白を作って左に寄る*/
    align-self: stretch; /*上下の隙間が無くなる*/
}
.flag a img {
    height: 11vh; /*ロゴ高さ11vh*/
}
/*SNS*/
.fb a img, .tw a img, .ig a img, .yt a img {
    height: 4vh; /*SNSアイコン高さ4vh*/
    margin-right: 5vw; /*右マージン4vw*/
}
/*ナビゲーション部*/
.left-or-top nav {
    width: 100vw;/*幅100vw*/
    height: 5vh;/*高さ5vh*/
    box-shadow: 0px 0.5px 0.5px 0.7px rgba(0, 0, 0, 1.0);/*上下に細いラインを引く*/
}
.left-or-top nav ul {/*リスト全体*/
    width: 100vw;/*幅100vw*/
    height: 5vh;/*高さ5vh*/
    list-style-type: none;/*行頭マーク無*/
    display: flex;
    flex-flow: row nowrap;/*子要素左から右、折り返し無*/
    justify-content: space-around;/*子要素横両端余白あり*/
    align-items: center;/*子要素上下の中央*/
}
.left-or-top nav ul li a {/*リスト内aタグ*/
    width: calc(100vw / 4);/*全幅を3等分した幅を持つ*/
    height: 5vh;/*高さ5vh*/
}
/* メインコンテンツ＆フッター部共通 */
.right-or-bottom {
    width: 100vw; /*幅100vw*/
    height: 84vh; /*高さ84vh*/
    display: flex;
    flex-flow: column nowrap; /*縦主軸・折り返し無*/
    justify-content: space-between; /*メイン：nav下ピッタリ、フッター：画面下辺ピッタリ*/
}
.right-or-bottom article {
    width: 100vw; /*メイン幅100vw*/
    height: 79vh; /*メイン高さ79vh*/
    padding: 5vh 5vw; /*余白上下5vh・左右5vw*/
    overflow: scroll;
}
.right-or-bottom article section h2 {
    width: 90vw;/*下線幅90vw*/
    margin: 2vw;/*上下左右余白2vw*/
    padding-left: 1vw;/*左側内余白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: 88vw;/*下線幅88vw*/
    margin: 2vw;/*上下左右余白2vw*/
    margin-left: 4vw;/*左側外余白のみ4vw*/
    padding-left: 1vw;/*左側内余白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: 90vw; /*幅90vw（全幅100vw-余白5vw×2*/
    height: calc(90vw * 0.5625); /*縦横比率16:9*/
}
.right-or-bottom article section p.H2 {/*h2の次のpタグ専用*/
    margin-left: 3vw;/*h2と頭を揃える*/
    line-height: 2em;
}
.right-or-bottom article section dl {/*ワークショップの項目専用*/
    margin-left: 5vw;/*h3と頭を揃える*/
    line-height: 2em;
}
.right-or-bottom article section dl dt {
}
.right-or-bottom article section dl dd {
    margin-left: 1em;/*dtから1文字後ろにずらす*/
}
.workshopbtn {
    font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    line-height: 2em;
    padding: 0 1em;
    margin: 1em 0;
}
.topimage img {
    width: 84vw;
    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 {
    flex-flow: column nowrap;
    align-items: center;
}
.right-or-bottom article section .memberphoto {
    margin-left: 0vw;
}
.right-or-bottom article section .memberphoto img {
    width: calc(88vw * 0.8);
}
.right-or-bottom article section .memberintro p {
    width: 85vw;
    margin-left: 5vw;
    line-height: 2em;
}
.right-or-bottom article section .guestintro {
    flex-flow: column nowrap;
    align-items: center;
}
.right-or-bottom article section .guestphoto {
    margin-left: 4vw;
    margin-right: 1vw;
}
.right-or-bottom article section .guestphoto img {
    width: calc(88vw * 0.4);
}
.right-or-bottom article section .guestintro p {
    width: 85vw;
    margin-left: 5vw;
    line-height: 2em;
}
.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;
}