@charset "UTF-8";

/* ===================================
	File Name   : module.css
	Description : Each selectors/parts CSS
	Editor      : Bface Nakamura
  Last Editor : Bface Nakamura
	
	Update Description :
	[2026/01/13] 新規作成
====================================== */

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

	1. Switch
  2. margin / padding
  3. Size
	4. Font Style
	5. Box Layout
	6. Title Setting
    -	Title - category
    -	Title - head
    -	Title - subhead
    -	Title - fill
    -	Title - strapline
    -	Title - options
	7. Parts Style
    -	Breadcrumbs
    -	Anchor
    -	Boxs
      -	Boxs - limit
      -	Boxs - emphasis
      -	Boxs - color
      -	Boxs - options
    -	Links
      -	Links - textlink
      -	Links - buttonlink
      -	Links - boxlink
      -	Links - taglink
    -	Table
      -	Table - basic
      -	Table - general
    -	Card
      -	Card - basic
      -	Card - link
    -	List
      -	List - dots
      -	List - num
      -	List - notice
    -	Photo
      -	Photo - basic
	8. Each Styles
      -	Logo
      -	Video
      -	Shadow
      -	Each Color
  9. Animations   


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



/*===== 1. Switch =====*/
.pc[class] { display: block;}
.sp[class] { display: none;}
.block[class] { display: block;}
.inline-block[class] { display: inline-block;}
.inline[class] { display: inline;}
.contents[class] { display: contents;}


@media (max-width: 768px) {
	.pc[class] { display: none;}
	.sp[class] { display: block;}
  .blocksp[class] { display: block;}
  .inline-blocksp[class] { display: inline-block;}
  .inlinesp[class] { display: inline;}
  .contentssp[class] { display: contents;}
}



/*===== 2. margin / padding =====*/
.mlauto[class] { margin-left: auto;}.ml0[class] { margin-left: 0;}.ml05[class] { margin-left: .5rem;}.ml10[class] { margin-left: 1rem;}.ml15[class] { margin-left: 1.5rem;}.ml20[class] { margin-left: 2rem;}.ml25[class] { margin-left: 2.5rem;}.ml30[class] { margin-left: 3rem;}
.mrauto[class] { margin-right: auto;}.mr0[class] { margin-right: 0;}.mr05[class] { margin-right: .5rem;}.mr10[class] { margin-right: 1rem;}.mr15[class] { margin-right: 1.5rem;}.mr20[class] { margin-right: 2rem;}.mr25[class] { margin-right: 2.5rem;}.mr30[class] { margin-right: 3rem;}
.mlrauto[class] { margin: auto;}.mlr0[class] { margin: 0;}.mlr05[class] { margin: 0 .5rem;}.mlr10[class] { margin: 0 1rem;}.mlr15[class] { margin: 0 1.5rem;}.mlr20[class] { margin: 0 2rem;}.mlr25[class] { margin: 0 2.5rem;}.mlr30[class] { margin: 0 3rem;}.mlr35[class] { margin: 0 3.5rem;}.mlr40[class] { margin: 0 4rem;}.mlr45[class] { margin: 0 4.5rem;}.mlr50[class] { margin: 0 5rem;}
.mtauto[class] { margin-top: auto;}.mt0[class] { margin-top: 0;}.mt05[class] { margin-top: .5rem;}.mt10[class] { margin-top: 1rem;}.mt15[class] { margin-top: 1.5rem;}.mt20[class] { margin-top: 2rem;}.mt25[class] { margin-top: 2.5rem;}.mt30[class] { margin-top: 3rem;}.mt35[class] { margin-top: 3.5rem;}.mt40[class] { margin-top: 4rem;}.mt45[class] { margin-top: 4.5rem;}.mt50[class] { margin-top: 5rem;}
.mbauto[class] { margin-bottom: auto;}.mb0[class] { margin-bottom: 0;}.mb05[class] { margin-bottom: .5rem;}.mb10[class] { margin-bottom: 1rem;}.mb15[class] { margin-bottom: 1.5rem;}.mb20[class] { margin-bottom: 2rem;}.mb25[class] { margin-bottom: 2.5rem;}.mb30[class] { margin-bottom: 3rem;}.mb35[class] { margin-bottom: 3.5rem;}.mb40[class] { margin-bottom: 4rem;}.mb45[class] { margin-bottom: 4.5rem;}.mb50[class] { margin-bottom: 5rem;}
.mtbauto[class] { margin: auto 0;}.mtb0[class] { margin: 0;}.mtb05[class] { margin: .5rem 0;}.mtb10[class] { margin: 1rem 0;}.mtb15[class] { margin: 1.5rem 0;}.mtb20[class] { margin: 2rem 0;}.mtb25[class] { margin: 2.5rem 0;}.mtb30[class] { margin: 3rem 0;}.mtb35[class] { margin: 3.5rem 0;}.mtb40[class] { margin: 4rem 0;}.mtb45[class] { margin: 4.5rem 0;}.mtb50[class] { margin: 5rem 0;}

.pl0[class] { padding-left: 0;}.pl05[class] { padding-left: .5rem;}.pl10[class] { padding-left: 1rem;}.pl15[class] { padding-left: 1.5rem;}.pl20[class] { padding-left: 2rem;}.pl25[class] { padding-left: 2.5rem;}.pl30[class] { padding-left: 3rem;}
.pr00[class] { padding-right: 0rem;}.pr05[class] { padding-right: .5rem;}.pr10[class] { padding-right: 1rem;}.pr15[class] { padding-right: 1.5rem;}.pr20[class] { padding-right: 2rem;}.pr25[class] { padding-right: 2.5rem;}.pr30[class] { padding-right: 3rem;}
.plr0[class] { padding: 0;}.plr05[class] { padding: 0 .5rem;}.plr10[class] { padding: 0 1rem;}.plr15[class] { padding: 0 1.5rem;}.plr20[class] { padding: 0 2rem;}.plr25[class] { padding: 0 2.5rem;}.plr30[class] { padding: 0 3rem;}.plr35[class] { padding: 0 3.5rem;}.plr40[class] { padding: 0 4rem;}.plr45[class] { padding: 0 4.5rem;}.plr50[class] { padding: 0 5rem;}
.pt0[class] { padding-top: 0;}.pt05[class] { padding-top: .5rem;}.pt10[class] { padding-top: 1rem;}.pt15[class] { padding-top: 1.5rem;}.pt20[class] { padding-top: 2rem;}.pt25[class] { padding-top: 2.5rem;}.pt30[class] { padding-top: 3rem;}.pt35[class] { padding-top: 3.5rem;}.pt40[class] { padding-top: 4rem;}.pt45[class] { padding-top: 4.5rem;}.pt50[class] { padding-top: 5rem;}
.pb0[class] { padding-bottom: 0;}.pb05[class] { padding-bottom: .5rem;}.pb10[class] { padding-bottom: 1rem;}.pb15[class] { padding-bottom: 1.5rem;}.pb20[class] { padding-bottom: 2rem;}.pb25[class] { padding-bottom: 2.5rem;}.pb30[class] { padding-bottom: 3rem;}.pb35[class] { padding-bottom: 3.5rem;}.pb40[class] { padding-bottom: 4rem;}.pb45[class] { padding-bottom: 4.5rem;}.pb50[class] { padding-bottom: 5rem;}
.ptb0[class] { padding: 0;}.ptb05[class] { padding: .5rem 0;}.ptb10[class] { padding: 1rem 0;}.ptb15[class] { padding: 1.5rem 0;}.ptb20[class] { padding: 2rem 0;}.ptb25[class] { padding: 2.5rem 0;}.ptb30[class] { padding: 3rem 0;}.ptb35[class] { padding: 3.5rem 0;}.ptb40[class] { padding: 4rem 0;}.ptb45[class] { padding: 4.5rem 0;}.ptb50[class] { padding: 5rem 0;}


