@charset "UFT-8";

/* FONT============= */
@font-face {
    font-family: 'tegaki';
    font-style: normal;
    font-weight: normal;
    src: url('../font/851tegaki_zatsu_normal_0883.ttf') format('TrueType');
}

@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Unbounded-VariableFont_wght.ttf') format('TrueType');
}

@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: normal;
    src: url('../font/NotoSansJP-Regular.otf') format('OpenType');
}

@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: bold;
    src: url('../font//NotoSansJP-Bold.otf') format('OpenType');
}

/* ALL============== */
html {
    font-size: 62.5%;
    /* scroll-behavior: smooth; */
}


body {
    background-color: #fff;
    font-size: 1.6rem;
    font-family: "NotoSans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: normal;
    line-height: 1.8;
    color: #333;
}

a {
    text-decoration: none;
    color: #000;
    transition: .3s;
    cursor: pointer;
}

/* .current {
    text-decoration: underline;
} */

.logo {
    width: 180px;
    text-align: center;
}

.logo a p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    background-color: #d5b4b4;
    padding: 3px 5px;
}

.title {
    text-align: center;
    line-height: 1.6;
    padding-top: 100px;
}

.title h2 {
    font-size: 1.6rem;
}

.title p {
    font-size: 3rem;
    font-weight: bold;
}

.brSp {
    display: none;
}

@media screen and (max-width:768px) {
    body {
        font-size: 1.4rem;
    }

    .logo {
        width: 130px;
        text-align: center;
    }

    .logo a p {
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
        background-color: #d5b4b4;
        padding: 0px 5px;
    }

    .title h2 {
        font-size: 1.4rem;
    }

    .title p {
        font-size: 2.4rem;
        font-weight: bold;
    }

    .brSp {
        display: block;
    }
}



/* header=========== */
header .logo a .logo_sp,
header nav {
    display: none;
}

header .logo a .logo_pc {
    display: block;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
}

header.side {
    position: fixed;
}

header .header_inner {
    display: block;
    width: 100%;
    padding: 10px;
}

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

    header .logo a .logo_sp,
    header nav {
        display: block;
    }

    header .logo a .logo_pc {
        display: none;
    }

    header {
        background-color: rgb(255, 255, 255, .5);
        height: 90px;
        position: fixed;
    }

}


/* nav=========== */
.pc_nav {
    display: block;
}

.sp_nav {
    display: none;
}


/* .nav .nav_menu */
.nav .nav_menu {
    z-index: 800;
}

.nav .nav_menu ul li.nav_text {
    margin: 0;
    position: fixed;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    width: auto;
}

.accordion-content {
    display: none;
    width: auto;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
}

.nav .nav_menu {
    position: fixed;
    height: 100vh;
    height: 100dvh;
    background-color: #fff;
    z-index: 800;
    width: 200px;
    padding-top: 50px;
    top: 0;
    left: 0;
}

.nav .nav_menu ul {
    width: 100%;
    text-align: center;
}

.nav .nav_menu ul li.logo {
    width: 150px;
}

.nav .nav_menu ul li.nav_text>div {
    font-family: "NotoSans";
    height: 50px;
    width: 100%;
    margin-bottom: 15px;
    justify-content: flex-start;
    align-items: stretch;
    padding-left: 50px;
    display: flex;
    flex-direction: row;
}

.nav .nav_menu ul li.nav_text>div>a {
    color: #000;
    transition: .4s;
    margin-right: 30px;
    line-height: 50px;
    font-weight: bold;
}

.nav .nav_menu ul li.nav_text>div div a {
    display: inline-block;
    padding-right: 30px;
    font-size: 1.2rem;
    line-height: 50px;
}

.nav .nav_menu ul li.entry div.entry_btn {
    margin-top: 20px;
}

.nav .nav_menu ul li.nav_text>div a:hover {
    color: #ddd0d0;
    line-height: 50px;
}

/* nav .entry */
.nav .nav_menu ul li.entry {
    position: absolute;
    bottom: 20px;
}

.nav .nav_menu ul li.entry div {
    width: 150px;
    margin: 10px;

}

.nav .nav_menu ul li.entry div a {
    line-height: 50px;
    border: 1px solid #000;
    display: block;
    color: #fff;
    font-family: "Unbounded";
    font-weight: bold;
    transition: .3s;
}

.nav .nav_menu ul li.entry div a:hover {
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
}

.nav .nav_menu ul li.entry div a img {
    height: 50px;
    margin-right: auto;
    margin-left: auto;
}

.nav .nav_menu ul li.entry div.entry_btn a {
    background-color: #000;
}


@media screen and (max-width:768px) {
    .pc_nav {
        display: none;
    }

    .sp_nav {
        display: block;
    }

    /* .nav_btn */
    .nav .nav_btn {
        display: block;
        position: fixed;
        z-index: 1000;
        right: 20px;
        top: 0;
        width: 90px;
        height: 90px;
    }

    .nav .nav_btn span {
        display: block;
        position: absolute;
        width: 90px;
        height: 2px;
        background-color: black;
        transition: .3s;
    }

    .nav .nav_btn span:nth-child(1) {
        top: 35px;
    }

    .nav .nav_btn span:nth-child(2) {
        top: 55px;
    }


    /* nav_menu */
    .nav .nav_menu {
        top: -130%;
        left: 0;
        width: 100%;
        transition: .5s;
        opacity: 0;
        padding-bottom: 50px;
    }

    .nav .nav_menu ul li {
        margin-right: auto;
        margin-left: auto;
    }

    .nav .nav_menu ul li.nav_text {
        width: 300px;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .nav .nav_menu ul li.nav_text>div {
        padding: 0;
        text-align: left;
        margin: 0;
    }

    .nav .nav_menu ul li.nav_text>div>a {
        margin-right: 0;
        background-color: #fff;
        padding: 0;
        display: block;
        width: 80px;
        margin-right: auto;
    }

    .accordion-box .accordion {
        height: 60px;
        padding: 15px 40px 15px 15px;
        cursor: pointer;
    }

    .accordion-box .accordion-content {
        white-space: normal;
        position: absolute;
        cursor: pointer;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 150px;
    }

    .nav .nav_menu ul li.nav_text>div div a {
        display: block;
        padding-right: 0;
    }
}

.nav .nav_menu ul li.entry {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    bottom: 50px;
    width: 100%;
}

.nav .nav_menu ul li.entry div.entry_btn {
    margin-top: 10px;
}

/* .open */
.nav.sp_nav.open span {
    background-color: #394867;
}

.nav.sp_nav.open span:nth-child(1) {
    width: 40px;
    margin-left: 50px;
}

.nav.sp_nav.open span:nth-child(2) {
    width: 20px;
    margin-left: 70px;
}

.nav.sp_nav.open .nav_menu {
    transition: .5s;
    top: 0;
    display: block;
    z-index: 950;
    opacity: 1;
}

/* #key=========== */
#key {
    height: 100vh;
    height: 100svh;
}

