@import url("https://use.typekit.net/hqh4drq.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #444;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

p,
li {
  line-height: 1.8;
}

.loader_bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	background: #ddd;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fadeIn {
  opacity: 0;
  transition: 3s;
}
.fadeIn.is-show {
  opacity: 1;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  padding: 1rem;
  background: #fff;
  box-shadow: rgba(50, 50, 50, 0.2) 4px 2px 10px;
  z-index: 99;
}

.inner {
  max-width: 1280px;
  margin: 0 auto;
}

header .inner {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

header img {
  width: 3rem;
  height: 3rem;
}

header .glb_nav {
  height: 3rem;
}

header .glb_nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5rem;
  height: 100%;
}

header .glb_nav ul li {
  position: relative;
  width: 3.5rem;
  height: 100%;
}

header .glb_nav ul li::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  /* background: #ffea00; */
  background: #444;
  bottom: 0.5rem;
  transform: scale(0, 1);
  transform-origin: left top;
  transition:.3s;
  }
  
header .glb_nav ul li:hover::after {
  transform: scale(1, 1);
  }

header .glb_nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

header .glb_nav ul li,
h2,
h3 {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

h2 {
  margin-block-end: 2.5rem;
  font-size: 3rem;
  border-bottom: 1px solid #ddd;
}

.work h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.125rem;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  text-transform: none;
}

h3 {
  margin-block-end: 2.5rem;
  font-size: 2.125rem;
}

.work h3 {
  font-family: "Noto Sans JP", sans-serif;
  margin-block-end: 1.5rem;
  font-size: 1.375rem;
}

.work_about .work_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: none;
  margin-block-end: 0;
}

h4{
  margin-block-end: 1rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.work h4{
  margin-block-end: 1.5rem;
  font-size: 1.125rem;
  font-weight: 400;
}

.kv {
  background: #ffea00;
  width: 100%;
  height: 25rem;
  margin: 5rem 0;
  padding: 2.5rem;
}

.kv .inner {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
}

.kv h1 img {
  width: 25rem;
}

main .inner {
  margin: 0 auto;
}

section {
  margin-block-end: 5rem;
  padding: 1rem;
}

.works img {
  border-radius: 1rem;
}

.works .works_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-block-end: 1.5rem;
}

.works .works_main li,
.works .works_others li {
  transition:.3s;
}

.works .works_main li:hover,
.works .works_others li:hover {
	transform: translateY(0.1875rem);
}

.works .works_others,
.policy .policy_items,
.skill .skill_items {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.works .works_others {
  flex-wrap: wrap;
}

.works .works_others li {
  flex: 1 0 31.5%;
  max-width: 400px;
  height: 100%;
}

@media screen and (max-width:768px) {
  .works .works_others li {
    max-width: 100%;
  }  
}

.works .works_others li a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.works .work_about {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.works .work_about .work_category {
  font-family: "futura-pt", sans-serif;
  color: #555;
  font-size: 0.875rem;
  text-transform: uppercase;
}

.policy .policy_items li,
.skill .skill_items li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
}

.policy .policy_items li::before,
.skill .skill_items li::before {
  content: "";
  display: block;
  width: 5rem;
  height: 5rem;
  margin-block-end: 1rem;
}

.policy .policy_items li:first-child::before {
  background: url(../img/policy_icon01.svg) no-repeat center / contain;
}

.policy .policy_items li:nth-child(2)::before {
  background: url(../img/policy_icon02.svg) no-repeat center / contain;
}

.policy .policy_items li:last-of-type::before {
  background: url(../img/policy_icon03.svg) no-repeat center / contain;
}

.skill .skill_items li:first-child::before {
  background: url(../img/skill_icon01.svg) no-repeat center / contain;
}

.skill .skill_items li:nth-child(2)::before {
  background: url(../img/skill_icon02.svg) no-repeat center / contain;
}

.skill .skill_items li:last-of-type::before {
  background: url(../img/skill_icon03.svg) no-repeat center / contain;
}

@media screen and (max-width:768px) {
  .works .works_others, 
  .policy .policy_items,
  .skill .skill_items {
    flex-direction: column;
  }
}

.about .text_area {
  margin-block-end: 4rem;
}

.about .text_area p:not(:last-of-type) {
  margin-block-end: 1rem;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7.5rem;
  font-size: 0.75rem;
  background: #ffea00;
  text-transform: capitalize;
}

.work {
  margin-block-start: 7.5rem;
}

.work .work_thumbnail_left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
}

