@charset "UTF-8";

/* ===================================
	File Name   : module.css
	Description : Each selectors/parts CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2024/08/19] 個別パーツ調整
	[2024/07/23] フィルタリング追加による全体的な調整
	[2023/06/19] 製品画像の引き伸ばし解除（余白は白で登録サイズをそのまま表示）
	[2023/06/14] お問い合わせ用モーダル定義追加
	[2023/06/12] フレキシブルボックス定義追加
	[2022/06/22] 一覧ロゴ位置修正／フィルター用css追加

====================================== */

/*========== Style Contents ==========

	1. Switch
  2. margin / padding
	3. Size Style
	4. Font Style
	5. Title Setting
	6. Box Layout
	7. Parts Style
    -	Introduction
    -	Anchor
    -	boxs
    -	Links
    -	List
    -	Pager
    -	Labels
    -	Image Gallery("box_items" Item)
    -	Filter
	8. Each Section Style
    -	Search
    -	Company Detail
    -	Company Option
    -	Contact - aside
    -	Preview

====================================== */



/*===== ■1. Switch =====*/
.pc { display: block;}
.sp { display: none;}


@media (max-width: 768px) {
	.pc { display: none;}
	.sp { display: block;}
}



/*===== ■2. margin / padding =====*/
main .mlrauto { margin: 0 auto;}
main .mlauto { margin-left: auto;}
main .ml05 { margin-left: 5px;}
main .ml10 { margin-left: 10px;}
main .ml15 { margin-left: 15px;}
main .ml20 { margin-left: 20px;}
main .mrauto { margin-right: auto;}
main .mr05 { margin-right: 5px;}
main .mr10 { margin-right: 10px;}
main .mr15 { margin-right: 15px;}
main .mr20 { margin-right: 20px;}
main .mlr05 { margin: 0 5px;}
main .mlr10 { margin: 0 10px;}
main .mlr15 { margin: 0 15px;}
main .mlr20 { margin: 0 20px;}
main .mlr30 { margin: 0 30px;}
main .mlr40 { margin: 0 40px;}

main .mt05 { margin-top: 5px;}
main .mt10 { margin-top: 10px;}
main .mt15 { margin-top: 15px;}
main .mt20 { margin-top: 20px;}
main .mt25 { margin-top: 25px;}
main .mt30 { margin-top: 30px;}
main .mt40 { margin-top: 40px;}
main .mt50 { margin-top: 50px;}
main .mb05 { margin-bottom: 5px;}
main .mb10 { margin-bottom: 10px;}
main .mb15 { margin-bottom: 15px;}
main .mb20 { margin-bottom: 20px;}
main .mb25 { margin-bottom: 25px;}
main .mb30 { margin-bottom: 30px;}
main .mb40 { margin-bottom: 40px;}
main .mb50 { margin-bottom: 50px;}
main .mb60 { margin-bottom: 60px;}
main .mtb10 { margin: 10px 0;}
main .mtb20 { margin: 20px 0;}
main .mtb30 { margin: 30px 0;}
main .mtb40 { margin: 40px 0;}
main .mtb50 { margin: 50px 0;}

main .pl05 { padding-left: 5px;}
main .pl10 { padding-left: 10px;}
main .pl15 { padding-left: 15px;}
main .pl20 { padding-left: 20px;}
main .pr05 { padding-right: 5px;}
main .pr10 { padding-right: 10px;}
main .pr15 { padding-right: 15px;}
main .pr20 { padding-right: 20px;}
main .plr05 { padding: 0 5px;}
main .plr10 { padding: 0 10px;}
main .plr15 { padding: 0 15px;}
main .plr20 { padding: 0 20px;}
main .plr30 { padding: 0 30px;}
main .plr40 { padding: 0 40px;}
main .plr50 { padding: 0 50px;}

main .pt05 { padding-top: 5px;}
main .pt10 { padding-top: 10px;}
main .pt15 { padding-top: 15px;}
main .pt20 { padding-top: 20px;}
main .pt25 { padding-top: 25px;}
main .pt30 { padding-top: 30px;}
main .pt40 { padding-top: 40px;}
main .pt50 { padding-top: 50px;}
main .pb05 { padding-bottom: 5px;}
main .pb10 { padding-bottom: 10px;}
main .pb15 { padding-bottom: 15px;}
main .pb20 { padding-bottom: 20px;}
main .pb25 { padding-bottom: 25px;}
main .pb30 { padding-bottom: 30px;}
main .pb40 { padding-bottom: 40px;}
main .pb50 { padding-bottom: 50px;}
main .pb60 { padding-bottom: 60px;}
main .ptb10 { padding: 10px 0;}
main .ptb20 { padding: 20px 0;}
main .ptb30 { padding: 30px 0;}
main .ptb40 { padding: 40px 0;}
main .ptb50 { padding: 50px 0;}


