/* 共通で使用するCSSの読み込み
--------------------------------------------------------------------------- */
@import url(common.css);

/* About, 私について
--------------------------------------------------------------------------- */
/* #about(共通) start 
--------------------------------------------------------------------------- */
.about_box {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.profile_img {
  width: 80%;
  max-width: 320px;
  margin: 0 auto;
}
.about_item > h3 {
  /* 上下 左右の余白 */
  padding: 0.5rem 1.25rem;
  /* 文字色 */
  color: var(--color_main);
  font-size: 1.5rem;
  font-weight: 500;
  /* 背景透明に */
  background: transparent;
  /* 左線 */
  border-left: solid 0.25rem var(--color_accent);
  margin-bottom: 2rem;
}
.about_item > .content {
  padding-left: 1rem;
}

/* ----- 経歴 ----- */
.career_list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.career_item {
  /* 上、右、下、左の余白 */
	padding: 0 1rem 1rem 0;
	position: relative;
  font-family: var(--font_sentence);
	line-height: 1.7;
	line-break: strict;
}
.career_item::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	/* 下線の幅 */
	width: 100%;
	/* 下線の高さ */
	height: 1px;
	/* メインカラー */
	background-image: url(../images//common/line_h_01_m.png);
	background-repeat: repeat-x;
	background-size: contain;
}

/* ----- 現在できること・準備中のこと ----- */
.current_situation_list {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.current_situation_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding-bottom: 2rem;
  position: relative;
}
.current_situation_item::after {
  content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	/* 下線の幅 */
	width: 100%;
	/* 下線の高さ */
	height: 1px;
	/* メインカラー */
	background-image: url(../images//common/line_h_01_m.png);
	background-repeat: repeat-x;
	background-size: contain;
}

.current_situation_item.currently_available > .illust {
  /* w 400px / h 422px */
  aspect-ratio: 200 / 211;
}
.current_situation_item.future_plans > .illust {
  /* w 400px / h 332px */
  aspect-ratio: 100 / 83;
}
.current_situation_item.response_time > .illust {
  /* w 400px / h 406px */
  aspect-ratio: 200 / 203;
}
.current_situation_item > .text {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.current_situation_item > .text > h4 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color_main);
}
/* ---------------------------------------------------------------------------
#about(共通) end */

/* #about(大きな端末) start 
--------------------------------------------------------------------------- */
@media screen and (min-width:901px) {

  /* 現在できること・準備中のことのイラスト */
  .current_situation_item > .illust {
    width: 12.5rem;
  }
  .current_situation_item > .text {
    flex: 1;
  }

}
/* ---------------------------------------------------------------------------
#about(大きな端末) end */

/* #about(小さな端末) start 
--------------------------------------------------------------------------- */
@media screen and (max-width:900px) {

  /* 現在できること・準備中のことのイラスト */
  .current_situation_item > .illust {
    width: 8.75rem;
  }
  /* 現在できること・準備中のことの文章 */
  .current_situation_item > .text {
    flex: 1;
    flex-basis: 31.25rem;
  }
}
/* ---------------------------------------------------------------------------
#about(小さな端末) end */

/* Works, 制作実績
--------------------------------------------------------------------------- */
/* #works(共通) start 
--------------------------------------------------------------------------- */
.btn_foriio {
  margin-top: 2rem;
  width: 80%;
  max-width: 23rem;
}
.btn_foriio > a {
  display: block;
  background: url(../images//works/btn_foriio_off.png) no-repeat;
  /* w 736px h 104px */
  aspect-ratio: 92 / 13;
  background-size: contain;
}
.btn_foriio > a:hover {
  background: url(../images//works/btn_foriio_on.png) no-repeat;
  aspect-ratio: 92 / 13;
  background-size: contain;
}
.works_img {
  margin-top: 4rem;
}
.works_img_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.works_img_item {
  width: 80%;
  max-width: 18.75rem;
}
/* ---------------------------------------------------------------------------
#works(共通) end */

/* #works(大きな端末) start 
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
#works(大きな端末) end */

/* #works(小さな端末) start 
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
#works(小さな端末) end */

/* Service, できること
--------------------------------------------------------------------------- */
/* #service(共通) start 
--------------------------------------------------------------------------- */
.service_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.service_item {
  width: 80%;
  max-width: 19.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.service_title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color_main);
  text-align: center;
}
.btn_example > a {
  display: block;
}
.btn_example.service_hp > a {
  background: url(../images//service/btn_hp_off.png) no-repeat;
  /* w 624px h 104px */
  aspect-ratio: 6 / 1;
  background-size: contain;
}
.btn_example.service_hp > a:hover {
  background: url(../images//service/btn_hp_on.png) no-repeat;
  /* w 624px h 104px */
  aspect-ratio: 6 / 1;
  background-size: contain;
}
/* ---------------------------------------------------------------------------
#service(共通) end */

/* #service(大きな端末) start 
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
#service(大きな端末) end */

/* #service(小さな端末) start 
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
#service(小さな端末) end */

/* Contact, お問い合わせ
--------------------------------------------------------------------------- */
/* #contact(共通) start 
--------------------------------------------------------------------------- */
.contact_tool_list {
  margin-top: 4rem;
  display: flex;
  column-gap: 2rem;
}
.contact_tool_item {
  flex: 1;
  max-width: 6.25rem;
}
.contact_tool_item > a {
  display: block;
  aspect-ratio: 1 / 1;
}
/* お問い合わせフォーム */
.contact_tool_item.tool_google_form > a {
  background: url(../images//contact/btn_google_form_off.png) no-repeat;
  background-size: contain;
}
.contact_tool_item.tool_google_form > a:hover {
  background: url(../images//contact/btn_google_form_on.png) no-repeat;
  background-size: contain;
  scale: 1.1;
}
/* Instagram */
.contact_tool_item.tool_instagram > a {
  background: url(../images//contact/btn_instagram_off.png) no-repeat;
  background-size: contain;
}
.contact_tool_item.tool_instagram > a:hover {
  background: url(../images//contact/btn_instagram_on.png) no-repeat;
  background-size: contain;
  scale: 1.1;
}
/* X */
.contact_tool_item.tool_x > a {
  background: url(../images//contact/btn_x_off.png) no-repeat;
  background-size: contain;
}
.contact_tool_item.tool_x > a:hover {
  background: url(../images//contact/btn_x_on.png) no-repeat;
  background-size: contain;
  scale: 1.1;
}

/* ---------------------------------------------------------------------------
#contact(共通) end */

/* #contact(大きな端末) start 
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
#contact(大きな端末) end */

/* #contact(小さな端末) start 
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
#contact(小さな端末) end */