@media (max-width: 768px) {
	.mlautosp[class] { margin-left: auto;}.ml0sp[class] { margin-left: 0;}.ml05sp[class] { margin-left: .5rem;}.ml10sp[class] { margin-left: 1rem;}.ml15sp[class] { margin-left: 1.5rem;}.ml20sp[class] { margin-left: 2rem;}.ml25sp[class] { margin-left: 2.5rem;}.ml30sp[class] { margin-left: 3rem;}
	.mrautosp[class] { margin-right: auto;}.mr0sp[class] { margin-right: 0;}.mr05sp[class] { margin-right: .5rem;}.mr10sp[class] { margin-right: 1rem;}.mr15sp[class] { margin-right: 1.5rem;}.mr20sp[class] { margin-right: 2rem;}.mr25sp[class] { margin-right: 2.5rem;}.mr30sp[class] { margin-right: 3rem;}
	.mlrautosp[class] { margin: auto;}.mlr0sp[class] { margin: 0;}.mlr05sp[class] { margin: 0 .5rem;}.mlr10sp[class] { margin: 0 1rem;}.mlr15sp[class] { margin: 0 1.5rem;}.mlr20sp[class] { margin: 0 2rem;}.mlr25sp[class] { margin: 0 2.5rem;}.mlr30sp[class] { margin: 0 3rem;}.mlr35sp[class] { margin: 0 3.5rem;}.mlr40sp[class] { margin: 0 4rem;}.mlr45sp[class] { margin: 0 4.5rem;}.mlr50sp[class] { margin: 0 5rem;}
	.mtautosp[class] { margin-top: auto;}.mt0sp[class] { margin-top: 0;}.mt05sp[class] { margin-top: .5rem;}.mt10sp[class] { margin-top: 1rem;}.mt15sp[class] { margin-top: 1.5rem;}.mt20sp[class] { margin-top: 2rem;}.mt25sp[class] { margin-top: 2.5rem;}.mt30sp[class] { margin-top: 3rem;}.mt35sp[class] { margin-top: 3.5rem;}.mt40sp[class] { margin-top: 4rem;}.mt45sp[class] { margin-top: 4.5rem;}.mt50sp[class] { margin-top: 5rem;}
	.mbautosp[class] { margin-bottom: auto;}.mb0sp[class] { margin-bottom: 0;}.mb05sp[class] { margin-bottom: .5rem;}.mb10sp[class] { margin-bottom: 1rem;}.mb15sp[class] { margin-bottom: 1.5rem;}.mb20sp[class] { margin-bottom: 2rem;}.mb25sp[class] { margin-bottom: 2.5rem;}.mb30sp[class] { margin-bottom: 3rem;}.mb35sp[class] { margin-bottom: 3.5rem;}.mb40sp[class] { margin-bottom: 4rem;}.mb45sp[class] { margin-bottom: 4.5rem;}.mb50sp[class] { margin-bottom: 5rem;}
	.mtbautosp[class] { margin: auto 0;}.mtb0sp[class] { margin: 0;}.mtb05sp[class] { margin: .5rem 0;}.mtb10sp[class] { margin: 1rem 0;}.mtb15sp[class] { margin: 1.5rem 0;}.mtb20sp[class] { margin: 2rem 0;}.mtb25sp[class] { margin: 2.5rem 0;}.mtb30sp[class] { margin: 3rem 0;}.mtb35sp[class] { margin: 3.5rem 0;}.mtb40sp[class] { margin: 4rem 0;}.mtb45sp[class] { margin: 4.5rem 0;}.mtb50sp[class] { margin: 5rem 0;}

	.pl0sp[class] { padding-left: 0;}.pl05sp[class] { padding-left: .5rem;}.pl10sp[class] { padding-left: 1rem;}.pl15sp[class] { padding-left: 1.5rem;}.pl20sp[class] { padding-left: 2rem;}.pl25sp[class] { padding-left: 2.5rem;}.pl30sp[class] { padding-left: 3rem;}
	.pr0sp[class] { padding-right: 0;}.pr05sp[class] { padding-right: .5rem;}.pr10sp[class] { padding-right: 1rem;}.pr15sp[class] { padding-right: 1.5rem;}.pr20sp[class] { padding-right: 2rem;}.pr25sp[class] { padding-right: 2.5rem;}.pr30sp[class] { padding-right: 3rem;}
	.plr0sp[class] { padding: 0;}.plr05sp[class] { padding: 0 .5rem;}.plr10sp[class] { padding: 0 1rem;}.plr15sp[class] { padding: 0 1.5rem;}.plr20sp[class] { padding: 0 2rem;}.plr25sp[class] { padding: 0 2.5rem;}.plr30sp[class] { padding: 0 3rem;}.plr35sp[class] { padding: 0 3.5rem;}.plr40sp[class] { padding: 0 4rem;}.plr45sp[class] { padding: 0 4.5rem;}.plr50sp[class] { padding: 0 5rem;}
	.pt0sp[class] { padding-top: 0;}.pt05sp[class] { padding-top: .5rem;}.pt10sp[class] { padding-top: 1rem;}.pt15sp[class] { padding-top: 1.5rem;}.pt20sp[class] { padding-top: 2rem;}.pt25sp[class] { padding-top: 2.5rem;}.pt30sp[class] { padding-top: 3rem;}.pt35sp[class] { padding-top: 3.5rem;}.pt40sp[class] { padding-top: 4rem;}.pt45sp[class] { padding-top: 4.5rem;}.pt50sp[class] { padding-top: 5rem;}
	.pb0sp[class] { padding-bottom: 0;}.pb05sp[class] { padding-bottom: .5rem;}.pb10sp[class] { padding-bottom: 1rem;}.pb15sp[class] { padding-bottom: 1.5rem;}.pb20sp[class] { padding-bottom: 2rem;}.pb25sp[class] { padding-bottom: 2.5rem;}.pb30sp[class] { padding-bottom: 3rem;}.pb35sp[class] { padding-bottom: 3.5rem;}.pb40sp[class] { padding-bottom: 4rem;}.pb45sp[class] { padding-bottom: 4.5rem;}.pb50sp[class] { padding-bottom: 5rem;}
	.ptb0sp[class] { padding: 0;}.ptb05sp[class] { padding: .5rem 0;}.ptb10sp[class] { padding: 1rem 0;}.ptb15sp[class] { padding: 1.5rem 0;}.ptb20sp[class] { padding: 2rem 0;}.ptb25sp[class] { padding: 2.5rem 0;}.ptb30sp[class] { padding: 3rem 0;}.ptb35sp[class] { padding: 3.5rem 0;}.ptb40sp[class] { padding: 4rem 0;}.ptb45sp[class] { padding: 4.5rem 0;}.ptb50sp[class] { padding: 5rem 0;}
}


