html {
    scroll-behavior: smooth;
}

body {
    background-color: white;
    margin: auto;
    padding: 0;
    overflow-x: hidden;
}

.inner {
    width: clamp(690px,95vw,1100px);
    margin: auto;
}
@media (max-width: 768px) {
    .inner {
        width: 90%;
        font-size: clamp(10px,1.7vw,12px);
    }
    
}


/*------ヘッダー-----*/
header {
    /*- background-color: black; -*/
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    text-align: center;
    justify-content: center;
    z-index: 10;
    background-color: white;
}

.navwrap {
    display: flex;
    width: 100%;
}
.header-logo {
    padding: 0;
    margin: 3px 5px;
    width: 270px;
    display: flex;
    scale: 0.8;
    position: left;
}

.nav {
    position: relative;
    width: 660px;
    margin-left: clamp(50px,8vw,275px);
}

.header-navlist {
    list-style: none;
    display: flex;
    font-weight: bold;
    padding-left: clamp(5px,4.3vw,150px);
}

.header-navitem > a {
    text-decoration: none;
    color: gray;
    padding: 10px 8px;
    margin: auto;
    transition: all 0.3s ease-in-out;
    font-size: clamp(14px,1.8vw,16px)
    ;
}

.header-navitem > a:hover {
    background-color: gray;
    color: white;
}


.burger{
    display: none;
    cursor: pointer;
}

.burger div{
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px;
    transition: all 0.5s ease-in-out;
}

.nav-active{
    transform: translateX(0%) !important;
}

@media screen and (max-width: 840px) {
    .header-logo {
        width: 200px;
        margin: 0 0 0 1% ;
    }  
}

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

    header {
        /*- background-color: black; -*/
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        width: 100vw;
        text-align: center;
        justify-content: center;
        z-index: 10;
        background-color: white;
    }
    

    .header-logo {
        justify-content: start;
        width: 150px;
            & svg {
                scale: 0.6;
                position: relative;
                left: -60px;
            }
            & a {
                width: 160px;
            }
    }
    .nav {
        position: relative;
        width: 660px;
        margin-left: 8%;
    }

    .header-navlist{
        position: absolute;
        right: 0;
        height: 480px;
        top: 47.66px; /* ロゴの高さに合わせておく*/
        background-color: #bfbfbf;
        color: #333;
        flex-direction: column;
        text-align: center;
        width: 100%;
        padding-left: 0;
        transform: translateX(200%);
    }

    .header-navlist li {
        opacity: 0;
        width: 100%;
        height: 16.6%;
        display: inline;
        margin: 0s;
        padding: auto;
        
    }

    .header-navitem > a {
        display: block;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        transition: all .3s;
        margin: auto;
        padding: 8% 0;
    }
    
    
    .burger{
        display: block;
        position: absolute;
        right: 50px;
        top: 5px;
    }

    @keyframes headernavlistFade {
        0% {
            opacity: 0;
            transform: translate(0);
        }
        100% { opacity: 1; }
        }
        
    .toggle .line1 {
        transform: rotate(45deg) translate(5px,6px);
        }
    .toggle .line2 {
        opacity: 0;;
       }
    .toggle .line3 {
        transform: rotate(-405deg) translate(5px,-6px);
       }
        
}


/*-----TOP-HERO-----*/
#TOP-HERO {
    background-color: black;
    display: flex;
    height: 100vh;
    width: 100vw;
    text-align: center;
    justify-content: center;
}

.slide-pos {
    display: flex;
}

.bg-taper {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0,60% 0,30% 100%,0 100%);
    z-index: 2;
}

.top-slide {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
	height: 100vh;
    z-index: 1;
    object-fit: cover;
}

.slide-img{
	position: absolute;
    width: 70%;
    height: 100%;
	opacity: 0;
    overflow: hidden;
	animation: change-img-anim 18s infinite;
    object-fit: cover;
    bottom: 0;
    right: 0;
}

.slide-img:nth-of-type(1) {
	animation: change-img-anim-first 18s infinite;
	  animation-delay: 0s;
}

.slide-img:nth-of-type(2) {
    
	  animation-delay: 3s;
}

.slide-img:nth-of-type(3) {
	  animation-delay: 6s;
}

.slide-img:nth-of-type(4) {
    animation-delay: 9s;
}

.slide-img:nth-of-type(5) {
    animation-delay: 12s;
}

