/*common start*/

.shadow {
    box-shadow: none;
}

/*common end*/

.page3 #cms_2-c .cate_box{
    padding: 20px;
}

.page3 .cate_box .box_item.box_description1{
    margin: auto;
    min-width: 270px;
}

.cast_img{
	position: relative;
	overflow: hidden;
}
/*.cast_img img{
	position: relative;
	top: 50%!important;
	left: 50%!important;
	-ms-transform: translate(-50%,-50%)!important;
	-webkit-transform: translate(-50%,-50%)!important;
	transform: translate(-50%,-50%)!important;
}*/

/* slide_img */
.slide_img .main {
  margin-bottom: 10px;
}
.slide_img .thumbnail .swiper-slide {
  cursor: pointer;
  opacity: .7;
}
.slide_img .thumbnail .swiper-slide-active {
  opacity: 1;
}
.slide_img .thumbnail .swiper-wrapper {
  margin-left: calc(-37.5% - 5px);
}
.slide_img .thumbnail .swiper-wrapper{margin-left: 0!important;transform: none!important;}


/*制作実績*/
.page5 #cms_2-c .box_item.box_description2 .box_txt2{
    padding-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
}


/*よくある質問*/
.page6 #cms_5-c .cate_box{
    padding: 20px;
}

.page6 #cms_5-c .cate_box:nth-child(2n+1){
    background-color: #f5f5f5;
}

#cms_5-c .box_title1 {
    font-weight: bold;
}


#contents{
    background: rgb(234,244,246);
        background: linear-gradient(15deg, rgba(239,245,244,0.9) 9%, rgba(248,238,235,0.7) 40%, rgba(239,245,244,0.9) 82%);
}

span.sam1, span.sam2, span.sam3, span.sam4, span.sam5, span.sam6{
    content: "";
    display: block;
    width: 12%;
    height: 28%;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%) rotate3d(0, 0, 0, 0deg);
    transform: translate(-50% , -50%) rotate3d(0, 0, 0, 0deg);
    background-size: contain;
    /*pointer-events: none;*/
}

span.sam1:hover, span.sam2:hover, span.sam3:hover, span.sam4:hover, span.sam5:hover, span.sam6:hover{
     -webkit-transform-origin: top center;
  transform-origin: top center;
     animation: swing 0.5s ease-out 0.1s 1 normal forwards;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 10deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 10deg);
  }

  40% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -7deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -7deg);
  }

  60% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 3deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 3deg);
  }

  80% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -2deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -2deg);
  }

  to {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 0deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 10deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 10deg);
  }

  40% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -7deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -7deg);
  }

  60% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 3deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 3deg);
  }

  80% {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -2deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, -2deg);
  }

  to {
    -webkit-transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 0deg);
    transform:translate(-50% , -50%)  rotate3d(0, 0, 1, 0deg);
  }
}

span.yoko{
        /*width: 250px;
        height: 150px;*/
    width: 20%;
    height: 18%;
}

span.sam1{
    top: 40%;
    left: 7%;
    background-image: url(./Dup/img/1.jpg);
}

span.sam4{
    top: 40%;
    left: 93%;
    background-image: url(./Dup/img/4.jpg);
}

span.sam2{
    top: 63%;
    left: 11%;
    background-image: url(./Dup/img/2.jpg);
}

span.sam5{
    top: 63%;
    left: 86%;
    background-image: url(./Dup/img/5.jpg);
}

span.sam3{
    top: 50%;
    left: 23%;
    background-image: url(./Dup/img/3.jpg);
}

span.sam6{
    top: 50%;
    left: 77%;
    background-image: url(./Dup/img/6.jpg);
}

.intro figure{
        max-width: 400px;
        margin: auto;
        width: 30%;
}

.intro{
        padding: 4% 3% 0%;
}

.intro h3{
    font-size: 36px;
    margin-top: 40px;
}

figure.txt_color3{
    color:white;
}

.img-container:before {
    background: #ffffff;
}

#contents .box_wrap .box:nth-child(1), #contents .box_wrap .box:nth-child(1) .txt_wrap, #contents .box_wrap .box:nth-child(3) .txt_wrap, #contents .box_wrap .box:nth-child(5) .txt_wrap, #contents .box_wrap .box:nth-child(2) figure, #contents .box_wrap .box:nth-of-type(5){
    position: relative;
}

#contents .box_wrap .box:nth-child(1) .txt_wrap:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 40%;
    left: 45%;
    background-image: url(./Dup/img/01.png);
    background-position: top left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 30%;
    pointer-events: none;
    z-index: 0;
}

#contents .box_wrap .box:nth-child(3) .txt_wrap:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 40%;
    left: 45%;
    background-image: url(./Dup/img/02.png);
    background-position: top left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 30%;
    pointer-events: none;
    z-index: 0;
}

#contents .box_wrap .box:nth-child(5) .txt_wrap:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 40%;
    left: 45%;
    background-image: url(./Dup/img/03.png);
    background-position: top left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 30%;
    pointer-events: none;
    z-index: 0;
}

#contents .box_wrap .box:nth-child(1) figure:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 40%;
    left: 60%;
    background-image: url(./Dup/img/catch.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

#contents figure.t_cms_img2:before{
    content: "";
    display: block;
    width: 60%;
    height: 100%;
    position: absolute;
    top: 130%;
    left: 25%;
    background-image: url(./Dup/img/catch2.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

/*.intro:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/boss_go.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 11%;
    pointer-events: none;
}*/

#top_cms:before {
    width: 100%;
}

#top_cms .line{
    display: none;
}

.main_wrap .menu .nav div.logo{
        max-width: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.svg_box{
    display: none;
}

.bg_color1 {
    background-color: #f1f6f6;
}

#page-top a{
        background-color: #61e0ed;
}