#key::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100vh;
    background-image: url(../img/top/key.jpg);
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1;
}

#key div {
    position: absolute;
    right: 10%;
    bottom: 30%;
}

#key div h1 {
    font-family: tegaki;
    color: #fff;
    font-size: 5rem;
    transform: rotate(-8deg);
    font-weight: 100;
}

#key p.scroll {
    display: inline-block;
    position: absolute;
    left: 20px;
    bottom: 50px;
    z-index: 2;
    padding: 10px 10px 110px;
    overflow: hidden;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-lr;
    transition: .5s;
}

#key p.scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #fff;
    animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}

@media screen and (max-width:768px) {
    #key {
        height: 80vh;
        height: 80svh;
    }

    #key::before {
        background-position: 65% 50%;
    }

    #key div {
        right: 5%;
        bottom: 40%;
    }

    #key div h1 {
        font-size: 2.4rem;
    }

    #key p.scroll {
        bottom: 150px;
        left: 5px;
        padding: 10px 10px 80px;
        font-size: 1rem;

    }

    #key p.scroll::after {
        content: '';
        height: 60px;
    }
}

/* #topics=========== */
#topics {
    background-color: #fff;
    width: 100%;
    text-align: center;
}

#topics>div {
    max-width: 900px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#topics .topics-slider {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px dotted #ddd0d0;
    margin-right: 10px;
    margin-left: 10px;
}

#topics .topics-dots .slick-dots {
    position: static;
}

/*  */
#topics .topics-slider .slick-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#topics .topics-slider .slick-arrow::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #ddd0d0;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform: rotate(45deg);
}

#topics .topics-slider .slick-arrow::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #ddd0d0;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    transform: rotate(-135deg);
}


#topics .topics-slider .slick-next {
    right: 0;
}

#topics .topics-slider .slick-next::before {
    left: 20px;
}

#topics .topics-slider .slick-next::after {
    display: none;
}

#topics .topics-slider .slick-prev {
    left: 0;
}

#topics .topics-slider .slick-prev::before {
    display: none;
}

#topics .topics-slider .slick-prev::after {
    left: 20px;
}




/*  */



@media screen and (max-width:768px) {
    #topics>div p span.day {
        margin-right: 0;
    }


}



/* #message=========== */
#message {
    padding: 200px 10px 0px 10px;
    background-color: #fff;
    width: 100%;
    line-height: 3;
    text-align: center;
}

#message>div {
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#message>div p:first-child {
    font-size: 2rem;
    font-weight: bold;
}


@media screen and (max-width:768px) {
    #message {
        padding: 100px 10px 0px 10px;
    }

    #message>div {
        line-height: 2;
    }

    #message p {
        padding-bottom: 25px;
    }
}


/* #movie=========== */
#movie {
    padding: 200px 10px;
    background-color: #fff;
}

#movie .video_top {
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin: auto;
    /* padding: 4% 4% 4% 4%; */
}

#movie video.video_main {
    width: 100%;
}

@media screen and (max-width:768px) {
    #movie .video_top {
        padding: 0;
    }

    #movie {
        padding: 100px 10px;
    }
}

/* #grid=========== */
#grid {
    padding: 100px 10px 200px 10px;
    background-color: #fff;
}

#grid .grid_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#grid .grid_inner .grid_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
    max-height: 800px;
    width: 50%;
    height: 50%;
}

#grid .grid_inner .grid_box .grid_boxIn {
    max-width: 400px;
    max-height: 400px;
    width: 50%;
    padding: 5px;
}

#grid .grid_inner .grid_box .grid_boxIn.grid800 {
    max-width: 800px;
    max-height: 800px;
    width: 100%;
}


#grid .grid_inner .grid_box .grid_boxIn a {
    position: relative;
    display: block;
    color: #fff;
    line-height: 1;
    font-size: 1.4rem;
    font-weight: bold;
    width: 100%;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_img {
    overflow: hidden;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_img img {
    height: auto;
    transition: transform .6s ease;
}

#grid .grid_inner .grid_box .grid_boxIn a:hover .grid_img img {
    transform: scale(1.1);
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_img.grid_img_normal::after {
    content: "";
    background-color: rgb(000, 000, 000, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_pick {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 120px;
    transition: .6s;
}

#grid .grid_inner .grid_box .grid_boxIn a:hover .grid_pick.grid_pick_video {
    color: #D1DED1;
}

#grid .grid_inner .grid_box .grid_boxIn a:hover .grid_pick.grid_pick_photo {
    color: #D1D7DE;
}

#grid .grid_inner .grid_box .grid_boxIn a:hover .grid_pick.grid_pick_design {
    color: #ddd0d0;
}