.slide-img:nth-of-type(6) {
    animation-delay: 15s;
}


    @keyframes change-img-anim-first {
        0%{ opacity: 1;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
    }

    @keyframes change-img-anim {
    0%{ opacity: 0;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
    }

.hero-text {
    display: block;
    position: absolute;
    top: 90px;
    left: 30px;
    z-index: 3;
}

.hero-text-b {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: clamp(30px,5vw,100px);
    background-color: #222;
    padding: 0 10px;
}

.hero-text-n {
    color: white;
    font-size: clamp(9px,1.5vw,20px);
    background-color: #222;
    position: absolute;
    padding: 0 10px;
}

.hero-text-rabel {
    color: #FBFBFB;
    font-size: clamp(9px,1.6vw,20px);
    font-weight: bold;
    z-index: 4;
    position: absolute;
    left: 120px;
    bottom: 10%;
    padding: 0;
}

.hero-rabel-ub {
    color: #222;
    font-size: 20px;
    text-align: center;
    position: absolute;
    bottom: 10%;
    left: -20px;
    width: clamp(270px,48vw,500px);
    height: 20px;
    background-color: #5B9BD5;
    transform: skewX(-30deg);
    opacity: 0.7;
    z-index: 3;
}


@media screen and (max-width: 768px) {
    #TOP-HERO {
        background-color: black;
        display: flex;
        height: 300px;
        width: 100vw;
        text-align: center;
        justify-content: center;
    }
    .bg-taper {
        width: 100vw;
        height: 300px;
        background-color: black;


        position: absolute;
        top: 0;
        left: 0;
        clip-path: polygon(0 0,60% 0,30% 100%,0 100%);
        z-index: 2;
    }
    
    .top-slide {
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        width: 100%;
        height: 300px;
        z-index: 1;
        object-fit: cover;
    }
    .hero-text {
        display: block;
        position: absolute;
        top: 70px;
        left: 30px;
        z-index: 3;
    }
    
    .hero-text-b {
        font-family: "Tangerine", cursive;
        font-weight: 400;
        font-style: normal;
        color: white;
        font-size: 30px;
        background-color: #222;
        padding: 0 10px;
    }
    
    .hero-text-n {
        color: white;
        font-size: 9px;
        background-color: #222;
        position: absolute;
        padding: 0 10px;
    }
    
    .hero-text-rabel {
        color: #FBFBFB;
        font-size: 12px;
        font-weight: bold;
        z-index: 4;
        position: absolute;
        left: 30px;
        top: 250px;
        padding: 0;
        height: 50px;
    }
    
    .hero-rabel-ub {
        color: #222;
        font-size: 20px;
        text-align: center;
        position: absolute;
        top: 275px;
        left: -20px;
        width: 270px;
        height: 10px;
        background-color: #5B9BD5;
        transform: skewX(-30deg);
        opacity: 0.7;
        z-index: 3;
    }
    


}


/*----- TOP-ABOUT -----*/
#TOP-ABOUT {
    width: 100vw;
    padding: 100px 0 200px;
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: white;
}

.about-text {
    color: white;
    text-decoration: underline;
}

.about-video {
    display: flex;
    width: 100%;
    justify-content: center;
}

.about-video >video {
    width: 480px;
    height: auto;
    margin: 10px;
}

.slide-set {
    position: relative;
}

.slide-waku {
    position: absolute;
    top: 0;
    left: 0;
    width: 710px;
    height: auto;
    z-index: 4;
    animation: rotation 5s linear infinite;

}

.slide-in {
    width: 700px;
    height: 700px;
    top: 0;
    left: 0;
    z-index: 3;
}

.about-btn {
    display: flex;
    justify-content: right;
}

.about-btn-p > a {
    text-decoration: none;
    margin: 0;
    padding: 10px 30px;
    border: white solid 3px;
    border-radius: 50px;
    background-color: #5B9BD5;
    color: white;
    transition: all 0.5s ease;
    &:hover {
        background-color: orange;
    }
}

/*----- TOP-PRODUCT -----*/
#TOP-PRODUCT {
    padding-top: 56px;
    padding-bottom: 2%;
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: white;
    width: 100vw;
}

.prd-title {
    color: #111;
    font-size: clamp(12px,4vw,20px);
    font-family: "Bebas Neue", sans-serif;
    font-weight: bold;
    font-style: normal;
    display: block;
    margin: 0;
    letter-spacing: 0;
    text-align: center;
}
.prd-title::before {
    content: 'PRODUCTION';
    color: #111;
    font-size: clamp(40px,10vw,60px);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
    margin: 0;
    letter-spacing: 0;
    text-decoration: underline 3px ;
}
.grid{
	display: flex;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	text-decoration: none;
    width: 100%;
}

.grid-col-3 > .grid-item{
	width: 33%;
}

.grid-col-2 > .grid-item{
	width: 50%;
}

.grid-item{
	background-color: #ffffff;
	font-weight: bold;
	border: 2px solid #bfbfbf;
	border-radius: 5%;
	margin: 2.5px 2.5px;
	transition: 0.5s;
	overflow: hidden;
	position: relative;
	height: 300px;
}

.grid-item a{
	text-decoration: none;
	color: #bFbFbF;
	justify-content: start;
}
.grid-item p{
	align-items: center;
	bottom: 0;
	color: #ff0000;
    text-shadow: #EEE 1px 1px 3px;
	background-color: #808080bf;
	display: flex;
	justify-content: center;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 80%;
    font-size: clamp(10px,1.6vw,16px);
	z-index: 3;
}

.grid-item img{
	display: block;
	transition: all 0.5s;
	overflow: hidden;
    object-fit: cover;
    object-position: top left;
    height: 100%;
    width: 100%;
}

.grid-item:hover img{
	transform: scale(1.1);
    filter: grayscale(0);
}

@media screen and (max-width: 768px) {
    #TOP-PRODUCT {
        padding-top: 36px;
    }    
    .grid{
        display: flex;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        list-style-type: none;
        text-decoration: none;
        width: 100%;
    }
    
    .grid-col-3 > .grid-item{
        width: 33%;
    }
    
    .grid-item{
        height: 170px;
    }
    
    .grid-item a{
        text-decoration: none;
        color: #bFbFbF;
        justify-content: start;
    }
    .grid-item img{
        display: block;
        transition: all 0.5s;
        overflow: hidden;
        object-fit: cover;
        object-position: top left;
        height: 100%;
        width: 100%;
    }
    
    .grid-item:hover img{
        transform: scale(1.1);
        filter: grayscale(0);
    }
}
@media screen and (max-width: 426px) {
    .grid{
        display: block;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        list-style-type: none;
        text-decoration: none;
        width: 100%;
    }
    
    .grid-col-3 > .grid-item{
        width: 100%;
    }
    
    .grid-item{
        height: 250px;
    }
    .grid-item p{
        font-size: 14px;
    }
    
}


