/* ==============================
//  リセット
============================== */
@media (min-width: 768px) {
	.main-area {
		min-width: initial;
		margin: 0 auto 14rem;
	}
	.main-area .main-inner {
		max-width: initial;
		width: initial;
		margin: 0 auto 0;
	}
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - custom property
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-sizeGuide {
  --color-common_white: #fff;
  --color-common_black: #000;
  --color-common_gray: #ccc;
  --color-common_red: #f00;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .l-sizeGuide {
    --fz-sizeGuide_maintitle_en: 4rem;
    --fz-sizeGuide_maintitle_ja: 2rem;
    --fz-sizeGuide_link: 1.7rem;
    --fz-sizeGuide_title_en: 3rem;
    --fz-sizeGuide_title_ja: 2rem;
    --fz-sizeGuide_text_desc_title: 1.5rem;
    --fz-sizeGuide_text_desc_text: 1.5rem;
    --fz-sizeGuide_text_detail_text: 1.2rem;
    width: 98rem;
    padding-block: 0;
    row-gap: 10rem;
    margin: 0 auto 10rem;
  }
}
@media screen and (max-width: 767px) {
  .l-sizeGuide {
    --fz-sizeGuide_maintitle_en: calc(50*100vw/750);
    --fz-sizeGuide_maintitle_ja: calc(30*100vw/750);
    --fz-sizeGuide_link: calc(25*100vw/750);
    --fz-sizeGuide_title_en: calc(40*100vw/750);
    --fz-sizeGuide_title_ja: calc(20*100vw/750);
    --fz-sizeGuide_text_desc_title: calc(28*100vw/750);
    --fz-sizeGuide_text_desc_text: calc(28*100vw/750);
    --fz-sizeGuide_text_detail_text: calc(22*100vw/750);
    width: calc(700*100vw/750);
    padding-block: 0;
    row-gap: calc(100*100vw/750);
    margin: 0 auto calc(150* (100vw /750));
  }
}

