@charset "UTF-8";

/* ===================================
	File Name   : module.css
	Description : Each selectors/parts CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2025/06/06] カラー変更
	[2024/04/15] 新規作成

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

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

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

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



/*===== 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: 0 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;}.mlr40[class] { margin: 0 4rem;}.mlr50[class] { margin: 0 5rem;}.mlr60[class] { margin: 0 6rem;}
.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;}.mt40[class] { margin-top: 4rem;}.mt50[class] { margin-top: 5rem;}.mt60[class] { margin-top: 6rem;}
.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;}.mb40[class] { margin-bottom: 4rem;}.mb50[class] { margin-bottom: 5rem;}.mb60[class] { margin-bottom: 6rem;}
.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;}.mtb40[class] { margin: 4rem 0;}.mtb50[class] { margin: 5rem 0;}.mtb60[class] { margin: 6rem 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;}
.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;}.plr40[class] { padding: 0 4rem;}.plr50[class] { padding: 0 5rem;}.plr60[class] { padding: 0 6rem;}
.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;}.pt40[class] { padding-top: 4rem;}.pt50[class] { padding-top: 5rem;}.pt60[class] { padding-top: 6rem;}
.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;}.pb40[class] { padding-bottom: 4rem;}.pb50[class] { padding-bottom: 5rem;}.pb60[class] { padding-bottom: 6rem;}
.ptb0[class] { padding: 0;}.ptb10[class] { padding: 1rem 0;}.ptb20[class] { padding: 2rem 0;}.ptb30[class] { padding: 3rem 0;}.ptb40[class] { padding: 4rem 0;}.ptb50[class] { padding: 5rem 0;}.ptb60[class] { padding: 6rem 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: 0 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;}
  .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;}.mt40sp[class] { margin-top: 4rem;}.mt50sp[class] { margin-top: 5rem;}.mt60sp[class] { margin-top: 6rem;}
  .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;}.mb40sp[class] { margin-bottom: 4rem;}.mb50sp[class] { margin-bottom: 5rem;}.mb60sp[class] { margin-bottom: 6rem;}
  .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;}.mtb40sp[class] { margin: 4rem 0;}.mtb50sp[class] { margin: 5rem 0;}.mtb60sp[class] { margin: 6rem 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;}
	.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;}.pt40sp[class] { padding-top: 4rem;}.pt50sp[class] { padding-top: 5rem;}.pt60sp[class] { padding-top: 6rem;}
	.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;}.pb40sp[class] { padding-bottom: 4rem;}.pb50sp[class] { padding-bottom: 5rem;}.pb60sp[class] { padding-bottom: 6rem;}
	.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;}.ptb40sp[class] { padding: 4rem 0;}.ptb50sp[class] { padding: 5rem 0;}.ptb60sp[class] { padding: 6rem 0;}
}



/*===== 3. Size =====*/
.w10[class] { width: 10%;}.w20[class] { width: 20%;}.w25[class] { width: 25%;}.w30[class] { width: 30%;}.w40[class] { width: 40%;}.w50[class] { width: 50%;}.w60[class] { width: 60%;}.w70[class] { width: 70%;}.w80[class] { width: 80%;}.w90[class] { width: 90%;}.w100[class] { width: 100%;}
.w20-10[class] { width: calc(20% - .5rem);}.w20-20[class] { width: calc(20% - 1rem);}.w20-30[class] { width: calc(20% - 1.5rem);}.w20-40[class] { width: calc(20% - 2rem);}
.w25-10[class] { width: calc(25% - .5rem);}.w25-20[class] { width: calc(25% - 1rem);}.w25-30[class] { width: calc(25% - 1.5rem);}.w25-40[class] { width: calc(25% - 2rem);}
.w30-10[class] { width: calc(30% - .5rem);}.w30-20[class] { width: calc(30% - 1rem);}.w30-30[class] { width: calc(30% - 1.5rem);}.w30-40[class] { width: calc(30% - 2rem);}
.w40-10[class] { width: calc(40% - .5rem);}.w40-20[class] { width: calc(40% - 1rem);}.w40-30[class] { width: calc(40% - 1.5rem);}.w40-40[class] { width: calc(40% - 2rem);}
.w50-10[class] { width: calc(50% - .5rem);}.w50-20[class] { width: calc(50% - 1rem);}.w50-30[class] { width: calc(50% - 1.5rem);}.w50-40[class] { width: calc(50% - 2rem);}
.w60-10[class] { width: calc(60% - .5rem);}.w60-20[class] { width: calc(60% - 1rem);}.w60-30[class] { width: calc(60% - 1.5rem);}.w60-40[class] { width: calc(60% - 2rem);}
.w70-10[class] { width: calc(70% - .5rem);}.w70-20[class] { width: calc(70% - 1rem);}.w70-30[class] { width: calc(70% - 1.5rem);}.w70-40[class] { width: calc(70% - 2rem);}
.w75-10[class] { width: calc(75% - .5rem);}.w75-20[class] { width: calc(75% - 1rem);}.w75-30[class] { width: calc(75% - 1.5rem);}.w75-40[class] { width: calc(75% - 2rem);}
.w80-10[class] { width: calc(80% - .5rem);}.w80-20[class] { width: calc(80% - 1rem);}.w80-30[class] { width: calc(80% - 1.5rem);}.w80-40[class] { width: calc(80% - 2rem);}


