@charset "utf-8";
/***************************************************************************************************
	page_product.css
***************************************************************************************************/
#page_product {
  width: 100%;
  padding-top:110px;
  padding-bottom: 120px;
  background-color: #ffffff;
}
/*
*/
#page_product .blk_1 {
  width:100%;
}
#page_product .blk_1 .gsty_phd_1 > div::before {
  position: absolute;
  content: '';
  display: block;
  left:-150px;
  top:0;
  width: 100%;
  height:100%;
  background-image: url('../images/page_bk_02.webp');
  background-size: 1121px auto;
  background-position: 0 100%;
  mix-blend-mode:plus-lighter;
  opacity:.4;
}
#page_product .blk_1 .gsty_phd_1 .bk > div::after {
  width: calc(100% + 320px);
  background-image: url('../images/products_bk_01.webp');
  background-size: auto 100%;
  background-position: 100% 0;
}
/*
*/
#page_product .blk_2 {
  width: 100%;
  padding:0 var(--gap_1);
}
#page_product .blk_2 > div {
  margin: auto;
  padding:40px 0;
}
/*
*/
#page_product .blk_3 {
  width: 100%;
  padding:0 var(--gap_1);
}
#page_product .blk_3 > div {
  width: 100%;
  max-width: var(--max_wid_1);
  margin: auto;
  padding:0 0 100px 0;
}
#page_product .blk_3_1 {
  width:100%;
  padding:0 0 40px 0;
}
/*
*/
#page_product .psty_tit_1 {
  font-size: clamp(22px, 2.54vw, 28px);
  font-weight: 500;
  color:var(--col_1);
  line-height: 1;
  padding:clamp(1px, 2.72vw, 3px) 0 clamp(15px, 1.81vw, 20px) clamp(40px, 5.45vw, 50px);
  border-bottom:1px solid var(--col_1);
	background-image: url('../images/ico_04.svg');
	background-position: 0 4px;
	background-size: auto 70%;
}
/*  */
#page_product .blk_3_2 {
  width:100%;
}
#page_product .blk_3_2 > section {
  width:100%;
  padding:20px;
  border:1px solid var(--col_1);
  margin-bottom: 40px;
}
#page_product .blk_3_2 > section > div {
  width:100%;
  display: grid;
  grid-template-columns: 46% 54%;
  grid-template-rows:auto 1fr;
  background: linear-gradient(0deg, #EDEDEE 0%, #FAFAFD 100%);
}
#page_product .blk_3_2 > section > div > hgroup {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  padding:7% 0 0 0;
}
#page_product .blk_3_2 > section > div > hgroup h3 {
  order:2;
  font-size:clamp(22px, 2.36vw, 26px);
  line-height: 1;
  font-weight: 500;
  color:var(--col_1);
}
#page_product .blk_3_2 > section > div > hgroup p {
  order:1;
  padding: 0 0 clamp(15px, 1.81vw, 20px) 0;
}
#page_product .blk_3_2 > section > div > hgroup p span {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color:#ffffff;
  white-space:nowrap;
  background-color: var(--col_1);
  padding:5px 10px 7px 10px;
  border:1px solid #333333;
}
#page_product .blk_3_2 > section > div > figure {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  padding:8% 15%;
}
#page_product .blk_3_2 > section.blk_3_2_1 > div > figure {
  padding-left: 13%;
  padding-right: 20%;
}
#page_product .blk_3_2 > section.blk_3_2_2 > div > figure {
  padding-left: 10%;
  padding-right: 18%;
}
#page_product .blk_3_2 > section.blk_3_2_3 > div > figure {
  padding-left: 10%;
  padding-right: 18%;
}
#page_product .blk_3_2 > section.blk_3_2_4 > div > figure {
  padding-left: 15%;
  padding-right: 24%;
}
#page_product .blk_3_2 > section.blk_3_2_5 > div > figure {
  padding-left: 15%;
  padding-right: 25%;
}
#page_product .blk_3_2 > section.blk_3_2_6 > div > figure {
  padding-left: 13%;
  padding-right: 20%;
}
#page_product .blk_3_2 > section > div > figure div {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  height: 100%;
}
#page_product .blk_3_2 > section > div > figure div img {
  display: block;
  width: 100%;
  height: auto;
}
#page_product .blk_3_2 > section > div > div {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#page_product .blk_3_2 > section > div > div p:nth-of-type(1) {
  font-size: clamp(14px, 1.45vw, 16px);
  padding:20px 6% 0 0;
}
#page_product .blk_3_2 > section > div > div > dl {
  padding:20px 0 0 0;
  list-style: none;
}
#page_product .blk_3_2 > section > div > div > dl > div {
  display: flex;
  justify-content: left;
  align-items: flex-start;
}
#page_product .blk_3_2 > section > div > div > dl > div dt {
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  padding:5px 5px 0 0;
}
#page_product .blk_3_2 > section > div > div > dl > div dd {
  display: block;
}
#page_product .blk_3_2 > section > div > div > dl > div dd ul {
  list-style: none;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-wrap: wrap;
  gap:8px;
}
#page_product .blk_3_2 > section > div > div > dl > div dd ul li {
  font-size: 12px;
  line-height:1.25;
  padding:5px 10px 7px 10px;
  background-color: #ffffff;
  border-radius: 18px;

}
#page_product .blk_3_2 > section > div > div > p:nth-of-type(2) {
  padding:20px 0 40px 0;
}
#page_product .blk_3_2 > section > div > div > p:nth-of-type(2) a {
  display: flex;
  justify-content: left;
  align-items: center;
  width:146px;
  height:50px;
  font-size: 16px;
  line-height:1;
  transition:color .1s ease-out 0s;
}
#page_product .blk_3_2 > section > div > div > p:nth-of-type(2) a.nm_hover {
  color:var(--col_2);
}
#page_product .blk_3_2 > section > div > div > p:nth-of-type(2) a::before {
  position: absolute;
  display:block;
  content:'';
  width:44px;
  aspect-ratio: 1 / 1;
  background-color: var(--col_1);
  border-radius: 50%;
  left:calc(100% - 22px);
  top:50%;
  translate:-50% -50%;
	background-image: url('../images/ico_02.svg');
	background-position: 50% 50%;
	background-size: 5px auto;
  transition:background-color .1s ease-out 0s, width .1s ease-out 0s;
}
#page_product .blk_3_2 > section > div > div > p:nth-of-type(2) a.nm_hover::before {
  background-color: var(--col_2);
  width:50px;
}
/*
*/
#page_product .blk_4 {
  width: 100%;
  padding:0 var(--gap_1);
}
#page_product .blk_4 > div {
  width: 100%;
  max-width: var(--max_wid_1);
  margin: auto;
}
/*  */
#page_product .blk_4_1 {
  padding: 0 0 40px 0;
}
/*  */
#page_product .blk_4_2 {
  width:100%;
  display: flex;
  justify-content: left;
  align-items: stretch;
  flex-wrap: wrap;
  gap:60px 3.4%;
}
#page_product .blk_4_2 > section {
  width:48.3%;
}
#page_product .blk_4_2 > section > h3 {
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  color:var(--col_1);
  white-space: nowrap;
  padding:0 0 8px 0;
  border-bottom: 1px solid var(--col_1);
}
#page_product .blk_4_2 > section > section {
  width:100%;
  padding:20px 16px;
  margin-top: 20px;
  border:1px solid var(--col_1);
}
#page_product .blk_4_2 > section > section > h4 {
  width:100%;
  height:75px;
  display: flex;
  justify-content: left;
  align-items: center;
  font-size:18px;
  line-height: 1;
  padding:0 0 0 166px;
	background-position: 0 0;
	background-size: auto 100%;
}
/*  */
#page_product .blk_4_2 > section > section > ul {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-wrap: wrap;
  list-style: none;
  gap:10px;
  padding:16px 0 0 0;
}
#page_product .blk_4_2 > section > section > ul li {
  display: block;
}
#page_product .blk_4_2 > section > section > ul li a {
  display: block;
  padding:9px 45px 9px 20px;
  background-color: #F2F4F7;
  border-radius: 22px;
  font-size:16px;
  line-height: 1;
  letter-spacing: .06em;
  color:var(--col_2);
  white-space: nowrap;
}
#page_product .blk_4_2 > section > section > ul li a.nm_hover {
  background-color: var(--col_3);
}
#page_product .blk_4_2 > section > section > ul li a::before {
  position: absolute;
  content:'';
  display: block;
  width:16px;
  height:16px;
  background-color: var(--col_1);
  border-radius:50%;
  left:calc(100% - 17px);
  top:50%;
  translate:-100% -50%;

	background-image: url('../images/ico_02.svg');
	background-position: 50% 50%;
	background-size: 5px auto;
}
/*  */
#page_product .blk_4_2 .si_ld h4 {
	background-image: url('../images/ia/ld.webp');
}
#page_product .blk_4_2 .si_alp h4 {
	background-image: url('../images/ia/alp.webp');
}
#page_product .blk_4_2 .si_ck h4 {
	background-image: url('../images/ia/ck.webp');
}
#page_product .blk_4_2 .si_chtg h4 {
	background-image: url('../images/ia/chtg.webp');
}
#page_product .blk_4_2 .si_ch h4 {
	background-image: url('../images/ia/ch.webp');
}
#page_product .blk_4_2 .si_tg h4 {
	background-image: url('../images/ia/tg.webp');
}
#page_product .blk_4_2 .si_ife h4 {
	background-image: url('../images/ia/ife.webp');
}
#page_product .blk_4_2 .si_iep h4 {
	background-image: url('../images/ia/iep.webp');
}
#page_product .blk_4_2 .si_sp h4 {
	background-image: url('../images/ia/sp.webp');
}
#page_product .blk_4_2 .si_ob h4 {
	background-image: url('../images/ia/ob.webp');
}
#page_product .blk_4_2 .si_amy h4 {
	background-image: url('../images/ia/amy.webp');
}
#page_product .blk_4_2 .si_lipo h4 {
	background-image: url('../images/ia/lipo.webp');
}
/*
*/
#page_product .panc {
  position: absolute;
  left:0;
  top:-160px;
  pointer-events: none;
}
/***************************************************************************************************
  responsive
***************************************************************************************************/
@media (width <= 1100px) {
#page_product {
  padding-top:80px;
  padding-bottom: 80px;
}
/*
*/
#page_product .blk_2 {
  padding:0;
}
#page_product .blk_2 > div {
  width:63%;
  min-width:236px;  
  max-width: 500px;
  padding:clamp(20px, 3.63vw, 50px) 0;
}
/*  */
}
@media (width <= 900px) {
/*
*/
#page_product .blk_1 .gsty_phd_1 > div::before {
  display: none;
}
#page_product .blk_1 .gsty_phd_1 .bk > div::after {
  width:100%;
  background-position: 50% 0;
}
/*
*/
#page_product .blk_3 {
  padding:0 var(--gap_2);
}
#page_product .blk_3 > div {
  max-width: 600px;
  padding:0 0 60px 0;
}
#page_product .blk_3_1 {
  padding:0 0 20px 0;
}
/*  */
#page_product .blk_3_2 > section {
  padding:10px;
}
#page_product .blk_3_2 > section > div {
  display: flex;
  flex-direction: column;
}
#page_product .blk_3_2 > section > div > hgroup {
  padding:0 4%;
  order: 2;
}
#page_product .blk_3_2 > section > div > hgroup p {
  order:1;
}
#page_product .blk_3_2 > section > div > figure {
  padding:7% 0;
  order: 1;
}
#page_product .blk_3_2 > section.blk_3_2_1 > div > figure {
  padding-left: 15%;
  padding-right: 15%;
}
#page_product .blk_3_2 > section.blk_3_2_2 > div > figure {
  padding-left: 8%;
  padding-right: 10%;
}
#page_product .blk_3_2 > section.blk_3_2_3 > div > figure {
  padding-left: 10%;
  padding-right: 12%;
}
#page_product .blk_3_2 > section.blk_3_2_4 > div > figure {
  padding-left: 18%;
  padding-right: 18%;
}
#page_product .blk_3_2 > section.blk_3_2_5 > div > figure {
  padding:8% 0;
  padding-left: 18%;
  padding-right: 22%;
}
#page_product .blk_3_2 > section.blk_3_2_6 > div > figure {
  padding:10% 0;
  padding-left: 15%;
  padding-right: 15%;
}
#page_product .blk_3_2 > section > div > figure div {
  display: block;
  height: auto;
}
#page_product .blk_3_2 > section > div > div {
  order: 3;
}
#page_product .blk_3_2 > section > div > div p:nth-of-type(1) {
  padding:15px 4% 0 4%;
}
#page_product .blk_3_2 > section > div > div > dl {
  padding:15px 4% 0 4%;
}
#page_product .blk_3_2 > section > div > div > p:nth-of-type(2) {
  padding:15px 4% 20px 4%;
}
/*
*/
#page_product .blk_4 {
  padding:0 var(--gap_2);
}
#page_product .blk_4 > div {
  max-width: 600px;
}
/*  */
#page_product .blk_4_1 {
  padding: 0 0 40px 0;
}
/*  */
#page_product .blk_4_2 {
  display: block;
}
#page_product .blk_4_2 > section {
  width:100%;
  padding:0 0 40px 0;
}
#page_product .blk_4_2 > section > h3 {
  font-size: clamp(18px, 4.8vw, 20px);
}
/*
*/
#page_product .panc {
  top:-80px;
}
/*  */
}
/*
*/
@media (width <= 600px) {
#page_product .blk_4_2 > section > section > h4 {
  height:auto;
  display: block;
  text-align: center;
  padding:88px 0 0 0;
	background-position: 50% 0;
	background-size: auto 75px;
}


/*  */
}