/*===== 3. Size =====*/
.w05[class] { width: 5%;}.w10[class] { width: 10%;}.w15[class] { width: 15%;}.w20[class] { width: 20%;}.w25[class] { width: 25%;}.w30[class] { width: 30%;}.w35[class] { width: 35%;}.w40[class] { width: 40%;}.w45[class] { width: 45%;}.w50[class] { width: 50%;}.w55[class] { width: 55%;}.w60[class] { width: 60%;}.w65[class] { width: 65%;}.w70[class] { width: 70%;}.w75[class] { width: 75%;}.w80[class] { width: 80%;}.w85[class] { width: 85%;}.w90[class] { width: 90%;}.w95[class] { width: 95%;}.w100[class] { width: 100%;}
.w20-10[class] { width: calc(20% - 1rem);}.w20-20[class] { width: calc(20% - 2rem);}.w20-30[class] { width: calc(20% - 3rem);}
.w25-10[class] { width: calc(25% - 1rem);}.w25-20[class] { width: calc(25% - 2rem);}.w25-30[class] { width: calc(25% - 3rem);}
.w30-10[class] { width: calc(30% - 1rem);}.w30-20[class] { width: calc(30% - 2rem);}.w30-30[class] { width: calc(30% - 3rem);}
.w40-10[class] { width: calc(40% - 1rem);}.w40-20[class] { width: calc(40% - 2rem);}.w40-30[class] { width: calc(40% - 3rem);}
.w50-10[class] { width: calc(50% - 1rem);}.w50-20[class] { width: calc(50% - 2rem);}.w50-30[class] { width: calc(50% - 3rem);}
.w60-10[class] { width: calc(60% - 1rem);}.w60-20[class] { width: calc(60% - 2rem);}.w60-30[class] { width: calc(60% - 3rem);}
.w70-10[class] { width: calc(70% - 1rem);}.w70-20[class] { width: calc(70% - 2rem);}.w70-30[class] { width: calc(70% - 3rem);}
.w75-10[class] { width: calc(75% - 1rem);}.w75-20[class] { width: calc(75% - 2rem);}.w75-30[class] { width: calc(75% - 3rem);}
.w80-10[class] { width: calc(80% - 1rem);}.w80-20[class] { width: calc(80% - 2rem);}.w80-30[class] { width: calc(80% - 3rem);}
.wfit { width: fit-content;}
.hauto { height: auto;}
.h100 { height: 100%;}

@media (max-width: 768px) {
	.w05sp[class] { width: 5%;}.w10sp[class] { width: 10%;}.w15sp[class] { width: 15%;}.w20sp[class] { width: 20%;}.w25sp[class] { width: 25%;}.w30sp[class] { width: 30%;}.w35sp[class] { width: 35%;}.w40sp[class] { width: 40%;}.w45sp[class] { width: 45%;}.w50sp[class] { width: 50%;}.w55sp[class] { width: 55%;}.w60sp[class] { width: 60%;}.w65sp[class] { width: 65%;}.w70sp[class] { width: 70%;}.w75sp[class] { width: 75%;}.w80sp[class] { width: 80%;}.w85sp[class] { width: 85%;}.w90sp[class] { width: 90%;}.w95sp[class] { width: 95%;}.w100sp[class] { width: 100%;}
	
  .w20-10sp[class] { width: calc(20% - 1rem);}.w20-20sp[class] { width: calc(20% - 2rem);}.w20-30sp[class] { width: calc(20% - 3rem);}
  .w25-10sp[class] { width: calc(25% - 1rem);}.w25-20sp[class] { width: calc(25% - 2rem);}.w25-30sp[class] { width: calc(25% - 3rem);}
  .w30-10sp[class] { width: calc(30% - 1rem);}.w30-20sp[class] { width: calc(30% - 2rem);}.w30-30sp[class] { width: calc(30% - 3rem);}
  .w40-10sp[class] { width: calc(40% - 1rem);}.w40-20sp[class] { width: calc(40% - 2rem);}.w40-30sp[class] { width: calc(40% - 3rem);}
  .w50-10sp[class] { width: calc(50% - 1rem);}.w50-20sp[class] { width: calc(50% - 2rem);}.w50-30sp[class] { width: calc(50% - 3rem);}
  .w60-10sp[class] { width: calc(60% - 1rem);}.w60-20sp[class] { width: calc(60% - 2rem);}.w60-30sp[class] { width: calc(60% - 3rem);}
  .w70-10sp[class] { width: calc(70% - 1rem);}.w70-20sp[class] { width: calc(70% - 2rem);}.w70-30sp[class] { width: calc(70% - 3rem);}
  .w75-10sp[class] { width: calc(75% - 1rem);}.w75-20sp[class] { width: calc(75% - 2rem);}.w75-30sp[class] { width: calc(75% - 3rem);}
  .w80-10sp[class] { width: calc(80% - 1rem);}.w80-20sp[class] { width: calc(80% - 2rem);}.w80-30sp[class] { width: calc(80% - 3rem);}
  .hautosp[class] { height: auto;}
  .h100sp[class] { height: 100%;}
}


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