@media (max-width: 768px) {
	main .ml05 { margin-left: 1.34vw;}
	main .ml10 { margin-left: 2.67vw;}
	main .ml15 { margin-left: 4vw;}
	main .ml20 { margin-left: 5.34vw;}
	main .mr05 { margin-right: 1.34vw;}
	main .mr10 { margin-right: 2.67vw;}
	main .mr15 { margin-right: 4vw;}
	main .mr20 { margin-right: 5.34vw;}
	main .mlr05 { margin: 0 1.34vw;}
	main .mlr10 { margin: 0 2.67vw;}
	main .mlr15 { margin: 0 4vw;}
	main .mlr20 { margin: 0 5.34vw;}
	main .mlr30 { margin: 0 8vw;}
	main .mlr40 { margin: 0 10.67vw;}

	main .mt05 { margin-top: 1.34vw;}
	main .mt10 { margin-top: 2.67vw;}
	main .mt15 { margin-top: 4vw;}
	main .mt20 { margin-top: 5.34vw;}
	main .mt25 { margin-top: 6.67vw;}
	main .mt30 { margin-top: 8vw;}
	main .mt40 { margin-top: 10.67vw;}
	main .mt50 { margin-top: 10.67vw;}
	main .mb05 { margin-bottom: 1.34vw;}
	main .mb10 { margin-bottom: 2.67vw;}
	main .mb15 { margin-bottom: 4vw;}
	main .mb20 { margin-bottom: 5.34vw;}
	main .mb25 { margin-bottom: 6.67vw;}
	main .mb30 { margin-bottom: 8vw;}
	main .mb40 { margin-bottom: 10.67vw;}
	main .mb50 { margin-bottom: 10.67vw;}
	main .mb60 { margin-bottom: 10.67vw;}
	main .mtb10 { margin: 2.67vw 0;}
	main .mtb20 { margin: 5.34vw 0;}
	main .mtb30 { margin: 8vw 0;}
	main .mtb40 { margin: 10.67vw 0;}
	main .mtb50 { margin: 10.67vw 0;}

	main .ml05sp { margin-left: 1.34vw;}
	main .ml10sp { margin-left: 2.67vw;}
	main .ml15sp { margin-left: 4vw;}
	main .ml20sp { margin-left: 5.34vw;}
	main .mr05sp { margin-right: 1.34vw;}
	main .mr10sp { margin-right: 2.67vw;}
	main .mr15sp { margin-right: 4vw;}
	main .mr20sp { margin-right: 5.34vw;}
	main .mlr0sp { margin: 0;}
	main .mlr05sp { margin: 0 1.34vw;}
	main .mlr10sp { margin: 0 2.67vw;}
	main .mlr15sp { margin: 0 4vw;}
	main .mlr20sp { margin: 0 5.34vw;}

	main .mt05sp { margin-top: 1.34vw;}
	main .mt10sp { margin-top: 2.67vw;}
	main .mt15sp { margin-top: 4vw;}
	main .mt20sp { margin-top: 5.34vw;}
	main .mt25sp { margin-top: 6.67vw;}
	main .mt30sp { margin-top: 8vw;}
	main .mb05sp { margin-bottom: 1.34vw;}
	main .mb10sp { margin-bottom: 2.67vw;}
	main .mb15sp { margin-bottom: 4vw;}
	main .mb20sp { margin-bottom: 5.34vw;}
	main .mb25sp { margin-bottom: 6.67vw;}
	main .mb30sp { margin-bottom: 8vw;}
	main .mtb10sp { margin: 2.67vw 0;}
	main .mtb20sp { margin: 5.34vw 0;}
	main .mtb30sp { margin: 8vw 0;}
  
	main .pl05 { padding-left: 1.34vw;}
	main .pl10 { padding-left: 2.67vw;}
	main .pl15 { padding-left: 4vw;}
	main .pl20 { padding-left: 5.34vw;}
	main .pr05 { padding-right: 1.34vw;}
	main .pr10 { padding-right: 2.67vw;}
	main .pr15 { padding-right: 4vw;}
	main .pr20 { padding-right: 5.34vw;}
	main .plr05 { padding: 0 1.34vw;}
	main .plr10 { padding: 0 2.67vw;}
	main .plr15 { padding: 0 4vw;}
	main .plr20 { padding: 0 5.34vw;}
	main .plr30 { padding: 0 8vw;}
	main .plr40 { padding: 0 10.67vw;}

	main .pt05 { padding-top: 1.34vw;}
	main .pt10 { padding-top: 2.67vw;}
	main .pt15 { padding-top: 4vw;}
	main .pt20 { padding-top: 5.34vw;}
	main .pt25 { padding-top: 6.67vw;}
	main .pt30 { padding-top: 8vw;}
	main .pt40 { padding-top: 10.67vw;}
	main .pt50 { padding-top: 10.67vw;}
	main .pb05 { padding-bottom: 1.34vw;}
	main .pb10 { padding-bottom: 2.67vw;}
	main .pb15 { padding-bottom: 4vw;}
	main .pb20 { padding-bottom: 5.34vw;}
	main .pb25 { padding-bottom: 6.67vw;}
	main .pb30 { padding-bottom: 8vw;}
	main .pb40 { padding-bottom: 10.67vw;}
	main .pb50 { padding-bottom: 10.67vw;}
	main .pb60 { padding-bottom: 10.67vw;}
	main .ptb10 { padding: 2.67vw 0;}
	main .ptb20 { padding: 5.34vw 0;}
	main .ptb30 { padding: 8vw 0;}
	main .ptb40 { padding: 10.67vw 0;}
	main .ptb50 { padding: 10.67vw 0;}

	main .pl05sp { padding-left: 1.34vw;}
	main .pl10sp { padding-left: 2.67vw;}
	main .pl15sp { padding-left: 4vw;}
	main .pl20sp { padding-left: 5.34vw;}
	main .pr05sp { padding-right: 1.34vw;}
	main .pr10sp { padding-right: 2.67vw;}
	main .pr15sp { padding-right: 4vw;}
	main .pr20sp { padding-right: 5.34vw;}
	main .plr0sp { padding: 0;}
	main .plr05sp { padding: 0 1.34vw;}
	main .plr10sp { padding: 0 2.67vw;}
	main .plr15sp { padding: 0 4vw;}
	main .plr20sp { padding: 0 5.34vw;}

	main .pt05sp { padding-top: 1.34vw;}
	main .pt10sp { padding-top: 2.67vw;}
	main .pt15sp { padding-top: 4vw;}
	main .pt20sp { padding-top: 5.34vw;}
	main .pt25sp { padding-top: 6.67vw;}
	main .pt30sp { padding-top: 8vw;}
	main .pb05sp { padding-bottom: 1.34vw;}
	main .pb10sp { padding-bottom: 2.67vw;}
	main .pb15sp { padding-bottom: 4vw;}
	main .pb20sp { padding-bottom: 5.34vw;}
	main .pb25sp { padding-bottom: 6.67vw;}
	main .pb30sp { padding-bottom: 8vw;}
	main .ptb10sp { padding: 2.67vw 0;}
	main .ptb20sp { padding: 5.34vw 0;}
	main .ptb30sp { padding: 8vw 0;}
}



/*===== ■3. Size Style =====*/
main .w10 { width: 10% !important;}
main .w20 { width: 20% !important;}
main .w25 { width: 25% !important;}
main .w30 { width: 30% !important;}
main .w40 { width: 40% !important;}
main .w50 { width: 50% !important;}
main .w60 { width: 60% !important;}
main .w70 { width: 70% !important;}
main .w80 { width: 80% !important;}
main .w90 { width: 90% !important;}
main .w100 { width: 100% !important;}


@media (max-width: 768px) {
  main .w10sp { width: 10% !important;}
  main .w20sp { width: 20% !important;}
  main .w25sp { width: 25% !important;}
  main .w30sp { width: 30% !important;}
  main .w40sp { width: 40% !important;}
  main .w50sp { width: 50% !important;}
  main .w60sp { width: 60% !important;}
  main .w70sp { width: 70% !important;}
  main .w80sp { width: 80% !important;}
  main .w90sp { width: 90% !important;}
  main .w100sp { width: 100% !important;}
}



/*===== ■4. Font Style =====*/
.noto { font-family: 'Noto Sans JP', sans-serif;}
.mont { font-family: 'Montserrat', sans-serif;}

main .red { color: #c00;}
main .white { color: #fff;}
main .black { color: #333;}

main .midbol { font-weight: 600;}
main .bol { font-weight: 700;}

main .fs12 { font-size: 1.2rem;}
main .fs14 { font-size: 1.4rem;}
main .fs16 { font-size: 1.6rem;}
main .fs18 { font-size: 1.8rem;}
main .fs20 { font-size: 2.0rem;}

main .left { text-align: left;}
main .center { text-align: center;}
main .right { text-align: right;}


@media (max-width: 768px) {
	main .fs12sp { font-size: 1.2rem;}
	main .fs14sp { font-size: 1.4rem;}
	main .fs16sp { font-size: 1.6rem;}
	main .fs18sp { font-size: 1.8rem;}
	main .fs20sp { font-size: 2.0rem;}
	
	main .left_sp { text-align: left;}
	main .center_sp { text-align: center;}
	main .right_sp { text-align: right;}
}



/*===== ■5. Title Setting =====*/
/* 大見出し */
.tit_headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0;
  box-sizing: content-box;
  text-align: center;
}

.tit_headline em {
  display: block;
  font-weight: bold;
  font-size: 3.6rem;
  line-height: 1;
}

.tit_headline span {
  display: block;
  margin-top: 20px;
  font-weight: bold;
  font-size: 3.0rem;
  line-height: 1.4;
}

.details.tit_headline {
  display: block;
  height: auto;
}

.details.tit_headline > div:not(.boxlink) {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0 20px;
}
.details.tit_headline > div > div {
  order: 2;
  text-align: left;
}

.details.tit_headline > div > figure {
  flex: 0 0 320px;
  order: 1;
  overflow:hidden;
  position: relative;
  width: 320px;
  margin-right: 40px;
  line-height: 0;
}
.details.tit_headline > div > figure::before {
	display: block;
    padding-top: 100%;
    content: "";
}
.details.tit_headline > div > figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
}

.details.tit_headline h1 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 3.2rem;
  line-height: 1.2;
}