@media (max-width: 768px) {
  .w10sp[class] { width: 10%;}.w20sp[class] { width: 20%;}.w25sp[class] { width: 25%;}.w30sp[class] { width: 30%;}.w40sp[class] { width: 40%;}.w50sp[class] { width: 50%;}.w60sp[class] { width: 60%;}.w70sp[class] { width: 70%;}.w80sp[class] { width: 80%;}.w90sp[class] { width: 90%;}.w100sp[class] { width: 100%;}
  
  .w20-10sp[class] { width: calc(20% - .5rem);}.w20-20sp[class] { width: calc(20% - 1rem);}.w20-30sp[class] { width: calc(20% - 1.5rem);}.w20-40sp[class] { width: calc(20% - 2rem);}
  .w25-10sp[class] { width: calc(25% - .5rem);}.w25-20sp[class] { width: calc(25% - 1rem);}.w25-30sp[class] { width: calc(25% - 1.5rem);}.w25-40sp[class] { width: calc(25% - 2rem);}
  .w30-10sp[class] { width: calc(30% - .5rem);}.w30-20sp[class] { width: calc(30% - 1rem);}.w30-30sp[class] { width: calc(30% - 1.5rem);}.w30-40sp[class] { width: calc(30% - 2rem);}
  .w40-10sp[class] { width: calc(40% - .5rem);}.w40-20sp[class] { width: calc(40% - 1rem);}.w40-30sp[class] { width: calc(40% - 1.5rem);}.w40-40sp[class] { width: calc(40% - 2rem);}
  .w50-10sp[class] { width: calc(50% - .5rem);}.w50-20sp[class] { width: calc(50% - 1rem);}.w50-30sp[class] { width: calc(50% - 1.5rem);}.w50-40sp[class] { width: calc(50% - 2rem);}
  .w60-10sp[class] { width: calc(60% - .5rem);}.w60-20sp[class] { width: calc(60% - 1rem);}.w60-30sp[class] { width: calc(60% - 1.5rem);}.w60-40sp[class] { width: calc(60% - 2rem);}
  .w70-10sp[class] { width: calc(70% - .5rem);}.w70-20sp[class] { width: calc(70% - 1rem);}.w70-30sp[class] { width: calc(70% - 1.5rem);}.w70-40sp[class] { width: calc(70% - 2rem);}
  .w75-10sp[class] { width: calc(75% - .5rem);}.w75-20sp[class] { width: calc(75% - 1rem);}.w75-30sp[class] { width: calc(75% - 1.5rem);}.w75-40sp[class] { width: calc(75% - 2rem);}
  .w80-10sp[class] { width: calc(80% - .5rem);}.w80-20sp[class] { width: calc(80% - 1rem);}.w80-30sp[class] { width: calc(80% - 1.5rem);}.w80-40sp[class] { width: calc(80% - 2rem);}
}