.red[class] { color: #c00;}.yellow[class] { color: #ff0;}.white[class] { color: var(--baseC);}.black[class] { color: var(--DC);}.lgray{ color: #ccc;}.dgray{ color: var(--GC);}.dominant[class] { color: var(--dominantC);}

.normal[class] { font-weight: 400;}.medium[class] { font-weight: 500;}.semibold[class] { font-weight: 600;}.bold[class] { font-weight: 700;}.exbold[class] { font-weight: 800;}

.wrap[class] { white-space: normal;}.nowrap[class] {white-space: nowrap;}

.fs12[class] { font-size: 1.2rem;}.fs14[class] { font-size: 1.4rem;}.fs16[class] { font-size: 1.6rem;}.fs18[class] { font-size: 1.8rem;}
.fs20[class] { font-size: 2.0rem;}.fs22[class] { font-size: 2.2rem;}.fs24[class] { font-size: 2.4rem;}.fs26[class] { font-size: 2.6rem;}.fs28[class] { font-size: 2.8rem;}.fs30[class] { font-size: 3.0rem;}.fs32[class] { font-size: 3.2rem;}.fs34[class] { font-size: 3.4rem;}.fs36[class] { font-size: 3.6rem;}.fs38[class] { font-size: 3.8rem;}.fs40[class] { font-size: 4.0rem;}

.line1-2[class] { line-height: 1.2;}.line1-4[class] { line-height: 1.4;}.line1-6[class] { line-height: 1.6;}.line1-8[class] { line-height: 1.8;}

.left[class] { text-align: left;}.center[class] { text-align: center;}.right[class] { text-align: right;}

.indent {
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}

@media (max-width: 768px) {
  .normalsp[class] { font-weight: 400;}.boldsp[class] { font-weight: 700;}

  .wrapsp[class] { white-space: normal;}.nowrapsp[class] {white-space: nowrap;}
  
	.fs10sp[class] { font-size: 1.0rem;}.fs12sp[class] { font-size: 1.2rem;}.fs14sp[class] { font-size: 1.4rem;}.fs16sp[class] { font-size: 1.6rem;}.fs18sp[class] { font-size: 1.8rem;}.fs20sp[class] { font-size: 2.0rem;}.fs20sp[class] { font-size: 2.0rem;}.fs22sp[class] { font-size: 2.2rem;}.fs24sp[class] { font-size: 2.4rem;}.fs26sp[class] { font-size: 2.6rem;}.fs28sp[class] { font-size: 2.8rem;}.fs30sp[class] { font-size: 3.0rem;}.fs32sp[class] { font-size: 3.2rem;}.fs34sp[class] { font-size: 3.4rem;}.fs36sp[class] { font-size: 3.6rem;}.fs38sp[class] { font-size: 3.8rem;}.fs40sp[class] { font-size: 4.0rem;}
  
  .line1-2sp[class] { line-height: 1.2;}.line1-4sp[class] { line-height: 1.4;}.line1-6sp[class] { line-height: 1.6;}.line1-8sp[class] { line-height: 1.8;}
	
	.leftsp[class] { text-align: left;}.centersp[class] { text-align: center;}.rightsp[class] { text-align: right;}
}


/*===== 5. Box Layout =====*/
.flex[class] {
  display: flex;
  flex-wrap: wrap;
}
.flexcolumn[class] { flex-direction: column;}
.flexrow[class] { flex-direction: row;}
.flexstart[class] { justify-content: flex-start;}
.flexend[class] { justify-content: flex-end;}
.flexcenter[class] { justify-content: center;}
.flexbetween[class] { justify-content: space-between;}
.flextop[class] { align-items: flex-start;}
.flexmiddle[class] { align-items: center;}
.flexbottom[class] { align-items: flex-end;}
.flexwrap[class] { flex-wrap: wrap;}
.flexnowrap[class] { flex-wrap: nowrap;}
.flexnone[class] { flex: none;}
.flex01[class] { flex: 1;}
.flex02[class] { flex: 2;}
.flex03[class] { flex: 3;}
.order01[class] { order: 1;}
.order02[class] { order: 2;}
.order03[class] { order: 3;}
.gap01[class] { gap: 1rem;}
.gap02[class] { gap: 2rem;}
.gap03[class] { gap: 3rem;}

.flex2,
.flex3,
.flex4,
.flex5 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex2 > * { width: calc(50% - 2rem); margin: 0 1rem;}
.flex3 > * { width: calc(33.33% - 2rem); margin: 0 1rem;}
.flex4 > * { width: calc(25% - 2rem); margin: 0 1rem;}
.flex5 > * { width: calc(20% - 2rem); margin: 0 1rem;}

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

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


@media (max-width: 768px) {
  .flexcolumnsp[class] { flex-direction: column;}
  .flexcolumn-rsp[class] {flex-direction: column-reverse;}
  .flexrowsp[class] { flex-direction: row;}
  .flexstartsp[class] { justify-content: flex-start;}
  .flexendsp[class] { justify-content: flex-end;}
  .flexcentersp[class] { justify-content: center;}
  .flexbetweensp[class] { justify-content: space-between;}
  .flextopsp[class] { align-items: flex-start;}
  .flexmiddlesp[class] { align-items: center;}
  .flexbottomsp[class] { align-items: flex-end;}
  .flexwrapsp[class] { flex-wrap: wrap;}
  .flexnowrapsp[class] { flex-wrap: nowrap;}
  .flexnonesp[class] { flex: none;}
  .flex01sp[class] { flex: 1;}
  .flex02sp[class] { flex: 2;}
  .flex03sp[class] { flex: 3;}
  .order01sp[class] { order: 1;}
  .order02sp[class] { order: 2;}
  .order03sp[class] { order: 3;}
	.gap01sp[class] { gap: 1rem;}
	.gap02sp[class] { gap: 2rem;}
	.gap03sp[class] { gap: 3rem;}

	.flex2 > *,
	.flex3 > *,
	.flex4 > *,
	.flex5 > * { width: calc(50% - .5rem);}
  
  [class^="flex"].single > * { width: 100%;}

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


/*===== 6. Title Setting =====*/
/* Title - category */
#tit_cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 3rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  span {
    display: block;
    min-width: 12rem;
    margin-bottom: 1rem;
    padding: 0 1rem 1rem;
    border-bottom: .5rem solid #000;
    font-size: 2rem;
    font-family: 'Merriweather Sans', sans-serif;
  }
}