/*----- TOP-NEWS -----*/
#TOP-NEWS {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    color: #222;
    padding: 56px 0 50px;
    background-color: white;
}

.news-title::before {
    content: 'INFORMATION';
    text-align: center;
    font-size: clamp(40px,10vw,60px);
    text-decoration: underline 3px ;
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.news-title {
    text-align: center;
    font-size: clamp(12px,4vw,20px);
    font-style: normal;
    padding: 0;
    margin: 30px 0 0;

}

.news-text {
    font-weight: normal;
        & a {
            color: #FBFBFB;
            mix-blend-mode: difference;
            font-weight: 100;
        }
}

.news-li {
    padding: 0;
        & li {
            list-style: none;
            width: 100%;
        }
}

.news-top {
    border-block: gray dashed 1px;
}
.news-mid {
    border-bottom: gray dashed 1px;
}
.news-bot {
    border-bottom: gray dashed 1px;
}

.news-btn {
    text-align: center;
    margin: 3%;
}

.news-btn > a {
    text-decoration: none;
    margin: 0;
    padding: 10px 30px;
    border: white solid 3px;
    border-radius: 50px;
    background-color: #5B9BD5;
    color: white;
    transition: all 0.5s ease;
    &:hover {
        background-color: #ffb049;
    }
}

@media screen and (max-width: 768px) {
    #TOP-NEWS {
        padding: 36px 0 50px;
    }

    .news-btn {
        text-align: center;
        margin: 10%;
    }
    
}

/*----- TOP-COMPANY -----*/
#CoInfo {
    padding-top: 56px;
    padding-bottom: 2%;
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: white;
    width: 100vw;
}

.com-title {
    text-align: center;
    font-size: clamp(12px,4vw,20px);
    font-family: "Bebas Neue", sans-serif;
    font-weight: bold;
    font-style: normal;
    padding: 0;
    margin: 30px 0 0;
}

.com-title::before {
    content: 'COMPANY';
    text-align: center;
    font-size: clamp(40px,10vw,60px);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline 3px ;
    display: block;
}

.common__table {
	width: 100%;
	border-collapse: collapse;
}

.common__table th,
.common__table td {
	font-weight: normal;
	text-align: left;
	padding: 1em 1.5em;
	border: 1px solid #999999;
}

.common__table th {
	width: 25%;
	background: #e5e5e5;
}

.CoI-map{
	display: flex;
	justify-content: center;
	list-style: none;
    padding: 0;

}

.CoI-map li{
	width: 45%;
	margin: 0 10px;
	text-align: center;
}

.CoI-map img{
	border: 1px #bfbfbf solid;
	width: 100%;
}

@media screen and (max-width: 768px) {
    #CoInfo {
        padding-top: 36px;
    }
}

@media screen and (max-width: 426px) {
    .common__table th,
    .common__table td {
        font-weight: normal;
        text-align: left;
        padding: 1em .3em;
        border: 1px solid #999999;
        font-size: clamp(8px,1.7vw,12px);
    }
    
}

/*----- TOP-RECRUIT -----*/
#TOP-RECRUIT {
    width: 100vw;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: white;
}

.rec-btn {
    display: flex;
    justify-content: center;
    margin: 0;
        & a {
            &:hover {
                filter: grayscale(0);
           }
        }
}

.recruit-btn {
    width: 50%;
    height: 400px;
    margin: 50px 0;
    background-image: url(../images/img_interview_26a_pc.jpg);
    background-size: cover;
    background-position: center;
    border-block: 5px solid #EEE;
    border-left: 5px solid #EEE;
    border-top-left-radius: 5%;
    filter: blur(.5px);
    transition: all 0.5s ease-in-out;
    position: relative;
}

.btn-text1 {
    color: #111;
    text-decoration: underline;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    position: absolute;
    left: 5%;
    bottom: 0;
    margin: 0;
    width: 300px;
    color: #FFF;
    text-shadow: #222 1px 1px 3px;
    transition: all 0.5s ease-in-out;
}

.contact-btn {
    width: 50%;
    height: 400px;
    margin: 50px 0;
    background-image: url(../images/contact_bg.jpg);
    background-size: cover;
    background-position: center;
    border-block: 5px solid #EEE;
    border-right: 5px solid #EEE;
    border-bottom-right-radius: 5%;
    filter: blur(.5px);
    transition: all 0.5s ease-in-out;
    position: relative;
}

.btn-text2 {
    color: #111;
    text-decoration: underline;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    position: absolute;
    right: 5%;
    top: 0;
    width: 300px;
    color: black;
    text-align: end;
    margin: 0;
}