.details.tit_headline :not(.boxlink) a {
  display: inline-block;
  margin-bottom: 20px;
  color: currentColor;
  text-decoration: underline;
  transition: all .25s;
}
.details.tit_headline :not(.boxlink) a:hover {
  color: #999;
  text-decoration: none;
}

.details.tit_headline .boxlink a span {
  display: inline;
  margin-top: 0;
  font-size: inherit;
  line-height: 1.2;
}

.details.tit_headline ul { margin-bottom: 20px;}
.details.tit_headline ul.list_attribute {
  flex-direction: column;
  align-items: flex-start;
}

/* 中見出し */
.tit_subhead {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 25px;
  font-weight: bold;
  font-size: 3.0rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  line-height: 1;
}

.tit_subhead::before,
.tit_subhead::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  background: #333;
  transform: translateX(-50%);
  content: "";
}
.tit_subhead::before {
  width: 15%;
  min-width: 50px;
  height: 1px;
}
.tit_subhead::after {
  bottom: -5px;
  width: 11px;
  height: 11px;
  border: 1px solid #333;
  border-radius: 50%;
  background: #fff;
}

.tit_subhead span {
  display: block;
  margin-top: 15px;
  color: #999;
  font-size: 1.4rem;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
}


/* 小見出し */
.tit_emphasis {
  margin-bottom: 30px;
  font-size: 3.0rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.2;
}


@media (max-width: 768px) {
  /* 大見出し */
  .tit_headline {
    padding: 12vw 0;
  }

  .tit_headline em { font-size: 2.6rem;}

  .tit_headline span {
    margin-top: 5.34vw;
    font-size: 2rem;
  }
  
  .details.tit_headline > div:not(.boxlink) {
    display: block;
    margin: 0;
    padding: 4vw 2.67vw 0;
  }

  .details.tit_headline > div > figure {
    flex: none;
    width: auto;
    margin: 0;
  }
  
  .details.tit_headline > div div { margin-bottom: 5.34vw;}
  
  .details.tit_headline h1 {
    margin-bottom: 2.67vw;
    font-size: 2.6rem;
  }

  .details.tit_headline :not(.boxlink) a {
    display: inline-block;
    margin-bottom: 4vw;
  }
  
  .details.tit_headline :not(.boxlink) a:hover {
    color: #999;
    text-decoration: underline;
  }

  .details.tit_headline ul { margin-bottom: 4vw;}

  
  /* 中見出し */
  .tit_subhead {
    margin-bottom: 6.67vw;
    padding-bottom: 6.67vw;
    font-size: 2.4rem;
  }

  .tit_subhead::after {
    bottom: -1.34vw;
    width: calc(2.67vw + 1px);
    height: calc(2.67vw + 1px);
  }

  .tit_subhead span {
    margin-top: 4vw;
    font-size: 1.2rem;
  }

  
  /* 小見出し */
  .tit_emphasis {
    margin-bottom: 5.34vw;
    font-size: 2.0rem;
  }
}



/*===== ■6. Box Layout =====*/
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.flex2,
.flex3,
.flex4,
.flex5 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexcolumn { flex-direction: column;}
.flexrow { flex-direction: row;}
.flexstart { justify-content: flex-start;}
.flexend { justify-content: flex-end;}
.flexcenter { justify-content: center;}
.flexbetween { justify-content: space-between;}
.flextop { align-items: flex-start;}
.flexmiddle { align-items: center;}
.flexbottom { align-items: flex-end;}
.flexwrap { flex-wrap: wrap;}
.flexnowrap { flex-wrap: nowrap;}
.flexnone { flex: none;}
.flex01 { flex: 1;}
.flex02 { flex: 2;}
.flex03 { flex: 3;}
.order01 { order: 1;}
.order02 { order: 2;}
.order03 { order: 3;}


article .flex > * { margin: 5px;}
article .flex2 > * { width: calc(50% - 20px); margin: 5px;}
article .flex3 > * { width: calc(33.33% - 15px); margin: 5px;}
article .flex4 > * { width: calc(25% - 10px); margin: 5px;}
article .flex5 > * { width: calc(20% - 10px); margin: 5px;}

[class^="flex"].loose > * { margin: 10px 5px;}

[class^="flex"] > * > img { width: 100%;}

table [class^="flex"] > * { flex: 1;}

@media (max-width: 768px) {
  article .flex > *,
	article .flex2 > *,
	article .flex3 > *,
	article .flex4 > *,
	article .flex5 > * { width: calc(50% - 2.68vw); margin: 1.34vw;}
  
  [class^="flex"].single > * { width: 100%;}
  [class^="flex"].loose > * { margin: 2.67vw 1.34vw;}

  table [class^="flex"].single > * { flex: none;}
}



/*===== ■7. Parts Style =====*/
/*-- Introduction --*/
.intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 2.0rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  text-align: center;
}

.intro span {
  margin-left: 10px;
  font-size: 1.4rem;
}


@media (max-width: 768px) {
  .intro {
    margin: 0 2.67vw;
    padding: 0;
    font-size: 1.6rem;
  }
}


/*-- Anchor --
.inner_anchor {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.inner_anchor li {
  margin: 5px 10px;
  font-size: 1.2rem;
}

.inner_anchor li a {
  display: inline-block;
  position: relative;
  padding-left: 10px;
}

.inner_anchor li a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, currentColor 50.01%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, currentColor 50.01%) no-repeat bottom right/100% 50%;
  transform: translateY(-50%);
  content: "";
}
.inner_anchor li a:hover::before { background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, currentColor 50.01%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, currentColor 50.01%) no-repeat bottom right/100% 50%;}


@media (max-width: 768px) {
  .inner_anchor {
    width: 100vw;
    margin: 0 0 calc(-10.67vw + -5.34vw) -2.67vw;
    border-top: 1px solid #898a7a;
  }

  .inner_anchor li {
    width: 50%;
    margin: 0;
    font-size: 1.2rem;
  }
  
  .inner_anchor li:nth-child(odd) { border-right: 1px dotted #898a7a;}
  .inner_anchor li:not(:nth-last-child(-n+2)) { border-bottom: 1px dotted #898a7a;}

  .inner_anchor li a { padding: 2.67vw 1.34vw 2.67vw 5.34vw;}

  .inner_anchor li a::before {
    left: 1.34vw;
    width: 1.6vw;
    height: 1.6vw;
  }
}
*/

/*-- Boxs --*/
/* box Limit */
.box_limit_mid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.box_limit_min {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
}

.box_gray {
  padding: 20px;
  background: #ddd;
}

.box_pastel {
  padding: 20px;
  background: #fae5e5;
}