@media screen and (min-width: 768px) {
  .l-sizeGuide .sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .l-sizeGuide .pc_only {
    display: none !important;
  }
}
.l-sizeGuide .c-color_red {
  color: var(--color-common_red);
  display: inline-block;
}
.l-sizeGuide img,
.l-sizeGuide picture {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - grid
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-sizeGuide [class*="c-grid_column"] {
  display: grid;
  grid-template-columns: repeat(var(--columns , 1), minmax(0,1fr));
  gap: var(--row, 0) var(--column, 0);
}
.l-sizeGuide [class*="grid_column-1"] {--columns: 1;}
.l-sizeGuide [class*="grid_column-2"] {--columns: 2;}
.l-sizeGuide [class*="grid_column-3"] {--columns: 3;}
.l-sizeGuide [class*="grid_column-4"] {--columns: 4;}

@media screen and (min-width: 768px) {
  .l-sizeGuide [class*="c-pc_grid_column"] {
    display: grid;
    grid-template-columns: repeat(var(--columns , 1), minmax(0,1fr));
    gap: var(--row, 0) var(--column, 0);
  }
  .l-sizeGuide [class*="pc_grid_column-1"] {--columns: 1;}
  .l-sizeGuide [class*="pc_grid_column-2"] {--columns: 2;}
  .l-sizeGuide [class*="pc_grid_column-3"] {--columns: 3;}
  .l-sizeGuide [class*="pc_grid_column-4"] {--columns: 4;}
}
@media screen and (max-width: 767px) {
  .l-sizeGuide [class*="c-sp_grid_column"] {
    display: grid;
    grid-template-columns: repeat(var(--columns , 1), minmax(0,1fr));
    gap: var(--row, 0) var(--column, 0);
  }
  .l-sizeGuide [class*="sp_grid_column-1"] {--columns: 1;}
  .l-sizeGuide [class*="sp_grid_column-2"] {--columns: 2;}
  .l-sizeGuide [class*="sp_grid_column-3"] {--columns: 3;}
  .l-sizeGuide [class*="sp_grid_column-4"] {--columns: 4;}
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - text
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-sizeGuide .c-sizeGuide_maintitle_en {
  font-size: var(--fz-sizeGuide_maintitle_en);
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
}
.l-sizeGuide .c-sizeGuide_maintitle_ja {
  font-size: var(--fz-sizeGuide_maintitle_ja);
  line-height: 2.5;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
}
.l-sizeGuide .c-sizeGuide_link {
  font-size: var(--fz-sizeGuide_link);
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
  white-space: nowrap;
}
.l-sizeGuide .c-sizeGuide_title_en {
  font-size: var(--fz-sizeGuide_title_en);
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
}
.l-sizeGuide .c-sizeGuide_title_ja {
  font-size: var(--fz-sizeGuide_title_ja);
  line-height: 1.7;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
}
.l-sizeGuide .sizeGuide_desc div {
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
}
.l-sizeGuide .sizeGuide_desc div dt,
.l-sizeGuide .sizeGuide_desc div dd {
  width: max-content;
  line-height: 1;
}
.l-sizeGuide .c-sizeGuide_text_desc_title {
  font-size: var(--fz-sizeGuide_text_desc_title);
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: var(--fw-bold);
  color: var(--color-common_black);
}
.l-sizeGuide .c-sizeGuide_text_desc_text {
  font-size: var(--fz-sizeGuide_text_desc_text);
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
}
.l-sizeGuide .sizeGuide_text_detail_text {
  margin-top: 1.2rem;
  font-size: var(--fz-sizeGuide_text_detail_text);
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: var(--fw-regular);
  color: var(--color-common_black);
}
@media screen and (max-width: 767px) {
  .l-sizeGuide .c-sizeGuide_title_en {
    padding-bottom: 4px;
  }
  .l-sizeGuide .c-sizeGuide_maintitle_ja {
    line-height: 2.1;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project - maintitle
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-sizeGuide .p-sizeGuide_maintitle {
  display: flex;
  column-gap: 3rem;
  border-bottom: 0.2rem solid var(--color-common_black);
}
@media screen and (max-width: 767px) {
  .l-sizeGuide .p-sizeGuide_maintitle {
    column-gap: calc(30*100vw/750);
    border-bottom: calc(2*100vw/750) solid var(--color-common_black);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project - link
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-sizeGuide .p-sizeGuide_link {
  margin-top: -5rem;
}
.l-sizeGuide .p-sizeGuide_link_list {
  --row: 2rem;
  --column: 2rem;
}
.l-sizeGuide .p-sizeGuide_link_item {
  border: 0.1rem solid var(--color-common_black);
}
.l-sizeGuide .p-sizeGuide_link_item > a {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding-block: 2rem;
}
.l-sizeGuide .p-sizeGuide_link_list span {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
  text-align: center;
}
.l-sizeGuide .p-sizeGuide_link_list span::after {
  content: "";
  z-index: 2;
  width: 1rem;
  height: 1rem;
  border-bottom: 0.1rem solid var(--color-common_black);
  border-right: 0.1rem solid var(--color-common_black);
  transform: rotate(45deg) translateY(-5px);
}
@media screen and (max-width: 767px) {
  .l-sizeGuide .p-sizeGuide_link {
    margin-top: calc(-50*100vw/750);
  }
  .l-sizeGuide .p-sizeGuide_link_list {
    --row: calc(20*100vw/750);
    --column: calc(20*100vw/750);
  }
  .l-sizeGuide .p-sizeGuide_link_item {
    border: calc(2*100vw/750) solid var(--color-common_black);
  }
  .l-sizeGuide .p-sizeGuide_link_item > a {
    padding-block: calc(30*100vw/750);;
  }
  .l-sizeGuide .p-sizeGuide_link_list span {
    column-gap: calc(10*100vw/750);
  }
  .l-sizeGuide .p-sizeGuide_link_list span::after {
    width: calc(15* 100vw / 750);
    height: calc(15* 100vw / 750);
    border-bottom: calc(2*100vw/750) solid var(--color-common_black);
    border-right: calc(2*100vw/750) solid var(--color-common_black);
    transform: rotate(45deg) translateY(-3px);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project - contents
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-sizeGuide .p-sizeGuide_title {
  display: flex;
  column-gap: 3rem;
  border-bottom: 0.2rem solid var(--color-common_black);
}
.l-sizeGuide .p-sizeGuide_wrapper {
  margin-top: 5rem;
  grid-template-columns: 60% 1fr;
  column-gap: 1.4rem;
}
.l-sizeGuide .p-sizeGuide_image {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
}
.l-sizeGuide .p-sizeGuide_image > picture {
  width: 28rem;
  margin-inline: auto;
}
.l-sizeGuide .p-sizeGuide_desc {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .l-sizeGuide .p-sizeGuide_title {
    flex-direction: column-reverse;
    column-gap: calc(30*100vw/750);
    border-bottom: calc(2*100vw/750) solid var(--color-common_black);
  }
  .l-sizeGuide .p-sizeGuide_wrapper {
    margin-top: 5rem;
    grid-template-columns: 60% 1fr;
    column-gap: 5rem;
  }
  .l-sizeGuide .p-sizeGuide_image {
    margin-bottom: calc(60* (100vw /750));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(350*100vw/750), 1fr));
  }
  .l-sizeGuide .p-sizeGuide_image > picture {
    width: calc(350*100vw/750);
  }
  .l-sizeGuide .p-sizeGuide_desc {
    row-gap: calc(10*100vw/750);;
  }

}