@media (max-width: 768px) {
    #TOP-RECRUIT {
        width: 100vw;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        background-color: white;
    }
    
    .rec-btn {
        display: flex;
        justify-content: center;
        margin: 0;
            & a {
                &:hover {
                    filter: grayscale(0);
               }
            }
    }
    
    .recruit-btn {
        width: 50%;
        height: 200px;
        margin: 50px 0;
        background-image: url(../images/img_interview_26a_pc.jpg);
        background-size: cover;
        background-position: center;
        border-block: 5px solid #EEE;
        border-left: 5px solid #EEE;
        border-top-left-radius: 5%;
        filter: none;
        transition: all 0.5s ease-in-out;
        position: relative;
    }
    
    .btn-text1 {
        color: #111;
        text-decoration: underline;
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        position: absolute;
        left: 5%;
        bottom: 0;
        margin: 0;
        width: 300px;
        color: #FFF;
        text-shadow: #222 1px 1px 3px;
        transition: all 0.5s ease-in-out;
    }
    
    .contact-btn {
        height: 200px;
        margin: 50px 0;
        filter: none;
    }
    
    .btn-text2 {
        color: #111;
        text-decoration: underline;
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        position: absolute;
        right: 5%;
        top: 0;
        width: 300px;
        color: black;
        text-align: end;
        margin: 0;
    }
    
}


/*----- footer -----*/
footer {
    width: 100%;
    color: #222;
    background-color: white;
    justify-content: center;
    text-align: center;

      & div {
          width: 1100px;
          display: flex;
          justify-content: center;
          text-align: center;
          margin: auto;
          padding: 10px 0 10px;
      }
  }
  
  .footer-logo {
    width: 50%;
    margin: auto;
    padding-left: 230px;
      & a {
        text-decoration: none;
        justify-content: center;
      & img {
        height: 80px;
        width: auto;
        object-fit: cover;
        padding-left: 10px;
	transition: all .3s ease-in-out;
  &:hover {
    opacity: 0.5;
    scale: 1.05;
  }
        }
      & svg {
        margin: 0 10px;
        }
    }
  }
  
  .footer-addres {
    display: block;
    width: 50%;
    text-align: left;
    margin: auto;
    padding: 0;
    font-size: clamp(9.5px,1.7vw,12px);
    & p {
            margin: 0;
            padding: 0;
        }
        & a {
            text-decoration: none;
            color: #222;
        }
  }
  
  @media (max-width: 1100px) {
    footer {
        & div {
            width: 90%;
        }
    }
    .footer-logo {
      padding-left: 0;
      }
  }
  @media (max-width: 768px) {
    footer {
      font-size: 12px;
    }
    .footer-logo {
        width: 50%;
        margin: auto;
        padding-left: 0;
        text-align: center;
          & a {
            text-decoration: none;
            justify-content: center;
          & img {
            height: clmp(60px,13vw,80px);
            width: auto;
            object-fit: cover;
            padding-left: 0;

            }
          & svg {
            margin: 0;
            scale: 0.65;
            }
        }
      }
    
  }


/*----- RECRUITE_PAGE ------*/
#RECRUITE_PAGE {
    width: 100%;
    padding: 60px 0 80px; 
    display: flex;
    justify-content: center;
    color: #FBFBFB;
    background-color: #111;
}

.page__title {
    font-size: clamp(15px,5vw,50px);
    font-weight: 500;
    border-bottom: 3px solid ;
    border-image: linear-gradient(to right, red, #222) 1;
    margin: 20px 0;
    color: #FBFBFB;
       & span {
        font-size: clamp(12px,3vw,20px);
    }
}

.rec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(8.5px,1.7vw,12px);

        & a {
            color: #FBFBFB;
        }
}
    
.rec-table th,
.rec-table td {
    font-weight: normal;
    text-align: left;
    padding: 1em 1.5em;
    border: 1px solid #FBFBFB;
}
    
.rec-table th {
    width: 25%;
    background: #222;
}

@media (max-width: 768px) {
    #RECRUITE_PAGE {
        padding: 36px 0 80px; 
    }

    .rec-table th,
    .rec-table td {
    padding: 1em .5em;
}
}
.rec-con {
    display:flex;
    margin: 10px 0;
    margin-left: 0;
    & input {
        height: 30px;
        width: 60%;
    }
    & textarea {
        resize: none;
        width: 60%;
        height: 60px;
    }
}

.hissu {
    background-color: red;
    width: 30px;
    height: 25px;
    font-size: clamp(8.5px,1.7vw,10px);
    padding: 4px;
    margin: auto 0;
}
.error_msg {
    font: #FF5555;
}
.rec-label {
    font-size: 12px;
    font-weight: bold;
    margin: 5px 20px 5px 5px;
    width: clamp(127px);
}

.col-3 {
    font-weight: bold;
    margin-right: 10px;
}

.row {
    display: flex;
    margin: 10px;
}

.button {
    margin-right: 50px;
    margin-left: 10px;
    text-decoration: none;
    color: black;
    background-color: #FBFBFB;
    padding: 4px 17px;
    
}

/*------- PRODUCT_PAGE--------*/
#PRODUCTION_PAGE {
    width: 100%;
    padding: 60px 0 80px; 
    display: flex;
    justify-content: center;
    color: #FBFBFB;
    background-color: #111;
}

.prod__title {
    font-size: clamp(15px,5vw,50px);
    font-weight: 500;
    border-bottom: 3px solid ;
    border-image: linear-gradient(to right, red, #222) 1;
    margin: 20px 0;
    color: #FBFBFB;
}

.prod-name {
    font-weight: bold;
    font-size: 30px;
    text-decoration: underline;
}

.prod-fomat {
    width: 100%;
    font-size: 18px;
        & img {
            width: 100%;
        }
        & h3 {
            font-size: clamp(15px,3vw,25px);
            color: #FBFBFB;
            font-weight: 100;
            border-bottom: 3px solid #FBFBFB;
        }
        & video {
            width: 100%;
        }
        & p {
            font-size: clamp(12px,2vw,20px);
        }
        & a {
            color: #FBFBFB;
        }
}

.athlete-link {
    & a {
    filter: grayscale(0);
    transition: all .3s ease-in-out;
        &:hover {
            filter: grayscale(1);
        }
    }
}

.prod-center {
    text-align: center;
}

/*---- CAE -----*/
#PRODUCTION_PAGE_CAE {
    width: 100%;
    padding: 60px 0 0; 
    display: flex;
    justify-content: center;
    color: #FBFBFB;
    background-color: #111;
}


