@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&display=swap');

.pcOnly {display: block;}
.spOnly {display: none;}

html {
	font-size: 62.5%;
}
body {
    width: 100%;
	font-size: 1.6rem;
	font-family: sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
	line-height: 175%;
    color: rgb(60,60,60);
    background-color: rgb(255,255,255);
    text-align: justify;
    -webkit-text-size-adjust: 100%;
}
#container {
    width: 100%;
    margin: 0 auto;
}
img {
    width: 100%;
    vertical-align: bottom;
    border: none;
}
a {border: none;text-decoration: none;color: rgb(60,60,60);}

.max {width: 100%;margin: 0 auto;}
.max_800 {width: 100%;max-width: 800px;margin: 0 auto;}
.max_1000 {
    width: 100%;max-width: 1000px;margin: 0 auto;}
.max_1200 {width: 100%;max-width: 1200px;margin: 0 auto;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.just {text-align: justify;}
.block {display: block;}
.inline{display: inline-block;}

.fs08{font-size: 0.8rem;}
.fs10{font-size: 1rem;}
.fs14{font-size: 1.4rem;}
.fs16{font-size: 1.6rem;}
.fs18{font-size: 1.8rem;}
.fs20{font-size: 2rem;}
.fs25{font-size: 2.5rem;}
.fs30{font-size: 3rem;}
.fs35{font-size: 3.5rem;}
.fs40{font-size: 4rem;}
.fs45{font-size: 4.5rem;}
.fs50{font-size: 5rem;}
.fs60{font-size: 6rem;}
.fs80{font-size: 8rem;}
.fs100{font-size: 10rem;}

.lh120{line-height: 120%;}
.lh150{line-height: 150%;}

.bold {font-weight: bold;}
.normal {font-weight: 300;}
.jikan05 {letter-spacing: 0.5rem;}
.jikan07 {letter-spacing: 0.7rem;}
.jikan10 {letter-spacing: 1rem;}

.w10{width: 10%;}
.w20{width: 20%;}
.w25{width: 25%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w95{width: 95%;}
.w100{width: 100%;}
.w25_50{width: 25%;}
.w25_100{width: 25%;}
.w30_100{width: 30%;}
.w33_50{width: 33%;}
.w40_100{width: 40%;}
.w50_100{width: 50%;}
.w60_100{width: 60%;}
.w70_100{width: 70%;}
.w80_100{width: 80%;}
.box {box-sizing: border-box;}

.mauto {margin-left: auto;margin-right: auto;}
.mt05{margin-top: 0.5rem;}
.mt10{margin-top: 1rem;}
.mt15{margin-top: 1.5rem;}
.mt20{margin-top: 2rem;}
.mt30{margin-top: 3rem;}
.mt40{margin-top: 4rem;}
.mt60{margin-top: 6rem;}
.mt80{margin-top: 8rem;}
.mt100{margin-top: 10rem;}
.mt200{margin-top: 20rem;}
.mt150{margin-top: 15rem;}
.mb05{margin-bottom: 0.5rem;}
.mb10{margin-bottom: 1rem;}
.mb15{margin-bottom: 1.5rem;}
.mb20{margin-bottom: 2rem;}
.mb30{margin-bottom: 3rem;}
.mb40{margin-bottom: 4rem;}
.mb60{margin-bottom: 6rem;}
.mb80{margin-bottom: 8rem;}
.mb100{margin-bottom: 10rem;}
.mb150{margin-bottom: 15rem;}
.mr05{margin-right: 0.5rem;}
.mr10{margin-right: 1rem;}
.mr20{margin-right: 2rem;}
.mr50{margin-right: 5rem;}
.ml05{margin-left: 0.5rem;}
.ml10{margin-left: 1rem;}
.ml20{margin-left: 2rem;}

.pd05{padding: 0.5rem;}
.pd10{padding: 1rem;}
.pd20{padding: 2rem;}
.pd30{padding: 3rem;}
.pd50{padding: 5rem;}
.pt05{padding-top: 0.5rem;}
.pt10{padding-top: 1rem;}
.pt20{padding-top: 2rem;}
.pt30{padding-top: 3rem;}
.pt50{padding-top: 5rem;}
.pt80{padding-top: 8rem;}
.pt100{padding-top: 10rem;}
.pb05{padding-bottom: 0.5rem;}
.pb10{padding-bottom: 1rem;}
.pb20{padding-bottom: 2rem;}
.pb30{padding-bottom: 3rem;}
.pb50{padding-bottom: 5rem;}
.pb80{padding-bottom: 8rem;}
.pb100{padding-bottom: 10rem;}
.pl05{padding-left: 0.5rem;}
.pl10{padding-left: 1rem;}
.pl10_0{padding-left: 1rem;}
.pl15{padding-left: 1.5rem;}
.pl20{padding-left: 2rem;}
.pl40{padding-left: 4rem;}
.pr05{padding-right: 0.5rem;}
.pr05_0{padding-right: 0.5rem;}
.pr10{padding-right: 1rem;}
.pr10_0{padding-right: 1rem;}
.pr15{padding-right: 1.5rem;}
.pr20{padding-right: 2rem;}
.ps10{padding-left: 1rem;padding-right: 1rem;}
.ps20{padding-left: 2rem;padding-right: 2rem;}
.ps50{padding-left: 5rem;padding-right: 5rem;}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
}
.flex_only {display: flex;}
.fl_center {align-items: center;}
.fl_cont_center {justify-content: center;}
.fl_left {justify-content: flex-start;}
.fl01 {flex: 1;}
.gap05{gap: 0.5rem;}
.gap10{gap: 1rem;}
.gap15{gap: 1.5rem;}
.gap20{gap: 2rem;}

.bk {color: rgb(60,60,60);}
.bk_mond {color: rgb(20,20,20);}
.wh {color: rgb(255,255,255);}
.red {color: rgb(220,60,40);}
.blue {color: rgb(30,60,130);}
.orange {color: rgb(240,100,0);}
.yellow {color: rgb(250,200,70);}

.bg_bk {background-color: rgb(60,60,60);}
.bg_wh {background-color: rgb(255,255,255);}
.bg_red {background-color: rgb(220,60,40);}
.bg_blue {background-color: rgb(30,60,130);}
.bg_mizu {background-color: rgb(220,240,250);}
.bg_yellow {background-color: rgb(250,200,70);}
.bg_gray {background-color: rgb(230,230,230);}
.bg_gray_more {background-color: rgb(130,130,130);}

.kage {filter: drop-shadow(2px 2px 2px rgba(60,60,60,.6));}
.kage_box {box-shadow: 3px 3px 6px rgba(60,60,60,0.4);}

.maru {border-radius: 10px;}
.en {border-radius: 100px;}
.waku{border: 1px solid rgb(60,60,60);box-sizing: border-box;}
hr {border: 0px; border-top: 2px solid rgb(60,60,60);}
.kasen {border-bottom: 1px solid rgb(60,60,60)}
.kasen_bold {border-bottom: 2px solid rgb(60,60,60)}
.sen_l {border-left: 8px solid rgb(25,40,135);padding-left: 1rem;}

iframe {aspect-ratio: 16/9;width: 100%;height: 100%;}

table {width: 100%;border: solid 1.5px rgb(50,50,50);}
td {padding: 0.5rem 1rem; border: solid 1px rgb(50,50,50);vertical-align: middle;}
hr {border: 0px; border-bottom: 1px solid rgb(100,100,100);}

.close {
    font-size: 1.5rem;
    color: rgb(255,255,255);
    background-color: rgb(100,100,100);
    padding: 2rem;
    cursor: pointer;
    margin: 10rem auto 5rem;
    text-align: center;
    border: none;
    border-radius: 10px;
    outline: none;
    transition: 0.5s;
}
.close:hover {
    background-color: rgb(200,200,200);
    transition: 0.5s;
}


@media screen and (max-width: 1000px) {
    .pcOnly {display: none;}
    .spOnly {display: block;}
    .spCenter {text-align: center;}
    html {font-size: 60%;}
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    #container {width: 95%;overflow: hidden;}
    .max_800, .max_1000, .max_1200{width: 95%;}
    .pr05_0{padding-right: 0;}
    .pr10_0 {padding-right: 0;}
    .pl10_0 {padding-left: 0;}
    .sppr10 {padding-right: 1rem;}
    .w25_100,.w30_100,.w40_100,.w50_100,.w60_100,.w70_100,.w80_100{width: 100%;}
    .w25_50 {width: 50%;}
    .w33_50 {width: 50%;}
    .pNo{padding: 0px;}
    .spmt10 {margin-top: 1rem;}
    .spmt20 {margin-top: 2rem;}
}

/*　動き　*/
.slid {
    transform:translateX(-100vw);
    opacity:0;
    transition-duration:1200ms;
}
.slid.effect {
    transform:translateX(0);
    opacity:1;
}
.slid_r {
    transform:translateX(100vw);
    opacity:0;
    transition-duration:1200ms;
}
.slid_r.effect {
    transform:translateX(0);
    opacity:1;
}
.up {
    transform:translateY(100px);
    opacity:0;
    transition-duration:1200ms;
}
.up.effect {
    transform:translateY(0);
    opacity:1;
}
.works_sum :nth-child(4n+1) .up {
    transition-delay: 0s;
}
.works_sum :nth-child(4n+2) .up {
    transition-delay: 0.2s;
}
.works_sum :nth-child(4n+3) .up {
    transition-delay: 0.4s;
}
.works_sum :nth-child(4n+4) .up {
    transition-delay: 0.6s;
}


/*---------------------------------------*/


/*　ヘッダー　*/
header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}
#head_main {
    position: relative;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 8rem;
    background-color: rgba(255,255,255,0.9);
}
.menu {
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: -2rem auto 0;
    width: 100%;
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#menu-cube {
    position: absolute;
    display: flex;
    width: 26rem;
    height: 6rem;
    top: 2rem;
    bottom: 0;
    left: 0;
    margin: auto;
}
#menu-cube img {width: 6rem;}
#menu-cube p {
    position: absolute;
    height: 4rem;
    left: 6.5rem;
    line-height: 140%;
    top: 0;
    bottom: 0;
    margin: auto;
}
.menu a {
    font-weight: bold;
    text-decoration: none;
}
.menu-naka {
    position: relative;
    width: 13rem;
    text-align: center;
    font-size: 2rem;
    margin-top: 1rem;
    margin-left: 5rem;
}
.menu-naka::after {
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 10px;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
#menu-w::after {
    background-color: rgb(220,60,40);
    border: solid 1px rgb(220,60,40);
}
#menu-p::after {
    background-color: rgb(250,200,70);
    border: solid 1px rgb(250,200,70);
}
#menu-c::after {
    background-color: rgb(30,60,130);
    border: solid 1px rgb(30,60,130);
}
.menu-naka:hover.menu-naka::after {
    width: 13rem;
    height: 1px;
}