.intro .txt_wrap h3{
        text-shadow: 4px 4px 0px white;
}

.boss{
    display: block;
    max-width: 200px;
    margin: auto;
    margin-top: 100px;
    position: relative;
}

.boss:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/effe.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    opacity: 0;
}

.boss:hover:before{
    animation: bgiLoop 0.5s linear forwards;
}



@keyframes bgiLoop {
    0% { opacity:0;}
    50% { opacity:1;}
  100% {  opacity:0;}
}

#contents .box_wrap .box:nth-of-type(5):before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 75%;
    left: 50%;
    background-image: url(./Dup/img/catch3.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    max-width: 650px;
    z-index: 2;
}

.hvr_border_color3:hover {
    border-color: #61e0ed;
}
.hvr_bg_color3:hover {
    background-color: #61e0ed;
}

footer {
    background-color: #f0f6f5;
}

footer .txt_white{
    color: black;
}


.txt_color3 {
    color: #61e0ed;
}

.navi{
    display: none;
}

#top_cms .top_cms_wrap {
    padding-top: 150px;
}

.main_img{
    position: relative;
}

.main_img:before{
    content: "";
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/copy.png);
    background-position: center left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 50%;
    pointer-events: none;
    z-index: 1;
    min-width: 480px;
}

#header{
        border-bottom: 1px solid #b8c5c2;
    padding: 20px;
    width: 95%;
    margin: auto;
}


.top_nav ul li a, .top_nav ul li {
    color: #8c9391;
}

.intro h3 span{
    background-color: white;
}

.intro p{
    background-color: white;
    display: inline-block;
}

.t_cms_img2 .img-container:before {
    background: #f0f6f5;
}

.all_page{
    background-color: white;
}

.all_page:before {
    width: 95%;
    background-color: #ffffff;
}

.border_color1 {
    border-color: #cdcdcd;
}
.txt_color1 {
        color: #5bdbe9;
}

#page7 h3.txt_color3{
    color: #525252;
}

.linkStyle{
    background-color: #f0f6f5;
    color:black;
}

#mail_CONTACT{
    display: none;
}

#tel_CONTACT p a{
        color: gray;
}


#tel_CONTACT p a:hover{
        color: white;
}


.mailbox{
    margin-top: 20px;
    border-top: 1px solid #cdcdcd;
    padding-top: 20px;
}

#page9 p a{
    color: gray;
}


/*-----20220711 correct start-------*/
#contents figure.t_cms_img4:before {
    content: "";
    display: block;
    width: 70%;
    height: 100%;
    position: absolute;
    top: 130%;
    left: 33%;
    background-image: url(./Dup/img/catch4.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

#contents figure.t_cms_img2:before {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    position: absolute;
    top: 130%;
    left: 20%;
    background-image: url(./Dup/img/catch2.png);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

#contents .box_wrap .box:nth-child(6) .txt_wrap:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 40%;
    left: 45%;
    background-image: url(./Dup/img/04.png);
    background-position: top left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 30%;
    pointer-events: none;
    z-index: 0;
}

#contents .box .txt_wrap {
    position: relative;
}

.yaku{
    margin-top: 200px;
}


/*-----20220711 correct end-------*/


@media all and (-ms-high-contrast: none){
  

}


@media screen and (min-width: 1000px){
.all_header {
    display: none;
}



}

@media screen and (max-width: 1000px){
    
    #contents .box_wrap .box:nth-child(1):before{
    background-size: auto;
}

#contents .box .txt_wrap {
    width: 80%;
    padding: 0;
    margin-bottom: 50px;
}

#contents .box figure {
    width: 80%;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 1000px){

.page3 #cms_2-c .cate_box {
    width: 100% !important;
}

.page3 .cate_box .box_item.box_description1 {
    width: 50% !important;
}

.page3 .cate_box .box_item.box_description2 {
    width: 80% !important;
    margin: auto;
}

span.sam1{
    top: 40%;
    left: 7%;
}

span.sam4{
    top: 30%;
    left: 93%;
}

span.sam2{
    top: 66%;
    left: 8.5%;
}

span.sam5{
    top: 51%;
    left: 89%;
}

span.sam3{
    top: 23%;
    left: 14%;
}

span.sam6{
    top: 72%;
    left: 94%;
}

#header {
    padding-left: 2.5%;
    padding-right: 2.5%;
    width: auto;
}

}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

span.sam1, span.sam2, span.sam3, span.sam4, span.sam5, span.sam6{
    display: none;
}

.intro{
        background-image: url(./Dup/img/tb_back.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 90%;
}

.main_img_wrap{height: auto}
.main_wrap{margin-top: 60vw;}

.main_img{
    height: 60vw !important;
}

.main_img:before{
    min-width: auto;
        width: 70%;
}

.intro h3 {
    font-size: 31px;
}

.other .box_title {
    font-size: 25px;
}



}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.main_wrap{margin-top: 60vw;}
#video{height: 60vw;}

.intro h3 {
    font-size: 18px;
    margin-top: 40px;
}

#contents .box_wrap .box:nth-of-type(5):before {
    height: 70%;
}

header .logo {
    width: 30%;
    position: relative;
}

#page_title #title_img {
    height: 180px;
}

#title_img span {
    background-position: 0% 0%;
    background-size: 140%;
}

#page_title .img-container::after {
    background-color: rgba(147, 189, 193, 0.4);
}

.main_img:before {
    width: 90%;
}

.main_img:before {
    background-size: 60%;
}

#contents .box:nth-child(3) .txt_wrap {
    margin-top: 70px;
}

#contents .box_wrap .box:nth-child(3) .txt_wrap:before {
    top: 38%;
}

#contents .box .txt_wrap {
    width: 95%;
    margin-bottom: 0;
}

}