/* Title - head */
.tit_head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  font-weight: bold;
  font-size: 4.0rem;
  font-family: 'Merriweather Sans', 'Noto Sans JP', sans-serif;
  text-align: center;
  line-height: 1.2;
  &::before, &::after {
    width: 2.5rem;
    min-height: 12rem;
    border-top: .2rem solid var(--DC);
    border-bottom: .2rem solid var(--DC);
    content: "";
  }
  &::before { margin-right: 3rem; border-left: .2rem solid var(--DC);}
  &::after { margin-left: 3rem; border-right: .2rem solid var(--DC);}
  span {
    display: block;
    font-size: 4.6rem;
  }
}

/* Title - subhead */
.tit_subhead {
  position: relative;
  margin-bottom: 1rem;
  font-weight: bold;
  text-align: center;
  em {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 4.0rem;
    text-shadow: -.2rem -.2rem .1rem var(--baseC), .2rem .2rem .1rem var(--baseC), -.5rem -.5rem .5rem var(--baseC), .5rem .5rem .5rem var(--baseC);
  }
  span {
    color: rgba(235,235,235,.5);
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 12rem;
    line-height: .8;
  }
}

/* Title - fill */
.tit_fill {
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--dominantC);
  color: var(--baseC);
  font-weight: bold;
  font-size: 2.4rem;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .1rem;
}

/* Title - strapline */
.tit_strapline {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 2rem;
  font-size: 2.0rem;
  font-family: 'Noto Sans JP', sans-serif;
  &::before, &::after {
    width: 4rem;
    height: .1rem;
    margin: 0 2rem;
    background: var(--DC);
    content: "";
  }
}

/* Title - options */
.tit_options {
  margin-bottom: 1rem;
  color: #999;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  span {
    margin-right: 1rem;
    font-size: 1.8rem;
    font-family: 'Merriweather Sans', sans-serif;
  }
}

@media (max-width: 768px) {
  /* Title - category */
  #tit_cat {
    margin: 0 auto 2rem;
    font-size: 1.4rem;
    span {
      margin-bottom: 1rem;
      padding: 0 .5rem 1rem;
      font-size: 1.6rem;
    }
  }

  /* Title - head */
  .tit_head {
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 2rem;
    font-size: 2.6rem;
    line-height: 1.4;
    &::before, &::after {
      width: 1rem;
      min-height: auto;
    }
    &::before { margin-right: 2rem;}
    &::after { margin-left: 2rem;}
    h1 { padding: 1.5rem 0;}
    span { font-size: 2.8rem;}
  }

  /* Title - subhead */
  .tit_subhead { 
    margin-bottom: 1.5rem;
    em { font-size: 2.4rem;}
    span { font-size: 5.2rem;}
  }

  /* Title - fill */
  .tit_fill {
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }

  /* Title - strapline */
  .tit_strapline {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
  }
}



/*===== 7. Parts Style =====*/
/* Breadcrumbs */
#breadcrumbs {
  margin: 0 1rem;
  padding: 1rem;
  background: rgba(0,0,0,.25);
  ol {
    display: flex;
    align-items: center;
  }
  li {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    color: var(--GC);
    font-size: 1.4rem;
    font-family: 'Noto Sans JP', sans-serif;
    &:last-child { 
      color: var(--DC);
      &::after { display: none;}
    }
    &::after {
      width: .6rem;
	    height: .6rem;
	    margin-left: 1rem;
	    border-top: .1rem solid #8B968D;
	    border-right: .1rem solid #8B968D;
	    transform: rotate(45deg);
	    content:'';
    }
    a { 
      color: var(--GC);
      &:hover { color: #999;}
    }
  }
}

@media (max-width: 768px) {
  #breadcrumbs {
    overflow-x: auto;
    margin: 0;
    padding: 1rem;
    white-space: nowrap;
    * { font-size: 1.2rem;}
    li { 
      margin-right: 1rem;
      &:last-child { padding-right: 1rem;}
      &::after {
        width: .5rem;
        height: .5rem;
        margin-left: 1rem;
        border-width: .2rem;
      }
    }
  }
}


/*-- Anchor --*/
#anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5rem;
  li {
    min-width: 18rem;
    margin: 0 1rem 1rem;
    a {
      width: 100%;
      background: var(--DC);
      padding: 1rem .5rem;
      color: var(--baseC);
      font-size: 1.4rem;
      text-align: center;
      &:hover { background: var(--GC);}
    }
  }
}

@media (max-width: 768px) {
  #anchor {
    justify-content: space-between;
    margin-bottom: 3rem;
    li {
      width: calc(50% - .5rem);
      min-width: auto;
      margin: 0 0 1rem;
      text-align: center;
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        &:hover { background: var(--DC);}
      }
    }
  }
}


/*-- Boxs --*/
/* Boxs - limit */
.box_wrapper {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.box_wrapper_min {
  max-width: 104.4rem;
  margin: 0 auto;
  padding: 0 1rem;
}


/* Boxs - emphasis */
.box_emphasis {
  position: relative;
  margin: 0 1rem;
  padding: 5rem 4rem;
  border: 5rem solid var(--GCl);
  background: var(--baseC);
  > i {
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(204,204,204,.5);
    font-size: 8rem;
    font-family: 'Merriweather Sans', sans-serif;
    line-height: .8;
    transform: translateY(-50%);
  }
  iframe.video {
    + p {
      right: 7rem;
    }
  }
}

@media (max-width: 768px) {
  .box_emphasis {
    iframe.video {
      + p {
        right: 1rem;
      }
    }
  }
}


/* Boxs - color */
.box_white[class] { background: var(--baseC);}
.box_block[class] { background: var(--DC);}
.box_lightgray[class] { background: var(--GCl);}
.box_darkgray[class] { background: var(--GCd);}
.box_red[class] { background: #c00;}
.box_dominant[class] { background: var(--dominantC);}


/* Boxs - options */
.box_options {
  padding: 3rem 0 1rem;
  border-top: .1rem solid #ccc;
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: calc(25% - 1rem);
  }
}
.box_wrapper .box_options { margin: 0;}


@media (max-width: 768px) {
  /* Boxs - limit */
  .box_wrapper { padding: 0 1rem;}
  main .box_wrapper { padding: 0;}


  /* Boxs - emphasis */
  .box_emphasis {
    margin: 0;
    padding: 2rem 1rem 1rem;
    border: 1.5rem solid var(--GCl);
    > i { font-size: 3.0rem;}
  }
  
  /* Boxs - options */
  .box_options {
    padding: 2rem 0 1rem;
    ul {justify-content: space-between;}
    li { width: calc(50% - .5rem)!important;}
  }
}


@media (min-width: 1536px){ 
  /* Boxs - limit */
  .box_wrapper {
    max-width: none;
    margin: 0 1rem;
    padding: 0;
  }
  
  #footer_sitemap .box_wrapper { 
    max-width: none;
    padding: 0 5rem;}
}