/* Hamburger menu styles */
.hamburger-menu {
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 101;
    width: 3rem;
    height: 3rem;
    right: 3rem;
    top: 0;
    bottom: 0;
    margin: auto;
}
.bar {
    width: 3rem;
    height: 3px;
    background-color: rgb(60,60,60);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media screen and (max-width: 1000px) {
    #head_main {
        height: 8rem;
        background-color: rgba(255,255,255,0);
    }
    .menu {
        position: relative;
        top: -100vh;
        display: block;
        background-color: rgb(200,200,200);
        padding: 8rem 0 5rem;
        margin: -8rem auto 0;
        transition: top 0.5s ease-in-out;
        z-index: 10;
    }
    .menu.active {
        top: 0vh;
    }
    #menu-cube {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        margin-bottom: 3rem;
    }
    .menu-naka {
        font-size: 3rem;
        padding: 2rem 0;
        margin: 0 auto 2rem;
        opacity: 0;
        transform: translateX(-50vw);
        transition: all 0.5s ease-in-out;
    }
    .menu.active div {
        opacity: 1;
        transform: translateX(0);
    }
    .menu.active #menu-w {transition-delay: 0.3s;}
    .menu.active #menu-p {transition-delay: 0.4s;}
    .menu.active #menu-c {transition-delay: 0.5s;}
    .menu-naka::after {
        display: none;
    }
    .hamburger-menu {
        display: block;
    }
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/*　ヘッダーここまで　*/

