@charset "UTF-8";
/* ===================================
	File Name   : module.css
	Description : Each selectors/parts CSS
	Editor      : Bface Saeki
	Last Editor : 
	
	Update Description :
	[2025/07/01] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Switch
  2. margin / padding
  3. width
	4. Font
	5. Box Layout
	7. Parts Style
    -	Video
    -	Image
    -	Texts
      -	Texts - Indent
      -	Texts - Decoration
    -	Boxs
      -	Boxs - Limit
      -	Boxs - Color
    -	Links
      -	Links - Text
      -	Links - Boxlink
    -	Table
      -	Table - Basic
      -	Table - Scroll
    -	List
      -	List - dots
      -	List - linkcard
      -	List - linkpanel
  8. Each division Style
    -	prospective
  9. Each Pages Style
    -	Top

====================================== */


/*===== 1. Switch =====*/
.pc[class] { display: block;}
.sp[class] { display: none;}
.block[class] { display: block;}
.inline-block[class] { display: inline-block;}
.inline[class] { display: inline;}


@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;}
}


/*===== 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);}
.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 =====*/
.red[class] { color: #c00;}.yellow[class] { color: #ff0;}.white[class] { color: #fff;}.black[class] { color: #333;}.lgray{ color: #ccc;}.dgray{ color: #666;}

.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;}.black[class] { font-weight: 900;}

.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;}

.noto { font-family: "Noto Sans JP", sans-serif;}.roboto { font-family: "Roboto", sans-serif;}

@media (max-width: 768px) {
  .normalsp[class] { font-weight: 400;}.boldsp[class] { font-weight: 700;}

  .wrapsp[class] { white-space: normal;}.nowrapsp[class] {white-space: nowrap;}
  
	.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;}
  .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% - 2rem);}
  
  [class^="flex"].single > * { width: 100%; margin: 0;}

  table [class^="flex"].single > * { flex: none;}
}


/*===== 6. Parts Style =====*/
/*-- Video --*/
.video_wrap {
	.video {
		overflow: hidden;
		position: relative;
		aspect-ratio: 16/9;
		&:has(iframe) {
			width: 100%;
			height: 0;
			position: relative;
			padding-top: 56.25%;
			overflow: hidden;
			iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	.video_mask {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: rgba(000,000,000,.5);
	}
}


/*--  Image --*/
.img_thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
	&::before {
		display: block;
		padding-top: 56.25%;
		content:"";
	}
	img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translateX(-50%) translateY(-50%);
	}
	&.rect::before { padding-top: 100%;}
}


/*-- Texts --*/
/* Texts - Indent */
.txt_indent {
  text-indent: -1em;
  padding-left: 1em;
}

/* Texts - Decoration */
.txt_double {
	padding: 2rem;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	text-align: center;
}

@media (max-width: 768px) {
	.txt_double {
		padding: 1rem;
	}
}


/*-- Boxs --*/
/* Boxs - Limit */
.box_wrapper {
  margin: 0 auto;
  padding: 0 2rem;
	max-width: 120rem;
}