#grid .grid_inner .grid_box .grid_boxIn a:hover .grid_pick.grid_pick_other {
    color: #DEDED1;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_pick p:nth-child(1) {
    font-size: 1.2rem;
    font-family: 'Unbounded';
    margin-bottom: 4px;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_pick p:nth-child(2) {
    font-size: 1.8rem;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_text {
    position: absolute;
    bottom: 8px;
    right: 10px;
    text-align: right;
    font-size: 1.2rem;
    font-weight: bold;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_text p {
    margin-right: 15px;
}

#grid .grid_inner .grid_box .grid_boxIn a .grid_text img {
    max-width: 165px;
    width: 50%;
    margin-left: auto;
}

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

    #grid .grid_inner .grid_box {
        width: 100%;
        height: 100%;
        flex-direction: row;
    }

    #grid .grid_inner .grid_box:nth-child(1) {
        order: 1;
    }

    #grid .grid_inner .grid_box:nth-child(2) {
        order: 2;
    }

    #grid .grid_inner .grid_box:nth-child(3) {
        order: 4;
    }

    #grid .grid_inner .grid_box:nth-child(4) {
        order: 3;
    }


    #grid .grid_inner .grid_box .grid_boxIn a .grid_text {
        font-size: 1rem;
    }

    #grid .grid_inner .grid_box .grid_boxIn a .grid_pick p:nth-child(1) {
        font-size: 1rem;
    }

    #grid .grid_inner .grid_box .grid_boxIn a .grid_pick p:nth-child(2) {
        font-size: 1.4rem;
    }
}


/* footer=========== */
footer {
    background-color: #f2f1f1;
    padding: 50px 10px 0 10px;
}

footer .nav .nav_menu {
    position: static;
    height: auto;
    background-color: transparent;
    z-index: 1;
    width: auto;
    padding-top: 0;
}


footer .nav .nav_menu ul li.nav_text {
    margin: auto;
    position: static;
    top: auto;
    left: auto;
    transform: translateY(0);
}

footer .nav .nav_menu ul li.nav_text>div {
    padding-left: 40px;
}

footer .nav .nav_menu ul li.entry {
    display: block;
    bottom: 50px;
    width: 100%;
}

footer .nav .nav_menu ul li.entry {
    position: static;
    bottom: 20px;
}

footer>div {
    margin-right: 5%;
    margin-bottom: 20px;
}

footer .wrapper {
    margin-left: 5%;
}

footer .accordion-content {
    background-color: #f2f1f1;

}


footer .footer_logo {
    max-width: 300px;
    width: 50%;
    margin-left: auto;
}

footer .company a {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    color: #000;
}

footer .company a:hover {
    opacity: .5;
}

footer .company img {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: 9px;
    margin-left: 5px;
}

footer .toTop {
    margin-top: 100px;
    text-align: center;
}

footer .toTop a {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 100px;
    background-color: #d5b4b4;
    font-family: "Unbounded";
    color: #f2f1f1;
    padding-top: 25px;
    margin-left: auto;
    transition: .5s;
}

footer .toTop a:hover {
    background-color: #fff;
    color: #d5b4b4;
    transition: .5s;
}

footer .copy {
    font-size: 1rem;
    padding-bottom: 10px;
    text-align: center;
    margin-top: 50px;
}



@media screen and (max-width:768px) {
    footer .toTop a {
        width: 80px;
        height: 80px;
        font-size: 1rem;
        padding-top: 22px;
    }
}

/*  =================
ここから下層ページ 
====================*/

/* under_page */
.under_page {
    margin-left: 200px;
}

@media screen and (max-width:768px) {
    .under_page {
        margin-left: 0px;
        margin-top: 90px;
    }
}

/* under_title */
.under_title .under_title_img {
    height: 70vh;
    width: 100%;
    background-size: cover;
}

.under_title.recruit_under_title .under_title_img {
    background-image: url(../img/recruit/underTitle.jpg);
    background-position: 50% 50%;
}

@media screen and (max-width:768px) {
    .under_title .under_title_img {
        height: 50vh;
    }
}

/*  =================
.recruit 
====================*/
.recruit {
    padding: 100px 30px;
    text-align: left;
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* recruit_list */
.recruit .recruit_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
}

.recruit .recruit_list li {
    margin: 10px;
}

.recruit .recruit_list li a {
    display: block;
    color: #000;
    transition: .5s;
    max-width: 550px;
    width: 100%;
    border: 1px solid #d5b4b4;
}

.recruit .recruit_list li a p.more {
    text-align: right;
    font-size: 1.4rem;
}

.recruit .recruit_list li.sales a {
    border: 1px solid #DEDED1;
    box-shadow: 0px 3px 6px #DEDED1;
}

.recruit .recruit_list li a:hover {
    opacity: 0.6;
}

.recruit .recruit_list li p.rec_more {
    text-align: left;
    margin-left: auto;
    width: 150px;
    font-size: 1.4rem;
    color: #fff;
    font-weight: bold;
    background-color: #d5b4b4;
    padding: 5px 10px;
}

.recruit .recruit_list li p.rec_more img {
    position: relative;
    top: -5px;
}

.recruit .recruit_list li a span {
    display: block;
    font-weight: bold;
    padding: 15px;
    border-bottom: 1px solid #ddd0d0;

}

.recruit .recruit_list li a p {
    padding: 15px;
}

/* jobdescription */
.recruit table {
    background: #fff;
    display: block;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid #ddd0d0;
}

/*table thead */
.recruit table thead {
    display: block;
    padding: 40px 30px;
    text-align: left;
    background-color: #ddd0d0;

}

.recruit table thead tr th {
    font-size: 2.4rem;
    line-height: 1.2;
}

.recruit table thead tr th span {
    font-size: 1.4rem;
    margin-bottom: 10px;
    display: block;
}

.recruit table thead tr th span:last-child {
    font-size: 1.6rem;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 20px;
}

/*table tbody */
.recruit table tbody {
    display: block;
    padding: 80px 30px;
}

.recruit table tbody tr {
    display: block;
    padding: 10px 0;
}

.recruit table.photo tbody tr {
    border-bottom: 1px solid #D1D7DE;
}