/*　フッター　*/
#foot {background-color: rgb(50,50,50); color: rgb(255,255,255);}
/*　フッターここまで　*/


/*　トップ　*/
.title {
    position: relative;
    z-index: 10;
    left: 0;
    right: 0;
    font-size: 15rem;
    width: 100%;
    max-width: 1000px;
    margin: 45rem auto 25rem;
    height: 1px;
    color: rgb(100,100,100);
}
.word {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    letter-spacing: 1rem;
}
.letter {
    display: inline-block;
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 50px;
    margin-top: 6rem;
}
.letter:first-child {
    font-size: 32rem;
    margin-top: 0;
    margin-right: -0.5rem;
}
.word_tume .letter:first-child {margin-right: -5rem;}
.word_red .letter:first-child {color: rgb(220,60,40);}
.word_blue .letter:first-child {color: rgb(30,60,130);}
.word_yellow .letter:first-child {color: rgb(250,200,70);}
.word_bk .letter:first-child {color: rgb(20,20,20);}
.letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
    transform: rotateX(-90deg);
}
.letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#cube {
    position: absolute;
    z-index: -3;
    top: -15rem;
    left: 30rem;
    right: 0;
    margin: auto;
    width: 80%;
    overflow: hidden;
}
#belt {
    position: absolute;
    z-index: -3;
    top: 1rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
}
#belt .view {
    position: relative;
    width: 80%;
    left: 15rem;
}
#belt_sita {
    position: relative;
    padding-bottom: -10rem;
    margin-bottom: 20rem;
}
#belt_sita div {
    width: 40%;
    position: absolute;
    top: 2rem;
    right: 0;
}