/* Boxs - invert */
.box_invert {
  margin: 0 0 50px;
  padding: 40px 50px 60px;
  background: linear-gradient(-45deg, transparent 25%, rgba(255,255,255, .1) 25%, rgba(255,255,255, .1) 50%, transparent 50%, transparent 75%, rgba(255,255,255, .1) 75%, rgba(255,255,255, .1)) left top / 4px 4px, linear-gradient(135deg, #333, #000);
  color: #fff;
  text-align: center;
}

/* Boxs - Items */
.box_items {
  padding: 30px 0;
  margin: 0 auto 30px;
  border-bottom: 1px dotted #ccc;
}

/* Boxs - Video */
.box_video {
	position: relative;
	padding-top: 56.25%;
}

.box_video iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


@media (max-width: 768px) {
  /* box Limit */
  .box_limit_mid {
    margin: 0 2.67vw;
    padding: 0;
  }

  .box_limit_min {
    margin: 0 2.67vw;
    padding: 0;
  }

  
  .box_gray { padding: 5.34vw;}

  /* Boxs - invert */
  .box_invert {
    margin: 0 0 8vw;
    padding: 8vw 2.67vw 10.67vw;
  }
  
  /* Boxs - Items */
  .box_items {
    padding: 0 0 5.34vw;
    margin: 5.34vw 0;
  } 
}


/*-- Links --*/
/* Links - normal(arrow) */

/* Links - blank */
a:not(.noicons)[target="_blank"]::after {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  background: url("../img/ico-blank.svg") no-repeat left top / cover;
  transition: opacity .25s;
  content: "";
}
a:not(.noicons)[target="_blank"]:hover::after {
  opacity: .6;
  transition: opacity .25s;
}
a.txt:not(.noicons)[target="_blank"]::after {
  background: url("../img/ico-blank_b.svg") no-repeat left top / cover;
}


/* Links - Boxlink */
.boxlink {
  display: flex;
  justify-content: center;
}

.boxlink.limit {
  max-width: 1200px;
  margin: 0 auto;
}

.boxlink a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 15px 30px;
  border: 1px solid #333;
  background: #fff;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  text-decoration: none;
  transition: all .25s;
}

.boxlink.limit a {
  width: 80%;
  font-size: 1.8rem;
}

.boxlink a::before,
.boxlink a::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}

.boxlink a::before {
    right: 10px;
    width: 8px;
    height: 1px;
    background: #000;
}
.boxlink a::after {
    right: 10px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: translateY(-50%) rotate(45deg);
}