.recruit table.video tbody tr {
    border-bottom: 1px solid #D1DED1;
}

.recruit table.designer tbody tr {
    border-bottom: 1px solid #ddd0d0;
}

.recruit table.sales tbody tr {
    border-bottom: 1px solid #DEDED1;
}

.recruit table tbody tr th {
    display: inline-block;
    width: 25%;
    padding: 10px;
}

.recruit table tbody tr td {
    display: inline-block;
    width: 70%;
    padding: 10px;
    margin-left: auto;
}

.recruit .recruit_back {
    text-align: center;
    margin-top: 100px;
}

.recruit .recruit_back a {
    text-decoration: underline;
}

@media screen and (max-width:768px) {
    .recruit {
        padding: 30px 0px 90px;
    }

    .recruit .recruit_list li a {
        height: auto;
    }

    .recruit .recruit_list li a p.more {
        font-size: 1.2rem;
    }

    .recruit table.photo,
    .recruit table.video,
    .recruit table.designer,
    .recruit table.sales {
        border: none;
    }

    .recruit table thead {
        padding-left: 15px;
        padding-right: 15px;
    }

    .recruit table thead tr th {
        font-size: 1.8rem;
    }

    .recruit table thead tr th span {
        font-size: 1rem;
    }

    .recruit table thead tr th span:last-child {
        font-size: 1.2rem;
    }

    .recruit table tbody {
        padding: 50px 15px;
    }

    .recruit table tbody tr th {
        padding-bottom: 0;
    }

    .recruit table tbody tr th,
    .recruit table tbody tr td {
        display: block;
        width: auto;
    }

    .recruit .recruit_back {
        margin-top: 50px;
    }

    .recruit .recruit_list li p.rec_more {
        width: 120px;
        font-size: 1.2rem;
    }
}


/* .join */
.join {
    padding: 100px 30px;
}

.join .join_title_area {
    text-align: right;
    margin-bottom: 100px;
    line-height: 1.4;
}

.join .join_title_area p.join_title {
    color: #f2f1f1;
    font-size: 6rem;
    font-weight: bold;
}

.join .join_entry>div {
    line-height: 50px;
    margin-bottom: 50px;
}

.join .join_entry>div a {
    height: 100px;
    max-width: 1000px;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: auto;
    padding: 25px;
    font-size: 3rem;
    transition: .3s;
}

.join .join_entry>div a:hover {
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
}

.join .join_entry>div a>img {
    height: 30px;
    margin-top: 10px;
}

.join .join_entry .entry_btn a {
    background-color: #000;
    color: #fff;
}

.join .join_entry .mynavi_btn a {
    border: 1px solid #000;
    color: #000;
}

.join .join_entry .mynavi_btn a div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 70%;
}

.join .join_entry .mynavi_btn a div img {
    margin-left: 10px;
    height: 50px;
}

@media screen and (max-width:768px) {
    .join .join_title_area p.join_title {
        font-size: 3.8rem;
    }

    .join .join_entry>div {
        line-height: 40px;
        margin-bottom: 25px;
    }

    .join .join_entry>div a {
        height: 70px;
        padding: 15px;
        font-size: 2.4rem;
        width: 100%;
    }

    .join .join_entry>div a>img {
        height: 20px;
    }

    .join .join_entry .mynavi_btn a div img {
        height: 40px;
    }
}

/*  =================
#person
====================*/
#person {
    padding: 100px 30px;
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#person ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#person ul li {
    position: relative;
    max-width: 340px;
    width: 100%;
    margin: 10px 30px 30px 10px;
    display: inline-block;
}

#person ul li a {
    display: block;
    text-align: center;
    overflow: hidden;
}

#person ul li a img {
    transition: transform .6s ease;
}

#person ul li a:hover img {
    transform: scale(1.1);
}

#person ul li div {
    position: absolute;
    right: -25px;
    bottom: -25px;
    width: 130px;
    height: 130px;
}

#person ul li.photo div {
    background-color: #D1D7DE;
    border-radius: 55% 60% 50% 65% / 65% 50% 60% 55%;
}

#person ul li.video div {
    background-color: #D1DED1;
    border-radius: 50% 65% 55% 60% / 60% 55% 65% 50%;
}

#person ul li.designer div {
    background-color: #ddd0d0;
    border-radius: 65% 55% 60% 50% / 50% 60% 55% 65%;
}

#person ul li.sales div {
    background-color: #DEDED1;
    border-radius: 60% 50% 65% 55% / 55% 65% 50% 60%;
}

#person ul li.factory div {
    background-color: #f5deb3;
    border-radius: 60% 50% 65% 55% / 55% 65% 50% 60%;
}

#person ul li p {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 125px;
    height: 125px;
    padding-top: 19.72px;
    border: 1px solid #fff;
    border-radius: 55% 60% 50% 65% / 65% 50% 60% 55%;
    font-size: 1.4rem;
}

#person ul li.photo p {
    border-radius: 55% 60% 50% 65% / 65% 50% 60% 55%;
}

#person ul li.video p {
    border-radius: 50% 65% 55% 60% / 60% 55% 65% 50%;
}

#person ul li.designer p {
    border-radius: 65% 55% 60% 50% / 50% 60% 55% 65%;
}

#person ul li.sales p {
    border-radius: 60% 50% 65% 55% / 55% 65% 50% 60%;
}

#person ul li.factory p {
    border-radius: 60% 50% 65% 55% / 55% 65% 50% 60%;
}

@media screen and (max-width:767px) {
    #person ul li {
        margin-bottom: 50px;
    }

    #person ul li div {
        position: absolute;
        right: -20px;
        bottom: -40px;
        width: 120px;
        height: 120px;
    }

    #person ul li p {
        position: absolute;
        right: -15px;
        bottom: -35px;
        width: 115px;
        height: 115px;
        padding-top: 26.6px;
        font-size: 1.2rem;
    }
}