@media screen and (max-width: 1000px) {
    .title {
        font-size: 14vw;
        margin-left: 0;
        margin: 40rem auto 12rem;
    }
    .letter {
        margin-top: 1.4rem;
        letter-spacing: 0.7rem;
    }
    .letter:first-child {
        font-size: 24vw;
        margin-top: 0;
        margin-right: -0.5rem;
    }
    .word_tume .letter:first-child {margin-right: -1rem;}
    #cube {
        width: 130%;
        top: -7rem;
        left: -15vw;
    }
    #cube p {
        width: 140%;
        left: -2rem;
    }
    #belt {
        top: 5rem;
        width: 100%;
    }
    #belt .view {
        width: 130%;
        left: -5rem;
    }
    #belt_sita {
        padding-bottom: 80%;
        margin-bottom: 0;
    }
    #belt_sita div {
        width: 100%;
    }
}

/*　お知らせ　*/
.cont_title p {
    display: inline-block;
    padding: 0 3rem 1rem;
    border-bottom: solid 6px rgb(60,60,60);
}
#oshi {
    width: 60%;
    max-width: 1000px;
    margin: 2rem auto;
}
.oshi_content a {
    text-decoration: none;
    color: rgb(60,60,60);
}
.oshi_naka {
    border-bottom: solid 1px rgb(100,100,100);
    padding: 1rem 3rem;
    box-sizing: border-box;
}

#news_content {
    width: 100%;
    max-width: 800px;
    margin: 5rem auto;
}
.news_time {
    display: inline-block;
    margin-bottom: 1rem;
    color: rgb(255,255,255);
    background-color: rgb(30,60,130);
    padding: 0rem 1rem;
    border-radius: 10px;
}
.news_box {
    padding-bottom: 2rem;
    border-bottom: solid 1px rgb(30,30,30);
    margin-bottom: 2.5rem;
}
.pager {
    margin: 3em auto;
    text-align: center;
}
.pager li {
    display: inline;
    margin: 0 0.5rem;
    font-size: 1.5rem;
}
.pager li span {
    display: inline-block;
    vertical-align: middle;
    padding: 0.5rem 1.5rem;
    color: rgb(255,255,255);
    background: rgb(30,60,130);
    border-radius: 3px;
}
.pager li a {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    padding: 0.5rem 1.5rem;
    color: rgb(30,30,30);
    border-radius: 3px;
}
.pager li a:hover {
    background: rgb(30,60,130);
    color: rgb(255,255,255);
}