.prod_banner {
    width: 100%;
    object-fit: cover;
}

.under_red {
    border-bottom: 3px solid ;
    border-image: linear-gradient(to right, red, #222) 1;
}

#Prod_CAE_merit {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #111;
    background-color: #FBFBFB;
}

.grid-CAE {
    display: flex;
    width: 100%;
    text-align: center;
}


.grid-col-2 {
    display: flex;
    justify-content: space-between;
}

.CAE_process {
    display: flex;
}

.process_text {
    margin-left: 10px;
    width: 92%;
}

.CAE_text-img {
    display: flex;
    width:auto;
    height: auto;
    position: relative;
}

.CAE_text {
    width: 55%;
    height: auto;
    margin: 0 10px 0 20px;
        & img {
            display: none;
        }
        & a {
            color: #FBFBFB;
        }
}

.CAE_img {
    width: 45%;
    height: auto;
    object-fit: cover;
    margin: 10px;
}

.CAE_btn {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: #FF5555;
    color: #FAFAFA;
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(14px,3.5vw,20px);
    margin: 10px 0;
    padding: 10px 0;
    transition: all 0.5s ease;
      &:hover {
        background-color: #FF9999;
      }
}
  
.CAE_proces1 {
    width: 100%;
    display: block;
        & h2 {
            background: linear-gradient(to right, #FF5555,#FF5555, #111);
            margin: 0;
        }
}

.liner_1 {
    width: 8% ;
    background: linear-gradient(to bottom, #FF5555, #FF9999);
    transform: translateY(-1px);
    position: relative;
}
.liner_end1 {
    width: 8%;
    height: 30px;
    background-color: #FF9999;
    display: inline-block;
    position: left;
    transform: translateX(0px) translateY(-1.9px);
    clip-path: polygon(0 0,100% 0,50% 100%,50% 100%);

}

.CAE_proces2 {
    width: 100%;
    display: block;
        & h2 {
            background: linear-gradient(to right, #FF9999,#FF9999, #111);
            margin: 0;
        }
}

.liner_2 {
    width: 8%;
    background: linear-gradient(to bottom, #FF9999, #FFCCCC);
    transform: translateY(-1px);
    position: relative;
}
.liner_end2 {
    width: 8%;
    height: 30px;
    background-color: #FFCCCC;
    display: inline-block;
    position: left;
    transform: translateX(0px) translateY(-1.9px);
    clip-path: polygon(0 0,100% 0,50% 100%,50% 100%);

}

.CAE_proces3 {
    width: 100%;
    display: block;
        & h2 {
            background: none;
            margin: 0;
        }
}


.grid-item-CAE {
    margin: 10px;
    text-align: center;
        & img {
            height: 150px;
            margin: auto;
        }
        & p {
            text-align: start;
        }
}

@media (max-width: 768px) {
    #PRODUCTION_PAGE {
        padding: 45px 0 40px; 
    }
    .grid-CAE {
        display: block;
    }
    
    .grid-item-CAE {
        font-size: clamp(9px,1.7vw,12px);    }

    .CAE_text {
        width: 100%;
        height: 100%;
        margin: 0 5px 0 10px;
            & img {
                display: block;
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: left top;
            }
    }

    .CAE_img {
        display: none;
    }


    .grid-item-CAE {
            & img {
                height: 115px;
                margin: auto;
            }
            & p {
                text-align: start;
            }
    }
   
}

@media (max-width: 426px) {
    .liner_end1 {
        height: 20px;
    }
    .liner_end2 {
        height: 20px;
    }

    .CAE_img_1 {
        width: 80% !important;
        margin-bottom: 55%;
    }
    .CAE_img_2 {
        width: 80% !important;
        position: absolute;
        top: 30%;
        right: 0;
    }



}

/*----- ICT jugai ------*/
.prod-jugai-title {
    font-size: clamp(15px,5vw,40px);
    font-weight: 500;
    border-bottom: 3px solid ;
    border-image: linear-gradient(to right, #00FA9A, #222) 1;
    margin: 20px 0 0;
    color: #FBFBFB;
}

.prod-jugai-link {
    display: flex;
    & a {
        width: 33%;
        :hover {
            opacity: 0.8;
            transition: 0.4s;
        }
    }
}

.prod-jugai-sec1 {
    background-image: url(../images/prod/jugai/jugai_img_03.jpg);
    background-size: cover;
    height: auto;
    & p {
        margin: 0 5%;
    }
}

.prod-jugai-sec1-div {
    display: flex;    
}

.prod-jugai-sec1-left {
    width: 40%;
}

.prod-jugai-sec1-right {
    width: 60%;

    & p {
        margin: 0 1%;
    }
    & video {
        width: 90%;
        margin: 10px 5% ;
    }
}

.prod-jugai-sec2 {
    & img {
        margin-left: 10%;
        width: 80%;
    }
}

.prod-jugai-sec3 {
    & img {
        width: 100%;
    }
}

.jugai_btn {
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: #00EE99;
    color: #FAFAFA;
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(14px,3.5vw,20px);
    margin: 10px 0;
    padding: 15px 0;
    transition: all 0.5s ease;
      &:hover {
        background-color: #0c8;
      }
}


@media (max-width: 426px) {
    .prod-jugai-sec1-div {
        display: block;    
    }
    
    .prod-jugai-sec1-right {
        width: 100%;
    
        & p {
            margin-left: 5%;
            margin-bottom: 0px;
        }
        & video {
            width: 90%;
            margin: 10px 5% ;
        }
    }
    

}

/*----- CAERUS Item -----*/
.item-flex {
    display: flex;
    justify-content: center;
    text-align: center;
}
   
.item-box {
    display: flex;
    width: 50%;
}

.item-wrap {
    width: 50%;
    text-align: left;
    margin-top: 5%;
    font-size: clamp(12px,2vw,16px);
        & img {
            margin-right: 5%;
            width: 95%;
        }
        & p {
            margin: 5px;
        }
}

.btn {
    margin-top: 5%;
    padding: 1% 3%;
    border: 2px solid #FBFBFB;
    background-color: #5B9BD5;
    font-size: clamp(14px,2vw,20px);
    text-decoration: none;
    border-radius: 100px;
    transition: all .5s ease;
        &:hover {
            background-color: #ffb049;
        }
}

@media (max-width: 768px) {
    .item-flex {
        display: block;
    }
    
    .item-box {
        display: flex;
        width: 100%;
    }
}

.item-fomat {
    width: 100%;
    font-size: 18px;
    justify-content: center;
    text-align: center;
        & img {
            width: 100%;
        }
        & h4 {
            font-size: clamp(11px,3vw,20px);
        }
        & h5 {
            font-size: clamp(11px,3vw,20px);
        }

        & video {
            width: 100%;
        }
        & p {
            font-size: clamp(10px,3vw,14px);
        }
        & a {
            color: #FBFBFB;
        }
}

.item-tab {
	display: block;
    width: 90%;
    margin: auto;
}

.item-tab-menu {
	display: flex;
	width: 100%;
	text-align: center;
	padding: 0;
    margin: 0;
        & a {
            text-decoration: none;
        }
}

.item-tab-item {
	list-style: none;
    background-color: #FFF;
    border: 1px solid #222;
    opacity: 0.7;

        &.active {
            object-fit: cover;
            opacity: 1;
        }
}

.item-tab-container {
	display: block;
	width: 100%;
}

.item-tab-content {
	display: none;
	margin: 0;
	width: 100%;
	height: auto;
	background-color: white;
    text-align: center;
}

.item-tab-content.active {
	display: block;
}

/*----- CAERUS MEDIA -----*/
.TV-list {
    display: flex;
        & section {
            width: 50%;
            display: block;
            font-size: clamp(12px,3vw,18px);
        }
}


/*----- CAERUS 夜あかり匣 -----*/
.header_black {
    background-color: black;
    display: flex;
    justify-content: center;
}
.navwrap_black {
    width: 100%;
}
.header-logo_white {
    padding: 0;
    margin: 3px;
    display: flex;
    scale: 0.8;
    justify-content: center;
}

#PRODUCTION_PAGE_black {
    width: 100vw;
    padding: 60px 0 0; 
    color: #FBFBFB;
    background-color: black;
    margin: auto;
}

.inner_yoakari {
    width: clamp(690px,95vw,1100px);
    margin: auto;
}

.yoakari_head {
    width: 100%;
    height: auto;
}

.yoakari_itm {
    opacity: 1;
    width: 100%;
    height: auto;
}
.yoakari_itm_sp {
    opacity: 0;
    width: auto;
    height: 0px;
}

.yoakari_form {
    display: flex;
    position: relative;
    opacity: 1;
    width: 100%;
    height: auto;
}
.yoakari_form_sp {
    display: flex;
    position: relative;
    opacity: 0;
    width: auto;
    height: 0px;
}
.yoakari_itm_form {
    width: 100%;
}

.yoakari_itm_btn {
    position: absolute;
    left: 52%;
    top: 52%;
    width: 40%;

    & img{
        width: 100%;
    }
}
.yoakari_itm_btn_sp {
    position: absolute;
    left: 10%;
    top: 64%;
    width: 80%;
    opacity: 1;

    & img{
        width: 100%;
    }
}
.yoakari_itm_btn_sp1 {
    position: absolute;
    left: 10%;
    top: 64%;
    width: 80%;
    opacity: 0;

    & img{
        width: 100%;
    }
}
.yoakari_itm_btn_sp {
    position: absolute;
    left: 10%;
    top: 64%;
    width: 80%;
    width: auto;
    opacity: 0;
    height: 0px;

    & img{
        width: 100%;
        height: 0px;
    }
}
.yoakari_itm_btn_sp1 {
    position: absolute;
    left: 10%;
    top: 64%;
    width: 80%;
    width: auto;
    opacity: 0;
    height: 0px;

    & img{
        width: 100%;
        height: 0px;
    }
}
.yoakari_itm_btn_manual {
    position: absolute;
    left: 52%;
    top: 64%;
    width: 18%;
    opacity: 1;
    height: auto;
    & img{
        width: 100%;
    }
}
.yoakari_itm_btn_guide {
    position: absolute;
    left: 74%;
    top: 64%;
    width: 18%;
    opacity: 1;
    height: auto;
        & img{
            width: 100%;
        }
}
.yoakari_itm_btn_manual_sp {
    position: absolute;
    left: 10%;
    top: 72%;
    width: auto;
    opacity: 0;
    height: 0px;

    & img{
        width: 100%;
        height: 0px;
    }
}
.yoakari_itm_btn_manual_sp1 {
    position: absolute;
    left: 10%;
    top: 72%;
    width: auto;
    opacity: 0;
    height: 0px;

    & img{
        width: 100%;
        height: 0px;
    }
}
.yoakari_itm_btn_guide_sp {
    position: absolute;
    left: 52%;
    top: 72%;
    width: auto;
    opacity: 0;
    height: 0px;

    & img{
        width: 100%;
        height: 0px;
    }
}
.yoakari_itm_btn_guide_sp1 {
    position: absolute;
    left: 52%;
    top: 72%;
    width: auto;
    opacity: 0;
    height: 0px;

    & img{
        width: 100%;
        height: 0px;
    }
}


@media (max-width: 768px) {
    .header-logo_white {
            & svg {
                scale: 0.6;
                position: relative;
                left: -60px;
            }
            & a {
                width: 160px;
            }
    }
    .inner_yoakari {
        width: 100vw;
        font-size: clamp(10px,1.7vw,12px);
    }
    .yoakari_itm {
        opacity: 0;
        width: auto;
        height: 0px;
    }
    .yoakari_itm_sp {
        opacity: 1;
        width: 100%;
        height: auto;
    }
    .yoakari_form {
        opacity: 0;
        width: auto;
        height: 0px;
    }
    .yoakari_form_sp {
        opacity: 1;
        width: 100%;
        height: auto;
    }
    .yoakari_itm_btn {
        width: auto;
        opacity: 0;
        height: 0px;
            & img{
                height: 0px;
            }
    }
    .yoakari_itm_btn_manual {
        width: auto;
        opacity: 0;
        height: 0px;
            & img{
                height: 0px;
            }
    }
    .yoakari_itm_btn_guide {
        width: auto;
        opacity: 0;
        height: 0px;
            & img{
                height: 0px;
            }
    }
    .yoakari_itm_btn_sp {
        width: 80%;
        opacity: 1;
        height: auto;
            & img{
                height: auto;
            }
    }
    .yoakari_itm_btn_manual_sp {
        width: 38%;
        opacity: 1;
        height: auto;
            & img{
                height: auto;
            }
    }
    .yoakari_itm_btn_guide_sp {
        width: 38%;
        opacity: 1;
        height: auto;
            & img{
                height: auto;
            }
    }
}
@media (max-width: 426px) {
    .yoakari_itm_btn_sp {
        width: auto;
        opacity: 0;
        height: 0px;
            & img{
                height: 0px;
            }
    }
    .yoakari_itm_btn_manual_sp {
        width: auto;
        opacity: 0;
        height: 0px;
            & img{
                height: 0px;
            }
    }
    .yoakari_itm_btn_guide_sp {
        width: auto;
        opacity: 0;
        height: 0px;
            & img{
                height: 0px;
            }
    }
    .yoakari_itm_btn_sp1 {
        width: 80%;
        opacity: 1;
        height: auto;
            & img{
                height: auto;
            }
    }
    .yoakari_itm_btn_manual_sp1 {
        width: 38%;
        opacity: 1;
        height: auto;
            & img{
                height: auto;
            }
    }
    .yoakari_itm_btn_guide_sp1 {
        width: 38%;
        opacity: 1;
        height: auto;
            & img{
                height: auto;
            }
    }
}

/*------ 3D print ------*/

#pri_hero {
    height: auto;
    width: 100vw;
    opacity: 1;
        & img {
            width: 100%;
            height: auto;
            z-index: 0;
        }
}
#pri_hero_sp {
    height: 0;
    width: 100vw;
    opacity: 0;
        & img {
            width: 100%;
            height: 0;
            z-index: 0;
        }
}


.pri_link {
    & img {
        width: 100%;
    }
}

.pri_t_ce {
    text-align: center;
    margin: 0;
    font-size: clamp(16px,2vw,20px);
}

.flex {
    display: flex;
}

#PRODUCTION_print_va {
    background-image: url(../images/prod/design/3Dprint/pri_bg.png);
    background-position: center;
    height: 100%;
    width: auto;
    background-size: 100% 100%;
}