/*  =================
 person-interview
====================*/
.under_page.photo .iv_under_title {
    background-color: #D1D7DE;
}

.under_page.video .iv_under_title {
    background-color: #D1DED1;
}

.under_page.designer .iv_under_title {
    background-color: #ddd0d0;
}

.under_page.sales .iv_under_title {
    background-color: #DEDED1;
}

.under_page.factory .iv_under_title {
    background-color: #f5deb3;
}

.iv_under_title .iv_nam {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-weight: bold;
    position: fixed;
    top: 20px;
    right: 10px;
    font-size: 1.2rem;
    z-index: 100;
}

.iv_under_title .iv_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.iv_under_title .iv_wrapper img {
    width: 65%;
}

.iv_under_title .iv_wrapper .iv_title {
    width: 35%;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.iv_under_title .iv_wrapper .iv_title div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.iv_under_title .iv_wrapper .iv_title div p {
    padding: 10px 0;
    font-size: 1.4rem;
    line-height: 1.3;
}

.iv_under_title .iv_wrapper .iv_title div p span.TextRandomAnime {
    display: block;
}

.iv_under_title .iv_wrapper .iv_title div p:first-child {
    border-bottom: 1px solid #000;
    font-size: 2rem;
    font-family: 'Unbounded';
    padding: 10px 30px;
}

.iv_slogan {
    margin: 0 5%;
    text-align: center;
    padding-bottom: 100px;
    border-bottom: 1px solid #D1D7DE;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.iv_slogan p:first-child {
    font-family: tegaki;
    font-size: 3rem;
    margin: 100px auto 30px;
}

.iv_slogan p span {
    display: inline-block;
}

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

    .iv_under_title {
        padding-top: 60px;
    }

    .iv_under_title .interview_nam {
        top: 155px;
        right: 10px;
        font-size: 1rem;
    }

    .iv_under_title .iv_wrapper img {
        width: 100%;
    }

    .iv_under_title .iv_wrapper {
        flex-direction: column-reverse;
        justify-content: center;
    }

    .iv_under_title .iv_wrapper .iv_title {
        width: 100%;
        position: static;
        margin-bottom: 60px;
    }

    .iv_under_title .iv_wrapper .iv_title div {
        position: static;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        display: inline-block;
    }

    .iv_under_title .iv_nam {
        top: 100px;
        right: 10px;
        font-size: 1.2rem;
    }
}

/* my works */
.my_works {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
    border-bottom: 1px solid #D1D7DE;
}

.my_works ul {
    margin: 100px auto auto;

}

.my_works .iv1-slider li {
    padding: 0 10px;
}

.my_works .iv1-slider li img {
    object-fit: cover;
}

.my_works .iv1-slider .slick-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.my_works .iv1-slider .slick-arrow::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #09000d;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform: rotate(45deg);
}

.my_works .iv1-slider .slick-next {
    right: 0;
}

.my_works .iv1-slider .slick-prev {
    left: 0;
}

.my_works .iv1-slider .slick-next::before {
    left: 20px;
}

.my_works .iv1-slider .slick-prev::before {
    border-width: 0 0 3px 3px;
    right: 22px;
}

.my_works .iv1-dots .slick-dots {
    text-align: center;
}

.my_works .iv1-dots .slick-dots li {
    display: inline-block;
}

.my_works .iv1-dots .slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    margin: 6px;
    font-size: 0;
    padding: 0;
    border: 0;
    outline: none;
    cursor: pointer;
    background: #bcbcbc;
    border-radius: 50%;
}

.my_works .iv1-dots .slick-dots .slick-active button {
    background: #000;
}

.my_works .my_works_movie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.my_works .my_works_movie li {
    width: 350px;
    height: auto;
    margin: 10px;
}

.my_works .my_works_movie li iframe {
    width: 100%;

}

.interview_area {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 10px 100px;
    padding-left: 0;
    border-bottom: 1px solid #D1D7DE;
}

.interview_area>div {
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.interview_area .iv_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
}

.interview_area .iv_wrap>div {
    max-width: 550px;
    width: 44%;
}

.interview_area .iv_wrap>div.iv_text {
    max-width: 550px;
    width: 52%;
    padding-bottom: 30px;
}

.interview_area .iv_wrap .iv_text.iv_04>div {
    padding-bottom: 10%;
}

.interview_area .iv_wrap.iv_100 {
    flex-wrap: wrap;
}

.interview_area .iv_wrap.iv_100>div {
    width: 100%;
    max-width: 100%;
}

.interview_area .iv_wrap.iv_column {
    flex-direction: column-reverse;
}

.interview_area .iv_wrap.iv_column>div.iv_text {
    padding-right: 0;
}

.interview_area .iv_wrap.iv_row {
    flex-direction: row-reverse;
}

.interview_area .iv_wrap .iv_text p {
    padding-bottom: 20px;

}

.interview_area .iv_wrap .iv_text .iv_q {
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-bottom: 0;
}

.interview_area .iv_wrap>div img {
    border-radius: 30px;
}

.interview_area .iv_wrap .iv_text .iv_q span {
    font-size: 3rem;
    color: #D1D7DE;
    margin-right: 10px;
}

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

    .interview_area {
        padding-left: 10px;
    }

    .interview_area .iv_wrap {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .interview_area .iv_wrap.iv_row {
        flex-direction: column-reverse;
    }

    .interview_area .iv_wrap>div {
        max-width: 100%;
        width: 100%;
    }

    .interview_area .iv_wrap>div.iv_text {
        max-width: 100%;
        width: 100%;
        padding-bottom: 30px;
    }

    .interview_area .iv_wrap .iv_text.iv_04 {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 30px;
    }

    .interview_area .iv_wrap .iv_text.iv_04>div {
        padding-bottom: 0;
    }

}

/* #iv_movie=========== */
#iv_movie {
    padding: 0 10px 100px;
    background-color: #fff;
    border-bottom: 1px solid #D1D7DE;
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#iv_movie .video_iv {
    width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 100px;
    max-width: 1200px;
}