/*-- Links --*/
/* Links - textlink */
a.textlink {
  position: relative;
  padding-right: 2.5rem;
  &::before, &::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    vertical-align: middle;
    content: "";
  }
  &::before {
    width: 1.9rem;
    height: 1.9rem;
    border: .1rem solid currentColor;
    border-radius: 50%;
  }
  &::after {
    width: .6rem;
    height: .6rem;
    right: .9rem;
    border-top: .1rem solid currentColor;
    border-right: .1rem solid currentColor;
    transform: rotate(45deg);
  }
}


/* Links - buttonlink */
a.buttonlink {
  display: block;
  margin: 0 auto;
  padding: 0 0 .4rem;
  span {
    display: flex;
    justify-content: center;
    position: relative;
    padding: .5em 1em;
    box-shadow: 0 .4rem 0 #a49900;
    border-radius: .5rem;
    background: linear-gradient(to bottom, #fff100 0, #fff100 50%, #f0e400 50.1%, #f0e400 100%) left top no-repeat;
    color: var(--DC);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 .2rem .1rem rgba(0, 0, 0, .15);
    white-space: nowrap;
    transition: .25s;
  }
  &:hover span {
    margin: .4rem 0 -.4rem;
    box-shadow: none;
    background: linear-gradient(to bottom,#e5d600 0,#e5d600 50%,#e5d600 50.1%,#e5d600 100%) left top no-repeat;
  }
  &.buttonred {
    span {
      box-shadow: 0 .4rem 0 #8d0000;
      color: var(--baseC);
      background: linear-gradient(to bottom, #e00 0%, #e00 50%, #e20000 50.1%, #e20000 100%) no-repeat left top;
    }
    &:hover span {
      box-shadow: none;
      background: linear-gradient(to bottom,#c00 0,#c00 50%,#c00 50.1%,#c00 100%) left top no-repeat;
      color: #dfcccc;
    }
  }
  &.buttonorange {
    span {
      box-shadow: 0 .4rem 0 #ad5e00;
      color: var(--baseC);
      background: linear-gradient(to bottom,#ff8a00 0,#ff8a00 50%,#f08000 50.1%,#f08000 100%) left top no-repeat;
    }
    &:hover span {
      box-shadow: none;
      background: linear-gradient(to bottom,#e47b00 0,#e47b00 50%,#e47b00 50.1%,#e47b00 100%) left top no-repeat;
      color: #ffe5ce;
    }
  }
}


/* Links - boxlink */
a.boxlink {
  display: flex;
  position: relative;
  margin: 0 auto;
  padding: .5rem;
  box-shadow: 0 .4rem .8rem rgba(0, 0, 0, .5), 0 .1rem .1rem .1rem rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--dominantC) 0%, var(--dominant-lightC) 50%, var(--dominantC) 100%) no-repeat left top / 200% auto;
  color: var(--baseC);
  font-size: 2.0rem;
  text-align: center;
  text-shadow: 0 .2rem .1rem rgba(0, 0, 0, .15);
  transition: .5s;
  &.limit { max-width: 64rem;}
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top left, transparent 50%, rgba(255,255,255,.05) 50.01%) no-repeat top left / 100% 100%;
    content: "";
  }
  &::after {
	  position: absolute;
	  top: 50%;
	  right: 2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-top: .2rem solid currentColor;
    border-right: .2rem solid currentColor;
    transform: translateY(-50%) rotate(45deg);
	  transition: right .5s;
	  filter: drop-shadow(0 .2rem .1rem rgba(0, 0, 0, .15));
    content: "";
  }
  &:hover {
    box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .25), 0 .1rem .1rem .1rem rgba(0, 0, 0, 0.15);
    background-position: right center;
    &::after { right: 1.5rem;}
  }
  span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    min-height: 7rem;
    padding: 1rem 2.5rem;
    border: .1rem solid rgba(255,255,255,.65);
    color: var(--baseC);
  }
  [class^="ico_"]::before {
    color: currentColor;
    font-size: inherit;
  }
  &.linkgray { 
    background: linear-gradient(135deg, #828a95 0%, var(--GCd) 50%, #828a95 100%) no-repeat left top / 200% auto;
    &:hover { background-position: right center;}
  }
}


@media (max-width: 768px) {
  /* Links - textlink */
  a.textlink { 
    padding-right: 2.5rem;
    &::before {
      width: 2rem;
      height: 2rem;
    }
    &::after {
      width: .6rem;
      height: .6rem;
      right: 1rem;
    }
  }

  /* Links - buttonlink */
  a.buttonlink {
    span {
      transition: none;
    }
    &:hover span {
      margin: 0;
    }
  }

  /* Links - boxlink */
  a.boxlink {
    padding: .5rem;
    box-shadow: 0 .2rem .4rem rgba(0,0,0,25%), 0 .1rem .1rem .1rem rgba(0,0,0,15%);
    font-size: 1.8rem;
    transition: none;
    &::after {
      right: 1.5rem;
      width: 1rem;
      height: 1rem;
      transition: none;
    }
    &:hover {
      background-position: inherit;
      color: var(--baseC);
      &::after { right: 1.5rem;}
    }
    span {
      min-height: 6rem;
      padding: 1rem 2rem 1rem 1.5rem;
    }
    &.linkgray:hover { background-position: inherit;}
  }

  
}


/*-- Table --*/
/* Table - basic */
.table_basic {
  width: 100%;
  height: 100%;
  th {
    position: relative;
    width: 15rem;
    padding: 2.5rem 2rem;
    border-bottom: .2rem solid var(--DC);
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    &::before, &::after {
      position: absolute;
      bottom: 0;
      width: .2rem;
      height: 1rem;
      background: var(--DC);
      content: "";
    }
    &::before { left: 0;}
    &::after { right: 0;}
  }
  td {
    max-width: 0;
    padding: 2.5rem 2rem;
    border-bottom: .1rem solid var(--GCl);
  }
}


/* Table - general */
.table_general {
  overflow-x: auto;
  text-align: center;
  table {
    width: 100%;
    height: 100%;
    border-collapse: separate;
    border-spacing: .1rem;
    border: .1rem solid var(--GCl);
    -webkit-text-size-adjust: 100%;
    &.fixed { table-layout: fixed;}
  }
  th {
    padding: 1.5rem;
    background: var(--GCd);
    color: var(--baseC);
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.2;
    vertical-align: middle;
  }
  td {
    padding: 1.5rem;
    font-size: 1.8rem;
  }
  tr {
    &:nth-child(even) td { background: var(--baseC);}
    &:nth-child(odd) td { background: #f1f1f1;}
  }
}

@media (max-width: 768px) {
  /* Table - basic */
  .table_basic {
    th {
      display: block;
      width: 100%;
      padding: 1rem;
      border: .2rem solid var(--DC);
      background: var(--baseC);
      &::before, &::after { 
        display: none; 
        height: 1rem;
      }
    }
    td {
      display: block;
      padding: 1.5rem 1rem;
      max-width: none;
      border: none;
    }
  }
  
  /* Table - general */
  .table_general {
    width: 100%;
    white-space: nowrap;
    table {
      &.fixed { table-layout: auto;}
    }
    th {
      padding: 1rem 2rem;
      font-size: 1.6rem;
    }
    td {
      padding: 1rem 2rem;
      font-size: 1.6rem;
    }
  }
}


/*-- Card --*/
/* Card - basic */
ul.card_basic {
  > li {
    box-shadow: .2rem .2rem .5rem rgba(0,0,0,.25);
    background: var(--baseC);
    a {
      display: block;
      height: 100%;
      color: inherit;
      transition: .25s;
      &:hover {
        box-shadow: .4rem .4rem 1rem rgba(0,0,0,.25);
        background: #f1f1f1;
        figure::before { background: rgba(153,153,153,.25);}
      }
      img { opacity: 1;}
    }
    i {
      display: block;
      padding: 1rem;
      color: #999;
      line-height: 1;
    }
    figure { 
      position: relative;
      &::before, &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: .25s;
        content: "";
      }
      &::before { background: rgba(153,153,153,.5);}
      &::after { background: url("../img/common/bg-dotted.png");}
    }
    dl {
      padding: 1rem;
      font-family: sans-serif;
    }
    dt {
      margin-bottom: 1rem;
      font-weight: bold;
      font-size: 1.8rem;
    }
    dd {
      font-size: 1.6rem;
      line-height: 1.5;
    }
  }
}

@media (max-width: 768px) {
  ul.card_basic {
    > li { 
      a { 
        padding: 0 !important;
        i { 
          position: relative;
          padding: 1rem;
          &::after {
            position: absolute;
            top: 50%;
            right: 1rem;
            width: .5rem;
            height: .5rem;
            border-top: .2rem solid currentColor;
            border-right: .2rem solid currentColor;
            transform: translateY(-50%) rotate(45deg);
            content: "";
          }
        }
        &:hover { 
          box-shadow: none; 
          background: var(--baseC);
          figure::before { background: rgba(153,153,153,.5);}
        }
      }
      dl { padding: 1rem;}
      dt {
        font-size: 1.6rem;
        margin-bottom: .5rem;
      }
       dd { font-size: 1.4rem;}
    }
  } 
}


/* Card - link */
.cardlink {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
  &::after {
    display: block;
    width: calc(25% - 1.5rem);
    content: "";
  }
  li {
    background: var(--baseC);
    box-shadow: .2rem .2rem .5rem rgba(0,0,0,.25);
    width: calc(25% - 1.5rem);
  }
  a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: .1rem;
    &:hover {
      box-shadow: .4rem .4rem 1rem rgba(0,0,0,.25);
      background: #f1f1f1;
    }
    > div { padding: .5rem;}
  }
  h3 {
    display: flex;
    align-items: center;
    height: 4rem;
    padding: 0 0 .5rem;
  }
  figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .card_plant a { 
    border-top: .3rem solid #86509c;
    > div {
      background: linear-gradient(to top left,rgba(135, 80, 156,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_infra a { 
    border-top: .3rem solid #ec6c00;
    > div {
      background: linear-gradient(to top left,rgba(236, 108, 0,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_operation a { 
    border-top: .3rem solid #c73379;
    > div {
      background: linear-gradient(to top left,rgba(199, 51, 121,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_construction a { 
    border-top: .3rem solid #aa0102;
    > div {
      background: linear-gradient(to top left,rgba(170, 1, 2,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_dx a { 
    border-top: .3rem solid #a57f1f;
    > div {
      background: linear-gradient(to top left,rgba(165, 127, 31,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_non-pole a { 
    border-top: .3rem solid #004da0;
    > div {
      background: linear-gradient(to top left,rgba(0, 77, 160,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_traffic a { 
    border-top: .3rem solid #ea66a0;
    > div {
      background: linear-gradient(to top left,rgba(234, 102, 160,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_drone a { 
    border-top: .3rem solid #0f9596;
    > div {
      background: linear-gradient(to top left,rgba(115, 149, 150,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_materials a { 
    border-top: .3rem solid #7f3a2c;
    > div {
      background: linear-gradient(to top left,rgba(127, 58, 44,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_disaster a { 
    border-top: .3rem solid #e8aa00;
    > div {
      background: linear-gradient(to top left,rgba(232, 170, 0,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_automation a { 
    border-top: .3rem solid #3981b1;
    > div {
      background: linear-gradient(to top left,rgba(57, 129, 177,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_machine a { 
    border-top: .3rem solid #00255c;
    > div {
      background: linear-gradient(to top left,rgba(0, 37, 92,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_data a { 
    border-top: .3rem solid #6f70de;
    > div {
      background: linear-gradient(to top left,rgba(111, 112, 222,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
  .card_environment a { 
    border-top: .3rem solid #6cba5e;
    > div {
      background: linear-gradient(to top left,rgba(108, 186, 94,.15) 50%,transparent 50.1%) top left no-repeat;
    }
  }
}

@media (max-width: 768px) {
  .cardlink {
    gap: 1rem;
    margin-bottom: 1rem;
    li {
      width: calc(50% - .5rem);
      box-shadow: .1rem .1rem .5rem rgba(0,0,0,.25);
    }
    a {
      padding: 0 .1rem .1rem!important;
      > div {
        padding: .5rem;
      }
    }
    h3 {
      height: 2rem;
      padding: 0 0 .5rem;
    }
  }
}


/*-- List --*/
/* List - dots */
ul.list_dots {
  > li {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 1rem;
    &:last-child { margin-bottom: 0;}
    &::before {
      position: absolute;
      top: 1rem;
      left: 0;
      width: .3rem;
      height: .3rem;
      border-radius: 50%;
      background: currentColor;
      transform: translateY(-50%);
      content: "";
    }
  }
  &.horizontal {
    display: flex;
    flex-wrap: wrap;
    > li { margin: .5rem 2rem .5rem 0;}
  }
}


/* List - num */
ul.list_num {
  > li {
    counter-increment: num;
    margin-bottom: 1rem;
    padding-left: 2.7rem;
    text-indent: -2.7rem;
    font-family: 'Noto Sans JP', sans-serif;
    &:last-child { margin-bottom: 0;}
    &::before {
      margin-right: .5rem;
      font-weight: bold;
      content: "0" counter(num) ".";
      letter-spacing: -.05rem;
    }
    &:nth-child(9) ~ ::before { content: counter(num) ".";}
  }
} 


/* List - notice */
ul.list_notices {
  li {
    display: flex;
    position: relative;
    font-size: 1.2rem;
    counter-increment: num;
    &:not(:last-child) { margin-bottom: .5rem;}
    &::before {
      margin-right: .5rem;
      content: "※" counter(num);
      letter-spacing: -.05rem;
    }
  }
}

@media (max-width: 768px) {
  /* List - dots */
  ul.list_dots {
    > li {
      margin-bottom: 1rem;
      padding-left: 1rem;
      &:last-child { margin-bottom: 0;}
      &::before {
        width: .4rem;
        height: .4rem;
      }
    }
    &.horizontal { 
      display: block;
      > li { margin: 0 0 1rem;}
    }
  }

  /* List - num */
  ul.list_num {
    > li { 
      margin-bottom: 1rem;
      &:last-child { margin-bottom: 0;}
      &::before {margin-right: .5rem;}
    }
  }
  
  /* List - notice */
  ul.list_notices li:not(:last-child) { margin-bottom: 1rem;}
}


/*-- Photo --*/
/* Photo - basic */
img.ph_basic {
  position: relative;
  box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25);
  &.long { box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25), 4rem 4rem 0 rgba(235,235,235,.5);}
  &.outline { left: -6rem;}
}

iframe.ph_basic {
  position: relative;
  box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25);
  &.long { box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25), 4rem 4rem 0 rgba(235,235,235,.5);}
  &.outline { left: -6rem;}
}

@media (max-width: 768px) {
  /* Photo - basic */
  img.ph_basic {
    position: relative;
    box-shadow: .25rem .25rem 1rem rgba(0,0,0,.25);
    &.long {
      position: relative;
      box-shadow: .25rem .25rem 1rem rgba(0,0,0,.25), .5rem .5rem 0 rgba(235,235,235,.5);
    }
    &.outline { left: 0;}
  }
  
  iframe.ph_basic {
    position: relative;
    box-shadow: .25rem .25rem 1rem rgba(0,0,0,.25);
    &.long {
      position: relative;
      box-shadow: .25rem .25rem 1rem rgba(0,0,0,.25), .5rem .5rem 0 rgba(235,235,235,.5);
    }
    &.outline { left: 0;}
  }
}



/*===== 8. Each Styles =====*/
/*-- Logo --*/
ul[class^="logo_list_"] {
  display: grid;
  gap: 2rem;
  &:not(:last-of-type) { margin-bottom: 2rem;}
  li { box-shadow: 0 .4rem .8rem rgba(0, 0, 0, .25);}
}

.logo_list_ex { grid-template-columns: repeat(3, 1fr); }
.logo_list_l { grid-template-columns: repeat(4, 1fr); }
.logo_list_m { grid-template-columns: repeat(5, 1fr); }
.logo_list_s { grid-template-columns: repeat(6, 1fr); }


@media (max-width: 768px) {
  ul[class^="logo_list_"] {
    gap: 1rem;
    &:not(:last-of-type) { margin-bottom: 1rem;}
  }
  
  .logo_list_ex { grid-template-columns: 1fr; }
  .logo_list_l { grid-template-columns: repeat(2, 1fr); }
  .logo_list_m { grid-template-columns: repeat(3, 1fr); }
  .logo_list_s { grid-template-columns: repeat(4, 1fr); }
}

/*-- Video --*/
.video-wrap {
  position: relative;
  width: 100%;
  max-width: calc(40% - 2rem);
  height: 100%;
  aspect-ratio: 16 / 9;
}

iframe.video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  + p {
    position: relative;
  }
}

@media (max-width: 768px) {
  .video-wrap {
    max-width: 100%;

  }
}


/*-- Shadow --*/
/* shadow_static */
.shadow_static {
  box-shadow: 0 .4rem .8rem rgba(0, 0, 0, .25);
}


/* Each Color */
.bg_plant { 
  background-color: rgba(135, 80, 156, 0.2);
}
.bg_infra { 
  background-color: rgba(236, 108, 0, 0.2);
} 
.bg_operation { 
  background-color: rgba(199, 51, 121, 0.2);
}
.bg_construction { 
  background-color: rgba(170, 1, 2, 0.2);
}
.bg_dx { 
  background-color: rgba(165, 127, 31, 0.2);
}
.bg_non-pole { 
  background-color: rgba(0, 77, 160, 0.2);
} 
.bg_traffic { 
  background-color: rgba(234, 102, 160, 0.2);
} 
.bg_drone { 
  background-color: rgba(15, 149, 150, 0.2);
} 
.bg_materials { 
  background-color: rgba(127, 58, 44, 0.2);
}
.bg_disaster { 
  background-color: rgba(232, 170, 0, 0.2);
}
.bg_automation { 
  background-color: rgba(57, 129, 177, 0.2);
}
.bg_machine { 
  background-color: rgba(0, 37, 92, 0.2);
}
.bg_data { 
  background-color: rgba(111, 112, 222, 0.2);
}
.bg_environment { 
  background-color: rgba(108, 186, 94, 0.2);
}
a {
  .materials { 
    color: #7f3a2c;
    &:hover {opacity: .6;}
  }
  .disaster { 
    color: #e8aa00;
    &:hover {opacity: .6;}
  }
  .automation { 
    color: #3981b1;
    &:hover {opacity: .6;}
  }
  .machine { 
    color: #00255c;
    &:hover {opacity: .6;}
  }
  .data { 
    color: #6f70de;
    &:hover {opacity: .6;}
  }
  .environment { 
    color: #6cba5e;
    &:hover {opacity: .6;}
  }
}




/*===== 9. Animations =====*/
.overlay {
  position: relative;
  overflow: hidden;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: var(--baseC);
    transform: translateX(0);
    content: "";
  }
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 0;
    height: 100%;
    background: var(--dominantC);
    content: "";
  }
}

.fadein { visibility: hidden;}

.overlay.anim {
  &::before { animation: insert01 .6s ease-in-out .1s forwards;}
  &::after { animation: insert02 .6s ease-in-out 0s forwards;}
}

.fadein.anim { animation: fadein .6s ease-in .6s forwards;}

@keyframes insert01 {
  50% {
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
@keyframes insert02 {
  0% {
    width: 0;
  }
  30% {
    left: 0;
    width: 100%;
  }
  70% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
@keyframes fadein {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}