.boxlink a:hover {
  color: #fff;
  background-color: #333;
  border-color: #fff;
  transition: all .25s;
}
.boxlink a:hover::before { background-color: #fff;}
.boxlink a:hover::after { border-color: #fff;}

.boxlink.noicon a { padding: 15px;}
.boxlink.noicon a::before,
.boxlink.noicon a::after { display: none;}

.boxlink a b {
  display: block;
  font-size: 1rem;
}


/* Links - Boxlink-Back */
.boxlink.return a::before { left: 10px;}
.boxlink.return a::after {
  left: 10px;
  border: none;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}
.boxlink.return a:hover::after { border-color: #fff;}


/* Links - Boxlink-Black */
.boxlink.black a {
  border-color: transparent;
  background: #000;
  color: #fff;
}
.boxlink.black a::before {
  background: #fff;
}
.boxlink.black a::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.boxlink.black a:hover {
  border-color: #000;
  background: #fff;
   color: #000;
}
.boxlink.black a:hover::before { background: #000;}
.boxlink.black a:hover::after {
  border-color: #000;
}


/* Links - Boxlink-Emphasis */
.boxlink.emphasis a {
  border-color: transparent;
  background: #ff7733;
  color: #fff;
}
.boxlink.emphasis a::before {
  background: #fff;
}
.boxlink.emphasis a::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.boxlink.emphasis a:hover { background: #000;}
.boxlink.emphasis a:hover::before { background: #fff;}
.boxlink.emphasis a:hover::after {
  border-color: #fff;
}


/* Links - counter appointment */
#counter_appointment {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 3rem;
}

#counter_appointment > * {
  width: calc(50% - 2rem);
  margin-bottom: 1rem;
}

#counter_appointment > * span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#counter_appointment > * b {
  display: block;
  margin: 0 auto;
}


@media (max-width: 768px) {
  /* Links - blank */
  a:not(.noicons)[target="_blank"]::after {
    width: 3.2vw;
    height: 3.2vw;
    margin-left: 1.34vw;
    transition: none;
  }
  
  a:not(.noicons)[target="_blank"]:hover::after {
    opacity: 1;
    transition: none;
  }


  /* Links - Boxlink */
  .boxlink.limit a {width: 100%;}

  .boxlink a { padding: 4vw 8vw;}

  .boxlink a::before {
    right: 2.67vw;
    width: 2.14vw;
  }
  .boxlink a::after {
    right: 2.67vw;
    width: 1.6vw;
    height: 1.6vw;
  }

  .boxlink a:hover {
    border: 1px solid #333;
    background: #fff;
    color: #000;
  }
  .boxlink a:hover::before { background: #000}
  .boxlink a:hover::after { border-color: #000;}

  .boxlink.noicon a { padding: 4vw;}
  
  /* Links - Boxlink-Back */
  .boxlink.return a:hover::after { border-color: #000;}

  /* Links - Boxlink-Black */
  .boxlink.black a:hover {
    border-color: #000;
    background: #000;
    color: #fff;
  }
  .boxlink.black a:hover::before { background: #fff;}
  .boxlink.black a:hover::after {
    border-color: #fff;
  }

  /* Links - Boxlink-Emphasis */
  .boxlink.emphasis a:hover {
    border-color: transparent;
    background: #ff7733;
    color: #fff;
  }

  /* Links - counter appointment */
  #counter_appointment {
    margin: 0 2rem 1rem;
  }
  #counter_appointment > * {
    width: 100%;
  }
}


/*-- Table --*/
/* Table - basic */
.table_basic {
  width: 100%;
  height: 100%;
}

.table_basic th {
  width: 300px;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  background: #333;
  color: #fff;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.table_basic td {
  padding: 20px;
  border-bottom: 1px solid #ccc;
  background: rgba(0,0,0,.065);
  vertical-align: middle;
  word-break: break-all;
}

.table_basic tr:last-child th,
.table_basic tr:last-child td { border-bottom: none;}


@media (max-width: 768px){
  /* Table - basic */
  .table_basic {
    width: 100%;
    height: 100%;
  }

  .table_basic th {
    display: block;
    width: auto;
    background: #333;
    padding: .5rem 1rem;
    border-bottom: 0;
  }

  .table_basic td {
    display: block;
    padding: 4vw;
    border-bottom: 0;
  }
}


/*-- List --*/
/* Search */
.list_company .table_basic th,
.list_company .table_basic td { padding: 10px 20px;}

.list_category {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.list_category article,
.list_items li { position: relative;}

.list_company article:not(:last-of-type),
.list_items li:not(:last-of-type) { margin-bottom: 10px;}

.list_category article {
  width: calc(16.66% - 20px);
  margin: 0 10px 20px;
}

.list_company article,
.list_category a,
.list_items a {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ccc;
  color: currentColor;
}

.list_category a:hover,
.list_items a:hover {
  background: #fff;
  color: #333;
}

.list_category a {
  height: 100%;
  padding: 10px;
}

.list_company article figure,
.list_items a div:last-child figure {
  order: 2;
  max-width: 280px;
  line-height: 0;
  background: #fff;
  aspect-ratio: 1/1;
}

/* ▼表示領域が768px未満の場合 */
@media (max-width: 768px) {
  .list_items a div:last-child figure {
    margin:  0 auto;            /* 中央寄せ */
    max-width: 280px;
    line-height: 0;
    background: #fff;
    aspect-ratio: 1/1;
  }
}

.list_category a > figure { flex: 1;}

.list_company article figure .thumb,
.list_items a div:last-child figure .thumb,
.list_category .thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.list_company article figure .thumb::before,
.list_items a div:last-child figure .thumb::before,
.list_category .thumb::before {
  display: block;
  padding-top: 56.25%;
  content:"";
}
.list_company article figure .thumb::before { padding-top: 100%;}

.list_company article figure .thumb img,
.list_items a div:last-child figure .thumb img,
.list_category .thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
}

.list_category a > figure figcaption { margin-top: 5px;}

.list_category a > p > em,
.list_category a > figure figcaption em {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  font-size: 1.4rem;
}

.list_company article > div,
.list_items a > div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  order: 1;
  min-width: 0;
  padding: 20px;
}

.list_items a > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
  order: 1;
  min-width: 0;
}

.list_company article > div > *,
.list_items a > div > * { max-width: 100%;}

.list_company article > div > :first-child {
  margin: 0 10px 10px 0;
  font-weight: bold;
  font-size: 2.0rem;
}

.list_company article > div h2,
.list_items a > div h2 {
  color: currentColor;
  text-decoration: underline;
}
.list_company article > div a:hover h2,
.list_items a:hover > div h2 {
  color: #333;
  text-decoration: none;
}

.list_company article dl { width: 100%;}

.list_company article dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #999;
  font-size: 1.4rem;
}

.list_company article dt span:not(:last-of-type) {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #999;
}

.list_company article dd ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.list_company article dd ul li { margin: 0 10px 10px 0;}

.list_company a > figure {
  order: 1;
  width: 20%;
  min-width: 200px;
  line-height: 0;
  background: #333;
}

.list_company a > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
  order: 2;
  padding: 20px;
}

.list_company a h3 {
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 1.8rem;
}

.list_company a em {
  display: block;
  margin: 0 0 10px 10px;
  padding: .5rem 1rem;
  background: #333;
  color: #fff;
  font-size: 1.4rem;
}

.list_company a dt {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.list_items a h3 {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 1.2;
}

.list_category article::before,
.list_category article::after,
.list_category a::before,
.list_category a::after,
.list_items li::before,
.list_items li::after,
.list_items a::before,
.list_items a::after {
  position: absolute;
  background: #333;
  content: "";
  transition: all .25s;
}

.list_category article::before,
.list_items > li::before { top: 0; left: 0; width: 1px; height: 0;}
.list_category article::after,
.list_items > li::after { bottom: 0; right: 0; width: 1px; height: 0;}
.list_category a::before,
.list_items > li a::before { top: 0; left: 0; width: 0; height: 1px;}
.list_category a::after,
.list_items > li a::after { bottom: 0; right: 0; width: 0; height: 1px;}

.list_category article:hover::before,
.list_category article:hover::after,
.list_category article:hover a::before,
.list_category article:hover a::after,
.list_items > li:hover::before,
.list_items > li:hover::after,
.list_items > li:hover a::before,
.list_items > li:hover a::after { transition: all .25s;}

.list_category article:hover::before,
.list_category article:hover::after,
.list_items > li:hover::before,
.list_items > li:hover::after { height: 100%;}
.list_category article:hover a::before,
.list_category article:hover a::after,
.list_items > li:hover a::before,
.list_items > li:hover a::after { width: 100%;}


/* Dots */
ul.list_dots > li {
  position: relative;
  padding-left: 10px;
}
ul.list_dots > li:not(:last-child) { margin-bottom: 5px;}
ul.list_dots > li::before {
  position: absolute;
  top: 1rem;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  content: "";
}


/* Label */
ul.list_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
ul.list_label li {
  margin: 0 10px 5px 0;
  padding: 5px 15px;
  border-radius: 5px;
  background: #666;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  white-space: nowrap;
}


/* Feature */
ul.list_feature li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
ul.list_feature li:not(:last-child) { margin-bottom: 20px;}

ul.list_feature li > * { max-width: 100%;}

ul.list_feature li em {
  margin-bottom: 10px;
  padding: .5rem 1rem;
  border-radius: 3px;
  background: #333;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.2;
}

ul.list_feature li p {
  margin-left: 1rem;
  line-height: 1.4;
}


/*-- Attribute --*/
.list_attribute {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 15px;
}

.list_attribute li {
  font-size: 1.4rem;
  margin: 0 0 5px;
}
.list_attribute li:not(:last-child) { margin-right: 10px;}
.list_attribute li.label {
  padding: .5rem 1rem;
  background: #666;
  color: #fff;
}
.list_attribute li.label.domestic { background: #0f384c;}
.list_attribute li.label.overseas { background: #4c380f;}
.list_attribute li.label.notexport { background: #FF3333;}
.list_attribute li.label.export { background: #70ad47;}
.list_attribute li.label.partner { background: #380f4c;}
.list_attribute li.label.sample { background: #4c0f0f;}
.list_attribute li.label.pr1 { background: #5c4b78;}
.list_attribute li.label.pr2 { background: #5c80b8;}
.list_attribute li.label.pr3 { background: #7a9d51;}
.list_attribute li.label.pr4 { background: #883d39;}


/*-- Search --*/
/*
.list_search {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.list_search li {
  width: clamp(120px, calc(20% - 2rem), 180px);
  margin: 0 10px 20px;
  font-size: 1.8rem;
}
*/
.list_search {
  display: grid;
  grid-template-columns: repeat(auto-fit, clamp(120px, 20%, 160px));
  justify-content: center;
  gap: 20px;
}
.list_search li {
  margin-bottom: 20px;
  font-size: 1.8rem;
}
.list_search li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
	overflow-wrap: anywhere;
}
.list_search li span {
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 50%;
  aspect-ratio: 1/1;
}


/*-- Bnr --*/
.list_bnr {
  display: flex;
  gap: 3rem;
  max-width: 1366px;
  margin: 0 auto;
}

.list_bnr li {
  flex: 1;
}

.list_bnr li a {
  display: block;
  position: relative;
  padding: 10px;
  border: 1px solid #c00;
  background: rgba(204,0,0,.1);
}

.list_bnr li a em {
  display: block;
  padding: 1rem;
  border-radius: 100px;
  background: #c00;
  font-weight: bold;
  font-size: clamp(1rem, 1.4vw, 2rem);
  text-align: center;
}

.list_bnr li a p {
  position: relative;
  padding: 15px;
  color: #333;
  font-size: clamp(1rem, 1vw, 1.6rem);
  line-height: 1.4;
}
.list_bnr li a p::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid #c00;
  border-right: 1px solid #c00;
  transform: translateY(-50%) rotate(-45deg);
  content: "";
}

.list_bnr li a:hover { background: #c00;}
.list_bnr li a:hover em {
  background: #fff;
  color: #c00;
}
.list_bnr li a:hover p { color: #fff;}
.list_bnr li a:hover p::after { border-color: #fff;}


/*-- Pager --*/
div.pager {
  padding: 0 50px;
  text-align: center;
}

div.pager > p {
  font-size: 2.0rem;
  font-family: 'Noto Sans JP', sans-serif;
}

div.pager > p span {
  margin-left: 10px;
  font-size: 1.4rem;
}

div.pager div,
div.pager div ol {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.pager div > * { margin: 0 10px;}

div.pager div > a {
  display: flex;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #333;
}

div.pager div > a:hover {
  background: #666;
  color: #fff;
  opacity: 1;
}

div.pager div > a::before,
div.pager div > a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  content: "";
}
div.pager div > a.prev::before,
div.pager div > a.prev::after {
  border-left: 1px solid #fff;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

div.pager div > a.next::before,
div.pager div > a.next::after {
  border-right: 1px solid #fff;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

div.pager div > a.prev::after { margin-left: 4px;}
div.pager div > a.next::after { margin-left: -4px;}

div.pager div li { margin: 0 5px;}

div.pager div li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #333;
  font-family: 'Montserrat', sans-serif;
}
div.pager div li a.active,
div.pager div li a:hover {
  border-color: #333;
  background: #fff;
  color: #333;
}


/*-- Labels --*/
[class^="label_"] {
  display: inline-block;
  min-width: 90px;
  padding: .5rem 2rem;
  border: 2px solid;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  white-space: nowrap;
  align-self: baseline;
}
[class^="label_"].label_important { border-color: #c00; background: #c00;}
[class^="label_"].label_info { border-color: #d48917; background: #d48917;}
[class^="label_"].label_mandatory { border-color: #c00; background: #c00;}


/*-- Image Gallery --*/
#image_gallery {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#image_gallery figure {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 315px;
  background: rgba(0,0,0,.065);
  line-height: 0;
}

#image_gallery figure img {
  width: auto;
  max-width: 100%;
}

#image_gallery ul {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  margin-left: 3.125%;
}

#image_gallery li {
  width: calc(50% - 20px);
  min-width: 90px;
  margin: 0 10px 20px;
  line-height: 0;
}
#image_gallery li:nth-last-child(-n+2) { margin-bottom: 0;}

#image_gallery li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  background: #fff;
  cursor: pointer;
}

#image_gallery li:not(.active) a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.25);
  transition: all .25s;
  content: "";
}

#image_gallery li a img {
  width: auto;
  max-width: 100%;
}

#image_gallery li a:hover img { opacity: 1;}
#image_gallery li:not(.active) a:hover::before {
  background: rgba(255,255,255,.25);
  transition: all .25s;
}

#image_gallery li.active a {
  padding: 1px;
  border: 1px solid #c00;
}


/*-- Filter --*/
#filter { margin-bottom: 3rem;}

#filter dl {
  display: flex;
  border-bottom: 1px solid #000;
}

#filter dt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 10rem;
  margin: .5rem 3rem 0 0;
  padding: 0 2rem;
  background: #000;
  color: #fff;
  font-size: 2rem;
  text-align: center;
}
#filter dt::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 2rem;
  height: 100%;
  background: linear-gradient(to bottom left, transparent 49.5%, #000 50.5%) top left / 100% 50.25% no-repeat, linear-gradient(to top left, transparent 49.5%, #000 50.5%) bottom left / 100% 50.25% no-repeat;
  content: "";
}

#filter dd { flex: 1;}

#filter dd ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc( -1px + -.5rem);
}

#filter dd li {
  margin: .5rem;
}

#filter dd li a {
  display: block;
  position: relative;
  min-width: 8rem;
  padding: 1rem 2rem;
  color: #000;
  border: 1px solid #000;
  text-align: center;
}

#filter dd li a::before,
#filter dd li a::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}

#filter dd li a::before {
    right: calc(1rem + .3rem);
    width: 1px;
    height: .8rem;
    background: #000;
}

#filter dd li a::after {
    right: 1rem;
    width: .6rem;
    height: .6rem;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: translateY(-50%) rotate(45deg);
}

#filter dd li a:hover,
#filter dd li a.active {
  background: #333;
  color: #fff;
}
#filter dd li a:hover::before,
#filter dd li a.active::before { background: #fff;}
#filter dd li a:hover::after,
#filter dd li a.active::after { border-color: #fff;}