#iv_movie video.video_main {
    width: 100%;
}

@media screen and (max-width:768px) {
    #iv_movie .video_iv {
        padding: 0;
    }
}

/* iv-others */
#iv_other {
    padding: 0 0 100px;
}

#iv_other .person_btn {
    text-align: center;
    max-width: 150px;
    margin: 100px auto 0;
}

#iv_other .person_btn a {
    text-align: center;
    padding: 20px;
    border: 1px solid #000;
}

#iv_other .person_btn a:hover {
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);

}

#iv_other ul {
    margin-top: 100px;
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;

}

#iv_other ul li {
    position: relative;
    max-width: 350px;
    width: 100%;
    margin: 10px 30px 30px 10px;
    display: inline-block;
}

#iv_other ul li a {
    display: block;
    text-align: center;
    overflow: hidden;
}

#iv_other ul li a img {
    transition: transform .6s ease;
}

#iv_other ul li a:hover img {
    transform: scale(1.1);
}

#iv_other ul li div {
    position: absolute;
    right: -25px;
    bottom: -25px;
    width: 130px;
    height: 130px;
}

#iv_other ul li.photo div {
    background-color: #D1D7DE;
    border-radius: 55% 60% 50% 65% / 65% 50% 60% 55%;
}

#iv_other ul li.video div {
    background-color: #D1DED1;
    border-radius: 50% 65% 55% 60% / 60% 55% 65% 50%;
}

#iv_other ul li.designer div {
    background-color: #ddd0d0;
    border-radius: 65% 55% 60% 50% / 50% 60% 55% 65%;
}

#iv_other ul li.sales div {
    background-color: #DEDED1;
    border-radius: 60% 50% 65% 55% / 55% 65% 50% 60%;
}

#iv_other ul li p {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 125px;
    height: 125px;
    padding-top: 19.72px;
    border: 1px solid #fff;
    border-radius: 55% 60% 50% 65% / 65% 50% 60% 55%;
    font-size: 1.4rem;
}

#iv_other ul li.photo p {
    border-radius: 55% 60% 50% 65% / 65% 50% 60% 55%;
}

#iv_other ul li.video p {
    border-radius: 50% 65% 55% 60% / 60% 55% 65% 50%;
}

#iv_other ul li.designer p {
    border-radius: 65% 55% 60% 50% / 50% 60% 55% 65%;
}

#iv_other ul li.sales p {
    border-radius: 60% 50% 65% 55% / 55% 65% 50% 60%;
}

@media screen and (max-width:767px) {
    #iv_other ul li {
        margin-bottom: 50px;
    }

    #iv_other ul li div {
        position: absolute;
        right: -20px;
        bottom: -40px;
        width: 120px;
        height: 120px;
    }

    #iv_other ul li p {
        position: absolute;
        right: -15px;
        bottom: -35px;
        width: 115px;
        height: 115px;
        padding-top: 26.6px;
        font-size: 1.2rem;
    }
}






/*  =================
#jobs
====================*/
#jobs {
    padding: 100px 0;
}

.jobs_title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

#jobs .jobs_more {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
}

#jobs .jobs_more .jobs_box {
    text-align: left;
    padding: 0 30px 100px 30px;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

#jobs .jobs_more .jobs_box>div {
    max-width: 1200px;
    width: 100%;
}

#jobs .jobs_more .jobs_box:last-child {
    padding-bottom: 0;
}

#jobs .jobs_more .jobs_box p.jobs_list_right,
#jobs .jobs_more .jobs_box p.jobs_list_left {
    display: flex;
    align-items: center;
    color: #ddd0d0;
    margin-bottom: 1em;
    font-weight: bold;
}

#jobs .jobs_more .jobs_box p.jobs_list_right::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    display: block;

}

#jobs .jobs_more .jobs_box p.jobs_list_right:after {
    margin-left: .4em;
    background: #ddd0d0;
}

#jobs .jobs_more .jobs_box p.jobs_list_left::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    display: block;
}

#jobs .jobs_more .jobs_box .jobs_title {
    margin-bottom: .5em;
    text-align: left;
}

#jobs .jobs_more .jobs_box .jobs_btn {
    text-align: left;
    margin-left: auto;
    margin-top: 20px;
    width: 150px;
}

#jobs .jobs_more .jobs_box .jobs_btn a {
    font-size: 1.4rem;
    color: #fff;
    font-weight: bold;
    display: block;
    background-color: #d5b4b4;
    padding: 5px 10px;
}

#jobs .jobs_more .jobs_box .jobs_btn a img {
    position: relative;
    top: -5px;
}

#jobs .jobs_more .jobs_box .jobs_btn a:hover {
    opacity: 0.6;
}

#jobs .jobs_more .jobs_box .jobs_list_left:before {
    margin-left: .4em;
    background: #ddd0d0;
}

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

    .jobs_title {
        font-size: 1.8rem;
    }

    #jobs .jobs_more_box {
        width: 100%;
        padding: 100px 20px;
    }

    #jobs .jobs_more .jobs_box {
        text-align: left;
        padding: 0 20px 100px 20px;
        margin-right: auto;
        display: block;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }

    #jobs .jobs_more .jobs_box>div {
        width: 100%;
    }

    #jobs .jobs_more .jobs_box .jobs_btn {
        width: 120px;
    }

    #jobs .jobs_more .jobs_box .jobs_btn a {
        font-size: 1.2rem;
    }
}

/* #jobs_more */
#jobs_more #more_01 {
    width: 100%;
    height: 100dvh;
    height: 100vh;
    background-image: url(../img/jobs/more_1.jpg);
    background-position: 50% 50%;
    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: lighten;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#jobs_more #more_01 .jobs_title .delay-time02 span {
    animation-delay: 0.2s;
}

#jobs_more #more_01>div {
    max-width: 1100px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%)translateX(-50%);
    padding: 50px;
}

