@charset "UTF-8";

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

#header {
  width: 100%;
  height: 100vh;
  background-image: url("../images/AdobeStock_80950441_72dpi.png");
  background-size: cover;
  background-position: center right;
}

.header_effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.header_effect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.header-logo {
  position: absolute;
  top: 9.2%;
  left: 8.7%;
  width: 32.4vw;
  max-width: 473px;
  min-width: 354px;
}

.fade {
  opacity: 0;
  visibility: hidden;
  transition: 1.5s;
}

.fade.fade_delay1 {
  transition-delay: 0.5s;
}

.fade.fade_delay2 {
  transition-delay: 1s;
}

.fade.fade_delay3 {
  transition-delay: 1.5s;
}

.fade.show {
  opacity: 1;
  visibility: visible;
}

/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 3%;
  right: 50%;
  /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1.5s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
  0% {
    bottom: 3%;
  }

  50% {
    bottom: 5%;
  }

  100% {
    bottom: 3%;
  }
}

/*Scrollテキストの描写*/
.scrolldown4 span {
  /*描画位置*/
  position: absolute;
  left: -20px;
  bottom: 10px;
  /*テキストの形状*/
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  color: #eee;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}

.scrolldown4:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: 0;
  /*矢印の形状*/
  width: 1px;
  height: 50px;
  background: #eee;
}

.page-link.sp_menu_link {
  display: none;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  #header {
    background-image: url("../images/SP_AdobeStock_80950441_72dpi.png");
    background-position: top right;
  }

  .header_effect img {
    object-position: top right;
  }

  .header-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 49%;
    max-width: 355px;
    min-width: auto;
    left: 8%;
  }

  .header-logo .sp_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header-logo .sp_menu > span {
    margin-top: 20px;
  }

  .page-link.sp_menu_link {
    margin-top: 25px;
  }

  .page-link.sp_menu_link li a {
    font-family: "Papyrus", "yuji-syuku", serif;
  }
}

/*-----------ABOUT-------------------------*/

#about {
  padding-top: 100px;
  margin-top: -100px;
}
.about_wrapper {
  margin-bottom: 160px;
}

/**--------Arrow--------------**/

.about_header {
  display: flex;
  margin-bottom: 70px;
  vertical-align: middle;
}

.about_TATE_line {
  width: fit-content;
}

.about_header h2 {
  font-size: 28px;
  letter-spacing: 0.01em;
  margin: 20px 40px 0px 20px;
}

.about_line {
  width: 100%;
  margin: 30px 0px 0px 0px;
}

.about_line img {
  width: 100%;
}

.pr_information {
  display: flex;
  justify-content: space-between;
  vertical-align: text-top;
  column-gap: 20px;
  margin-bottom: 80px;
}

.pr_information_text {
  width: 65%;
}

.pr_position h3 {
  font-size: 24px;
  letter-spacing: 0.1em;
  text-decoration: none;
  margin-bottom: 10px;
}

.pr_name h3 {
  font-size: 36px;
  letter-spacing: 0.2em;
  line-height: 1.5;
}

.pr_furigana h3 {
  font-size: 18px;
  letter-spacing: 0.6em;
  margin-bottom: 40px;
}

.pr_message p {
  font-size: 18px;
  line-height: 2;
}

.pr_information_photo {
  width: 48%;
  max-width: 331px;
  margin-right: 20px;
}

.career {
  margin-bottom: 50px;
}

.career_1 h3 {
  font-size: 22px;
}

.career_1 span {
  font-size: 20px;
  letter-spacing: 0.5em;
  margin: 19px 0 0;
}

.career_2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  vertical-align: middle;
  column-gap: 20px;
}

.career_tfc {
  width: 48%;
  text-align: center;
}

.career_dcrx {
  width: 48%;
}

.career_tfc img {
  width: 60%;
  /* width: 320px;
  margin: 85px 0px 0px 150px; */
}

/* .career_dcrx img {
  width: 670px;
  margin: -45px 0px 0px 33px;
} */

/* .skill {
  padding-top: 30px;
} */

.skill_1 h3 {
  font-size: 22px;
}

.skill_1 span {
  font-size: 20px;
  letter-spacing: 0.5em;
}

.skill_juida,
.skill_programming,
.skill_web_Analysis {
  width: 48%;
}