@media screen and (max-width:768px) {
  .work .work_thumbnail_left {
    flex-direction: column;
  }
}

.work .work_thumbnail_left .work .work_thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
}

.work_thumbnail_left .work_about {
  width: 100%;
  flex: 1 1 0;
}

.work_thumbnail_left .work_about dt {
  margin-block-end: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.work_thumbnail_left .work_about dd:not(:last-child) {
  margin-block-end: 1rem;
}

.work_thumbnail {
  width: 100%;
  flex: 1 1 0;
}

.work_thumbnail img {
  border-radius: 1rem;
}

.work_thumbnail iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.work_visual_image_column {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

@media screen and (max-width:768px) {
  .work_visual_image_column {
    flex-direction: column;
  }
}

.work_description {
  margin-block-start: 80px;
}
.work_description .work_description_text_wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-end: 80px;
  /* word-break: keep-all; */
}

.work_description .preliminary_work {
  display: flex;
  gap: 24px;
  padding: 1rem;
  background: #f6f6f6;
  border-radius: 8px;
}

@media screen and (max-width:768px) {
  .work_description .preliminary_work {
    flex-direction: column;
  }
}

.annotation {
  font-size: 0.75rem;
}

.button_content {
  display: flex;
  gap: 24px;
  margin-block-start: 1.5rem;
}

.button_content li {
  width: 240px;
  height: 44px;
}

.button_content .button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  border: 2px solid #333;
  border-radius: 0.5rem;
  transition:.3s;
}

@media screen and (max-width:768px) {
  .button_content {
    flex-direction: column;
    gap: 16px;
  }

  .button_content li  {
    width: 100%;
  }
}

.button_content .button::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.button_content .button::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
}

.button_content .button:hover {
  color: #fff;
  background: #333;
  font-weight: 700;
}

.button_content .button_prototype::before {
  background: url(../img/button_icon01.svg) no-repeat center / contain;
}

.button_content .button_prototype:hover::before {
  background: url(../img/button_icon01_hover.svg) no-repeat center / contain;
}

.button_content .button_prototype::after {
  background: url(../img/button_icon05.svg) no-repeat center / contain;
}

.button_content .button_prototype:hover::after {
  background: url(../img/button_icon05_hover.svg) no-repeat center / contain;
}

.button_content .button_design::before {
  background: url(../img/button_icon02.svg) no-repeat center / contain;
}

.button_content .button_design:hover::before {
  background: url(../img/button_icon02_hover.svg) no-repeat center / contain;
}

.button_content .button_page::before {
  background: url(../img/button_icon03.svg) no-repeat center / contain;
}

.button_content .button_page:hover::before {
  background: url(../img/button_icon03_hover.svg) no-repeat center / contain;
}

.button_content .button_page::after {
  background: url(../img/button_icon05.svg) no-repeat center / contain;
}

.button_content .button_page:hover::after {
  background: url(../img/button_icon05_hover.svg) no-repeat center / contain;
}

.button_content .button_detail::before {
  background: url(../img/button_icon04.svg) no-repeat center / contain;
}

.button_content .button_detail:hover::before {
  background: url(../img/button_icon04_hover.svg) no-repeat center / contain;
}

.button_content .button_pdf::before {
  background: url(../img/button_icon02.svg) no-repeat center / contain;
}