#jobs_more #more_01>div div.jobs_title.pc {
    display: block;
}

#jobs_more #more_01>div div.jobs_title.sp {
    display: none;
}

#jobs_more #more_01>div div.jobs_title {
    text-align: left;
    margin-bottom: 2em;
}

#jobs_more #more_01>div div.jobs_title .line {
    width: 100%;
}

#jobs_more #more_01>div>p:last-child {
    margin-bottom: 0;
    text-align: right;
    font-weight: normal;
    margin-top: 2em;
}

#jobs_more #more_01>div>p:last-child span {
    font-size: 1.4rem;
    margin-right: 20px;
}

#jobs_more .title p span.title_line {
    background: linear-gradient(transparent 60%, rgb(221, 208, 208, 0.5) 60%);
    padding: 0 5px;
}

#jobs_more #more_02 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

#jobs_more #more_02 .more_2_box {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#jobs_more #more_02 .more_2_box .more_2_img {
    max-width: 300px;
    width: 50%;
}

#jobs_more #more_02 .more_2_box .more_2_text {
    width: 60%;
    padding: 15px;
}

#jobs_more #more_02 .more_2_box .more_2_text p:first-child {
    font-weight: bold;
    margin-bottom: 8px;
}

#jobs_more #more_02 .more_2_box .more_2_text p span {
    color: #ddd0d0;
    font-size: 3rem;
    margin-right: 5px;
}

#jobs_more #more_03 {
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 0 10px;
}

#jobs_more #more_03 .more_3_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

#jobs_more #more_03 .more_3_box div:nth-child(1) {
    background-image: url(../img/jobs/more_3_1.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(2) {
    background-image: url(../img/jobs/more_3_2.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(3) {
    background-image: url(../img/jobs/more_3_3.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(4) {
    background-image: url(../img/jobs/more_3_4.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(5) {
    background-image: url(../img/jobs/more_3_5.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(6) {
    background-image: url(../img/jobs/more_3_6.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(7) {
    background-image: url(../img/jobs/more_3_7.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(8) {
    background-image: url(../img/jobs/more_3_8.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(9) {
    background-image: url(../img/jobs/more_3_9.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(10) {
    background-image: url(../img/jobs/more_3_10.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(11) {
    background-image: url(../img/jobs/more_3_11.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(12) {
    background-image: url(../img/jobs/more_3_12.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(13) {
    background-image: url(../img/jobs/more_3_13.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(14) {
    background-image: url(../img/jobs/more_3_14.jpg);
}

#jobs_more #more_03 .more_3_box div:nth-child(15) {
    background-image: url(../img/jobs/more_3_15.jpg);
}

#jobs_more #more_03 .more_3_box div {
    width: 200px;
    height: 200px;
    border-radius: 250px;
    background-size: cover;
    background-position: 50% 50%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    background-blend-mode: lighten;
    margin: 15px;
}

#jobs_more #more_03 .more_3_box div p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-weight: bold;
    text-align: center;
    width: 100%;
}


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

    .under_page.job_more {
        margin-top: 0;
    }

    #jobs_more #more_01 {
        height: 1024px;
    }

    #jobs_more #more_01>div {
        padding: 90px 30px 0;
    }

    #jobs_more #more_01>div>p:last-child span {
        font-size: 1.2rem;
        margin-right: 10px;
    }

    #jobs_more #more_02 .more_2_box {
        position: static;
        margin-top: 50px;
        margin-bottom: 0;
    }

    #jobs_more #more_02 .more_2_box .more_2_img {
        width: 100%;
        max-width: 768px;
    }

    #jobs_more #more_02 .more_2_box .more_2_text {
        width: 100%;
        max-width: 768px;
        padding: 10px;
    }

    #jobs_more #more_03 .more_3_box div {
        width: 145px;
        height: 145px;
        border-radius: 250px;
        background-size: cover;
        background-position: 50% 50%;
        position: relative;
        background-color: rgba(255, 255, 255, 0.7);
        background-blend-mode: lighten;
        margin: 15px;
    }
}

@media screen and (max-width:1003px) {
    #jobs_more #more_01>div div.jobs_title.pc {
        display: none;
    }

    #jobs_more #more_01>div div.jobs_title.sp {
        display: block;
    }
}

/* mission&Vision */
.mv {
    padding: 100px 0;

}

.mv>div {
    max-width: 1200px;
    width: 100%;
    padding: 50px 20px 0 20px;
    margin-left: auto;
    margin-right: auto;
}

.mv>div .mv_box {
    width: 80%;
    max-width: 600px;
    padding: 60px 25px;
    margin: 10px 0;
    text-align: center;
    border-radius: 180px;
}

.mv>div .mv_box:nth-child(even) {
    margin-left: auto;
}

.mv>div .mv_box p:first-child {
    font-weight: bold;
    margin-bottom: 1em;
}

.mv>div .mv_box.mv_box_clr1 {
    background-color: rgb(221, 208, 208, 0.4);
}

.mv>div .mv_box.mv_box_clr2 {
    background-color: rgb(221, 208, 208, 0.3);
}

.mv>div .mv_box.mv_box_clr3 {
    background-color: rgb(221, 208, 208, 0.2);
}

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

    .mv .mv_title {
        font-size: 2.4rem;
    }

    .mv>div .mv_box {
        width: 100%;
        margin: 0;
        text-align: center;
        border-radius: 0;
        max-width: 100%;

    }

    .mv>div {
        padding: 50px 0 0 0;
    }

}


/* numbers */
#numbers {
    padding: 100px 0;
    background-color: #f2f1f1;
}

#numbers>div {
    padding: 0 30px;
    margin-top: 0;
}

#numbers .num_grid_area {
    padding: 50px 20px 0 20px;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

#numbers .num_grid_area .num_grid_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#numbers .num_grid_area .num_grid_inner .num_box {
    background-color: #fff;
    width: 100%;
    padding: 50px 10px;
    border: 4px solid #f2f1f1;
    font-weight: bold;
}

#numbers .num_grid_area .num_grid_inner .num_box.num_box40 {
    width: 40%;
}

#numbers .num_grid_area .num_grid_inner .num_box.num_box50 {
    width: 50%;
}

#numbers .num_grid_area .num_grid_inner .num_box.num_box60 {
    width: 60%;
}

#numbers .num_grid_area .num_grid_inner .num_box .num_box_text {
    font-size: 2rem;
}

#numbers .num_grid_area .num_grid_inner .num_box .num_box_in .num_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#numbers .num_grid_area .num_grid_inner .num_box .num_box_in .num_wrapper div {
    width: 50%;
    max-width: 170px;
    margin-top: 40px;
}

#numbers .num_grid_area .num_grid_inner .num_box .num_box_in .num_wrapper div .num_box_num span.num-size {
    font-size: 4rem;
}

#numbers .num_grid_area .num_grid_inner .num_box .num_box_in .num_wrapper div .num_box_num span {
    font-size: 1.6rem;
}

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

    #numbers .num_grid_area .num_grid_inner .num_box.num_box30,
    #numbers .num_grid_area .num_grid_inner .num_box.num_box50,
    #numbers .num_grid_area .num_grid_inner .num_box.num_box70 {
        width: 100%;
    }
}