.box_limit_max {
  max-width: 196rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.box_limit_mid {
  max-width: 140.6rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.box_limit_min {
  max-width: 106.4rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Boxs - Color */
.box_gradient {
	padding: 5rem 0 6rem;
	background: linear-gradient(133deg, #fbf0eb, #fae3e9);
}

@media (max-width: 768px) {
  .box_wrapper,
  .box_limit_mid,
  .box_limit_min { padding: 0 1.5rem;}
	.box_gradient { padding: 3rem 0;}
}


/*-- Links --*/
/* Links - Text */
a.txtlink {
}

/* Links - Boxlink */
a.boxlink {
  display: flex;
	align-items: center;
	justify-content: center;
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 3.5rem;
	border: 1px solid #c51830;
	border-radius: 10rem;
  background: var(--accentC);
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
	text-shadow: 1px 1px 2px rgba(var(--accentCd-rgba),.8);
  line-height: 1.2;
	opacity: 1 !important;
	&::after {
		position: absolute;
		right: 2.5rem;
		top: 50%;
		display: inline-block;
		background-color: currentColor;
		width: 1rem;
		height: 1.8rem;
		clip-path: polygon(0 10%, 15% 0, 100% 50%, 15% 100%, 0 90%, 70% 50%);
		transform: translateY(-50%);
		content: "";
	}
	&.soon {
		border-color: #fff;
		background: var(--GCd);
		text-shadow: none;
	}
	@media(hover: hover) {
		&:hover {
			background: var(--accentCd);
		}
	}
}

@media (max-width: 768px) {
	a.boxlink {
		padding: 1.5rem 2rem;
		font-size: 1.6rem;
		&::after {
			right: 1rem;
		}
	}
}


/*-- Table --*/
/* Table - Basic
div.table_basic {
  width: 100%;
  table-layout: fixed;
}

@media (max-width: 768px){
  div.table_basic {
  }
}
 */

/* Table - Scroll
div.table_scroll {
  width: 100%;
  max-width: 102.4rem;
  margin: 0 auto;
	border: 1rem solid #ebebeb;
	table {
		width: 100%;
		border-collapse: separate;
		table-layout: fixed;
	}
}

@media (max-width: 768px){
  div.table_scroll {
    white-space: nowrap;
    overflow: scroll;
		table {
			table-layout: auto;
			width: 100%;
		}
  }
}
 */

/*-- List --*/
/* List - dots
ul.list_dots > li {
  position: relative;
  padding-left: 1.5rem;
	&:not(:last-child) { margin-bottom: .5rem;}
	&::before {
		position: absolute;
		top: 1rem;
		left: 0;
		width: .5rem;
		height: .5rem;
		border-radius: 50%;
		background: #023d57;
		transform: translateY(-50%);
		content: "";
	}
}
 */

/* List - linkcard */
ul.list_linkcard {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	gap: 6rem;
	li {
		a {
			display: block;
			height: 100%;
			box-shadow: .5rem .5rem 0 #d9cece;
			border-radius: 0 0 2rem 2rem;
			background: #fff;
			opacity: 1;
			figure {
				span {
					display: block;
					position: relative;
					&::after {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, .15);
						transition: opacity .25s;
						content: "";
					}
				}
				figcaption {
					position: relative;
					padding: 1.5rem 3.5rem;
					font-weight: 700;
					font-size: 2rem;
					text-align: center;
					&::after {
						position: absolute;
						right: 2.5rem;
						top: 50%;
						display: inline-block;
						background-color: var(--accentC);
						width: 1rem;
						height: 1.8rem;
						clip-path: polygon(0 10%, 15% 0, 100% 50%, 15% 100%, 0 90%, 70% 50%);
						transform: translateY(-50%);
						content: "";
					}
				}
			}
			@media(hover: hover) {
				&:hover {
					figure span::after {
						opacity: 0;
						transition: opacity .25s;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	ul.list_linkcard {
		grid-template-columns: 1fr;
		gap: 2rem;
		li {
			a {
				figure {
					figcaption {
						padding: 1.5rem;
						font-size: 1.8rem;
						&::after { right: 1.5rem;}
					}
				}
			}
		}
	}
}


/* List - linkpanel */
ul.list_linkpanel {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5rem 6rem;
	li {
		width: calc(50% - 3rem);
		a {
			display: block;
			overflow: hidden;
			box-shadow: .5rem .5rem 0 #d9cece;
			border-radius: 2rem 2rem 0 2rem;
			background: var(--mainCl);
			opacity: 1;
			figure {
				display: flex;
				span {
					width: 16rem;
					img {
						height: 100%;
						object-fit: cover;
						object-position: center top;
					}
				}
				figcaption {
					flex: 1;
					place-content: center;
					position: relative;
					min-height: 12rem;
					padding: 1.5rem 5rem 1.5rem 3rem;
					font-weight: 700;
					span { font-size: 2rem;}
					p { display: none;}
					&::after {
						position: absolute;
						right: 3rem;
						top: 50%;
						display: inline-block;
						width: 1.3rem;
						height: 2.4rem;
						background: var(--accentC);
						clip-path: polygon(0 10%, 15% 0, 100% 50%, 15% 100%, 0 90%, 70% 50%);
						transform: translateY(-50%);
						content: "";
					}
				}
			}
			@media(hover: hover) {
				&:hover {
					background: var(--accentCl);
					figure figcaption span { display: none;}
					figure figcaption p { display: block;}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	ul.list_linkpanel {
		gap: 2.5rem;
		li {
			width: 100%;
			a {
				figure {
					span {
						width: 10rem;
					}
					figcaption {
						min-height: auto;
						padding: 1.5rem;
						span { font-size: 1.6rem;}
						&::after { right: 1.5rem;}
					}
				}
			}
		}
	}
}


/*===== 8. Each division Style =====*/
/*-- prospective --*/
aside.prospective {
	margin: 6rem 0 7rem;
	.box_wrapper {
		display: flex;
		column-gap: 6rem;
		dl {
			flex: 1;
			display: flex;
			flex-direction: column;
			position: relative;
			box-shadow: .5rem .5rem 0 #d9cece;
			border-radius: 2rem;
			background: var(--mainCl);
			text-align: center;
			dt {
				position: relative;
				padding: 1.5rem 8rem;
				border-radius: 2rem 2rem 0 0;
				background: var(--mainC);
				color: #fff;
				font-weight: 700;
				font-size: 3rem;
				letter-spacing: .1rem;
				line-height: 1.2;
				i {
					position: absolute;
					top: -1.5rem;
					left: -1.5rem;
					width: 9rem;
					height: 9rem;
					padding: 1.5rem;
					border: 3px solid var(--mainC);
					border-radius: 100%;
					background: #fff;
				}
			}
			dd {
				place-content: center;
				flex: 1;
				padding: 3rem;
				border-radius: 2rem 2rem 0 0;
				font-weight: 700;
				p {
					margin-bottom: 2rem;
					font-size: 2.2rem;
					line-height: 1.6;
					em {
						display: block;
						color: var(--mainC);
						font-size: 2.8rem;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	aside.prospective {
		margin: 3rem 0 4rem;
		.box_wrapper {
			flex-direction: column;
			column-gap: 3rem;
			dl {
				border-radius: 2rem;
				&:not(:last-child) { margin-bottom: 3rem;}
				dt {
					padding: 1rem 6rem;
					font-size: 2.4rem;
					i {
						width: 6rem;
						height: 6rem;
						padding: 1rem;
					}
				}
				dd {
					padding: 1.5rem;
					p {
						font-size: 1.6rem;
						em {
							margin: 1rem 0;
							font-size: 2.2rem;
						}
					}
				}
			}
		}
	}
}


/*===== 9. Each Pages Style =====*/
/*-- Top --*/
#top_problem {
	margin-bottom: 4rem;
	h2 {
		max-width: 73rem;
		margin: 0 auto 2rem;
	}
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2.5rem;
		position: relative;
		padding-bottom: 5.5rem;
		li {
			display: flex;
			flex-direction: column;
			max-width: 27rem;
			i {
				display: block;
				width: 9.5rem;
				margin: -4.75rem auto 0;
				border-radius: 100%;
				background: #fff;
				transform: translateY(50%);
			}
			figure {
				overflow: hidden;
				width: 100%;
				height: 100%;
				box-shadow: .5rem .5rem 0 #d9cece;
				border-radius: 2rem;
				background: var(--mainCl);
				span {
					display: block;
					aspect-ratio: 9/4;
					img {
						height: 100%;
						object-fit: cover;
						object-position: center top;
					}
				}
				figcaption {
					padding: 2rem;
					font-weight: 700;
					font-size: 2rem;
					line-height: 1.7;
					text-align: center;
					em { color: var(--mainC);}
				}
			}
		}
		&::after {
			position: absolute;
			bottom: 0;
			width: 10rem;
			height: 2.5rem;
			background: var(--mainC);
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			content: "";
		}
	}
}

#top_solve {
	overflow: hidden;
	position: relative;
	margin: 0 0 6rem;
	padding-top: 4rem;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 55rem;
		background: url("../img/top/bg-solve.svg") no-repeat center top / cover;
		content: "";
	}
	h2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding-bottom: 5.5rem;
		color: #fff;
		line-height: 1.3;
		text-align: center;
		span {
			display: inline-block;
			position: relative;
			min-width: 48rem;
			margin-bottom: 2rem;
			padding: 1rem;
			background: linear-gradient(to right, rgba(214, 20, 24, .25), rgba(214, 20, 24, .85) 20%, #d61418 50%, rgba(214, 20, 24, .85) 80%, rgba(214, 20, 24, .25));
			font-weight: 700;
			font-size: 3.6rem;
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background: linear-gradient(to right, rgba(255, 255, 255, .25), rgba(255, 255, 255, .85) 20%, #fff 50%, rgba(255, 255, 255, .85) 80%, rgba(255, 255, 255, .25));
				content: "";
			}
		}
		em {
			display: inline-block;
			font-weight: 900;
			font-size: 5.8rem;
			text-shadow: 0 0 2rem rgba(124, 20, 0, .6);
		}
		&::after {
			position: absolute;
			bottom: 0;
			width: 10rem;
			height: 2.5rem;
			background: var(--mainC);
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			content: "";
		}
	}
	section {
		position: relative;
		margin-top: 18.5rem;
		padding-bottom: 6rem;
		background: var(--mainCl);
		&::before {
			position: absolute;
			top: -15rem;
			left: -10%;
			width: 120%;
			height: 57rem;
			border-radius: 100%;
			background: var(--mainCl);
			content: "";
		}
		.box_wrapper {
			position: relative;
			&::before {
				position: absolute;
				bottom: 100%;
				right: 10rem;
				width: 28.7rem;
				height: 22.2rem;
				background: url("../img/top/img-solve.svg") no-repeat left top / cover;
				content: "";
			}
			h3 {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				transform: translateY(-9rem);
				b {
					margin-bottom: 1.5rem;
					padding: 1rem 4.5rem;
					border-radius: 1.5rem 1.5rem 1.5rem 0;
					background: var(--accentC);
					color: #fff;
					font-weight: 700;
					font-size: 3.2rem;
					line-height: 1.2;
				}
				em {
					font-weight: 800;
					font-size: 5.4rem;
					line-height: 1.4;
					letter-spacing: .05em;
					span { font-size: 4.6rem;}
				}
			}
			> p {
				transform: translateY(-6rem);
			}
			ul {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 3rem;
				counter-reset: item;
				li {
					display: flex;
					flex-direction: column;
					position: relative;
					padding: 3.5rem 1.5rem 2.5rem;
					box-shadow: .5rem .5rem 0 #d9cece;
					border-radius: 2rem;
					background: #fff;
					text-align: center;
					counter-increment: item;
					&::before {
						position: absolute;
						top: 0;
						left: 50%;
						padding: 1rem 3rem;
						border-radius: 1rem 1rem 1rem 0;
						background: var(--accentC);
						color: #fff;
						font-weight: 700;
						font-size: 2.2rem;
						font-family: "Roboto", sans-serif;
						line-height: 1.2;
						transform: translateX(-50%) translateY(-50%);
						content: "POINT";
					}
					figure {
						position: relative;
						margin-bottom: 2.5rem;
						&::after {
							position: absolute;
							bottom: -1.5rem;
							right: 1.5rem;
							color: #fff;
							font-weight: 700;
							font-size: 7.2rem;
							font-family: "Roboto", sans-serif;
							font-style: italic;
							line-height: 1;
							content: counter(item, decimal-leading-zero);
						}
					}
					p {
						flex: 1;
						place-content: center;
						font-weight: 700;
						font-size: 2rem;
					}
				}
			}
		}
	}
}

#top_voice {
	margin: 0;
	padding-bottom: 9rem;
	background: url("../img/top/bg-voice.svg") no-repeat center top / cover;
	h2 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 4rem;
		font-weight: 700;
		font-size: 4.6rem;
		&::after {
			width: 6.5rem;
			margin-left: 1rem;
			content: url("../img/top/ico-balloon.svg");
		}
	}
}

@media (max-width: 768px) {
	#top_problem {
		margin-bottom: 2rem;
		h2 {
			margin: 0 auto 1rem;
		}
		ul {
			gap: 1.5rem;
			padding-bottom: 5rem;
			li {
				width: calc(50% - .75rem);
				max-width: none;
				i {
					width: 6rem;
					margin: -3rem auto 0;
				}
				figure {
					figcaption {
						padding: 1rem 1.5rem;
						font-size: 1.6rem;
						line-height: 1.5;
						text-align: left;
					}
				}
			}
			&::after {
				position: absolute;
				bottom: 0;
				width: 10rem;
				height: 2.5rem;
				background: var(--mainC);
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				content: "";
			}
		}
	}
	
	#top_solve {
		margin: 0 0 3rem;
		padding-top: 4rem;
		&::before { height: 35rem;}
		h2 {
			padding-bottom: 5rem;
			span {
				display: inline-block;
				min-width: auto;
				margin-bottom: 2rem;
				padding: 1rem 4rem;
				font-size: 2.4rem;
			}
			em { font-size: 3.2rem;}
		}
		section {
			margin-top: 17rem;
			padding-bottom: 4rem;
			&::before {
				height: 20rem;
			}
			.box_wrapper {
				&::before {
					bottom: calc(100% + 9rem);
					right: 1.5rem;
					width: 14.35rem;
					height: 11.1rem;
				}
				h3 {
					transform: translateY(-10rem);
					b {
						margin-bottom: 1.5rem;
						padding: 1rem 4.5rem;
						font-size: 2.4rem;
					}
					em {
						font-size: 3.2rem;
						span { font-size: 2.8rem;}
					}
				}
				> p {
					margin-bottom: -1rem;
					transform: translateY(-7rem);
				}
				ul {
					grid-template-columns: repeat(1, 1fr);
					gap: 4rem;
					li {
						padding: 3.5rem 1.5rem 2rem;
						text-align: left;
						&::before { font-size: 1.8rem;}
						figure { margin-bottom: 1.5rem;}
						p { font-size: 1.8rem;}
					}
				}
			}
		}
	}
	
	#top_voice {
		padding-bottom: 4rem;
		h2 {
			margin-bottom: 2rem;
			font-size: 3.2rem;
			&::after {
				width: 5rem;
			}
		}
}

}