@media (max-width: 768px) {
  /* Search */
  .list_company .table_basic th { padding: .5rem 1rem;}
  .list_company .table_basic td { padding: 2.67vw;}

  
  .list_company article:not(:last-of-type),
  .list_items li:not(:last-of-type) { margin-bottom: 2.67vw;}
  
  .list_category article,
  .list_items article {
    width: calc(50% - 2.68vw);
    margin: 0 1.34vw 2.67vw;
  }

  .list_company article,
  .list_category a,
  .list_items a {
    display: block;
    padding: 2.67vw;
    background: #fff;
  }
  
  .list_category a:hover,
  .list_items a:hover {
    background: #fff;
    color: #333;
  }
  
  .list_category a { padding: 1.34vw 1.34vw 2.67vw;}

  .list_company article figure,
  .list_items a > figure {
    width: 80%;
    margin: 0 auto;
  }
  
  .list_category a > figure figcaption { margin-top: 1.34vw;}
  
  .list_category a > p > em,
  .list_category a > figure figcaption em {
    margin-top: 1.34vw;
    font-size: 1.2rem;
  }

  .list_company article > div,
  .list_items a > div {
    display: block;
    width: 100%;
    margin-bottom: 4vw;
    padding: 0;
  }

  .list_company article > div > :first-child {
    margin: 0 0 2.67vw;
    font-size: 1.8rem;
  }
  
  .list_company article > div a:hover h2,
  .list_items a:hover > div h2 {
    color: #d71518;
    text-decoration: underline;
  }

  .list_company article dt {
    flex-direction: column;
    align-items: inherit;
    margin-bottom: 4vw;
    padding: 0 2.67vw 4vw;
  }

  .list_company article dt span:not(:last-of-type) {
    margin: 0 0 2.67vw;
    padding-right: 0;
    border: none;
  }

  .list_company article dd ul { margin-top: 4vw;}

  .list_company article dd ul li {
    width: 100%;
    margin: 0 0 2.67vw;
  }
  .list_company article dd ul li:last-child { margin-bottom: 0;}
  
  .list_items a h3 {
    margin: 1.34vw 0 4vw;
    font-size: 1.8rem;
  }
  
  .list_category article::before,
  .list_category article::after,
  .list_category a::before,
  .list_category a::after,
  .list_items > li::before,
  .list_items > li::after,
  .list_items > li a::before,
  .list_items > li a::after { display: none;}
  
  
  /* Dots */
  ul.list_dots > li { padding-left: 2.67vw;}
  ul.list_dots > li:not(:last-child) { margin-bottom: 1.34vw;}
  ul.list_dots > li::before {
    width: 1.6vw;
    height: 1.6vw;
  }

  
  /* Label */
  ul.list_label {
    display: flex;
    flex-wrap: wrap;
  }
  
  ul.list_label li {
    margin: 0 1.34vw 1.34vw 0;
    padding: 1.34vw 2.67vw;
  }
  
  
  /* Feature */
  ul.list_feature li { align-items: stretch;}
  ul.list_feature em {
    margin-bottom: 2.67vw;
    border-radius: 0;
  }

  
  /*-- Attribute --*/
  .list_attribute {
    display: block;
    margin: 0 0 2.67vw;
  }
  
  .list_attribute li { margin-bottom: 0 0 2.67vw;}
  .list_attribute li:not(:last-child) { margin: 0 0 2.67vw;}
  .list_attribute li.rep {
    padding-bottom: 2.67vw;
    border-bottom: 1px dotted #999;
  }
  
  
  /*-- Search --*/
  .list_search {
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    gap: 4vw;
  }
  .list_search li {
    margin-bottom: 2.67vw;
    font-size: 1.4rem;
  }
  .list_search li span { margin-bottom: 2.67vw;}
  .list_search li a:hover { color: inherit;}

  
  /*-- Bnr --*/
  .list_bnr {
    flex-direction: column;
    gap: 2rem;
  }

  .list_bnr li a {
    padding: 2.67vw;
  }

  .list_bnr li a em {
    padding: 1rem;
    font-size: 1.8rem;
  }

  .list_bnr li a p {
    padding: 4vw 4vw 2.67vw 2.67vw;
    font-size: 1.4rem;
  }
  .list_bnr li a p::after {
    right: .5rem;
    width: 5.34vw;
    height: 5.34vw;
  }

  .list_bnr li a:hover {
    background: rgba(204,0,0,.1);
  }
  .list_bnr li a:hover em {
    background: #c00;
    color: #fff;
  }
  .list_bnr li a:hover p { color: #333;}
  .list_bnr li a:hover p::after { border-color: #c00;}
  
  
  /*-- Pager --*/
  div.pager { padding: 0 2.67vw;}
  
  div.pager p { font-size: 1.6rem;}

  div.pager p span { margin-left: 2.67vw;}
  
  div.pager div > * { margin: 0 1.34vw;}

  div.pager div > a {
    width: 8vw;
    height: 8vw;
    border-radius: 1.34vw;
  }

  div.pager div > a:hover { background: #333;}

  div.pager div > a::before,
  div.pager div > a::after {
    width: 1.6vw;
    height: 1.6vw;
  }

  div.pager div > a.prev::after { margin-left: 1.07vw;}
  div.pager div > a.next::after { margin-left: -1.07vw;}
  
  div.pager div li { margin: 0 1.34vw;}

  div.pager div li a {
    width: 9.34vw;
    height: 9.34vw;
  }
  div.pager div li a:hover {
    border-color: transparent;
    background: #333;
    color: #fff;
  }
  div.pager div li a.active {
    border-color: #333;
    background: #fff;
    color: #333;
  }

  
  /*-- Image Gallery --*/
  #image_gallery { display: block;}

  #image_gallery figure {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 2.67vw;
  }

  #image_gallery ul {
    display: flex;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
  }

  #image_gallery li {
    width: calc(20% - 20px);
    min-width: inherit;
    margin: 0 10px;
  }
  #image_gallery li:first-child { margin: 0 10px 0 0;}
  #image_gallery li:last-child { margin: 0 0 0 10px;}
  
  /*-- Filter --*/
  #filter dl {
    display: block;
    padding-bottom: 1rem;
  }

  #filter dt {
    width: auto;
    margin: 0 0 1rem;
    padding: 1rem;
    font-size: 1.8rem;
  }
  #filter dt::after { display: none;}

  #filter dd ul {
    margin: 0;
  }

  #filter dd li {
    width: calc(33.33% - 1rem);
    margin: .5rem;
  }
  #filter dd li:last-child { width: calc(66.66% - 1rem);}

  #filter dd li a {
    width: 100%;
    min-width: auto;
    padding: 1rem;
    text-align: center;
  }

  #filter dd li a:hover {
    background: inherit;
    color: #000;
  }
  #filter dd li a.active {
    background: #000;
    color: #fff;
  }
  #filter dd li a:hover::before { background: #000;}
  #filter dd li a.active::before { background: #fff;}
  #filter dd li a:hover::after { border-color: #000;}
  #filter dd li a.active::after { border-color: #fff;}
}



