﻿@media screen and (max-width: 1300px) {
  /*タブレットサイズ*/
  .thumbnail {
   width: auto;
   height: auto;
   width: 100%;
}
.bg_01 .thumbnail{
  height: 52vh;
  width: 100%;
  object-position: 70% 23%;
  object-fit: cover;
}
.bg_02 .thumbnail{
  width: auto;
  height: 52vh;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 6 / 7;
}
.support_contents figcaption{
  padding: auto 20px;
}
.support_contents figure:nth-child(3) figcaption{
  margin-left: 20px;
}
}


@media screen and (max-width: 1200px) {
  .sp-none{
    display: none;
  }
  .pc-none{
    display: block;
  }


.header_in .mail img{
  width: 100%;
}
#logo {
  margin-right: 20px;
}
 .eachTextAnime {
   max-width: 60%;
   padding-left: 30px;
   padding-top: 5rem;
   margin-bottom: 16px
 }

 .main_visual_in img {
   width: 27%;
   margin-right: 4rem;
   margin-top: auto;
 }

 .lead_txt {
  margin-left: 45px;
 }



 .main_visual_img02 img {
   margin-right: 1rem;
   margin-top: -3rem;
 }

 .circle {
   margin-right: 23%;
   top: 146px;
 }

 .service_contents {
   padding: 70px 0px;
 }

 .service_contents img {
   position: relative;
   margin-left: auto;
   margin-top: -1%;
 }
 .service_contents .service_contents_in{
  padding: 10% 10% 0% 10%;
  max-width: 640px;
  
 }
 .catch_txt_box .title {
   line-height: 42px;
   padding-left: 44px;
   margin-bottom: 40px;
   font-feature-settings: "palt";
 }

 .catch_contents {
   flex-direction: column-reverse;
   /* padding-top: 15%; */
 }

 .catch_txt_box {
   width: auto;
   box-sizing: border-box;
   padding: 30% 10% 0% 10%;
   margin: 0 auto;
   max-width: 100%;
 }
 .catch_img_box {
   position: relative;
   /* width: 27%; */
}
.hp_contents .catch_txt_box,.sns_contents  .catch_txt_box{
  padding: 0% 10% 0% 10%;
}
 .main_visual_img03 img {
 /*  width: 27%;
   margin-left: 19%;*/
 }

 .main_visual_img04 img {
   /* width: 81%; */
 }
 .achievement_contents .catch_txt_box{
  padding-top: 60px;
 }
 .catch_img_box {
   position: relative;
   width: 35%;
   margin-right: auto;
   margin-bottom: -10px;
 }

 .service_contents_list {
   display: block;
 }

 .service_contents .col:nth-child(2) {
   margin-top: 100px;
   margin-right: 60px;
 }

 .service_contents .col:nth-child(3) {
   margin-top: 100px;
 }

 .circle {
   width: 27%;
 }

 .service_contents img {
   width: 43%;
 }

 .main_visual_img05 {
  top: -28%;
  right: 5%;
  width: 63%;
 }

 .service_contents .col {
   margin: 0 auto;
   padding: 123px 30px 30px 30px;
 }

 .service_contents .title {
  margin-left: 0px;
   margin-bottom: 70px;
 }

 .support_contents .title {
   line-height: 42px;
 }

 .support_contents figure {
   margin-bottom: 0px;
   display: block;
   margin-right: 20px;
   margin-bottom: 40px;
 }
 .support_contents figure img {
  width: 100%;
  height: 400px;
  object-position: 109%;
  object-fit: none;
}

 .support_contents {
   padding-bottom: 60px;
 }

 .support_contents figcaption {
   width: 80%;
   margin: 0 auto;
 }

 .support_contents figcaption::before {
   right: -37%;
 }

 .support_contents figure:nth-child(3) {
   flex-direction: unset;
   margin-left: 40px;
   margin-bottom: 60px;

 }

 .support_contents figure:nth-child(3) img {
   margin-left: 20%;
   object-position: 0%;
 }

 .support_contents figure:nth-child(3) figcaption {
   margin-right: auto;

 }

 .support_contents figure:nth-child(3) figcaption::before {
   /* top: -152%; */
   top: -82%;
   left: -163%;
 }

 .support_contents figure h4 {
   margin-bottom: 20px;
   padding-left: 0px;
 }

 .support_contents figure h4 {
   margin-bottom: 20px;
   font-feature-settings: "palt";
 }

 .genres_contents_in figure {
   margin: 0 auto;
 }

 .genres_contents .title {
  /* margin-left: auto; */
  /* padding-left: initial; */
  width: 100%;
  padding-left: 0px;
  /* margin-left: -61px; */
  text-align: unset;
}
.genres_contents .title::before {
  left: -55px;
}
 .genres_contents .last_txt::before {
   content: unset;
 }

 .main_visual_img06 img {
   width: 100%;
   /* margin-left: -142%; */
 }

 .main_visual_img07 img {
   width: 100%;
 }

 .flow_contents .title {
   font-size: clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem);
   letter-spacing: 0.09em;
 }

 .flow_contents .list {
   font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
   line-height: 40px;
   margin-bottom: 80px;
 }

 .flow_contents .list {
   display: block;
   text-align: center;

 }

 .flow_contents .list li {
   margin-right: auto;
 }

 .flow_contents .box {
   flex-direction: column-reverse;
   margin: 0px auto 120px;
 }
 .flow_contents .box::after{
  right: -70px;
  top: 92px;
 }
 .flow_contents .box:nth-child(4)::after{
   /* left: -20px; */
   top: -11%;
   left: -113%;
 }

 .flow_contents .box p{
   margin: 0 auto;
 }
 .flow_contents .box img{
   width: 100%;
 }
 .flow_contents .txt {
   padding: 0px 40px;
   margin-bottom: 60px;
   max-width: 100%;
 }
 .flow_contents .box:nth-child(4) .txt{
  padding: 0px 40px 0px 60px;
 }
 .flow_contents .box:nth-child(4) {
   flex-direction: column-reverse;
   margin-bottom: 60px;
   margin: 0px 20px 60px 0px;
 }
 
 .flow_contents .box:nth-child(5){
    margin-bottom: 0px;
 }
 .sns_contents {
  flex-direction: column-reverse;
  /* padding-top: 15%; */
}
 .sns_flow_contents {
   padding: 120px 20px ;
 }
 .sns_flow_contents .title{
   margin-bottom: 40px;
 }
 .sns_flow_contents .flow ul {
  justify-content: space-between;
  overflow: inherit;
 }

 .sns_flow_contents .flow ul li {
   max-width: 29%;
   margin-bottom: 20px;
 }

 .sns_flow_contents .flow ul li p {
   width: auto;
 }

 .sns_flow_contents .flow ul::before {
   top: 19%;
   right: -65px;
 }
 .sns_flow_contents .flow ul::after{
   content: "";
   display: block;
   width: 100%;
   border: 2px solid #9ac7d1;
   position: absolute;
   top: 70%;
   z-index: 0;
   left: -20px;
 }

 .circle.circle_b {
   margin-top: -22%;
}

 .form#mail_form dl {
   display: block;
 }

 .consultation_contents01{
   padding: 70px 40px;
 }
 .consultation_contents01 ul{
   line-height: 25px;
 }
 .consultation_contents01 li{

   line-height: 30px;
   letter-spacing: 0.1em;
}

 .achievement_contents .slick-prev {
   position: absolute;
   right: 22%;
   z-index: 2;
}
.achievement_contents .slick-next {
 position: absolute;
 right: 8%;
}
.achievement_contents {
  padding: 20px 0px 70px !important;
}
.slick-slide img{
 display: block;
 width: 90%;
 margin-left: auto;
}
.sns_flow_contents .title::before{
  right: 40%;
  top: -41px;
}
.company_contents_in .title::before{
 left: -20px;
   top: 38px;
}
form#mail_form dl{
 display: block;
}