.skill_juida,
.skill_programming {
  text-align: center;
  margin: 0 auto 50px;
}
.skill_juida img,
.skill_programming img {
  width: 60%;
}

/* .skill_juida img {
  width: 320px;
  margin: 0px 0px 0px 440px;
} */

.skill_juida p {
  font-size: 18px;
  letter-spacing: 0em;
  margin-top: -25px;
}

/* .skill_programming img {
  width: 323px;
  margin: 40px 0px 0px 442px;
} */

.skill_web_Analysis {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  margin: 0 auto;
}

.skill_analyst_001 {
  text-align: right;
}

.skill_analyst_001 img,
.skill_analyst_002 img {
  width: 60%;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .about_wrapper {
    margin-bottom: 80px;
  }

  .about_header {
    align-items: center;
    margin-bottom: 40px;
  }

  .about_TATE_line img {
    height: 7vw;
    min-height: 50px;
  }

  .about_header h2 {
    margin: 0 20px 0 10px;
    font-size: max(3.3vw, 18px);
  }

  .about_line {
    margin-top: 0;
    line-height: 0;
  }

  .pr_information {
    flex-direction: column;
    margin-bottom: 60px;
  }

  .pr_information_text {
    width: 100%;
    order: 2;
  }

  .pr_information_photo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    margin-bottom: 50px;
    margin-right: 0;
  }

  .pr_text {
    margin-bottom: -1.4vw;
  }
  .pr_position h3 {
    font-size: max(3.3vw, 14px);
    text-align: end;
    white-space: nowrap;
  }

  .pr_name h3 {
    font-size: max(3.3vw, 17px);
    text-align: end;
  }

  .pr_furigana h3 {
    margin-bottom: 0;
    font-size: max(1.9vw, 10px);
    text-align: end;
    letter-spacing: 0.3em;
  }

  .pr_information_photo img {
    width: 53%;
    max-width: 286px;
    margin-left: 15px;
  }

  .pr_message p {
    font-size: max(1.7vw, 12px);
    line-height: 2;
  }

  .career {
    margin-bottom: 0;
  }

  .career_1 h3,
  .skill_1 h3 {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .career_1 span,
  .skill_1 span {
    font-size: 16px;
  }

  .career_2 {
    flex-direction: column;
  }

  .career_tfc,
  .skill_programming,
  .skill_web_Analysis {
    width: 52%;
  }

  .career_dcrx {
    width: 63%;
  }

  .skill_juida,
  .skill_programming {
    margin-bottom: 10px;
  }

  .skill_programming img,
  .skill_analyst_001 img,
  .skill_analyst_002 img {
    width: 100%;
  }

  .career_tfc img {
    width: 90%;
  }

  .skill_juida {
    width: 100%;
  }

  .skill_juida img {
    width: 52%;
  }

  .skill_juida p {
    font-size: max(2.3vw, 12px);
    margin-top: -2vw;
  }
}

/*-----------ADVANTAGE-------------------------*/

#advantage {
  padding-top: 100px;
  margin-top: -100px;
}

.advantage_wrapper {
  margin-bottom: 160px;
}

/**--------Arrow--------------**/

.advantage_header {
  display: flex;
  margin-bottom: 70px;
  vertical-align: middle;
}

.advantage_TATE_line {
  width: fit-content;
}

.advantage_header h2 {
  font-size: 28px;
  letter-spacing: 0.01em;
  margin: 20px 40px 0px 20px;
}

.advantage_line {
  width: 100%;
  margin: 30px 0px 0px 0px;
}

.advantage_line img {
  width: 100%;
}

.advantage_001,
.advantage_002,
.advantage_003 {
  display: flex;
  align-items: baseline;
}

.advantage_001,
.advantage_002 {
  margin-bottom: 40px;
}

.creative_sense,
.footwork,
.cost_performance {
  width: 27%;
}
.creative_sense h3,
.footwork h3,
.cost_performance h3 {
  font-size: 22px;
}

.creative_sense span,
.footwork span,
.cost_performance span {
  font-size: 20px;
  letter-spacing: 0.5em;
}

.creative_sense_msg p,
.footwork_msg p,
.cost_performance_msg p {
  font-size: 20px;
  line-height: 2;
}