/*===== ■4. Font =====*/
.red[class] { color: #c00;}.yellow[class] { color: #ff0;}.white[class] { color: #fff;}.black[class] { color: #333;}

.normal[class] { font-weight: 400;}.bold[class] { font-weight: 700;}

.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;}


@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: 4rem;}
  
  .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. Title Setting =====*/
/* 大見出し */
.tit_headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 2rem;
  font-weight: bold;
  
  > em {
    order: 2;
    font-size: 1.6rem;
  }
  
  > span {
    order: 1;
    margin-right: 1.5rem;
    font-size: 4rem;
  }
}




/* 中見出し */
.tit_subhead {
  position: relative;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  font-weight: bold;
  font-size: 3rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  line-height: 1;
  
  &::before,
  &::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    background: var(--mainC);
    transform: translateX(-50%);
    content: "";
  }
  &::before {
    width: 15%;
    min-width: 5rem;
    height: 1px;
  }
  &::after {
    bottom: -.5rem;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--mainC);
    border-radius: 50%;
    background: #fff;
  }
  
  span {
    display: block;
    margin-top: 1.5rem;
    color: #999;
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
  }
}


/* 小見出し */
.tit_emphasis {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  font-weight: bold;
  font-size: 2.6rem;
  line-height: 1.2;
  &::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.6rem;
    height: 3px; 
    background: var(--subC);
    content:"";
  }
}