/* life */
#life {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}


#life table {
    padding: 50px 20px 0 20px;
    width: 100%;
}

#life table tr {
    display: block;
    margin-bottom: 30px;
    border: 1px solid #ddd0d0;

}

#life table tr th {
    display: block;
    padding: 20px;
    background-color: #ddd0d0;
}

#life table tr td {
    display: block;
    padding: 30px 20px;

}

/* base */
#base {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

#base .base_inner {
    padding: 50px 20px 0 20px;
}

#base .base_inner>img {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#base .base_inner>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 100px;
}

#base .base_inner>div .base_box {
    padding: 0 20px;
    max-width: 520px;
    width: 50%;
    margin: 25px 0;
}

#base .base_inner>div .base_box p {
    padding: 10px;
}

#base .base_inner>div .base_box p.base_box_title {
    border-bottom: 1px solid #000;
    font-weight: bold;
}

@media screen and (max-width:768px) {
    #base .base_inner>img {
        width: 100%;
    }

    #base .base_inner>div {
        margin-top: 50px;
    }

    #base .base_inner>div .base_box {
        width: 100%;

    }
}

/* brand */
#brand {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

#brand .brand_inner {
    padding: 50px 20px 0 20px;
}

#brand .brand_inner .brand_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

#brand .brand_inner .brand_box:last-child {
    margin-bottom: 0;
}

#brand .brand_inner .brand_box div {
    width: 50%;
}

#brand .brand_inner .brand_box div.brand_box_text {
    padding: 10px;
}

#brand .brand_inner .brand_box div.brand_box_text p:first-child {
    font-weight: bold;
    margin-bottom: 10px;
}

@media screen and (max-width:768px) {
    #brand .brand_inner .brand_box div {
        width: 100%;
    }

    #brand .brand_inner .brand_box div img {
        width: 100%;
    }
}











/* エフェクト========== */
/* ローディングフェード */
.loading_fade {
    animation: fadeIn 3s forwards;
}

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

    100% {
        opacity: 1;
    }
}

/* はねる */
.bound {
    animation: key .3s ease infinite alternate;
}

@keyframes key {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-10px);
    }
}

/* 1文字ずつ表示 */
.eachTextAnime span {
    opacity: 0;
}

.eachTextAnime.appeartext span {
    animation: text_anime_on 1s ease-out forwards;
}

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

    100% {
        opacity: 1;
    }
}

/* フェード*/
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.fadeInTrigger {
    opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-150px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(150px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* アニメーションスタートの遅延時間*/
.delay-time02 {
    animation-delay: 0.2s;
}

.delay-time04 {
    animation-delay: 0.4s;
}

.delay-time1 {
    animation-delay: 1s;
}

.delay-time2 {
    animation-delay: 2s;
}

.delay-time4 {
    animation-delay: 4s;
}

.delay-time6 {
    animation-delay: 6s;
}



/* バラバラ表示 */
.TextRandomAnime span {
    opacity: 0;
}

.TextRandomAnime.appearRandomtext span {
    animation: text_randomanime_on .5s ease-out forwards;
}

/*アニメーションで透過を0から1に変化させる*/
@keyframes text_randomanime_on {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
    animation-delay: .5s;
    /* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
}

.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
    animation-delay: .15s;
    /* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
}


/* くるくる表示 */
.rollAnime.roll span {
    transition-property: opacity, transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77, 0, .175, 1);
    transition-timing-function: cubic-bezier(.77, 0, .175, 1);
    display: inline-block;
}

/* 下から出現 */
span.smoothText {
    overflow: hidden;
    display: block;
}

span.smoothTextTrigger {
    transition: .8s ease-in-out;
    transform: translate3d(0, 100%, 0) skewY(12deg);
    transform-origin: left;
    display: block;
}

span.smoothTextTrigger.smoothTextAppear {
    transform: translate3d(0, 0, 0) skewY(0);
}

/* ふわふわ */
.fuwafuwa-1 {
    animation: fuwafuwa 4s infinite ease-in-out .9s alternate;
    display: inline-block;
    transition: 1.6s ease-in-out;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0) rotate(-7deg);
    }

    50% {
        transform: translate(0, -7px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(7deg);
    }
}

.fuwafuwa-2 {
    animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
    display: inline-block;
    transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0) rotate(-7deg);
    }

    50% {
        transform: translate(0, -7px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(7deg);
    }
}

.fuwafuwa-3 {
    animation: fuwafuwa 2s infinite ease-in-out .7s alternate;
    display: inline-block;
    transition: 1.4s ease-in-out;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0) rotate(-7deg);
    }

    50% {
        transform: translate(0, -7px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(7deg);
    }
}