@media screen and (max-width: 1000px) {
    #oshi {width: 100%;}
}


/*　Works　*/
#button_OnOff {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}
#button_OnOff label {
    display: inline-block;
    margin: 0 auto 2rem;
    padding: 1rem;
    width: 18rem;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
}
.OnOff {
    display: none;
}
#onoff_all label {
    border: solid 1px rgb(60,60,60);
    transition-duration: 0.3s;
}
#onoff_all label:hover {
    background-color: rgba(60,60,60,0.5);
}
#onoff_all input[type="radio"]:checked + label {
    color: rgb(255,255,255);
    background-color: rgb(60,60,60);
}
#onoff_gra label {
    color: rgb(220,60,40);
    border: solid 1px rgb(220,60,40);
    transition-duration: 0.3s;
}
#onoff_gra label:hover {
    background-color: rgba(220,60,40,0.5);
}
#onoff_gra input[type="radio"]:checked + label {
    color: rgb(255,255,255);
    background-color: rgb(220,60,40);
}
#onoff_web label {
    color: rgb(250,200,70);
    border: solid 1px rgb(250,200,70);
    transition-duration: 0.3s;
}
#onoff_web label:hover {
    background-color: rgba(250,200,70,0.5);
}
#onoff_web input[type="radio"]:checked + label {
    color: rgb(255,255,255);
    background-color: rgb(250,200,70);
}
#onoff_mv label {
    color: rgb(30,60,130);
    border: solid 1px rgb(30,60,130);
    transition-duration: 0.3s;
}
#onoff_mv label:hover {
    background-color: rgba(30,60,130,0.5);
}
#onoff_mv input[type="radio"]:checked + label {
    color: rgb(255,255,255);
    background-color: rgb(30,60,130);
}
#onoff_ot label {
    border: solid 1px rgb(60,60,60);
    transition-duration: 0.3s;
}
#onoff_ot label:hover {
    background-color: rgba(60,60,60,0.5);
}
#onoff_ot input[type="radio"]:checked + label {
    color: rgb(255,255,255);
    background-color: rgb(60,60,60);
}
@media screen and (max-width: 1000px) {
    #button_OnOff div {width: 48%;}
    #button_OnOff label {width: 100%;}
    #button_OnOff::before{
        content:"";
        display: block;
        width: 15rem;
        height: 0;
        order: 1;
    }
}