.creative_sense_msg span,
.footwork_msg span,
.cost_performance_msg span {
  font-weight: bold;
  font-size: 28px;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .advantage_wrapper {
    margin-bottom: 80px;
  }

  .advantage_header {
    align-items: center;
    margin-bottom: 30px;
  }

  .advantage_TATE_line img {
    height: 7vw;
    min-height: 50px;
  }

  .advantage_header h2 {
    margin: 0 20px 0 10px;
    font-size: max(3.3vw, 18px);
  }

  .advantage_line {
    margin-top: 0;
    line-height: 0;
  }

  .advantage_001,
  .advantage_002,
  .advantage_003 {
    flex-direction: column;
  }

  .advantage_001,
  .advantage_002 {
    margin-bottom: 30px;
  }

  .creative_sense,
  .footwork,
  .cost_performance {
    width: 100%;
  }

  .creative_sense h3,
  .footwork h3,
  .cost_performance h3 {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .creative_sense span,
  .footwork span,
  .cost_performance span {
    font-size: 16px;
  }

  .creative_sense_msg p,
  .footwork_msg p,
  .cost_performance_msg p {
    font-size: max(1.7vw, 12px);
    padding-left: 1.5em;
  }

  .creative_sense_msg span,
  .footwork_msg span,
  .cost_performance_msg span {
    font-size: max(2.5vw, 13px);
  }
}

/*-----------SERVICE-------------------------*/

#service {
  padding-top: 100px;
  margin-top: -100px;
}

.service_wrapper {
  margin-bottom: 160px;
}

/**--------Arrow--------------**/

.service_header {
  display: flex;
  margin-bottom: 70px;
  vertical-align: middle;
}

.service_TATE_line {
  width: fit-content;
}

.service_header h2 {
  font-size: 28px;
  letter-spacing: 0.01em;
  margin: 20px 40px 0px 20px;
}

.service_line {
  width: 100%;
  margin: 30px 0px 0px 0px;
}

.service_line img {
  width: 100%;
}

.service_msg {
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 100px;
}

/*-----------service_contents_001_title-------------------------*/

.service_contents_001_title h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.service_contents_001_title span {
  font-size: 18px;
}

/*-----------service_contents_001-------------------------*/

.service_contents_001 {
  display: flex;
  justify-content: space-around;
  column-gap: 10px;
  margin-bottom: 100px;
}

.strategic_planning_container,
.creative_direction_container,
.video_planning_container {
  width: 29%;
}

.strategic_planning_icon,
.creative_direction_icon,
.video_planning_icon {
  position: relative;
  margin-bottom: 10px;
}

.strategic_planning_icon img,
.creative_direction_icon img,
.video_planning_icon img {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
}

.strategic_planning_icon span,
.creative_direction_icon span,
.video_planning_icon span {
  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%);
  font-family: "Papyrus", "yuji-syuku", serif;
  font-size: 24px;
  line-height: 19px;
  text-align: center;
  color: #fff;
}

.strategic_planning_caption h4,
.creative_direction_caption h4,
.video_planning_caption h4 {
  position: relative;
  font-size: 18px;
  padding-left: 15px;
  margin-bottom: 10px;
}

.strategic_planning_caption h4::before,
.creative_direction_caption h4::before,
.video_planning_caption h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 36px;
  background: #00293e;
}

.strategic_planning_msg p,
.creative_direction_msg p,
.video_planning_msg p {
  font-size: 16px;
}

/*-----------service_contents_002_title-------------------------*/

.service_contents_002_title h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.service_contents_002_title span {
  font-size: 18px;
}

/*-----------service_contents_002a-------------------------*/

.service_contents_002a {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  column-gap: 10px;
  margin-bottom: 100px;
}

.producing_container,
.video_direction_container,
.video_shooting_container,
.location_management_container,
.video_editing_container {
  width: 29%;
}

.location_management_container,
.video_editing_container {
  margin-top: 80px;
}

.producing_icon,
.video_direction_icon,
.video_shooting_icon,
.location_management_icon,
.video_editing_icon {
  position: relative;
  margin-bottom: 10px;
}

.producing_icon img,
.video_direction_icon img,
.video_shooting_icon img,
.location_management_icon img,
.video_editing_icon img {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
}