.button_content .button_pdf:hover::before {
  background: url(../img/button_icon02_hover.svg) no-repeat center / contain;
}

.button_content .button_pdf::after {
  background: url(../img/button_icon05.svg) no-repeat center / contain;
}

.button_content .button_pdf:hover::after {
  background: url(../img/button_icon05_hover.svg) no-repeat center / contain;
}

.work_visual {
  margin-block-start: 80px;
}

/* 20240604追記 詳細 */
.work_description_detail .work_description_detail_item {
  width: 100%;
  padding: 0.55rem 1rem 2.5rem 1.5rem;
  position: relative;
  border-left: 2px solid #ddd;
}

.work_description_detail .work_description_detail_item::before {
  content: "●";
  position: absolute;
  left: -0.75rem;
  top: 5px;
  font-size: 1.375rem;
  color: #ffea00;
}

.work_description_detail .work_description_detail_item h4 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-end: 1rem;
}

.work_detail_content {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.work_detail_img,
.work_detail_text {
  width: 50%;
}

.work_detail_text {
  /* word-break: keep-all; */
}

.work_detail_text .oblique span {
  display: block;
  transform: skewX(-8deg);
}

.work_detail_text strong,
.work_description_text_wrap strong {
  font-weight: 700;
  background: linear-gradient(transparent 70%, #ffea00 70%);
}

.work_detail_img {
  min-width: 400px;
}

.work_detail_text p:not(:last-of-type) {
  margin-block-end: 1rem;
}

@media screen and (max-width: 768px) {
  .work_detail_content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .work_detail_img,
  .work_detail_text {
    width: 100%;
  }

  .work_detail_img {
    min-width: unset;
  }

  .work_detail_content .button_content {
    max-width: 400px;
    width: 100%;
  }
}
/* 20240604追記 詳細 */

/* ここから20240727追記 */
.work_about dd ul,
.work_description_text_wrap ul,
.work_description_text_wrap ol {
  padding-left: 1rem;
}

.work_about dd ul li,
.work_description_text_wrap ul li {
  text-indent: -1rem;
}

.work_about dd ul li:not(:last-child) {
  margin-block-end: .5rem;
}

.work_description_text_wrap ul li:not(:last-child),
.work_description_text_wrap ol li:not(:last-child) {
  margin-block-end: 1rem;
}

.work_description_text_wrap ol {
  background: #e9e9e9;
  padding: 1rem 2rem;
  border-radius: .5rem;
}

.work_description_text_wrap ol li {
  list-style-type: decimal;
}

.work_about dd ul li::before,
.work_description_text_wrap ul li::before {
  content: "・";
}

.work_about .annotation {
  margin-block-start: 2rem;
  font-size: .75rem;
}

.practical_work h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-transform: none;
}

.practical_work h3::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
}

.practical_work01 h3:first-of-type::before {
  background: url(../img/practical_work_icon01.svg) no-repeat center / contain;
}

.practical_work01 h3:nth-of-type(2)::before {
  background: url(../img/practical_work_icon02.svg) no-repeat center / contain;
}

.practical_work01 h3:nth-of-type(3)::before {
  background: url(../img/practical_work_icon03.svg) no-repeat center / contain;
}

.practical_work01 h3:last-of-type::before {
  background: url(../img/practical_work_icon04.svg) no-repeat center / contain;
}

.practical_work02 h3:first-of-type::before {
  background: url(../img/practical_work_icon05.svg) no-repeat center / contain;
}

.practical_work02 h3:nth-of-type(2)::before {
  background: url(../img/practical_work_icon06.svg) no-repeat center / contain;
}

.practical_work02 h3:last-of-type::before {
  background: url(../img/practical_work_icon07.svg) no-repeat center / contain;
}

.practical_work03 h3:first-of-type::before {
  background: url(../img/practical_work_icon05.svg) no-repeat center / contain;
}

/* ここまで20240727追記 */