.pri_round_circle1 {
    display: inline-block;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 5px, dashed, white;
    position: relative;
    top: -370px;
    left: -35px;
    animation: rotation 50s linear infinite;
    z-index: 3;
}
.pri_round_circle2 {
    display: inline-block;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 5px, dashed, white;
    position: relative;
    top: -355px;
    left: -35px;
    animation: rotation 50s linear infinite;
    z-index: 3;
}
.pri_round_circle3 {
    display: inline-block;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 5px, dashed, white;
    position: relative;
    top: -375px;
    left: -26px;
    animation: rotation 50s linear infinite;
    z-index: 3;
}
@keyframes rotation {
    0% {transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.pri_img_1 {
    display: flex;
    width: 100%;
    height: 450px;
    & div{
            margin: auto;
            margin-right: 0;
            width: 40%;
        }
        & img{
            width: auto;
            height: 350px;
            margin-top: 30px;
        }
    & p {
        width: 40%;
        justify-content: center;
        margin-top: 160px;
        font-weight: 200;
        font-size: clamp(16px,2vw,20px);
    }
}

.pri_img_2 {
    display: flex;
    width: 100%;
    height: 350px;
    & div{
            margin: auto;
            margin-left: 0;
            width: 40%;
        }
        & img{
            width: 300px;
            height: auto;
            margin-left: 20px;
        }
    & p {
        width: 60%;
        justify-content: center;
        margin-top: 160px;
        margin-left:22%;
        font-weight: 200;
        font-size: clamp(16px,2vw,20px);
    }
}

.pri_img_3 {
    display: flex;
    width: 100%;
    height: 370px;
    & div{
            margin: auto;
            margin-right: 0;
            width: 40%;
        }
        & img{
            width: 350px;
            height: auto;
            margin-top: 30px;
        }
    & p {
        width: 40%;
        justify-content: center;
        margin-top: 160px;
        font-weight: 200;
        font-size: clamp(16px,2vw,20px);
    }
}

.img_c {
    display: flex;
    margin: 50px 0 0;
    width: 100%;
    & img{
        margin: auto;
    }
}

.img_c_fit {
    width: 100%;
    height: auto;
    
}

.pri-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(16px,1.7vw,21px);

        & a {
            color: #FBFBFB;
        }
}
    
.pri-table th,
.pri-table td {
    font-weight: normal;
    text-align: left;
    padding: 1em 1.5em;
    border: 1px solid #FBFBFB;
}
    
.pri-table th {
    width: 25%;
    background: #222;
}

.pri_title {
    text-align: center;
    display: inline-block;
    margin: auto;
    background: linear-gradient(45deg, #9B9BFF 16%, #FFE48F 57%, #9B9BFF 90%);
    background: -webkit-linear-gradient(45deg, #9B9BFF 16%, #FFE48F 57%, #9B9BFF 90%);
    background-size: 300% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 2.5s infinite alternate;
}
   
@keyframes gradientEffect {
    from {background-position: left}
    to {background-position: right}
}

.pri_wrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 500px;
    margin: 50px 0;
}

.content {
    width: 280px;
    height: 500px;
    object-fit: cover;
}

.slideshow {
    display: flex;
    -webkit-animation: loop-slide 20s infinite linear 1s both;
    animation: loop-slide 50s infinite linear 1s both;
    list-style-type: none;
    padding: 0;
  }
  @-webkit-keyframes loop-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes loop-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
}

.pri_app_sp {
    height: 0;
    opacity: 0;
}

.pri_list {
    list-style: none;
    padding-left: 20px;
}

.pri_list_content {
    display: flex;
    width: 95%;
        & h2 {
            margin-bottom: 10px;
        }
        & p {
            margin-top:0 ;
        }
}

.pri_list_v {
    color: #9B9BFF;
}

.pri_list_o {
    color: #FFE48F;
}

.pri_list_img {
    display: block;
    margin: 0;
    width: 15%;
        & img{
            width: clamp(70px,80%,120px);
            margin-top: 10px;
        }
}

.pri_btn {
    text-decoration: none;
    margin: 50px;
    padding: 20px 100px;
    width: 100%;
    border: white solid 3px;
    border-radius: 30px;
    background-color: #9B9BFF;
    color: black;
    font-weight: 400;
    font-size: 20px;
    transition: all 0.5s ease;
    &:hover {
        background-color: #FFE48F;
    }
}


@media (max-width: 768px) {
    .pri_round_circle1 {
        width: 0px;
        height: 0px;
    }
    .pri_round_circle2 {
        width: 0px;
        height: 0px;
    }
    .pri_round_circle3 {
        width: 0px;
        height: 0px;
    }
    
    .pri_img_1 {
        display: block;
        height: 0px;
        & div{
            & img{
                width: auto;
                height: 0px;
            }
        }
    }
    
    .pri_img_2 {
        display: block;
        height: 0px;
        & div{
            & img{
                width: auto;
                height: 0px;
            }
        }
    }
    
    .pri_img_3 {
        display: block;
        height: 0px;
        & div{
            & img{
                width: auto;
                height: 0px;
            }
        }
    }

    #pri_hero {
        opacity: 0;
        height: 0;
    }
    #pri_hero_sp { 
        opacity: 1;
        height: auto;
        & img {
            height: auto;
        }

    }

    #PRODUCTION_print_va {
        opacity: 0;
        height: 0;
        & .inner {
            height: 0;
        }
    }

    .pri_app_sp {
        height: auto;
        width: 100%;
        opacity: 1;
    }
    
    .pri_list {
        opacity: 0;
        height: 0;
    }
    
    .pri_list_content {
        opacity: 0;
        height: 0;
    }

    .pri_btn {
        margin: 0;
        padding: 20px 40px;
        font-size: clamp(14px,2.4vw,17px);
    }


}

/*------ TOPICS_PAGE -----*/
#TOPICS_PAGE {
    width: 100vw;
    padding: 60px 0 0; 
    color: black;
    background-color: #FBFBFB;
    margin: auto;
}

.topic_img1 {
    width: 100%;
    margin: auto;
    margin-left: 0;
    & img {
        width: 95%;
    }
}
.topic_img2 {
    width: 100%;
    display: flex;
    & img {
        width: 47%;
        margin: auto;
        margin-left: 0;
    }
}

.news-topics {
    display: flex;
    width: 100%;
}

.news-topics_left {
    width: 20%;
    & img {
        width: 90%;
        margin: auto;
        padding: 5px 0;
    }
}
.news-topics_right {
    width: 80%;
}