.producing_icon span,
.video_direction_icon span,
.video_shooting_icon span,
.location_management_icon span,
.video_editing_icon span {
  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%);
  font-family: "Papyrus", "yuji-syuku", serif;
  font-size: 24px;
  line-height: 19px;
  text-align: center;
  color: #fff;
}

.producing_caption h4,
.video_direction_caption h4,
.video_shooting_caption h4,
.location_management_caption h4,
.video_editing_caption h4 {
  position: relative;
  font-size: 18px;
  padding-left: 15px;
  margin-bottom: 10px;
}

.producing_caption h4::before,
.video_direction_caption h4::before,
.video_shooting_caption h4::before,
.location_management_caption h4::before,
.video_editing_caption h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 36px;
  background: #00293e;
}

.producing_msg p,
.video_direction_msg p,
.video_shooting_msg p,
.location_management_msg p,
.video_editing_msg p {
  font-size: 16px;
}

.location_management_msg p,
.video_editing_msg p {
  margin-bottom: 20px;
}

.location_management_jfc,
.video_editing_adobe {
  margin-top: auto;
}
.location_management_jfc img,
.video_editing_adobe img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.location_management_jfc img {
  max-width: 300px;
}

.video_editing_adobe img {
  max-width: 200px;
}

/*-----------service_contents_003_title-------------------------*/

.service_contents_003_title h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.service_contents_003_title span {
  font-size: 18px;
}

/*-----------service_contents_003-------------------------*/

.service_contents_003 {
  display: flex;
  justify-content: space-around;
  column-gap: 10px;
  margin-bottom: 100px;
}

.web_design_container,
.web_coding_container,
.web_analysis_container {
  width: 29%;
}

.web_design_icon,
.web_coding_icon,
.web_analysis_icon {
  position: relative;
  margin-bottom: 10px;
}

.web_design_icon img,
.web_coding_icon img,
.web_analysis_icon img {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
}

.web_design_icon span,
.web_coding_icon span,
.web_analysis_icon span {
  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%);
  font-family: "Papyrus", "yuji-syuku", serif;
  font-size: 24px;
  line-height: 19px;
  color: #fff;
}

.web_design_caption h4,
.web_coding_caption h4,
.web_analysis_caption h4 {
  position: relative;
  font-size: 18px;
  padding-left: 15px;
  margin-bottom: 10px;
}

.web_design_caption h4::before,
.web_coding_caption h4::before,
.web_analysis_caption h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 36px;
  background: #00293e;
}

.web_design_msg p,
.web_coding_msg p,
.web_analysis_msg p {
  font-size: 16px;
}

/*-----------service_contents_004_title-------------------------*/

.service_contents_004_title h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.service_contents_004_title span {
  font-size: 18px;
}

/*-----------service_contents_004-------------------------*/

.service_contents_004 {
  display: flex;
  justify-content: space-around;
  column-gap: 10px;
  margin-bottom: 80px;
}

.translation_container,
.stock_footage_container,
.concierge_container {
  width: 29%;
}

.translation_icon,
.stock_footage_icon,
.concierge_icon {
  position: relative;
  margin-bottom: 10px;
}

.translation_icon img,
.stock_footage_icon img,
.concierge_icon img {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
}

.translation_icon span,
.stock_footage_icon span,
.concierge_icon span {
  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%);
  font-family: "Papyrus", "yuji-syuku", serif;
  font-size: 24px;
  line-height: 19px;
  color: #fff;
}

.translation_caption h4,
.stock_footage_caption h4,
.concierge_caption h4 {
  position: relative;
  font-size: 18px;
  padding-left: 15px;
  margin-bottom: 10px;
}

.translation_caption h4::before,
.stock_footage_caption h4::before,
.concierge_caption h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 36px;
  background: #00293e;
}

