html,
    body,
    div,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    nav ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    ins {
        background-color: #ff9;
        color: #000;
        text-decoration: none;
    }

    mark {
        background-color: #ff9;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }

    del {
        text-decoration: line-through;
    }

    abbr[title],
    dfn[title] {
        border-bottom: 1px dotted;
        cursor: help;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #cccccc;
        margin: 1em 0;
        padding: 0;
    }

    input,
    select {
        vertical-align: middle;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    img {
        vertical-align: bottom;
        width: auto;
        max-width: 100%;
    }

    li {
        list-style: none;
    }

    html {
        scroll-behavior: smooth;
    }

    @media only screen and (min-width: 961px) {
        .sp {
            display: none;
        }
    }

    @media only screen and (max-width: 960px) {
        .pc {
            display: none;
        }
    }

    body {
        margin: 0;
        padding: 0;
        line-height: 1.5;
        background-color: #f9f9f9;
        font-family: 'Lato', 'Shippori Mincho';
        font-size: 14px;
        letter-spacing: 0.05em;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5 {
        color: #333;
    }

    #container {
        width: 100%;
        max-width: 2000px;
        margin: 0 auto;
    }

    p {
        line-height: 1.8em;
    }

    /*========= 画面遷移のためのCSS ===============*/

    .out2 {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #f9f9f9;
        z-index: 9999999;
        text-align: center;
        color: #fff;
        opacity: 1;
        visibility: visible;
        transition: 2s;
        transition-delay: 1s;
    }

    .is-loaded {
        opacity: 0;
        visibility: hidden;
    }

    #splash {
        position: relative;
        height: 100%;
    }

    @keyframes splash {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @media only screen and (min-width: 961px) {
        #splash-logo {
            position: relative;
            width: 25%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    @media only screen and (max-width: 960px) {
        #splash-logo {
            position: relative;
            width: 65%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    /*nav --------------------------------------------------------*/
    /*　ハンバーガーボタン　*/

    .globalMenuSp a {
        text-decoration: none;
    }




    @media (min-width: 961px) {
        nav.globalMenuSp {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 100%;
            background: url(../img/top/logo_bb3.svg), -moz-linear-gradient(top, #0064A2 0%, #6CC2D9 100%);
            background: url(../img/top/logo_bb3.svg), -webkit-linear-gradient(top, #0064A2 0%, #6CC2D9 100%);
            background: url(../img/top/logo_bb3.svg), linear-gradient(to bottom, #0064A2 0%, #6CC2D9 100%);
            z-index: 99;
            background-position: bottom right 55%;
            background-repeat: no-repeat;
            background-size: 200%;

        }

        nav.globalMenuSp .m_logo {
            position: absolute;
            width: 1.5em;
            padding-top: 1em;
        }

        .globalMenuSp ul {
            text-align: right;
        }

        .globalMenuSp ul a {
            color: #fff;
            font-size: 20px;
        }

        .globalMenuSp ul li {
            padding: 6px 0;
            position: relative;
            padding-right: 10px;
            font-weight: 100;
            font-size: 14px;
        }
    }

    @media (max-width: 960px) {
        .hamburger {
            display: block;
            position: fixed;
            z-index: 11;
            /* right: 10px; */
            /* top: 10px; */
            width: 100%;
            height: 45px;
            /* border-radius: 15px; */
            cursor: pointer;
            text-align: center;
            background-color: rgba(0, 140, 189, 0.8);
        }

        .hamburger span {
            display: block;
            position: absolute;
            width: 30px;
            height: 2px;
            left: 3px;
            background: #FFF;
            -webkit-transition: 0.3s ease-in-out;
            -moz-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
        }

        .hamburger span:nth-child(1) {
            top: 18px;
            left: 10px;
        }

        .hamburger span:nth-child(2) {
            top: 28px;
            left: 10px;
        }

        .hamburger h3 {
            color: #fff;
            top: 7px;
            position: absolute;
            left: 55px;
            font-size: 20px;
            font-weight: 100;
        }

        /* ナビ開いてる時のボタン */
        .hamburger.active {
            background-color: rgba(0, 0, 0, 0);
        }

        .hamburger.active span:nth-child(1) {
            top: 22px;
            left: 10px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .hamburger.active span:nth-child(2) {
            top: 22px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        nav.globalMenuSp {
            position: fixed;
            z-index: 10;
            top: 0;
            left: 0;
            background-color: rgba(0, 140, 189, 0.95);
            text-align: center;
            width: 100%;
            min-height: 100%;
            transform: translateY(-100%);
            transition: all .2s linear;
        }

        nav.globalMenuSp ul {
            margin: 0 auto;
            padding: 0;
            width: 100%;
        }

        nav.globalMenuSp ul li {
            list-style-type: none;
            padding: 0;
            transition: .4s all;
        }

        nav.globalMenuSp ul li a,
        nav.globalMenuSp ul li .border {
            display: inline-block;
            color: #fff;
            padding: 1em 1em;
            text-decoration: none;
        }

        nav.globalMenuSp.active {
            z-index: 10;
            transform: translateY(0);
        }
    }

    /*header ---------------------
    -----------------------------------*/

    nav.globalMenuSp .m_logo {
        width: 6%;
        margin: 4% 0 0 4%;
    }

    nav.globalMenuSp ul {
        margin-top: 0%;
    }

    /* nav.globalMenuSp ul li {
        padding-right: 10%;
    } */

    .globalMenuSp li img {
        height: 11px;
        margin: 5px 0;
    }

    .globalMenuSp .menu li {
        text-align: center;
    }

    .globalMenuSp .menu ul li {
        transition: all 0.3s ease-out;
    }

    .globalMenuSp .menu ul li:hover {
        background-color: #fff;
    }

    .globalMenuSp .menu :hover {
        text-decoration: none;
    }

    .globalMenuSp .menu ul .wh {
        text-decoration: none;
        background-color: #fff;
    }

    .bgleft svg {
        height: 11px;
    }

    .bgleft svg .cls-1 {
        fill: #fff;
        -webkit-transition: fill 0.3s ease-out;
        -moz-transition: fill 0.3s ease-out;
        -o-transition: fill 0.3s ease-out;
        -ms-transition: fill 0.3s ease-out;
        transition: fill 0.3s ease-out;
    }

    .globalMenuSp .menu .bgleft:hover svg .cls-1 {
        text-decoration: none;
        fill: #002973;
    }

    .wh svg .cls-1 {
        fill: #002973;
    }

    @media (max-width: 960px) {
        .menu {
            margin-top: 15%;
        }

        .menu .border:before {
            top: 50%;
        }

        nav.globalMenuSp ul li {
            padding: 5% 0;
            font-size: 1.7em;
        }

        .globalMenuSp a {
            text-decoration: none;
            color: white;
        }
    }

    .globalMenuSp .menu ul a svg .cls-1 :hover {
        fill: #002973;
        z-index: 5;
    }

    .globalMenuSp .menu ul {
        color: white;
        z-index: 5;
    }

    .menu h3 {
        margin: 1em auto;
        width: 95%;
    }

    #main_container::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        /* 背景カラー */
        z-index: 9;
        /* 一番手前に */
        pointer-events: none;
        /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
        opacity: 0;
        /* 初期値では非表示 */
        -webkit-transition: opacity .8s ease;
        /* アニメーション時間は 0.8秒 */
        transition: opacity .8s ease;
    }

    /*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/

    #main_container.fade_main::after {
        opacity: 1;
    }

    /*main -------------------------
-------------------------------*/

    .video-container {
        background-position: center;
        background-image: url(../img/top/010.jpg);
        background-size: cover;
    }

    @media only screen and (min-width: 961px) {
        #main .logo {
            width: 45%;
            position: absolute;
            right: 1%;
            bottom: 12%;
            padding: 3em 0;
            animation-name: illust;
            animation-duration: 5s;
            animation-delay: 3s;
            z-index: 1;
            opacity: 0;
            animation-fill-mode: forwards;
        }

        @keyframes illust {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


    }

    footer {
        position: absolute;
        bottom: 0;
        right: 2%;
        z-index: 9;
    }

    footer p {
        color: #fff;
    }

    footer.blk {
        position: relative;
        text-align: right;
        margin: 2em 1em;
    }

    footer.blk p {
        color: #333;
    }

    .scroll-top {
        /*表示位置*/
        position: fixed;
        right: 20px;
        bottom: 10px;
        z-index: 2;
        /*はじめは非表示*/
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s, visibility .5s;
        /*それぞれに0.5秒の変化のアニメーション*/
        /*縦書き*/
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        /*改行禁止*/
        white-space: nowrap;
        /*矢印の動き*/
        animation: arrowmove 1s ease-in-out infinite;
    }

    @keyframes arrowmove {
        0% {
            bottom: 20px;
        }

        50% {
            bottom: 25px;
        }

        100% {
            bottom: 20px;
        }
    }

    /*.scroll-viewクラスがついたら出現*/

    .scroll-top.scroll-view {
        opacity: 1;
        visibility: visible;
    }

    /*リンク全体の aタグの形状*/

    .scroll-top a {
        text-decoration: none;
        color: #666;
        text-transform: uppercase;
        font-size: 0.9rem;
        display: block;
    }

    /*スクロールリンクの形状*/

    .js-scroll a::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 50px;
        background: #666;
    }

    .js-scroll a::before {
        content: "";
        position: absolute;
        top: 30px;
        right: -6px;
        width: 1px;
        height: 20px;
        background: #666;
        transform: skewX(-31deg);
    }

    /*Edge IE11 hack*/

    _:-ms-lang(x),
    .js-scroll a::before {
        right: -11px;
    }

    /*ページトップリンクの形状*/

    .js-pagetop a::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 50px;
        background: #666;
    }

    .js-pagetop a::before {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        width: 1px;
        height: 20px;
        background: #666;
        transform: skewX(31deg);
    }

    /*Edge IE11 hack*/

    _:-ms-lang(x),
    .js-pagetop a::before {
        right: 0;
    }

    @media screen and (max-width:960px) {
        .logo {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            width: 95%;
            animation-name: illust;
            animation-duration: 3s;
            animation-delay: 3s;
            z-index: 8;
            opacity: 0;
            animation-fill-mode: forwards;
            margin: 5em 0;
        }

        @keyframes illust {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    }

    /*director    easy scroll --------------
------------------------------------------*/

    @media screen and (min-width:961px) {
        #wrapper {
            margin-left: 200px;
            position: relative;
        }
    }

    @media screen and (min-width:520px) and (max-width:960px) {

        /*ライブラリで天地中央になっている見せ方を上揃えに上書き*/
        .ms-tableCell {
            vertical-align: top;
        }

        /*右上ナビゲーションと右エリア非表示*/
        #menu,
        .ms-right {
            display: none;
        }

        /*左エリアを横幅100%にして画像＋テキストを出す設定*/
        .ms-left {
            width: 100% !important;
        }

        /*左エリア上部画像設定*/
        .sp-top {
            height: 80%;
            margin: 0 0 20px 0;
        }

        #left1 .sp-top {
            background: url("../img/director/mishima.jpg") no-repeat center;
            background-size: cover;
        }

        #left2 .sp-top {
            background: url("../img/director/yamazaki.jpg") no-repeat center;
            background-size: cover;
        }

        #left3 .sp-top {
            background: url("../img/director/no-image.png") no-repeat center;
            background-size: cover;
        }

        .foot_b p {
            color: #333;
        }
    }

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

        /*ライブラリで天地中央になっている見せ方を上揃えに上書き*/
        .ms-tableCell {
            vertical-align: top;
        }

        /*右上ナビゲーションと右エリア非表示*/
        #menu,
        .ms-right {
            display: none;
        }

        /*左エリアを横幅100%にして画像＋テキストを出す設定*/
        .ms-left {
            width: 100% !important;
        }

        /*左エリア上部画像設定*/
        .sp-top {
            height: 50%;
            margin: 0 0 20px 0;
        }

        #left1 .sp-top {
            background: url("../img/director/mishima.jpg") no-repeat center;
            background-size: cover;
        }

        #left2 .sp-top {
            background: url("../img/director/yamazaki.jpg") no-repeat center;
            background-size: cover;
        }

        #left3 .sp-top {
            background: url("../img/director/no-image.png") no-repeat center;
            background-size: cover;
        }

        .foot_b p {
            color: #333;
        }
    }

    #right1 {
        background: url("../img/director/mishima.jpg") no-repeat center;
        /*中央に繰り返しなしで配置*/
        background-size: cover;
        /*表示エリアいっぱいに画像を表示*/
    }

    #right2 {
        background: url("../img/director/yamazaki.jpg") no-repeat center;
        /*中央に繰り返しなしで配置*/
        background-size: cover;
        /*表示エリアいっぱいに画像を表示*/
    }

    #right3 {
        background: url("../img/director/no-image.png") no-repeat center;
        /*中央に繰り返しなしで配置*/
        background-size: cover;
        /*表示エリアいっぱいに画像を表示*/
    }

    /*director --------------                  ------------------------------------------*/

    .sp-bottom {
        width: 90%;
        margin: 0 auto;
    }

    .sp-bottom p {
        margin-bottom: 1em;
    }

    .sp-bottom h5 {
        font-weight: 400;
    }

    .d_name a {
        text-decoration: none;
    }

    @media screen and (min-width:961px) {
        .ms-section .icon {
            font-size: 2em;
            text-align: right;
            display: block;
            padding: 10px 0;


        }

        .ms-section .icon i {
            color: #333;
        }

        .ms-section .icon :hover {
            color: #008CBD;
            transition: color 0.3s;
        }

        .ms-section .icon i {
            margin-right: 10px;
        }

        .d_name {
            display: flex;
            justify-content: space-between;
        }
    }

    @media screen and (max-width:960px) {
        .ms-section .icon {
            font-size: 2em;
        }

        .ms-section .icon i {
            color: #333;
            margin-top: 0.5em;
        }

        .ms-section .icon i:last-child {
            margin-left: 0.5em;
        }

        .ms-section .icon :hover {
            color: #008CBD;
            transition: color 0.3s;
        }



        .modal_about p {
            margin-bottom: 1em;
        }
    }

    /*company --------------------------------------------------------*/

    @media screen and (min-width:961px) {
        .ms-section h2 {
            padding: 10px 0;
            font-size: 2em;
            font-weight: 400;
        }

        .sub_con {
            margin-left: 200px;
        }

        .sub_con2 {
            width: 90%;
            margin: 0 auto;
        }

        .com_main_h3 {
            width: 90%;
        }
    }

    .com_main {
        position: relative;
        background-image: url(../img/company/030.jpg);
        background-size: cover;
        background-position: center;
        height: 100vh;
        height: 100svh;
    }




    .com_main_h3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        animation-name: comtitle;
        animation-duration: 5s;
        animation-fill-mode: forwards;
        animation-delay: 0.5s;
        opacity: 0;
        text-align: center;
    }

    .com_main h3 {
        color: #fff;
        font-size: 20px;
    }

    .com2_in h5 {
        font-size: 1.2em;
        font-weight: 100;
    }

    .com2_in .com_zigyo {
        padding-left: 2em;
        text-indent: -1em;
    }

    @keyframes comtitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .com_name table {
        margin: 0 auto;
    }

    .com_name table td {
        padding: 0.5em 0.5em 0;
    }

    @media screen and (min-width:961px) {
        .com_1 {
            margin: 20% auto;
            width: 80%;
        }
    }

    .com_1 p {
        margin: 0.5em 0;
        font-size: 16px;
    }

    .com_1 .fko {
        margin-bottom: 3em;
    }

    .com_2 {
        padding: 5em 0;
        background-color: #f3f3f3;
    }

    .com2_in {
        width: 70%;
        margin: 0 auto;
    }

    .com_2 p {
        margin: 0.5em 0;
        font-size: 16px;
    }

    .com_3 {
        background-color: #f9f9f9;
        padding: 10em 0;
    }

    .com_3_in {
        width: 90%;
        margin: 0 auto;
        display: flex;
    }

    .com_name {
        margin: 0 auto;
        width: 45%;
    }

    .com_name .com_co {
        text-align: center;
    }

    .com_name h3 {
        font-size: 14px;
    }

    .comcom {
        height: 75vh;
        height: 75svh;
        background-image: url(../img/company/040.jpg);
        background-position: center;
        background-size: cover;
    }


    @media screen and (max-width:960px) {
        .com_main h3 {
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
        }

        .com_1,
        .com2_in {
            margin: 25% auto;
            width: 95%;
        }

        .com_1 p {
            margin: 0.5em 0;
            font-size: 1.2em;
        }

        .com_2 p {
            margin: 0.5em 0;
            font-size: 1em;
        }

        .com_name {
            margin: 2em auto 0;
            width: 95%;
        }
    }

    /*contact --------------
------------------------------------------*/

    #contact_main input,
    #contact_main textarea {
        padding: 0;
        background-color: #f3f3f3;

    }

    .form_ad {
        color: #666;
    }

    .btnff {
        text-align: center;
    }

    .butn button {
        width: 150px;
        height: 50px;
        margin: 0 auto;
        color: #fff;
        background: #008CBD;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .butn button:hover {
        color: #008CBD;
        background: #f3f3f3;
    }

    .col-md-6,
    .col-md-12 {
        margin: 3em 0;
    }

    @media only screen and (min-width: 961px) {
        #contact_main {
            width: 60%;
            margin: 0 auto;
        }

        #contact-form {
            width: 65%;
            margin: 0 auto;
        }

        #form_name,
        #form_company,
        #form_email,
        #form_subject,
        .butn {
            width: 100%;
            height: 3em;
            background-color: rgba(243, 243, 243, 0);
            padding-top: 1em;
        }

        #contact_main input {
            border: none;
            border-bottom: 1.5px solid #000;
            bottom: 0;
            height: 3em;

        }

        #contact_main textarea {
            border: none;
            border-bottom: 1.5px solid #000;
            height: 15em;
        }

        #form_message {
            width: 100%;
            padding-top: 1em;
        }




    }

    @media only screen and (max-width: 960px) {
        #contact_main {
            width: 100%;
            margin: 0 auto;
        }

        #contact-form {
            width: 90%;
            margin: 0 auto;
        }




        #form_name,
        #form_company,
        #form_email,
        #form_subject,
        .butn {
            width: 100%;
            height: 3em;
            background-color: rgba(243, 243, 243, 0);
            padding-top: 1em;
        }

        #contact_main input {
            border: none;
            border-bottom: 1.5px solid #000;
            bottom: 0;
        }

        #contact_main textarea {
            border: none;
            height: 15em;
            border-bottom: 1.5px solid #000;
        }

        #form_message {
            width: 100%;
            padding-top: 1em;
        }



    }

    /*thanksページ --------------
------------------------------------------*/

    @media only screen and (min-width: 961px) {
        .thanks {
            margin: 30vh auto;
            margin: 30svh auto;
            width: 60%;
            text-align: center;
            font-size: 1.2em;
            animation: thanks 1s linear 0s both;
        }

        .thanks img {
            width: 30%
        }

        ;

        @keyframes thanks {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }

    @media only screen and (max-width: 960px) {
        .thanks {
            margin: 30% auto 50%;
            width: 200px;
            opacity: 0;
            animation: thanks 1s linear 0s both;
        }

        @keyframes thanks {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }

    /*モーダルウィンド --------------------------------------------------------*/

    .modal_content_in {
        text-align: center;
    }

    .modal_flex {
        display: block;
    }

    .modal_cast {
        padding: 5px;
    }

    .modal_cast h2 {
        font-size: 2em;
        text-shadow: none;
        color: #333;
        font-weight: bold;
        padding: 0.3em 0 0;
        text-align: left;
    }

    .modal_cast .sub_name {
        margin: 2px 0 1em;
    }

    .modal_cast p {
        font-size: 1em;
        text-shadow: none;
        color: #333;
        line-height: 1.2;
    }

    .modal {
        display: none;
        height: 100vh;
        height: 100svh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }

    .modal__bg {
        background: rgba(255, 255, 255, 0.7);
        height: 100vh;
        height: 100svh;
        position: fixed;
        width: 100%;
    }

    .modal__content p {
        text-align: left;
        line-height: 1.6em;
    }

    .modal__content a {
        margin-top: 1em;
    }



    @media only screen and (min-width: 961px) {
        .modal__content {
            background: #fff;
            left: 50%;
            padding: 40px;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 60%;
        }

        .modal_cast .modal_about {
            padding: 1em;
        }

        .modal_img {
            padding: 2px;
            border: solid 3px #2323233b;
            width: 30%;
            margin: 0 auto;
        }
    }

    @media only screen and (max-width: 960px) {
        .modal_img {
            padding: 2px;
            border: solid 3px #2323233b;
            width: 50%;
            margin: 0 auto;
        }

        .modal__content {
            background: rgb(255, 255, 255, 0.8);
            left: 50%;
            padding: 5px;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 95%;
        }

        .modal_content_in {
            padding: 5px 0;
        }

        .modal_name {
            text-align: left;
        }

        .modal_out {
            background-color: #fff;
            background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
            background-size: 8px 100%, 100% 28px;
            line-height: 28px;
            padding: 2em 0 0.2em 0em;
        }
    }

    .ms-tableCell .coment {
        text-align: right;
    }

    .btn-flat-double-border {
        display: inline-block;
        padding: 0.8em 2em;
        color: #002973;
        transition: .4s;
        font-size: 1.3em;
    }

    .modal .btn-flat-double-border {
        color: #002973;
        background-color: rgb(255, 255, 255, 0.8);
        border: double 2px #002973;
    }

    .modal .btn-flat-double-border:hover {
        color: #fff;
        background-color: rgb(0, 41, 115, 0.8);
        border: double 2px #fff;
    }

    .btn-flat-double-border:hover {
        text-decoration: none;
    }

    .btn-flat-double-border2 {
        display: inline-block;
        padding: 0.5em 1em;
        text-decoration: none;
        color: #f29c9f;
        border: double 4px #f29c9f;
        border-radius: 25px;
        transition: .4s;
    }

    /*＝＝＝＝＝＝＝＝＝＝＝news                   ＝＝＝＝＝＝＝＝＝＝＝＝＝                          */

    @media screen and (min-width:961px) {
        .wrapper3 {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .news_l {
            width: 50%;
            height: 100vh;
            height: 100svh;
            position: relative;
            background-image: url(../img/news/test.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }



        .ppo {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.7);
            width: 100%;
            height: 100%;
        }

        .news_news {
            font-size: 1.7em;
            font-weight: 100;
            width: 90%;
            margin: 6% auto 0;
            z-index: 4;
            position: relative;
        }

        .news_news:after {
            content: "";
            width: 75%;
            display: block;
            border-bottom: 1px solid #333;
        }

        .news_conl {
            width: 95%;
            margin: 5% auto;
            height: 80%;
            position: relative;
            z-index: 4;
            overflow: scroll;
            /*      background-color: rgba(255, 255, 255, 0.7); */
        }

        .news_conl li {
            padding: 2em 1em;
            color: #000;
            transition: all 0.3s ease-out;
        }

        .news_conl li p {
            color: #000;
        }

        .news_conl .pps {
            text-decoration: none;
            position: relative;
            transition: all 0.3s ease-out;
        }

        .news_conl .pps::after {
            width: 30%;
            content: "";
            position: absolute;
            border-bottom: 1px solid #666;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .news_conl .pps:last-child::after {
            border-bottom: none;
        }

        .news_conl li:hover {
            transition: all 0.3s ease-out;
            background-color: rgba(255, 255, 255, 0.4);
        }

        .news_r {
            width: 50%;
            height: 100svh;
        }

        .news_conr {
            width: 95%;
            height: 98%;
            margin: 2% auto;
            overflow: scroll;
        }

        /* 'active' クラスが付与されていない場合に 'display: none;' を適用 */
        .page {
            width: 95%;
            margin: 0 auto 10em;
        }

        .page:first-child {
            margin: 0 auto;
        }

        .page:not(.active) {
            display: none;
        }

        .page.active {
            display: block;
            animation: news_p 1s ease-in-out;
        }

        @keyframes news_p {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .news_conr .page img {
            width: 90%;
            margin: 0 auto;
            display: block;
        }

        .page img:nth-child(n+2) {
            margin: 2em auto;
        }


        .news_conr h3 {
            margin-top: 1em;
            font-size: 1.5em;
            font-weight: 400;
        }

        .news_conr .news_day {
            text-align: right;
            margin-bottom: 1em;
        }

        .news_first {
            height: 100%;
            width: 35%;
            background-size: contain;
            background-image: url(../img/top/logo_b.svg);
            background-repeat: no-repeat;
            background-position: center;
        }
    }

    @media only screen and (max-width: 960px) {
        .sub_con {
            width: 100%;
            padding-top: 45px;
        }

        .wrapper3 {
            width: 95%;
            margin: 0 auto;
            font-size: 1.2em;
        }

        .news_conl,
        .news_conr {
            margin-bottom: 20em;
        }

        .news_l .news_news {
            text-align: center;
            font-size: 2em;
            font-weight: 100;
            margin-top: 0.5em;
            position: relative;
        }

        .news_news::after {
            width: 45%;
            content: "";
            position: absolute;
            border-bottom: 1px solid #666;
            left: 0;
            right: 0;
            margin: 0 auto;
            bottom: 0;
        }

        .news_conl ul li {
            margin: 2em 0;
        }

        .news_conl ul li p:first-child {
            padding-top: 2em;
        }

        .news_conl a {
            text-decoration: none;
        }

        .news_conl .pps::after {
            width: 60%;
            content: "";
            position: absolute;
            border-bottom: 1px solid #666;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .news_conl .pps:last-child::after {
            border-bottom: none;
        }

        .news_conr h3 {
            margin: 1em 0;
            font-size: 1.3em;
        }

        .news_conr .news_day {
            text-align: right;
        }

        .news_conr p {
            line-height: 2em;
        }

        .news_conr .page {
            padding: 5em 0 18em;
            position: relative;
        }

        .news_conr .page img {
            margin: 0 auto;
            display: block;
        }

        .news_conr .page::after {
            width: 80%;
            content: "";
            position: absolute;
            border-bottom: 1px solid #666;
            left: 0;
            right: 0;
            margin: 15em auto;
        }

        .page img:nth-child(n+2) {
            margin: 1em auto;
        }

    }

    /*＝＝＝＝＝＝＝＝＝＝＝works                   ＝＝＝＝＝＝＝＝＝＝＝＝＝                          */




    @media only screen and (min-width: 961px) {

        /*ラッパー要素*/
        .wrapper2 {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .contents2 {
            width: 50vw;
            background-color: rgba(255, 255, 255, 0.6);
        }

        .work_inner,
        .work_inner_first {
            width: 75%;
            margin: 0 auto;
        }

        /*コンテンツのブロック*/
        .contents2_out {
            background-color: #fff;
        }

        .contents2_out .work_back {
            position: fixed;
            width: 15%;
            right: 0;
            bottom: 0;

        }


        .contents2 .work_inner {
            padding: 70% 0 0;
        }

        .contents2 .work_inner_first {
            padding: 35vh 0 10vh;
            padding: 35svh 0 10svh;
        }

        .contents2 h2 {
            font-size: 18px;
            font-weight: 400;
            text-align: center;
        }

        .contents2 .w2 {
            text-align: right;
        }

        .contents2 .w1 {
            margin-bottom: 1em;
        }

        .contents2 .w3 {
            margin-top: 4em;
        }

        /* .work_space {
        padding-left: 2em;
        border-left: 10px solid #008CBD;
        border-image: linear-gradient(to bottom, #008CBD 0%, #8c9ec0 100%) 1;
        background-color: rgb(255, 255, 255, 0.6);
    } */
        .work_space {
            border: 1px solid #f9f9f9;
            filter: drop-shadow(8px 5px 2px #999);
            padding: 2em;
            background: linear-gradient(120deg, #fff, #f9f9f9);
        }

        .work_space p {
            font-size: 12px;
        }

        /*画像のブロック*/
        .images2 {
            width: 40vw;
            height: 100vh;
            height: 100svh;
            display: flex;
            align-items: center;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
        }

        .images2 p {
            height: 400px;
            margin: auto;
            display: block;
            visibility: hidden;
            /* 画像が透過pngの時は背景色が必要です */
            position: absolute;
            top: 0;
            bottom: 0;
            /* フェード速度 */
            transition: .8s;
            opacity: 0;
        }

        .images2 p {
            height: 100vh;
            height: 100svh;
            width: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }



        .images2 .tate {
            height: 85vh;
            height: 85svh;
        }

        _::-webkit-full-page-media,
        _:future,
        :root ..images2 .tate {
            height: 75vh;
            height: 75svh;
        }

        .images2 .scroll-box01 {
            background-image: url(../img/works/film2.jpg);

        }

        .images2 .scroll-box02 {
            background-image: url(../img/works/film1.jpg);
        }

        .images2 .scroll-box03 {
            background-image: url(../img/works/320.jpg);
        }

        .images2 .scroll-box04 {
            background-image: url(../img/news/film5.jpg);
        }



        .images2 p.active {
            visibility: visible;
            opacity: 1;
        }

        .work_last {
            height: 30vh;
            height: 30svh;
        }
    }

    @media only screen and (max-width: 960px) {
        .contents2_out {
            width: 95%;
            margin: 0 auto;
        }

        .contents2_out {
            background-color: #fff;
        }

        .contents2_out .work_back {
            position: fixed;
            width: 50%;
            right: 0;
            bottom: 0;

        }

        .work_inner_first img,
        .work_inner img {
            width: 90%;
            margin: 0 auto;
            display: block;
            margin-bottom: 3em;
        }

        .work_space {
            border: 1px solid #f9f9f9;
            filter: drop-shadow(8px 5px 2px #999);
            padding: 2em;
            background: linear-gradient(120deg, #fff, #f9f9f9);
            margin-bottom: 15em;
        }

        .work_space p {
            font-size: 12px;
        }

        .contents2 h2 {
            font-size: 18px;
            font-weight: 400;
            text-align: center;
        }

        .work_space .width {
            width: 100%;
        }

        .contents2 .w2 {
            text-align: right;
        }

        .contents2 .w1 {
            margin-bottom: 1em;
        }

        .contents2 .w3 {
            margin-top: 4em;
        }
    }