@media (max-width: 768px) {
  /* 大見出し */
  .tit_headline {
    margin: 1rem 0;
    
    em {
      order: 1;
      margin-right: 1rem;
      font-size: 2rem;
    }

    span {
      order: 2;
      margin-top: .5rem;
      font-size: 1.4rem;
    }
    
  }

  .details.tit_headline {
    > div {
      display: block;
      margin: 0;
      padding: 1.5rem 1rem 0;

      > figure {
        flex: none;
        width: auto;
        margin: 0;
      }

      div { margin-bottom: 2rem;}
    }
    
    h1 {
      margin-bottom: 1rem;
      font-size: 2.6rem;
    }

    a {
      display: inline-block;
      margin-bottom: 1.5rem;
    }
    
    ul { margin-bottom: 1.5rem;}
    
    @media(hover: hover) {
      a:hover {
        color: #fff;
        text-decoration: underline;
      }
    }
  }

  
  /* 中見出し */
  .tit_subhead {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    font-size: 2.4rem;
    
    &::after {
      bottom: -.5rem;
      width: calc(1rem + 1px);
      height: calc(1rem + 1px);
    }
    
    span {
      margin-top: 1.5rem;
      font-size: 1.2rem;
    }
  }

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



/*===== ■6. Box Layout =====*/
.flex {
  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;}
.gap10[class] { gap: 1rem;}
.gap20[class] { gap: 2rem;}
.gap30[class] { gap: 3rem;}

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

[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;}
  
  .flex2sp > * { width: calc(50% - 1rem);}
  .flex3sp > * { width: calc(33.33% - 1.34rem);}
  .flex4sp > * { width: calc(25% - 1.5rem);}
  .flex5sp > * { width: calc(20% - 1.6rem);}
  
  [class^="flex"].single > * { width: 100%;}

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



/*===== ■7. Parts Style =====*/
/* Introduction */
.intro {
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 2rem;
  font-size: 2.0rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  
  span {
    margin-left: 1rem;
    font-size: 1.4rem;
  }
}



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


/*-- Boxs --*/
/* box Limit */
.box_limit_mid {
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.box_limit_min {
  max-width: 102.4rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Boxs - Color */
.box_black { background: #333;}
.box_dark { background: var(--mainC);}
.box_neutral { background: var(--subC);}
.box_light { background: var(--baseC);}
.box_gray { background: #ebebeb;}
.box_white { background: #fff;}
.box_pink { background: rgba(var(--accentC-red-rgb),.1);}
.box_pastel { background: rgba(var(--accentC-rgb),.1);}


/* Boxs - Items */
.box_items {
  padding: 3rem 0;
  margin: 0 auto 3rem;
  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 1rem;
    padding: 0;
  }

  .box_limit_min {
    margin: 0 1rem;
    padding: 0;
  }
  
  /* Boxs - Items */
  .box_items {
    padding: 0 0 2rem;
    margin: 2rem 0;
  } 
}


/*-- Links --*/
.textlink {
  text-decoration: underline;
  color: var(--accentC);
  word-wrap: break-word;
  
  @media(hover: hover) {
    &:hover {
      color: var(--mainC);
      text-decoration: none;
    }
  }
}


/* Links - blank */
a:not(.noicons)[target="_blank"]::after {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: .5rem;
  background: url("../img/ico-blank.svg") no-repeat left top / cover;
  transition: opacity .25s;
  content: "";
}
main a: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: 102.4rem;
  margin: 0 auto;
}

.boxlink a {
  position: relative;
  width: 100%;
  padding: 1.5rem 3rem;
  border: 1px solid var(--accentC);
  color: var(--accentC);
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  text-decoration: none !important;
  transition: all .25s;
  
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
  }
  &::before {
      right: 1rem;
      width: .8rem;
      height: 1px;
      background: var(--accentC);
  }
  &::after {
      right: 10px;
      width: 6px;
      height: 6px;
      border-top: 1px solid var(--accentC);
      border-right: 1px solid var(--accentC);
      transform: translateY(-50%) rotate(45deg);
  }
  
  @media(hover: hover) {
    &:hover {
      color: #fff;
      background-color: var(--accentC);
      border-color: #fff;
      transition: all .25s;
    }
    &:hover::before { background-color: #fff;}
    &:hover::after { border-color: #fff;}
  }
}

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


/* Links - Boxlink-Back */
.boxlink.return a::before { left: 1rem;}
.boxlink.return a::after {
  left: 10px;
  border: none;
  border-bottom: 1px solid var(--accentC);
  border-left: 1px solid var(--accentC);
}

@media(hover: hover) {
  .boxlink.return a:hover::after { border-color: #fff;}
}


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


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

  .boxlink a {
    padding: 1.5rem 3rem;
  
    &::before {
      right: 1rem;
      width: .8rem;
    }
    &::after {
      right: 1rem;
      width: .6rem;
      height: .6rem;
    }
    
    @media(hover: hover) {
      &:hover {
        border: 1px solid #333;
        background: #fff;
        color: #000;
      }
      &:hover::before { background: #000}
      &:hover::after { border-color: #000;}
    }
  }

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


/*-- Table --*/
/* Table - basic */
.table_basic {
  width: 100%;
  height: 100%;
  background: var(--baseC);
  
  th {
    width: 20rem;
    padding: 2rem;
    border-bottom: 1px solid #fff;
    background: var(--subC);
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
  }

  td {
    padding: 2rem;
    border-bottom: 1px solid #fff;
    background: rgba(255, 255, 255, .5);
    vertical-align: middle;
    word-break: break-all;
  }

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


@media (max-width: 768px){
  /* Table - basic */
  .table_basic {
    width: 100%;
    height: 100%;
    
    th {
      display: block;
      width: auto;
      padding: 1rem;
      border-bottom: 0;
    }

    td {
      display: block;
      padding: 1rem;
      border-bottom: 0;
    }
  }
}


/*-- List --*/
/* Top */
.list_card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  
  a {
    display: block;
    position: relative;
    height: 100%;
    padding: .5rem;
    border: 1px solid #ccc;
    text-decoration: none !important;
    transition: border-color .25s;
    
    &::after {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 2rem;
      height: 2rem;
      clip-path: polygon(100% 0, 0 100%, 100% 100%);
      background: #999;
      transition: background .25s;
      content: "";
    }
    
    span {
      display: block;
      overflow: hidden;
      position: relative;
      aspect-ratio: 16/9;
      
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 100%;
        width: auto;
        transform: translateX(-50%) translateY(-50%);
      }
    }
    
    @media(hover: hover) {
      &:hover {
        border-color: var(--mainC);
        
        &::after { background-color: var(--mainC);}
      }
    }
    
    figcaption {
      padding: 2rem 1rem 1.5rem;
      text-align: left;
    }
  }
}

.list_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  
  a {
    display: block;
    position: relative;
    padding: 1rem 3rem 1rem 2rem;
    border-radius: 3rem;
    background: var(--accentC);
    color: #fff !important;
    font-size: 1.4rem;
    text-decoration: none !important;
    line-height: 1;
    
    &::before,
    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      content: "";
    }
    &::before {
      right: 1rem;
      width: .8rem;
      height: 1px;
      background: currentColor;
    }
    &::after {
      right: 1rem;
      width: .6rem;
      height: .6rem;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      transform: translateY(-50%) rotate(45deg);
    }
    
    @media(hover: hover) {
      &:hover {
        background: var(--mainC);
        transition: background .25s;
      }
    }
  }
}

@media (max-width: 768px) {
  .list_card {
    grid-template-columns: repeat(2, 1fr);
    
    a {
      
      figcaption {
        padding: 1rem .5rem .5rem;
        font-size: 1.2rem;
      }
    }
  }
  
  .list_tags {
    justify-content: flex-start;
    a { font-size: 1.2rem;}
  }
}


/* Search */
.list_items li { position: relative;}

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

.list_company article,
.list_items a {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  border: 1px solid #ccc;
  color: currentColor;
  word-break: break-all;
}
.list_items a {
  padding: 1rem;
  text-decoration: none;
}

@media(hover: hover) {
  .list_items a:hover {
    border-color: var(--mainC);
    
    h3 { color: var(--accentC);}
  }
}

.list_company article {
  flex-wrap: wrap;
  align-items: stretch;
}

.list_company article figure,
.list_items a > figure {
  order: 1;
  width: 30%;
  min-width: 32rem;
  line-height: 0;
  background: #fff;
}

.list_items a > figure {
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    width: auto;
    transform: translateX(-50%) translateY(-50%);
  }
}

.list_company article figure {
  display: flex;
  margin: 1rem 0 1rem 1rem;
  
  span {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;

    img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    width: auto;
    transform: translateX(-50%) translateY(-50%);
    }
  }
}

.list_company article > ul {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: calc(100% - 2rem);
  margin: 1px 1rem 1rem;
  padding: 1rem;
  background: var(--baseC);
}

.list_items a > figure .thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.list_items a > figure .thumb::before {
  display: block;
  padding-top: 56.25%;
  content:"";
}

.list_items a > figure .thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
}

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

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

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

.list_company article dl { width: 100%;}

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

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

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

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

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

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

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

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


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


/* Label */
ul.list_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  row-gap: .5rem;
  
  li {
    padding: .5rem 1.5rem;
    border-radius: .5rem;
    background: #666;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    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;
  word-break: break-all;
  
  &:not(:last-child) { margin-bottom: 2rem;}
  
  > * { max-width: 100%;}
  
  em {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #333;
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.2;
  }

  p {
    margin-left: 1rem;
    line-height: 1.4;
  }
}


/*-- Attribute --*/
.list_attribute {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 1.5rem;
  
  li {
    font-size: 1.4rem;
    margin: 0 0 .5rem;
    
    &:not(:last-child) { margin-right: 1rem;}
    
    &.label {
      padding: .5rem 1rem;
      background: #666;
      color: #fff;
    }
    &.label.domestic { background: #144b66;}
    &.label.overseas { background: #4c240f;}
    &.label.partner { background: #420f4c;}
  }
}



/*-- Pager --*/
div.pager {
  padding: 0 5rem;
  text-align: center;
  
  > p {
    font-size: 2.0rem;
    font-family: 'Noto Sans JP', sans-serif;
    
    span {
      margin-left: 1rem;
      font-size: 1.4rem;
    }
  }
 
  div,
  div ol {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div > * { margin: 0 1rem;}

  div > a {
    display: flex;
    position: relative;
    width: 3rem;
    height: 3rem;
    background: var(--mainC);
    color: #fff;
    
    &::before,
    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      content: "";
    }
    &::before {
      right: 1rem;
      width: .8rem;
      height: 1px;
      background: currentColor;
    }
    &::after {
      right: 1rem;
      width: .6rem;
      height: .6rem;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      transform: translateY(-50%) rotate(45deg);
    }
    
    &.prev::after { transform: translateY(-50%) rotate(-135deg);}
    
    @media(hover: hover) {
      &:hover {
        background: var(--accentC);
        transition: background .25s;
      }
    }
  }
  
  div li {
    margin: 0 .5rem;
  
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4rem;
      height: 4rem;
      border: 1px solid transparent;
      background: var(--mainC);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      text-decoration: none !important;
      
      &.active {
        background: var(--accentC);
      }
      @media(hover: hover) {
        &:hover {
          background: var(--accentC);
        }
      }
    }
  }
}


/*-- Image Gallery --*/
#image_gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 102.4rem;
  margin: 0 auto;
  
  figure {
    margin-bottom: 2rem;
  }
  
  ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    li {
      line-height: 0;

      a {
        display: block;
        position: relative;
        cursor: pointer;
        aspect-ratio: 16/9;
        overflow: hidden;
        
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      }

      &:not(.active) a::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.25);
        transition: all .25s;
        content: "";
      }

      a:hover img { opacity: 1;}

      &:not(.active) a:hover::before {
        background: rgba(255,255,255,.25);
        transition: all .25s;
      }

    }

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


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

  dl {
    display: flex;
    border-bottom: 1px solid var(--subC);
  }

  dt {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 10rem;
    margin: .5rem 3rem 0 0;
    padding: 0 2rem;
    background: var(--subC);
    color: #fff;
    font-size: 2rem;
    text-align: center;
    
    &::after {
      position: absolute;
      top: 0;
      left: 100%;
      width: 2rem;
      height: 100%;
      background: linear-gradient(to bottom left, transparent 49.5%, var(--subC) 50.5%) top left / 100% 50.25% no-repeat, linear-gradient(to top left, transparent 49.5%, #1a1a1a 50.5%) bottom left / 100% 50.25% no-repeat;
      content: "";
    }
  }
  
  dd {
    flex: 1;
  
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: calc( -1px + -.5rem);
    }
    
    li {
      margin: .5rem;
      
      a {
        display: block;
        position: relative;
        min-width: 8rem;
        padding: 1rem 2rem;
        color: var(--subC);
        border: 1px solid var(--subC);
        background: #fff;
        text-align: center;
        text-decoration: none !important;
        
        &::before,
        &::after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          content: "";
        }

        &::before {
            right: calc(1rem + .3rem);
            width: 1px;
            height: .8rem;
            background: var(--subC);
        }

        &::after {
            right: 1rem;
            width: .6rem;
            height: .6rem;
            border-right: 1px solid var(--subC);
            border-bottom: 1px solid var(--subC);
            transform: translateY(-50%) rotate(45deg);
        }
        
        &.active {
          background: #333;
          color: var(--subC);
          
          &::before { background: var(--subC);}
          &::after { border-color: var(--subC);}
        }
        
        @media(hover: hover) {
          &:hover {
            background: var(--mainC);
            color: #fff;
          
            &::before { background: #fff;}
            &::after { border-color: #fff;}
          }
        }
      }
    }
  }
}


@media (max-width: 768px) {
  /* Search */
  .list_items article {
    width: calc(50% - 1rem);
    margin: 0 .5rem 1rem;
  }

  .list_company article,
  .list_items a {
    display: block;
    padding: 1rem;
    background: #fff;
  }
  .list_company article {
    display: flex;
    flex-direction: column;
  }
  
  @media(hover: hover) {
    .list_items a:hover {
      background: #fff;
      color: #333;
    }
  }
  
  .list_company article figure,
  .list_items a > figure {
    width: 80%;
    min-width: 0;
    margin: 0 auto;
  }
  
  .list_company article figure { margin: 1rem auto;}
  
  .list_company article > ul {
    flex-direction: column;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
    background: none;

    li {
      flex: 1;
      margin: 0;
    }
  }
  
  .list_company article > div,
  .list_items a > div {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 0;
  }
  
  .list_company article > div { margin-bottom: 0;}

  .list_company article > div > :first-child {
    margin: 0 0 1rem;
    font-size: 1.8rem;
  }

  .list_company article dt {
    flex-direction: column;
    padding: 0 1rem 1.5rem;
  }

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

  .list_company article dd ul li {
    width: 100%;
    margin: 0 0 1rem;
  }
  .list_company article dd ul li:last-child { margin-bottom: 0;}
  
  .list_items a h3 {
    margin: .5rem 0 1.5rem;
    font-size: 1.8rem;
  }
  
  .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::before {
    width: .6rem;
    height: .6rem;
  }

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

  
  /*-- Attribute --*/
  .list_attribute {
    display: block;
    margin: 0 0 1rem;
    
    li {
      margin-bottom: 0 0 1rem;
      
      &:not(:last-child) { margin: 0 0 1rem;}
      
      .rep {
        padding-bottom: 1rem;
        border-bottom: 1px dotted #999;
      }
    }
  }
  

  
  /*-- Pager --*/
  div.pager {
    padding: 0 1rem;
  
    p {
      font-size: 1.6rem;
    
      span { margin-left: 1rem;}
    }
    
    div > * { margin: 0;}

    div > a {
      width: 2.5rem;
      height: 2.5rem;
    }
    
    div li {
      margin: 0 .25rem;
      a {
        width: 3.5rem;
        height: 3.5rem;

        &:hover {
          border-color: transparent;
          background: #333;
          color: #fff;
        }

        .active {
          border-color: #333;
          background: #fff;
          color: #333;
        }
      }
    }
  }

  
  /*-- Image Gallery --*/
  #image_gallery {
    display: block;
  
    figure {
      margin: 0 auto 1rem;
    }
  }
  
  
  /*-- Filter --*/
  #filter {
    dl {
      display: block;
      padding-bottom: 1rem;
    }

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

    dd {
      ul {
        margin: 0;
      }
      
      li {
        width: calc(33.33% - 1rem);
        margin: .5rem;
        
        &:last-child { width: calc(66.66% - 1rem);}
        
        a {
          width: 100%;
          min-width: auto;
          padding: 1rem;
          text-align: center;
          
          &.active {
            background: #000;
            color: #fff;
          }
          &.active::before { background: #fff;}
          &.active::after { border-color: #fff;}
        }
      }
    }
  }
}



/*===== ■8. Each Section Style =====*/
/* Suggest Box */
#suggest {
  position: absolute;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 1.4rem;
  width: 50%;
  min-width: 30rem;
  padding: 1.5rem;
  text-align: left;
  
  div {
    display: block;
    overflow: hidden;
    white-space: nowrap;

    &:not(:first-of-type) { margin-bottom: .5rem;}
    
    .select{ /* キー上下で選択した場合のスタイル */
      color: #fff;
      background-color: #3366FF;
    }
    .over{ /* マウスオーバ時のスタイル */
      background-color: #99CCFF;
    }
  }
}


@media (max-width: 768px){
  #suggest { min-width: auto;}
}


/* Company Detail */
#company_detail > :first-child {
  font-weight: bold;
  font-size: 2.8rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}


/* Company Option */
#company_option {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px dotted #ccc;
  
  .box_video {
    width: 100%;
    max-width: 102.4rem;
    margin: 0 auto 4rem;
  }
}


@media (max-width: 768px) {
  /* Company Detail */
  #company_detail > :first-child {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    line-height: 1.3;
  }
  
  /* Company Option */
  #company_option {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    
    .box_video {
      margin: 0 auto 2rem;
    }
  }
}