/*===== ■8. Each Section Style =====*/
/* Search */
#search_taxonomy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#search_taxonomy li { margin: 0 20px;}

#partial_match {
  margin: 0 50px;
  padding: 15px 0 30px;
  border-top: 1px dotted #999;
  border-bottom: 1px dotted #999;
}
#partial_match section {
  position: relative;
  margin: 5px 0;
}

#search_zone,
#search_category,
#search_pr,
#search_solution,
#search_export,
#search_auth {
  margin-bottom: 0;
  border-bottom: 1px dotted #999;
}

#search_zone h3,
#search_category h3,
#search_pr h3,
#search_solution h3,
#search_export h3,
#search_auth h3 {
  position: relative;
  margin-bottom: 0;
  padding: 40px 0;
}

#search_zone h3::after,
#search_category h3::after,
#search_pr h3::after,
#search_solution h3::after,
#search_export h3::after,
#search_auth h3::after {
  position: absolute;
  top: 50%;
  right: 10px;
  margin:auto;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #333;
  transform:translateY(-50%);
  content: "";
}

#search_zone h3.active::after,
#search_category h3.active::after,
#search_pr h3.active::after,
#search_solution h3.active::after,
#search_export h3.active::after,
#search_auth h3.active::after {
  border-top: 0;
  border-bottom: 30px solid #333;
}

#search_category,
#search_export,
#search_auth { display: none;}

section[id^="search"] > h3 + * {
  display: none;
  margin-bottom: 40px;
}


/* Company Detail */
#company_detail > :first-child {
  font-weight: bold;
  font-size: 2.8rem;
  margin-bottom: 10px;
  line-height: 1.2;
}
#company_detail > :first-child a { text-decoration: underline;}


/* Company Option */
#company_option {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dotted #ccc;
}

#company_option .box_video {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto 40px;
}


/* Contact - aside */
#detail_contact,
#detail_login { margin: 4rem;}

#detail_contact #contact_wrap,
#detail_login #login_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 64rem;
  max-width: 102.4rem;
  margin: 0;
  padding: 10px;
  background: rgba(204,0,0,.85);
  color: #fff;
}
#detail_login #login_wrap {
  background: #f1f1f1;
  color: #333;
}

#detail_login #login_wrap > div {
	width: 90%;
	text-align: center;
}

#detail_contact #contact_wrap > *:not(a) { width: 100%;}

#detail_contact #contact_wrap h3 {
  position: relative;
  margin-bottom: 5px;
  padding: 15px 0;
  font-weight: bold;
  font-size: 2.6rem;
  text-align: center;
  line-height: 1;
}

#detail_login #login_wrap h3 {
  width: 100%;
  margin: 1.5rem 0 2rem;
  font-weight: bold;
  font-size: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dotted #999;
  text-align: center;
}
#detail_login #login_wrap ul { margin-bottom: 1rem;}
#detail_login #login_wrap ul .flex > * { margin: .5rem;}
#detail_login #login_wrap .boxlink { margin-bottom: 2rem;}
#detail_login #error_msg {
  margin: 1rem 0;
  color: #c00;
  font-weight: bold;
}
#detail_login #error_msg > *:not(:last-child) { margin-bottom: .5rem;}