.translation_msg p,
.stock_footage_msg p,
.concierge_msg p {
  font-size: 16px;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .service_wrapper {
    margin-bottom: 45px;
  }

  .service_header {
    align-items: center;
    margin-bottom: 30px;
  }

  .service_TATE_line img {
    height: 7vw;
    min-height: 50px;
  }

  .service_header h2 {
    margin: 0 20px 0 10px;
    font-size: max(3.3vw, 18px);
  }

  .service_line {
    margin-top: 0;
    line-height: 0;
  }

  .service_msg {
    font-size: max(1.7vw, 12px);
    line-height: 2;
    margin-bottom: 60px;
  }

  .service_contents_001_title h3,
  .service_contents_002_title h3,
  .service_contents_003_title h3,
  .service_contents_004_title h3 {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .service_contents_001_title span,
  .service_contents_002_title span,
  .service_contents_003_title span,
  .service_contents_004_title span {
    font-size: 16px;
  }

  .service_contents_001,
  .service_contents_002a,
  .service_contents_003,
  .service_contents_004 {
    flex-wrap: wrap;
    margin-bottom: 80px;
  }

  .strategic_planning_container,
  .creative_direction_container,
  .video_planning_container,
  .producing_container,
  .video_direction_container,
  .video_shooting_container,
  .location_management_container,
  .video_editing_container,
  .web_design_container,
  .web_coding_container,
  .web_analysis_container,
  .translation_container,
  .stock_footage_container,
  .concierge_container {
    width: 48%;
    max-width: 300px;
  }

  .strategic_planning_container,
  .creative_direction_container,
  .producing_container,
  .video_direction_container,
  .video_shooting_container,
  .location_management_container,
  .web_design_container,
  .web_coding_container,
  .translation_container,
  .stock_footage_container {
    margin-bottom: 50px;
  }

  .location_management_container,
  .video_editing_container {
    margin-top: 0;
  }

  .strategic_planning_icon img,
  .creative_direction_icon img,
  .video_planning_icon img,
  .producing_icon img,
  .video_direction_icon img,
  .video_shooting_icon img,
  .location_management_icon img,
  .video_editing_icon img,
  .web_design_icon img,
  .web_coding_icon img,
  .web_analysis_icon img,
  .translation_icon img,
  .stock_footage_icon img,
  .concierge_icon img {
    width: 75%;
  }

  .strategic_planning_icon span,
  .creative_direction_icon span,
  .video_planning_icon span,
  .producing_icon span,
  .video_direction_icon span,
  .video_shooting_icon span,
  .location_management_icon span,
  .video_editing_icon span,
  .web_design_icon span,
  .web_coding_icon span,
  .web_analysis_icon span,
  .translation_icon span,
  .stock_footage_icon span,
  .concierge_icon span {
    font-size: max(3vw, 12px);
    line-height: 2.3vw;
  }

  .android .strategic_planning_icon span,
  .android .creative_direction_icon span,
  .android .video_planning_icon span,
  .android .producing_icon span,
  .android .video_direction_icon span,
  .android .video_shooting_icon span,
  .android .location_management_icon span,
  .android .video_editing_icon span,
  .android .web_design_icon span,
  .android .web_coding_icon span,
  .android .web_analysis_icon span,
  .android .translation_icon span,
  .android .stock_footage_icon span,
  .android .concierge_icon span {
    margin-top: -2px;
  }

  .strategic_planning_caption h4,
  .creative_direction_caption h4,
  .video_planning_caption h4,
  .producing_caption h4,
  .video_direction_caption h4,
  .video_shooting_caption h4,
  .location_management_caption h4,
  .video_editing_caption h4,
  .web_design_caption h4,
  .web_coding_caption h4,
  .web_analysis_caption h4,
  .translation_caption h4,
  .stock_footage_caption h4,
  .concierge_caption h4 {
    font-size: max(1.9vw, 10px);
    padding-left: 10px;
  }

  .strategic_planning_caption h4::before,
  .creative_direction_caption h4::before,
  .video_planning_caption h4::before,
  .producing_caption h4::before,
  .video_direction_caption h4::before,
  .video_shooting_caption h4::before,
  .location_management_caption h4::before,
  .video_editing_caption h4::before,
  .web_design_caption h4::before,
  .web_coding_caption h4::before,
  .web_analysis_caption h4::before,
  .translation_caption h4::before,
  .stock_footage_caption h4::before,
  .concierge_caption h4::before {
    height: 25px;
  }

  .strategic_planning_msg p,
  .creative_direction_msg p,
  .video_planning_msg p,
  .producing_msg p,
  .video_direction_msg p,
  .video_shooting_msg p,
  .location_management_msg p,
  .video_editing_msg p,
  .web_design_msg p,
  .web_coding_msg p,
  .web_analysis_msg p,
  .translation_msg p,
  .stock_footage_msg p,
  .concierge_msg p {
    font-size: max(1.9vw, 10px);
  }

  .video_editing_adobe img {
    width: 80%;
    margin: 0 auto;
  }
}

/*-----------WORKS-------------------------*/

#works {
  padding-top: 100px;
  margin-top: -100px;
}

