@charset "utf-8";

/*---------------------------------
Variable
---------------------------------*/
:root{
    --color-primary: ;
    --color-primary-rgb: ;

    --color-important: ;
    --color-important-rgb: ;

    --color-bk: #000;
    --color-bk-rgb: 0,0,0;

    --color-dark: #666;
    --color-dark-rgb: 102,102,102;

    --color-medium: #999;
    --color-medium-rgb: 153,153,153;

    --color-light: #ccc;
    --color-light-rgb: 204,204,204;

    --color-wh: #fff;
    --color-wh-rgb: 255,255,255;

    --size-xs: 4px;

    --size-s: 8px;

    --size-m: 16px;

    --size-m: 24px;

    --size-l: 32px;

    --size-xl: 40px;
}
@media (min-width: 768px) {
    :root{

        --size-xs: 8px;

        --size-s: 16px;

        --size-m: 32px;

        --size-m: 48px;

        --size-l: 64px;

        --size-xl: 80px;
    }
}


/*---------------------------------
Reset
---------------------------------*/
html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    background: var(--color-bk);
}
body {
    margin: 0;
    font-family: 'Noto Serif JP', "游ゴシック", YuGothic, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", serif;
    color: var(--color-wh);
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
div {
    box-sizing: border-box;
}
a {
    color: var(--color-wh);
}

a:visited {
    color: var(--color-wh);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ol {
    padding-left: 1.6rem;
}
img {
    width: 100%;
}
p {
    margin: 0;
}
p + p {
    margin: var(--size-s) 0 0 0;
}
strong {
    color: #fd7a9f;
}
li {
    font-size: 1.4rem;
}
li + li {
    margin-top: 4px;
}
pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}
@media (min-width: 768px) {
    li + li {
        margin-top: 8px;
    }
    a {
        transition: color .3s;
    }
    a:hover {
        color: var(--color-medium);
    }
}

/*---------------------------------
Common
---------------------------------*/
#wrapper {
    position: relative;
    min-height: 100%;
    height: auto;
    box-sizing:border-box;
    animation: fadein 2s ease 0s 1 normal;
    -webkit-animation: fadein 2s ease 0s 1 normal;
}
.page #wrapper {
    padding: 80px 0 0;
}
.page_content {
    padding: 70px 0 80px;
}
.section {
    padding: 64px 0;
}
.container {
    margin: 0 20px;
}
.inner {
    background: #D9D9D9;
    color: var(--color-bk);
    padding: 16px;
}
.inner a {
    color: var(--color-bk);
}
.image img {
    max-width: 100%;
}
.display_pc {
    display: none;
}
.display_sp {
    display: block;
}
@media (min-width: 768px) {
    .page #wrapper {
        padding: 0 0 136px 100px;
    }
    .page_content {
        padding: 80px 0;
    }
    .display_pc {
        display: block;
    }
    .display_sp {
        display: none;
    }
    .section {
        padding: 128px 0;
    }
    .container {
        max-width: 1280px;
        padding: 0 40px;
        margin: 0 auto;
    }
    .inner {
        padding: 40px;
    }
}





/*---------------------------------
MV
---------------------------------*/
.main_visual {
    background-image: url(../../img/bg_saidan.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main_visual::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:rgba(var(--color-bk-rgb),0.6);
}
.mv_inner {
    position: relative;
    z-index: 1;
}
.mv_title {
    text-align: center;
}
.mv_title .sub_title {
    letter-spacing: .3em;
    text-indent: .3em;
}
.mv_title h1 {
    margin: 40px 0 0;
    font-size: 4rem;
    letter-spacing: .6em;
    text-indent: .6em;
}
@media (min-width: 768px) {
    .main_visual {
        min-height: 640px;
    }
    .mv_title .sub_title {
        font-size: 3.2rem;
    }
    .mv_title h1 {
        margin: 40px 0 0;
        font-size: 8rem;
    }
}


/*---------------------------------
ftter
---------------------------------*/
.footer {
    padding: 32px 0;
}
.footer_sns ul {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer_sns ul li {
    width: 32px;
}
.footer_sns ul li + li {
    margin: 0 0 0 24px;
}
.footer_sns ul li a {
    display: block;
    transition: opacity .3s;
}
.footer_logo {
    max-width: 240px;
    margin: 32px auto 0;
}
@media (min-width: 768px) {
    .footer_sns ul li a:hover {
        opacity: .7;
    }
    .footer_sns ul li {
        width: 32px;
    }
}

/*---------------------------------
sec
---------------------------------*/
.section h2 {
    letter-spacing: .3em;
    padding: 0 0 16px;
    margin: 0 0 32px;
    position: relative;
    text-indent: .3em;
    text-align: center;
}
.section h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 32px;
    height: 1px;
    background: var(--color-dark);
}
@media (min-width: 768px) {
    .section h2 {
        padding: 0 0 32px;
        margin: 0 0 64px;
        font-size: 4rem;
    }
    .section h2::after {
        width: 48px;
    }
}


/*---------------------------------
sec intro
---------------------------------*/
.sec_intro p {
    line-height: 2;
}
@media (min-width: 768px) {
    .sec_intro p {
        font-size: 1.8rem;
    }
}

/*---------------------------------
sec staff cast
---------------------------------*/
.sec_staff {
    text-align: center;
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(at 40% 20%, hsla(0, 0%, 8%, 1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(0, 0%, 15%, 1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(0, 0%, 17%, 1) 0px, transparent 50%), radial-gradient(at 80% 50%, hsla(0, 0%, 14%, 1) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(0, 0%, 16%, 1) 0px, transparent 50%), radial-gradient(at 80% 99%, hsla(0, 0%, 19%, 1) 0px, transparent 50%), radial-gradient(at 0% 0%, hsla(0, 0%, 19%, 1) 0px, transparent 50%);
}

.sec_staff h2:nth-of-type(n+2) {
    margin: 48px 0 32px;
}
.staff_list {
    line-height: 2;
}
.staff_list div {
    display: inline;
    white-space: nowrap;
    margin: 0 0.5em;
}
.staff_list div span { 
    font-size: 1.3rem;
    margin: 0 0.5em 0 0;
}
.staff_en {
    margin-top: 64px;
}
@media (min-width: 768px) {
    .sec_staff h2:nth-of-type(n+2) {
        margin: 96px 0 64px;
    }
    .staff_list {
        font-size: 1.8rem;
    }
    .staff_list div span { 
        font-size: 1.5rem;
    }
    .staff_en {
        margin-top: 128px;
    }
}