#detail_contact #contact_wrap h3 button {
  position: absolute;
  right: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  background: #900;
  transform: translateY(-50%);
}
#detail_contact #contact_wrap h3 button:hover { background: #700;}

#detail_contact #contact_wrap h3 button::before,
#detail_contact #contact_wrap h3 button::after {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 2px;
  background: #fff;
  content: "";
}
#detail_contact #contact_wrap h3 button::before {
  transform: rotate(45deg);
}
#detail_contact #contact_wrap h3 button::after {
  transform: rotate(-45deg);
}

#detail_login #login_wrap h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.6rem;
}

#detail_login #login_wrap h4::before,
#detail_login #login_wrap h4::after {
  width: 8rem;
  height: 1px;
  margin: 0 1rem;
  background: currentColor;
  content: "";
}

#detail_contact #contact_wrap > a {
  margin: 10px auto 0;
  padding: 5px 20px;
  border-radius: 4px;
  background: #000;
  font-weight: bold;
}
#detail_contact #contact_wrap > a:hover { background: #333;}

#detail_contact #contact_wrap > a i { margin-left: 5px;}

#detail_contact #contact_wrap #contact_field {
  overflow-y: auto;
  background: #f1f1f1;
  color: #333;
}

#detail_contact #contact_wrap #contact_field > p:first-child {
  margin-bottom: 10px;
  padding: 10px;
  background: #f7d9d9;
  color: #c00;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
}

#detail_contact #contact_wrap #contact_field > h4 {
  margin: 0 10px 10px;
  font-weight: bold;
}

#detail_contact #contact_wrap #contact_field ul.list_form {
  margin-bottom: 2.5rem;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  background: #f1f1f1;
}
#detail_contact #contact_wrap #contact_field ul.list_form > li dl,
#detail_contact #contact_wrap #contact_field ul.list_form > li dd li { padding: 1.5rem 1rem;}
#detail_contact #contact_wrap #contact_field ul.list_form > li:not(:last-of-type) dl { border-bottom: 1px solid #333;}

#detail_contact #contact_wrap #contact_field ul.list_form > li dt {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 4px solid #333;
  color: #333;
  font-weight: bold;
  font-size: 1.8rem;
}

#detail_contact #contact_wrap #contact_field ul.list_form > li dt div {
  margin-left: auto;
  padding-left: 5px;
  text-align: right;
}
#detail_contact #contact_wrap #contact_field ul.list_form > li dt div > * { margin: 0 0 5px 5px;}
#detail_contact #contact_wrap #contact_field ul.list_form > li dt div > *:not(:last-child) { margin: 0 0 5px;}

#detail_contact #contact_wrap #contact_field ul.list_form > li dd {
  padding-left: calc(1rem + 4px);
}

#detail_contact #contact_wrap #contact_field ul.list_form > li dd .flex2 > .flex {
  justify-content: flex-start;
  width: calc(50% - 1rem);
}

#detail_contact #contact_wrap #contact_field ul.list_form + .boxlink {
  width: 50%;
  margin: 0 auto 2rem;
}


@media (max-width: 768px) {
  /* Header Items */
  header .boxlink a { padding: 2.67vw 8vw;}
  
  /* Search */
  #search_taxonomy { justify-content: flex-start;}
  #search_taxonomy li { margin: 1.34vw 4vw;}
  
  #partial_match {
    margin: 0 2.67vw;
    padding: 2.67vw 0 5.34vw;
  }
  #partial_match section { margin: 0;}
  #partial_match section:not(:last-child) { margin-bottom: 4vw;}
  
  #search_zone h3,
  #search_category h3,
  #search_pr h3,
  #search_solution h3,
  #search_export h3,
  #search_auth h3 { padding: 5.34vw 0;}
  
  #search_zone h3::after,
  #search_category h3::after,
  #search_pr h3::after,
  #search_solution h3::after,
  #search_export h3::after,
  #search_auth h3::after {
    right: 2.67vw;
    border-left: 4vw solid transparent;
    border-right: 4vw solid transparent;
    border-top: 4vw solid #333;
  }
  
  #search_zone h3.active::after,
  #search_category h3.active::after,
  #search_pr h3.active::after,
  #search_solution h3.active::after,
  #search_export h3.active::after,
  #search_auth h3.active::after {
    border-top: 0;
    border-bottom: 4vw solid #333;
  }
  
  section[id^="search"] > h3 + * { margin-bottom: 5.34vw;}
  
  /* Company Detail */
  #company_detail > :first-child {
    font-size: 1.8rem;
    margin-bottom: 2.67vw;
    line-height: 1.3;
  }
  
  /* Company Option */
  #company_option {
    margin-bottom: 5.34vw;
    padding-bottom: 5.34vw;
  }

  #company_option .box_video {
    margin: 0 auto 5.34vw;
  }

  /* Contact - aside */
  #detail_contact,
  #detail_login { margin: 2.67vw;}

  #detail_contact #contact_wrap,
  #detail_login #login_wrap {
    min-width: auto;
    max-width: none;
  }
  
  #detail_contact #contact_wrap,
  #detail_login #login_wrap {
    margin: 0;
    padding: 2.67vw;
  }
  @supports (-webkit-touch-callout: none) {
    #detail_contact #contact_wrap,
    #detail_login #login_wrap {
      height: -webkit-fill-available;
    }
  }

  #detail_contact #contact_wrap h3 {
    margin-bottom: 1.34vw;
    padding: 4vw 0;
    font-size: 2.0rem;
  }

  #detail_login #login_wrap h3 { font-size: 1.6rem;}

  #detail_contact #contact_wrap h3 button {
    width: 8vw;
    height: 8vw;
  }
  #detail_contact #contact_wrap h3 button:hover { background: #900;}

  #detail_contact #contact_wrap > a {
    margin: 2.67vw auto 0;
    padding: 1.34vw 5.34vw;
  }
  #detail_contact #contact_wrap > a:hover { background: #000;}

  #detail_contact #contact_wrap > a i { margin-left: 1.34vw;}
  
  #detail_contact #contact_wrap #contact_field > p:first-child {
    margin-bottom: 2.67vw;
    padding: 2.67vw;
  }

  #detail_contact #contact_wrap #contact_field > h4 { margin: 0 2.67vw 2.67vw;}
  
  #detail_contact #contact_wrap #contact_field ul.list_form > li dt {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.6rem;
  }
  #detail_contact #contact_wrap #contact_field ul.list_form > li dt div { margin: .5rem 0 0; padding: 0;}
  #detail_contact #contact_wrap #contact_field ul.list_form > li dt div > * { margin: 0 0 5px;}

  #detail_contact #contact_wrap #contact_field ul.list_form > li dd {
    padding-left: 0;
    font-size: 1.4rem;
  }
}


/* Preview */
body#preview::before {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 100;
  width: calc(100% - 20px);
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #c00;
  background: #f7d9d9;
  color: #c00;
  font-weight: bold;
  text-align: center;
  content: "This page is a preview screen.";
}


body#preview {pointer-events: none;}

body#preview #image_gallery {pointer-events: all;}