.box_works {display: none;margin-top: 6rem;}
.works_set {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
.works_sum {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 1.3rem;
}
.works_sum a {
    width: 23.5%;
}
.works_sum::before{
    content:"";
    display: block;
    width:23%;
    height: 0;
    order: 1;
}
.works_sum::after{
    content:"";
    display: block;
    width:23%;
    height: 0;
}

.sum_set {
    border: 1px solid rgb(30,30,30);
    margin-bottom: 3rem;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    border-radius: 6px;
}
.sum_naka {
    position: relative;
    padding: 1rem;
}

.works_sum_pic {
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
    padding-right: 2rem;
    padding-bottom: 100%;
    margin: 0 auto 1rem;
    margin-left: -1rem;
    overflow: hidden;
}
.works_sum_pic img {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: .5s;
}
.sum_set:hover .works_sum_pic img {
    transform:scale(120%,120%);
    transition: .5s;
}

.works_title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}
/*
.works_caption {
    padding: 0.5rem 1rem;
    box-sizing: border-box;
}
.works_caption p {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
*/
.year {
    margin-bottom: 0.5rem;
}
.year::before {
    content: '制作年';
    display: inline-block;
    width: 6rem;
    font-size: 1.0rem;
    letter-spacing: 0.3rem;
    text-align: center;
    color: rgb(255,255,255);
    background-color: rgb(80,80,80);
    border-radius: 5px;
    margin-right: 0.5rem;
}
.genre {
    margin-bottom: 0.2rem;
}
.genre::before {
    content: 'ジャンル';
    display: inline-block;
    width: 6rem;
    font-size: 1.0rem;
    text-align: center;
    color: rgb(255,255,255);
    background-color: rgb(80,80,80);
    border-radius: 5px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.work_icon div {
    width: 2.5rem;
    margin-top: -0.1rem;
    margin-right: 0.4rem;
}
.work_icon::before {
    content: '使用ソフト';
    display: inline-block;
    width: 6rem;
    font-size: 1.0rem;
    text-align: center;
    color: rgb(255,255,255);
    background-color: rgb(80,80,80);
    border-radius: 5px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
@media screen and (max-width: 1000px) {
    .works_sum a {
        width: 48.5%;
    }
}


/*詳細モーダル部分*/
.blocker {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    overflow: auto;
    z-index: 999;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.75);
    text-align: center;
}
.blocker:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.blocker.behind {
    background-color: transparent;
}
.modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    box-sizing: border-box;
    width: 100%;
    background: rgb(230,230,230);
    padding: 3rem;
    margin: 5rem 0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(0,0,0);
    text-align: left;
    animation-name: fade;
    animation-duration: 0.7s;
}
@keyframes fade{
  0%{
    opacity: 0.4;
  }
  100%{
    opacity: 1;
  }
}
.modal a.close-modal {
    position: absolute;
    top: -1rem;
    right: -1rem;
    display: block;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../img/modal_close.png');
    border: 3px solid rgb(255,255,255);
    border-radius: 100%;
    box-sizing: border-box;
}
.modal a.close-modal:hover {
    filter: saturate(300%);
}
.caption_modal {text-align: justify;}
@media screen and (max-width: 1000px) {
  .modal {
      padding: 15px 15px;
      width: 90%;
  }
  .modal a.close-modal {
    width: 40px;
    height: 40px;
  }
}

.cont_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cont_pic {
    width: 47%;
}
.cont_set {
    width: 50%;
}
.title_modal {
    font-size: 2.5rem;
    font-weight: bold;
    border-bottom: solid 1px rgb(30,30,30);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}
.icon_modal {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.icon_modal .year {
    width: 45%;
    margin-right: 2rem;
}
.icon_modal .genre {
    width: 100%;
}
.caption_modal {
    margin-bottom: 1rem;
}
.cont_link a {
    display: inline-block;
    padding: 0.3rem 1rem;
    color: rgb(255,255,255);
    background-color: rgb(0,160,255);
    border-radius: 50px;
}

@media screen and (max-width: 1000px) {
    .cont_box {
        flex-wrap: wrap;
    }
    .cont_pic {
        width: 95%;
        margin: 1rem auto;
    }
    .cont_set {
        width: 95%;
        margin: 1rem auto;
    }
    .icon_modal .year {
        width: 100%;
        margin-right: 0;
    }
    .cont_link {
        text-align: center;
        margin: 2rem 0;
    }
    .cont_link a {padding: 1rem 3rem;}
}


/*モデリング*/
.view video {
    width: 100%;
    height: auto;
}
#sfx_move {
    animation: sfx_anime 7s ease-in-out infinite;
}
@keyframes sfx_anime {
    0% {
        transform: translate(0,0) scale(1);
    }
    35% {
        transform: translate(-30vw,0) scale(0.7);
    }
    70% {
        transform: translate(30vw,200px) scale(1.5);
    }
    100% {
        transform: translate(0,0) scale(1);
    }
}


/*　プロフィール　*/
#profile {
}
#pro_naka {
    margin: 10rem auto 5rem;
    padding: 4rem;
    width: 50%;
    max-width: 400px;
    background-color: rgba(200,200,200,0.8);
    box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
    #pro_naka {width: 85%;}
}