.works_wrapper {
  margin-bottom: 160px;
}

/**--------Arrow--------------**/

.works_header {
  display: flex;
  margin-bottom: 70px;
  vertical-align: middle;
}

.works_TATE_line {
  width: fit-content;
}

.works_header h2 {
  font-size: 28px;
  letter-spacing: 0.01em;
  margin: 20px 40px 0px 20px;
}

.works_line {
  width: 100%;
  margin: 30px 0px 0px 0px;
}

.works_line img {
  width: 100%;
}

/*-----------WORKS_TVCM_container-------------------------*/

.tvcm_container {
  margin-bottom: 40px;
}

.tvcm_container h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.tvcm_container span {
  font-size: 18px;
}

.tvcm_intro {
  margin-bottom: 40px;
}
.tvcm_intro p,
.tvcm_client p {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

/*-----------WORKS_PROJECT_container-------------------------*/

.project_intro {
  margin-bottom: 80px;
}
.project_container {
  margin-bottom: 40px;
}

.project_container h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.project_container span {
  font-size: 18px;
}

.project_intro p {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

/*-----------WORKS_PROJECT_web_site_container-------------------------*/

.project_web_site_container {
  margin-bottom: 80px;
}

.project_web_site_container h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.project_web_site_container span {
  font-size: 18px;
}

.project_web_site_inner {
  width: 67%;
  max-width: 766px;
  min-width: 290px;
  margin: 0 auto;
}

.project_web_site_container img {
  width: 100%;
  padding-bottom: 30px;
  margin-top: 20px;
}

/*-----------WORKS_PROJECT_promotion_video_container-------------------------*/

.project_promotion_video_container {
  margin-bottom: 40px;
}

.project_promotion_video_container h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.project_promotion_video_container span {
  font-size: 18px;
}

.project_promotion_video_intro {
  margin-bottom: 80px;
}

.project_promotion_video_intro p {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 15px;
}

.project_promotion_video_intro p:last-of-type {
  margin-top: 15px;
}

.project_promotion_video_intro span {
  display: block;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

.project_promotion_video_inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.all_japan,
.tokyo,
.kansai,
.hokkaido,
.okinawa,
.spring,
.summer,
.autumn {
  margin-bottom: 40px;
}

.all_japan span,
.tokyo span,
.kansai span,
.hokkaido span,
.okinawa span,
.spring span,
.summer span,
.autumn span,
.winter span {
  color: #e11a4b;
}

.all_japan h4,
.tokyo h4,
.kansai h4,
.hokkaido h4,
.okinawa h4,
.spring h4,
.summer h4,
.autumn h4,
.winter h4 {
  font-size: 18px;
  line-height: 30px;
}

.all_japan img,
.tokyo img,
.kansai img,
.hokkaido img,
.okinawa img,
.spring img,
.summer img,
.autumn img,
.winter img {
  width: 100%;
}

.all_japan_msg,
.tokyo_msg,
.kansai_msg,
.hokkaido_msg,
.okinawa_msg,
.spring_msg,
.summer_msg,
.autumn_msg,
.winter_msg {
  font-size: 16px;
  margin-top: -35px;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .works_wrapper {
    margin-bottom: 45px;
  }
  .works_header {
    align-items: center;
    margin-bottom: 30px;
  }

  .works_TATE_line img {
    height: 7vw;
    min-height: 50px;
  }

  .works_header h2 {
    margin: 0 20px 0 10px;
    font-size: max(3.3vw, 18px);
  }

  .works_line {
    margin-top: 0;
    line-height: 0;
  }

  .project_container {
    margin-bottom: 50px;
  }

  .tvcm_container h3,
  .project_container h3 {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .tvcm_container span,
  .project_container span {
    font-size: 16px;
  }

  .tvcm_intro p,
  .tvcm_client p,
  .project_intro p,
  .project_promotion_video_intro p,
  .tvcm_container span,
  .project_container span {
    font-size: max(1.7vw, 12px);
    line-height: 2;
  }

  .tvcm_intro {
    margin-bottom: 20px;
  }

  .tvcm_container {
    margin-bottom: 25px;
  }

  .project_intro {
    margin-bottom: 40px;
  }

  .project_web_site_container {
    margin-bottom: 20px;
  }
  .project_promotion_video_intro {
    margin-bottom: 40px;
  }

  .project_promotion_video_intro p {
    margin-bottom: 10px;
  }

  .project_promotion_video_intro p:last-of-type {
    margin-top: 5px;
  }

  /*-----------WORKS_PROJECT_promotion_video_container-------------------------*/

  .all_japan,
  .tokyo,
  .kansai,
  .hokkaido,
  .okinawa,
  .spring,
  .summer,
  .autumn {
    margin-bottom: 20px;
  }

  .all_japan h4,
  .tokyo h4,
  .kansai h4,
  .hokkaido h4,
  .okinawa h4,
  .spring h4,
  .summer h4,
  .autumn h4,
  .winter h4 {
    font-size: max(1.7vw, 12px);
    line-height: 2;
  }
}

/*-----------CONTACT-------------------------*/

#contact {
  padding-top: 100px;
  margin-top: -100px;
}

/**--------Arrow--------------**/

.contact_header {
  display: flex;
  margin-bottom: 70px;
  vertical-align: middle;
}

.contact_TATE_line {
  width: fit-content;
}

.contact_header h2 {
  font-size: 28px;
  letter-spacing: 0.01em;
  margin: 20px 40px 0px 20px;
}

.contact_line {
  width: 100%;
  margin: 30px 0px 0px 0px;
}

.contact_line img {
  width: 100%;
}

.contact_msg p {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 80px;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .contact_header {
    align-items: center;
    margin-bottom: 30px;
  }

  .contact_TATE_line img {
    height: 7vw;
    min-height: 50px;
  }

  .contact_header h2 {
    margin: 0 20px 0 10px;
    font-size: max(3.3vw, 14px);
  }

  .contact_line {
    margin-top: 0;
    line-height: 0;
  }

  .contact_msg p {
    font-size: max(1.7vw, 12px);
    line-height: 2;
    margin-bottom: 40px;
  }
}

/*-----------★★★CONTACT 入力フォーム-------------------------**/

.form_wrapper {
  width: 100%;
  max-width: 715px;
  margin: 0 auto;
  font-size: 16px;
}
table.form_table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

table.form_table tr {
  display: block;
  position: relative;
  margin-bottom: 40px;
}

table.form_table td,
table.form_table th {
  display: block;
  font-weight: normal;
}

table.form_table th {
  text-align: left;
  margin-bottom: 5px;
}

table.form_table input,
table.form_table select,
table.form_table textarea {
  padding: 5px 10px;
  width: 100%;
  border: 1px solid #00293e;
  border-radius: 5px;
}

table.form_table input,
table.form_table select {
  height: 40px;
}

.form_select::before,
.form_select::after {
  content: "";
  position: absolute;
  top: 65%;
  display: block;
  width: 1px;
  height: 10px;
  background: #00293e;
  pointer-events: none;
}

.form_select::before {
  right: 24px;
  transform: rotate(-25deg);
}
.form_select::after {
  right: 20px;
  transform: rotate(25deg);
}

table.form_table textarea {
  height: 350px;
}

.form_privacy {
  font-size: 18px;
  margin-top: 80px;
}
.form_privacy label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form_privacy a {
  text-decoration: underline;
}

table.form_table .form_privacy input {
  width: 35px;
  height: 35px;
  margin-right: 15px;
}

.error {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  color: #c3182c;
}

.form_privacy .error {
  top: -20px;
}

/*-----------★★★送信ボタン------------**/

.form_submit {
  margin-top: 10px;
  text-align: center;
}
.form_submit input[type="submit"] {
  font-family: "Papyrus", "yuji-syuku", serif;
  font-size: 24px;
  background: #00293e;
  color: #fff;
  padding: 8px 80px 0;
  border-radius: 5px;
}

/**---------sp------------------------**/

@media screen and (max-width: 768px) {
  .form_wrapper {
    font-size: max(1.7vw, 12px);
    line-height: 2;
  }

  table.form_table {
    width: 80%;
  }

  table.form_table input,
  table.form_table select {
    height: 35px;
  }

  table.form_table tr {
    margin-bottom: 20px;
  }

  table.form_table th {
    margin-bottom: 0;
  }

  .form_privacy {
    font-size: max(1.7vw, 14px);
    margin-top: 40px;
  }

  table.form_table .form_privacy input {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }

  .form_submit {
    margin-top: 0;
  }

  .form_submit input[type="submit"] {
    font-size: max(1.7vw, 20px);
    padding-left: 50px;
    padding-right: 50px;
  }

  .error {
    font-size: max(1.7vw, 12px);
  }
}

/*-----------確認画面------------**/

.confirm main {
  padding: 80px 0 130px;
}
.confirm_header {
  display: flex;
  margin-bottom: 70px;
  vertical-align: middle;
}

.confirm_TATE_line {
  width: fit-content;
}

.confirm_header h2 {
  font-size: 28px;
  letter-spacing: 0.01em;
  margin: 20px 40px 0px 20px;
  white-space: nowrap;
}

.confirm_line {
  width: 100%;
  margin: 30px 0px 0px 0px;
}

.confirm_line img {
  width: 100%;
}

.form_confirm .form_table tr {
  margin-bottom: 65px;
}

.form_confirm .form_table tr:last-of-type {
  display: none;
}

.form_confirm .form_table td {
  padding: 16px 10px;
  width: 100%;
  border: 1px solid #231815;
  border-radius: 5px;
  box-shadow: 20px 20px 0 #00283d;
}

/*-----------★★★確認画面送信ボタン------------**/

.confirm_submit {
  margin-top: 60px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.confirm_submit input[type="submit"] {
  width: 23.2vw;
  font-family: "Papyrus", "yuji-syuku", serif;
  font-size: 24px;
  background: #00293e;
  color: #fff;
  padding: 8px 10px 0;
  border-radius: 5px;
}

.confirm_submit input[type="submit"].form_submit_return {
  margin-right: 40px;
  background: #c3182c;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .confirm .menu-container {
    opacity: 1;
    visibility: visible;
  }

  .confirm_header {
    align-items: center;
    margin-bottom: 30px;
  }

  .confirm_TATE_line img {
    height: 7vw;
    min-height: 50px;
  }

  .confirm_header h2 {
    margin: 0 20px 0 10px;
    font-size: max(3.3vw, 18px);
  }

  .confirm_line {
    margin-top: 0;
    line-height: 0;
  }

  .confirm main {
    padding: 70px 0 60px;
  }

  .form_confirm .form_table td {
    padding-top: 4px;
    padding-bottom: 4px;
    width: calc(100% - 7px);
    box-shadow: 7px 7px 0 #00283d;
  }

  .form_confirm .form_table tr {
    margin-bottom: 25px;
  }

  .confirm_submit {
    margin-top: 35px;
  }

  .confirm_submit input[type="submit"] {
    font-size: max(1.7vw, 20px);
    width: 145px;
  }

  .confirm_submit input[type="submit"].form_submit_return {
    margin-right: 20px;
  }
}

/*-----------完了画面------------**/

.finish_header {
  display: flex;
  flex-direction: column;
  margin-bottom: 70px;
  vertical-align: middle;
  justify-content: space-between;
}

.finish_header h2 {
  font-size: 48px;
  letter-spacing: 0.01em;
  margin: -35px 40px 0px 20px;
  white-space: nowrap;
}

.finish_line {
  width: fit-content;
  margin-left: auto;
  margin-top: -10px;
}

.finish_line img {
  width: 100%;
}

.finish_msg {
  text-align: center;
  font-size: 21px;
  letter-spacing: 0.1em;
  line-height: 2;
}

.finish_msg p:first-of-type {
  margin-bottom: 110px;
}

.finish #footer {
  text-align: center;
}

/**---------sp------------------------**/
@media screen and (max-width: 768px) {
  .finish .menu-container {
    opacity: 1;
    visibility: visible;
  }

  .finish main {
    padding-top: 40px;
  }

  .finish_header {
    margin-bottom: 30px;
  }

  .finish_header h2 {
    font-size: max(3.3vw, 14px);
    margin: 40px 0 0;
  }

  .finish_line {
    line-height: 1;
  }

  .finish_msg {
    font-size: max(1.7vw, 12px);
    line-height: 2;
  }

  .finish_msg p:first-of-type {
    margin-bottom: 50px;
  }
}