.manager_contents{
  margin: 0px 10px;
  width: auto;
  padding: 25px;
}
.manager_contents .lead_txt{
  display: block;
  margin-left: auto;
}
.manager_contents .logo_list img {
  width: 100%;
  height: auto;
}
.manager_contents .title{
  font-size: 16px;
  line-height: 1.5em;
}
.manager_contents li{
  padding: 0px 10px;
}
}
@media screen and (max-width: 750px) {
  .header_in .mail{
    display: block;
    position: absolute;
    right: 63px;
    z-index: 2;
    top: 16px;
    max-width: 27px;
  }
 .thumbnail {
   height: 52vh;
   width: auto;
 }
 .bg_01,.bg_02,.bg_03{
  /* padding-top: 87%;
   background-position-x: center;*/
 }
 .circle.circle_b {
  margin-top: -62%;
  width: 30%;
  margin-right: 10%;
  margin-bottom: 70px;
}
.sns_contents {
 flex-direction: column-reverse;
 padding-top: 0px;
 padding-bottom: 170px;
}
.advertisement_contents {
  padding-bottom: 88%;
}
.main_visual_img03 img {
 width: 100%;
 margin-left: 13%;
}
.main_visual_img04 img {
 /* width: 50%; */
}
.catch_txt_box.main_txt{
  padding: 20% 10% 0% 10%;
}
.genres_contents .last_txt{
  text-align: center;
}
.carousel { padding: 30px 0 45px 30px; }
.carousel div { margin-right: 5px;}
.carousel .slick-list { padding-right: 20%; }
.service_contents::before{
  top: -315px;
}
.hp_contents .catch_txt_box,.sns_contents  .catch_txt_box{
  padding: 20% 10% 0% 10%;
  margin-top: 0px;
}
.sns_flow_contents .flow ul li span{
  letter-spacing: 0.01em;
    font-size: 12px;
}
.sns_flow_contents .flow ul li span label{
  display: inline;
}
.genres_contents .contact_btn{
  margin: 0px 20px;
}
.sns_contents .title::before {
  left: -40px;
  top: 10px;
}
.sns_contents .title::before {
  left: -36px;
}
.flow_contents .box:nth-child(4)::after {
  width: 198px;
  height: 24px;
  top: 100px;
  left: -81px;
}
form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"]{
  width: 100%;
}
.three_flow_contents .box:nth-child(4)::after{
  width: 198px;
  height: 24px;
  top: -29px;
  left: -81px;
}
.three_flow_contents .box:nth-child(3)::after,.three_flow_contents .box:nth-child(5)::after{
  right: -39px;
  top: 62px;
}
}