@charset "utf-8";

html {
  scroll-behavior: smooth;
}

main {
  letter-spacing: 4px;
  line-height: normal;
}

/* mainのフォント */
.text_corporate {
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.text_NotoSansJP {
  font-family: Noto Sans JP, serif;
  font-style: normal;
}

/* ヘッダー */
header {
  border: 30px solid black;
  background-color: #ebebeb;
  height: 100vh;
  width: 100%;
  position: relative;
  display: inline-block;
  min-width: 320px;
}

@media screen and (max-width: 768px) {
  header {
    border: 15px solid black;
  }
}

@media screen and (max-width: 480px) {
  header {
    border: 10px solid black;
  }
}

h1 {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 160px;
  z-index: 4;
  font-family: Impact, serif;
  letter-spacing: 10px;
  line-height: 150px;
  text-shadow: 3px 3px white;
}

@media screen and (max-width: 1280px) {
  h1 {
    top: 38%;
    font-size: 150px;
  }
}

@media screen and (max-width: 1024px) {
  h1 {
    top: 41%;
    font-size: 113px;
    letter-spacing: 5px;
    line-height: 116px;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    top: 44%;
    font-size: 77px;
    letter-spacing: 3px;
    line-height: 82px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    top: 46%;
    font-size: 47px;
    line-height: 46px;
  }
}

.year {
  font-family: Impact, serif;
  position: absolute;
  top: 42.5%;
  right: 39%;
  text-shadow: 3px 3px white;
  font-size: 100px;
  z-index: 5;
}

@media screen and (max-width: 1639px) {
  .year {
    top: 42.5%;
    right: 28%;
    font-size: 100px;
  }
}

@media screen and (max-width: 1280px) {
  .year {
    top: 42.5%;
    right: 28%;
    font-size: 100px;
  }
}

@media screen and (max-width: 1024px) {
  .year {
    top: 44.5%;
    right: 29%;
    font-size: 75px;
  }
}

@media screen and (max-width: 768px) {
  .year {
    top: 47%;
    right: 26%;
    font-size: 48px;
  }
}

@media screen and (max-width: 480px) {
  .year {
    top: 47%;
    right: 25%;
    font-size: 34px;
  }
}

.title_ja {
  position: absolute;
  top: 61.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px white;
  font-size: 45px;
  font-family: " Noto Sans JP Bold", sans-serif;
  font-weight: bold;
  z-index: 6;
  white-space: nowrap;
}

@media screen and (max-width: 1280px) {
  .title_ja {
    top: 61.5%;
    font-size: 45px;
  }
}

@media screen and (max-width: 1024px) {
  .title_ja {
    top: 60.5%;
    font-size: 45px;
  }
}

@media screen and (max-width: 768px) {
  .title_ja {
    top: 56.5%;
    font-size: 25px;
  }
}

@media screen and (max-width: 480px) {
  .title_ja {
    top: 53.5%;
    font-size: 16px;
  }
}

.period {
  background-color: #c50018;
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-size: 50px;
  color: white;
  padding: 10px 15px;
  letter-spacing: 2px;
}

@media screen and (max-width: 1280px) {
  .period {
    top: 70%;
    font-size: 45px;
  }
}

@media screen and (max-width: 1024px) {
  .period {
    top: 72%;
    font-size: 36px;
    padding: 8px;
  }
}

@media screen and (max-width: 768px) {
  .period {
    top: 62%;
    font-size: 24px;
    padding: 8px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 480px) {
  .period {
    top: 58%;
    font-size: 16px;
    padding: 6px;
    letter-spacing: 1px;
  }
}

.tool_orange {
  position: absolute;
  top: 5%;
  right: 17%;
  width: 27%;
  z-index: 3;
}

@media screen and (max-width: 1280px) {
  .tool_orange {
    top: 11%;
    right: 13%;
    width: 27%;
  }
}

@media screen and (max-width: 1024px) {
  .tool_orange {
    top: 8%;
    right: 7%;
    width: 35%;
  }
}

@media screen and (max-width: 768px) {
  .tool_orange {
    top: 21%;
    right: 7%;
    width: 27%;
  }
}

@media screen and (max-width: 480px) {
  .tool_orange {
    top: 22%;
    right: 4%;
    width: 40%;
  }
}

.tool_blue {
  position: absolute;
  z-index: 3;
  width: 30%;
  bottom: 2%;
  left: 8%;
}

@media screen and (max-width: 1280px) {
  .tool_blue {
    width: 30%;
    bottom: 7%;
    left: 8%;
  }
}

@media screen and (max-width: 1024px) {
  .tool_blue {
    width: 35%;
    bottom: 6%;
    left: 8%;
  }
}

@media screen and (max-width: 768px) {
  .tool_blue {
    width: 30%;
    bottom: 20%;
    left: 8%;
  }
}

@media screen and (max-width: 480px) {
  .tool_blue {
    width: 45%;
    bottom: 21%;
    left: 4%;
  }
}

.penki_blue {
  position: absolute;
  top: 1%;
  left: 12%;
  width: 40%;
  z-index: 1;
}

@media screen and (max-width: 1280px) {
  .penki_blue {
    top: 7%;
    left: 9%;
    width: 52%;
  }
}

@media screen and (max-width: 1024px) {
  .penki_blue {
    top: 2%;
    left: 2%;
    width: 67%;
  }
}

@media screen and (max-width: 768px) {
  .penki_blue {
    top: 186px;
    left: 10%;
    width: 70%;
  }
}

@media screen and (max-width: 480px) {
  .penki_blue {
    top: 30%;
    left: 1%;
    width: 98%;
  }
}

.penki_yellow {
  position: absolute;
  z-index: 7;
  top: 33%;
  right: 10%;
  width: 20%;
}

@media screen and (max-width: 1280px) {
  .penki_yellow {
    top: 33%;
    right: 4%;
    width: 25%;
  }
}

@media screen and (max-width: 1024px) {
  .penki_yellow {
    top: 34%;
    right: 0%;
    width: 27%;
  }
}

@media screen and (max-width: 768px) {
  .penki_yellow {
    top: 60%;
    right: 3%;
    width: 37%;
  }
}

@media screen and (max-width: 480px) {
  .penki_yellow {
    top: 56%;
    right: 1%;
    width: 43%;
  }
}

/* main */
/* 詳細 */
.penki_bg {
  background-image: url(../image/penki_background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.linebreak {
  display: none;
}

@media screen and (max-width: 1280px) {
  .linebreak {
    display: block;
  }
}

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

.lead {
  padding: 100px 0;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
}

@media screen and (max-width: 1280px) {
  .lead {
    padding: 80px 0;
    line-height: 40px;
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .lead {
    padding: 50px 0;
    line-height: 20px;
    font-size: 18px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 480px) {
  .lead {
    padding: 30px 0;
    line-height: 20px;
    font-size: 12px;
  }
}

.black-bg {
  color: white;
  background-color: black;
  display: inline-block;
  margin: 5px 0;
  padding: 0 15px;
}

@media screen and (max-width: 1280px) {
  .black-bg {
    margin: 5px 0;
    padding: 5px 10px;
  }
}

@media screen and (max-width: 768px) {
  .black-bg {
    margin: 4px;
    padding: 10px;
  }
}

@media screen and (max-width: 480px) {
  .black-bg {
    margin: 2px;
    padding: 8px 3px;
  }
}

/* monozukuriweekとは */
@media screen and (max-width: 1280px) {
  .title_explanation {
    width: 95%;
  }
}

.description {
  padding: 80px 0;
  font-size: 30px;
  text-align: left;
  max-width: 1370px;
  margin: 0 auto;
  line-height: 80px;
}

@media screen and (max-width: 1280px) {
  .description {
    padding: 60px 0;
    font-size: 24px;
    line-height: 51px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 768px) {
  .description {
    padding: 40px 0;
    font-size: 18px;
    line-height: 40px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 480px) {
  .description {
    padding: 20px 0;
    font-size: 12px;
    line-height: 30px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 1280px) {
  .explanatorytext {
    margin: 0 20px;
    word-break: keep-all;
  }
}

@media screen and (max-width: 768px) {
  .explanatorytext {
    margin: 0 15px;
    word-break: keep-all;
  }
}

.bold {
  font-weight: 700;
  font-size: 35px;
}

@media screen and (max-width: 1280px) {
  .bold {
    font-size: 28px;
  }
}

@media screen and (max-width: 768px) {
  .bold {
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 480px) {
  .bold {
    font-size: 14px;
  }
}

/* キャラ紹介 */

.title_chara {
  background-color: black;
  color: white;
  margin: 0px !important;
  padding: 40px 0;
  font-size: 60px;
  font-weight: bold;
}

@media screen and (max-width: 1280px) {
  .title_chara {
    padding: 30px 0;
    font-size: 46px;
  }
}

@media screen and (max-width: 768px) {
  .title_chara {
    padding: 25px 0;
    font-size: 28px;
  }
}

@media screen and (max-width: 480px) {
  .title_chara {
    padding: 20px 0;
    font-size: 24px;
  }
}

.chara_name {
  max-width: 610px;
  margin: 0 auto;
}

@media screen and (max-width: 1280px) {
  .chara_name {
    max-width: 420px;
  }
}

@media screen and (max-width: 768px) {
  .chara_name {
    max-width: 271px;
  }
}

@media screen and (max-width: 480px) {
  .chara_name {
    max-width: 175px;
  }
}

.name_eg {
  font-family: Impact, serif;
  color: black;
  font-size: 80px;
  font-family: Impact, serif;
  margin-bottom: 0px !important;
}

@media screen and (max-width: 1280px) {
  .name_eg {
    font-size: 51px;
  }
}

@media screen and (max-width: 768px) {
  .name_eg {
    font-size: 37px;
  }
}

@media screen and (max-width: 480px) {
  .name_eg {
    font-size: 23px;
  }
}

.name_ja {
  font-weight: 700;
  color: black;
  font-size: 33px;
  margin-top: 0px !important;
  text-align: right;
}

@media screen and (max-width: 1280px) {
  .name_ja {
    font-size: 33px;
  }
}

@media screen and (max-width: 768px) {
  .name_ja {
    font-weight: 600;
    font-size: 20px;
  }
}

@media screen and (max-width: 480px) {
  .name_ja {
    font-size: 16px;
  }
}

.chara_introduction {
  text-align: center;
  font-size: 30px;
  position: relative;
  min-height: 500px;
}

@media screen and (max-width: 1280px) {
  .chara_introduction {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .chara_introduction {
    font-size: 15px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 480px) {
  .chara_introduction {
    font-size: 13px;
    min-height: 280px;
  }
}

.girl_student {
  position: absolute;
  width: 16%;
  top: 105px;
  left: 40px;
}

@media screen and (max-width: 1280px) {
  .girl_student {
    width: 18%;
    top: 217px;
    left: 62px;
  }
}

@media screen and (max-width: 1024px) {
  .girl_student {
    width: 19%;
    top: 103px;
    left: 22px;
  }
}

@media screen and (max-width: 768px) {
  .girl_student {
    width: 18%;
    top: 73px;
    left: 14px;
  }
}

@media screen and (max-width: 480px) {
  .girl_student {
    width: 16%;
    top: 54px;
    left: 10px;
  }
}

.girl_work {
  position: absolute;
  width: 17%;
  bottom: -90px;
  right: 40px;
}

@media screen and (max-width: 1280px) {
  .girl_work {
    width: 18%;
    top: 234px;
    right: 50px;
  }
}

@media screen and (max-width: 1024px) {
  .girl_work {
    width: 19%;
    top: 332px;
    right: 1px;
  }
}

@media screen and (max-width: 768px) {
  .girl_work {
    width: 20%;
    top: 68px;
    right: 13px;
  }
}

@media screen and (max-width: 480px) {
  .girl_work {
    width: 16%;
    top: 54px;
    right: 10px;
  }
}

.chara_introduction p {
  margin: 40px 0;
  line-height: 2.5ch;
}

@media screen and (max-width: 1280px) {
  .chara_introduction p {
    margin: 30px 0;
  }
}

@media screen and (max-width: 768px) {
  .chara_introduction p {
    margin: 20px 0;
  }
}

@media screen and (max-width: 480px) {
  .chara_introduction p {
    margin: 15px 0;
  }
}

.chara_introduction p span {
  font-weight: bold;
}

.chara_school {
  color: white;
  text-align: center;
  background-color: black;
  font-size: 30px;
  padding: 40px 0;
  line-height: 2.5ch;
}

@media screen and (max-width: 1280px) {
  .chara_school {
    font-size: 20px;
    padding: 30px 0;
  }
}

@media screen and (max-width: 768px) {
  .chara_school {
    font-size: 16px;
    padding: 25px 0;
    line-height: 3ch;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 480px) {
  .chara_school {
    font-size: 12px;
    padding: 20px 0;
  }
}

/* 企業一覧 */
.list {
  padding: 80px 0;
  background-image: url(../image/penki_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 1280px) {
  .list {
    padding: 60px 0;
  }
}

@media screen and (max-width: 768px) {
  .list {
    padding: 50px 0;
  }
}

@media screen and (max-width: 480px) {
  .list {
    padding: 20px 0;
  }
}

h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 80px;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: inline-block;
}

@media screen and (max-width: 1280px) {
  h2 {
    margin-bottom: 30px;
    font-size: 55px;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 768px) {
  h2 {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 480px) {
  h2 {
    padding: 20px 0;
    margin-bottom: 0px;
    font-size: 24px;
  }
}

.wrap_name {
  text-align: center;
}

.wrap {
  text-align: left;
}

@media screen and (max-width: 1639px) {
  .list .wrap {
    text-align: center;
  }
}

.list_flexbox {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0px 15px;
}

@media screen and (max-width: 1639px) {
  .list_flexbox {
    display: inline-block;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .list_flexbox {
    text-align: left;
    margin: 0px 10px;
  }
}

.item {
  margin-bottom: 60px;
  background-color: rgba(255, 190, 68, 0.8);
  padding: 15px 25px;
  border-radius: 80px;
}

@media screen and (max-width: 1280px) {
  .item {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 768px) {
  .item {
    margin-bottom: 25px;
  }
}

@media screen and (max-width: 480px) {
  .item {
    padding: 15px 30px 10px;
  }
}

.cancel_item {
  background-color: rgba(255, 190, 68, 0.4) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

.item:hover {
  background-color: rgba(255, 190, 68);
}

.cancel_item:hover {
  background-color: rgba(255, 190, 68) !important;
}

.companyname p {
  font-size: 22px;
  margin-bottom: 5px;
  font-weight: 900;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  .companyname p {
    font-size: 18px;
    margin: 0 auto;
    width: 95%;
  }
}

@media screen and (max-width: 480px) {
  .companyname p {
    font-size: 16px;
  }
}

.companyname small {
  font-size: 20px;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .companyname small {
    font-size: 13px;
    font-weight: 500;
  }
}

@media screen and (max-width: 480px) {
  .companyname small {
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px !important;
    display: block;
  }
}

.full {
  color: rgb(230, 15, 0);
}

@media screen and (max-width: 480px) {
  .full {
    display: block;
    text-align: center;
  }
}

.full_br {
  display: none;
}

@media screen and (max-width: 480px) {
  .full_br {
    display: block;
  }
}

.method {
  text-align: center;
  font-size: 22px;
  margin-top: 10px;
  background-color: rgba(200, 0, 0, 0.8);
  border-radius: 80px;
  padding: 40px 50px;
  color: white;
  display: inline-block;
}

@media screen and (max-width: 1280px) {
  .method {
    font-size: 18px;
    padding: 25px 50px;
  }
}

@media screen and (max-width: 768px) {
  .method {
    font-size: 13px;
    margin: 10px;
    padding: 25px 50px;
    word-break: keep-all;
  }
}

@media screen and (max-width: 480px) {
  .method {
    font-size: 12px;
    margin: 10px;
    border-radius: 49px;
    padding: 15px 10px;
    word-break: keep-all;
  }
}

/* 企業ごと */
/*    　　　共通　　　    */
/* 　 上全体  　*/
/* 体験名 */
h3 {
  font-size: 60px;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 24px;
  z-index: 8;
}

@media screen and (max-width: 1639px) {
  h3 {
    font-size: 33px;
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 1280px) {
  h3 {
    font-size: 30px;
    margin-bottom: 12px;
    line-height: 2.5rem;
  }
}

@media screen and (max-width: 480px) {
  h3 {
    font-size: 20px;
    line-height: 2rem;
  }
}

.space_none {
  white-space: normal;
}
/* 写真 */
.photo_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 1280px) {
  .photo_grid {
    width: 70%;
    margin: 0 0 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .photo_grid {
    width: 100%;
    margin: 0;
  }
}
.photo_grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/*    　　　右写真ver　　　    */
.left_box_1,
.right_box_1 {
  flex: 1;
}

/* 　 左側 　 */
/* 左全体 */
.company_above {
  display: flex;
  gap: 20px;
  background-image: url(../image/gradation_bg.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100% 100%;
}

@media screen and (max-width: 1280px) {
  .company_above {
    display: block;
    background-size: cover;
  }
}

.left_box_1 {
  color: white;
  position: relative;
  padding: 20px 0 100px 80px;
}

@media screen and (max-width: 1639px) {
  .left_box_1 {
    padding: 20px;
  }
}

@media screen and (max-width: 1280px) {
  .left_box_1 {
    padding: 40px 80px 15px;
  }
}

@media screen and (max-width: 768px) {
  .left_box_1 {
    padding: 40px 20px;
  }
}

@media screen and (max-width: 480px) {
  .left_box_1 {
    padding: 20px 15px;
  }
}
/* 説明 */
.company_explanation {
  max-width: 600px;
  font-size: 19px;
}

@media screen and (max-width: 1639px) {
  .company_explanation {
    font-size: 18px;
    max-width: 800px;
  }
}

@media screen and (max-width: 1280px) {
  .company_explanation {
    max-width: none;
  }
}

@media screen and (max-width: 480px) {
  .company_explanation {
    font-size: 14px;
  }
}

/* 　　右側　　　*/
/* 写真 */
.right_img_3,
.right_img_4 {
  transform: translateX(-200px);
}

@media screen and (max-width: 1639px) {
  .right_img_3,
  .right_img_4 {
    transform: translateX(-30px);
  }
}

@media screen and (max-width: 1280px) {
  .right_img_3,
  .right_img_4 {
    transform: translateX(0px);
  }
}

/*    　　　左写真ver　　　    */
/* 全体 */
/* 横並び */
.company_above_2 {
  display: flex;
  gap: 20px;
  background-image: url(../image/gradation_bg.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100% 100%;
}

@media screen and (max-width: 1280px) {
  .company_above_2 {
    display: flex;
    background-size: cover;
    flex-direction: column-reverse;
    gap: 0;
  }
}
/* 　 左側 　 */
/* 写真 */
.left_img_3,
.left_img_4 {
  transform: translateX(200px);
}

@media screen and (max-width: 1639px) {
  .left_img_3,
  .left_img_4 {
    transform: translateX(30px);
  }
}

@media screen and (max-width: 1280px) {
  .left_img_3,
  .left_img_4 {
    transform: translateX(0px);
  }
}

/* 右側 */
.left_box_2 {
  color: white;
  position: relative;
  padding: 20px 0 100px 140px;
}

@media screen and (max-width: 1639px) {
  .left_box_2 {
    padding: 20px;
  }
}

@media screen and (max-width: 1280px) {
  .left_box_2 {
    padding: 40px 80px 15px;
  }
}

@media screen and (max-width: 768px) {
  .left_box_2 {
    padding: 40px 20px;
  }
}

@media screen and (max-width: 480px) {
  .left_box_2 {
    padding: 20px 15px;
  }
}
/* 説明 */
.company_explanation_2 {
  max-width: 600px;
  font-size: 19px;
  margin-left: auto;
  text-align: left;
}

@media screen and (max-width: 1639px) {
  .company_explanation_2 {
    font-size: 18px;
    max-width: 800px;
  }
}

@media screen and (max-width: 1280px) {
  .company_explanation_2 {
    max-width: none;
  }
}

@media screen and (max-width: 480px) {
  .company_explanation_2 {
    font-size: 14px;
  }
}
/* 　　　　　　体験内容　　　　　　 */
/* 全体 */
.content {
  margin: 80px 0 80px;
  display: flex;
  justify-content: space-around;
  position: relative;
}

@media screen and (max-width: 1280px) {
  .content {
    margin: 60px 0;
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .content {
    margin: 40px 0;
  }
}

@media screen and (max-width: 480px) {
  .content {
    margin: 20px 0;
  }
}

/* 左側 */
h4 {
  font-size: 45px;
  margin-bottom: 10px;
  font-weight: bold;
}

@media screen and (max-width: 1280px) {
  h4 {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  h4 {
    font-size: 36px;
  }
}

@media screen and (max-width: 480px) {
  h4 {
    font-size: 24px;
  }
}

.experiencecontent p {
  font-size: 20px;
  width: 850px;
}

@media screen and (max-width: 1280px) {
  .experiencecontent p {
    font-size: 18px;
    width: 70%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .experiencecontent p {
    font-size: 16px;
    width: 90%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .experiencecontent p {
    font-size: 14px;
    width: 95%;
  }
}

.detail p {
  font-size: 18px !important;
  border: solid 1px black;
  margin-top: 10px;
  padding: 10px 15px;
  word-break: keep-all;
}

@media screen and (max-width: 768px) {
  .detail p {
    font-size: 16px !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    white-space: normal;
  }
}

@media screen and (max-width: 1280px) {
  .detail p {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 480px) {
  .detail p {
    font-size: 12px !important;
  }
}

.price {
  color: red;
  font-weight: bold;
}

.boldletter {
  font-weight: bold;
}

@media screen and (max-width: 1024px) {
  .aitesu_br br:nth-child(1),
  .aitesu_br br:nth-child(2),
  .aitesu_br br:nth-child(3) {
    display: none;
  }
}
/* 右側 */
.visit_illust1 {
  display: none;
}

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

.visit_illust2 {
  position: absolute;
  display: none;
}

/* 　　　　　　スケジュール　　　　　　 */
.schedule {
  padding: 80px 0;
  text-align: center;
  background-image: url(../image/orangedots_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 1280px) {
  .schedule {
    padding: 60px 0;
  }
}

@media screen and (max-width: 768px) {
  .schedule {
    padding: 40px 0;
  }
}

@media screen and (max-width: 480px) {
  .schedule {
    padding: 20px 0;
  }
}

h5 {
  font-size: 50px;
  margin-bottom: 24px;
  font-weight: bold;
}

@media screen and (max-width: 1280px) {
  h5 {
    font-size: 45px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  h5 {
    font-size: 36px;
  }
}

@media screen and (max-width: 480px) {
  h5 {
    font-size: 24px;
  }
}

.schedule_grid {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: max-content;
  margin: 0 auto;
  width: 100%;
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .schedule_grid {
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .schedule_grid {
    gap: 16px;
  }
}

@media screen and (max-width: 480px) {
  .schedule_grid {
    gap: 14px;
  }
}

.time_1,
.time_3,
.time_5 {
  transform: translateX(-30px);
}

@media screen and (max-width: 1639px) {
  .time_1,
  .time_3,
  .time_5 {
    width: 30%;
  }
}

@media screen and (max-width: 1280px) {
  .time_1,
  .time_3,
  .time_5 {
    width: 40%;
  }
}

@media screen and (max-width: 1024px) {
  .time_1,
  .time_3,
  .time_5 {
    width: 65%;
  }
}

@media screen and (max-width: 786px) {
  .time_1,
  .time_3,
  .time_5 {
    width: 75%;
  }
}

@media screen and (max-width: 480px) {
  .time_1,
  .time_3,
  .time_5 {
    transform: translateX(0);
    width: 90%;
  }
}

.time_2,
.time_4 {
  transform: translateX(30px);
}

@media screen and (max-width: 1639px) {
  .time_2,
  .time_4 {
    width: 30%;
  }
}

@media screen and (max-width: 1280px) {
  .time_2,
  .time_4 {
    width: 40%;
  }
}

@media screen and (max-width: 1024px) {
  .time_2,
  .time_4 {
    width: 65%;
  }
}

@media screen and (max-width: 786px) {
  .time_2,
  .time_4 {
    width: 75%;
  }
}

@media screen and (max-width: 480px) {
  .time_2,
  .time_4 {
    transform: translateX(0);
    width: 90%;
  }
}

/* .schedule_grid img {
  width: 30%;
} */
/* 　　　　　　概要と申込　　　　　　 */
.wrapper {
  text-align: center;
}

.orangebg {
  background-image: url(../image/orange_bg.png);
}

.company_under {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media screen and (max-width: 1639px) {
  .company_under {
    margin: 0 15px;
  }
}

@media screen and (max-width: 1280px) {
  .company_under {
    padding: 60px 0;
  }
}

@media screen and (max-width: 768px) {
  .company_under {
    padding: 40px 0;
  }
}

@media screen and (max-width: 480px) {
  .company_under {
    padding: 30px 0;
  }
}

/* 会社概要 */
h6 {
  font-size: 30px;
  margin-bottom: 12px;
  font-weight: bold;
  white-space: nowrap;
}

@media screen and (max-width: 1280px) {
  h6 {
    font-size: 26px;
    margin-bottom: 8px;
    white-space: normal;
  }
}

@media screen and (max-width: 768px) {
  h6 {
    font-size: 22px;
  }
}

@media screen and (max-width: 768px) {
  h6 {
    font-size: 18px;
    margin-bottom: 6px;
  }
}

.companyprofile {
  word-break: break-all !important;
  overflow-wrap: break-word;
  white-space: normal;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.companyprofile p {
  font-size: 20px;
  word-break: keep-all;
  line-height: 35px !important;
}

@media screen and (max-width: 768px) {
  .companyprofile p {
    font-size: 18px;
    line-height: 25px !important;
  }
}

@media screen and (max-width: 480px) {
  .companyprofile p {
    font-size: 16px;
  }
}

/* 申込ボタン */
.application {
  color: white;
  text-align: center;
  background-color: #c50018;
  margin-top: 24px;
  padding: 25px 60px;
  border-radius: 90px;
  font-size: 20px;
  word-break: keep-all;
  letter-spacing: 3px !important;
}

@media screen and (max-width: 1280px) {
  .application {
    padding: 25px 60px;
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .application {
    margin-top: 18px;
    padding: 18px 40px;
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .application {
    margin-top: 14px;
    padding: 14px 24px;
    font-size: 14px;
  }
}

.application:hover {
  background-color: #e6001f;
}

/* キャンセル待ち */
.cancel_box {
  margin-top: 24px;
}

@media screen and (max-width: 480px) {
  .cancel_box {
    margin: 24px 10px 8px;
  }
}

.cancel_box p {
  font-size: 1.5em;
  font-weight: bold;
}

@media screen and (max-width: 1024px) {
  .cancel_box p {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .cancel_box p {
    font-size: 16px;
  }
}

.hide-sp1,
.hide-sp5,
.hide-sp3,
.department_br1 {
  display: none;
}

@media screen and (max-width: 1024px) {
  .kotera_br,
  .tukinowa_br {
    display: block;
  }
  .hide-sp3,
  .hide-sp4 {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .hide-sp1,
  .hide-sp3,
  .hide-sp5,
  .department_br1 {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .hide-sp1,
  .hide-sp2,
  .hide-sp3,
  .hide-sp4,
  .hide-sp5,
  .department_br2 {
    display: none;
  }
  .department_br1 {
    display: block;
  }
}

.cancel_box span {
  text-decoration: underline;
}

.cancel_btn {
  background-color: #b22222 !important;
}

.cancel_btn:hover {
  background-color: #cc3333 !important;
}

/* 部があるとき */
/* ボタン　*/
.application_flex {
  display: flex;
  justify-content: center;
  gap: 40px;
}

@media screen and (max-width: 1280px) {
  .application_flex {
    gap: 0px;
    flex-direction: column;
  }
}
/* スケジュール2.3部 */
.time_flex {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .time_flex {
    flex-direction: column;
    gap: 20px;
  }
}

.time_flex p {
  font-size: 30px;
  font-weight: bold;
}

@media screen and (max-width: 1280px) {
  .time_flex p {
    font-size: 23px;
  }
}

@media screen and (max-width: 480px) {
  .time_flex p {
    font-size: 20px;
  }
}

.time_flex img {
  width: 80%;
}

@media screen and (max-width: 1280px) {
  .time_flex img {
    width: 40% !important;
  }
}

@media screen and (max-width: 1024px) {
  .time_flex img {
    width: 50% !important;
  }
}

@media screen and (max-width: 768px) {
  .time_flex img {
    width: 75% !important;
  }
}

@media screen and (max-width: 480px) {
  .time_flex img {
    width: 85% !important;
  }
}
/* 会社ごとの細かなところ */
/* 月の輪のスケジュールの間の文字 */
.schedule_grid small {
  margin: -25px 0;
  max-width: 450px;
  text-align: left;
}

@media screen and (max-width: 1280px) {
  .schedule_grid small {
    margin: -11px 0 0;
  }
}

@media screen and (max-width: 480px) {
  .schedule_grid small {
    max-width: 281px;
  }
}
/* 小寺 */
.kotera_time {
  width: 60% !important;
}

@media screen and (max-width: 1280px) {
  .kotera_time img {
    width: 40% !important;
  }
}

@media screen and (max-width: 1024px) {
  .kotera_time img {
    width: 50% !important;
  }
}

@media screen and (max-width: 768px) {
  .kotera_time img {
    width: 75% !important;
  }
}

@media screen and (max-width: 480px) {
  .kotera_time img {
    width: 85% !important;
  }
}
/* 黒鉛の体験名が長いから前のパディングを減らす */
.kokuen_padding {
  padding: 20px 0 100px 40px !important;
}

@media screen and (max-width: 1639px) {
  .kokuen_padding {
    padding: 20px !important;
  }
}

@media screen and (max-width: 1280px) {
  .kokuen_padding {
    padding: 40px 80px 15px !important;
  }
}

@media screen and (max-width: 768px) {
  .kokuen_padding {
    padding: 20px 15px !important;
  }
}
/* 上又の体験名が長いから前のパディングを減らす */
.uemata_padding {
  padding: 20px 0 100px;
}

@media screen and (max-width: 1639px) {
  .uemata_padding {
    padding: 20px !important;
  }
}

@media screen and (max-width: 1280px) {
  .uemata_padding {
    padding: 40px 80px 15px !important;
  }
}

@media screen and (max-width: 768px) {
  .uemata_padding {
    padding: 20px 15px !important;
  }
}
/*ドラゴンの体験名が長いから前のパディングを減らす */
.dragon_padding {
  padding: 20px 0 100px 80px !important;
}

@media screen and (max-width: 1639px) {
  .dragon_padding {
    padding: 20px !important;
  }
}

@media screen and (max-width: 1280px) {
  .dragon_padding {
    padding: 40px 80px 15px !important;
  }
}

@media screen and (max-width: 768px) {
  .dragon_padding {
    padding: 20px 15px !important;
  }
}
/*       footer       */

footer {
  background-color: black;
  color: white;
  padding: 50px 0;
  font-size: 20px;
}

@media screen and (max-width: 1639px) {
  footer {
    font-size: 16px;
  }
}

@media screen and (max-width: 1024px) {
  footer {
    padding: 25px 0;
  }
}

@media screen and (max-width: 480px) {
  footer {
    padding: 25px 5px;
    font-size: 14px;
  }
}

.cancel_contact {
  line-height: 35px;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  .cancel_contact {
    margin: 0 20px 25px;
    line-height: 30px;
  }
}

@media screen and (max-width: 480px) {
  .cancel_contact {
    line-height: 23px;
  }
}

.contact {
  display: flex;
  justify-content: center;
  gap: 40px;
  letter-spacing: 3px;
}

@media screen and (max-width: 1280px) {
  .contact {
    gap: 15px;
    flex-direction: column;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .contact {
    gap: 11px;
  }
}

@media screen and (max-width: 480px) {
  .contact {
    gap: 9px;
  }
}

.linebreak_footer {
  display: none;
}

@media screen and (max-width: 1024px) {
  .linebreak_footer {
    display: block;
  }
}