/* -------------------------------------------------------------
index
------------------------------------------------------------- */
.index{
  position: relative;
  height: 100%;
  min-width: 800px;
  min-height: 550px;
  background: #0B41A0;
}

/*----- indexMain -----*/
.indexMain{
  height: 100%;
  margin-bottom: -60px;
}
.indexMain__body{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 450px;
  margin: -225px 0 0 -400px;
}
.indexMain .indexMain__logo{
  text-align: center;
}
.indexMain .indexMain__logoLink{
  display: inline-block;
}
.indexMain .indexMain__logoMark{
  display: block;
  width: 380px;
  height: 146px;
  overflow: hidden;
}
.indexMain .indexMain__logoMark:before {
  color: #fff;
  font-size: 146px;
}
.indexMain .indexMain__notification{
  margin-top: 40px;
  color: #4696EB;
  font-size: 12px;
  text-align: center;
}
.indexMain .indexMain__notificationEmphasis{
  font-size: 14px;
  font-weight: bold;
}



/* -------------------------------------------------------------
BRAND ARCHITECTURE
------------------------------------------------------------- */
.brandCircle{
  padding: 15px 0;
  text-align: center;
}
.brandCircle__image{
  width: 375px;
}

.circleDetail{
  min-height: 170px;
  margin-bottom: 20px;
  padding-left: 200px;
}
.circleDetail.circleDetail--trust{
  background: url(../img/brand_architecture/brand_circle02.png) no-repeat 0 0 / 170px auto;
}
.circleDetail.circleDetail--future{
  background: url(../img/brand_architecture/brand_circle03.png) no-repeat 0 0 / 170px auto;
}
.circleDetail.circleDetail--friendly{
  background: url(../img/brand_architecture/brand_circle04.png) no-repeat 0 0 / 170px auto;
}
.circleDetail__title{
  margin-bottom: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #95989A;
  font-size: 24px;
  font-weight: bold;
}
.circleDetail__titleSub{
  margin-left: 20px;
  color: #B9B9B9;
  font-size: 14px;
  font-weight: normal;
}
.circleDetail__info{
}


/* -------------------------------------------------------------
serviceImage
------------------------------------------------------------- */
.serviceImage{
  margin-bottom: 40px;
}

/* -------------------------------------------------------------
serviceMedia
------------------------------------------------------------- */
.serviceMedia{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 30px;
  background: #EFEFEF;
}
.serviceMedia__link{
  display: flex;
  justify-content: space-between;
}
.serviceMedia__media{
  width: 217px;
  height: 133px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.serviceMedia__mediaImage{
  width: 100%;
}
.serviceMedia__body{
  margin-left: 20px;
  flex: 1;
}
.serviceMedia__bodyTitle{
  margin: 5px 0 10px;
  color: #0B41A0;
  font-size: 18px;
  font-weight: bold;
}


/* -------------------------------------------------------------
brandAppIcons
------------------------------------------------------------- */
.brandAppIcons{
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #95989A;
}
.brandAppIcons:nth-of-type(2){
  margin-top: 0;
  padding-top: 10px;
  border: none;
}
.brandAppIcons__body{
  padding: 15px;
  background: #F3F5F5;
}
.brandAppIcons__title{
  margin: 0 0 10px;
  color: #91919F;
  font-size: 10px;
}


/* -------------------------------------------------------------
appIcons
------------------------------------------------------------- */
.appIcons{
  margin: 0 0 0 -5px;
  overflow: hidden;
}
.appIcons__list{
  position: relative;
  float: left;
  width: 75px;
  height: 115px;
  margin: 0 0 0 20px;
  color: #91919F;
  font-size: 10px;
  text-align: center;
  letter-spacing: -0.1em;
}
.appIcons__listImage{
  width: 75px;
  margin-bottom: 5px;
}
.appIcons__listNotice{
  position: absolute;
  top: 60px;
  right: -10px;
}


/* -------------------------------------------------------------
cobrand
------------------------------------------------------------- */
.cobrand{
  padding: 28px 48px;
  background: #fff;
  text-align: center;
}
.cobrand__image{
}


/* -------------------------------------------------------------
brandLogoStory
------------------------------------------------------------- */
.brandLogoStory{
  padding: 30px 0;
  text-align: center;
}
.brandLogoStory--bg{
  background: #F3F5F5;
}
.brandLogoStory__image{
}


/* -------------------------------------------------------------
logoList
------------------------------------------------------------- */
.logoList{
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.logoList__item{
}
.logoList__image{
  width: 100%;
}
.logoList__buttons{
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.logoList__button{
  display: inline-block;
  padding: 3px 25px;
  border: 2px solid #0B41A0;
  border-radius: 100px;
  background: transparent;
  color: #0B41A0;
}
.logoList__button:link,
.logoList__button:visited,
.logoList__button:hover{
  color: #0B41A0;
}


/* -------------------------------------------------------------
vaColor
------------------------------------------------------------- */
.vaColor{
}
.vaColor__paletteImage{
  margin-bottom: 24px;
}
.vaColor__paletteImage:last-child{
  margin-bottom: 0;
}

.paletteList{
  display: grid;
}

.paletteList.-col3{
  grid-template-columns: repeat(3, 1fr);
}

.paletteList.-nogap{
  gap: 0;
}

.paletteList__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* -------------------------------------------------------------
colorPalette
------------------------------------------------------------- */
.colorPalette{
  display: flex;
  padding: 10px;
  background: #E7EBED;
}
.colorPalette + .colorPalette{
  padding-top: 20px;
}
.colorPalette__body{
  color: #fff;
}
.colorPalette__body:nth-child(1){
  width: 265px;
}
.colorPalette__body:nth-child(2){
  width: 210px;
}
.colorPalette__body:nth-child(3){
  width: 115px;
}
.colorPalette__body.colorPalette__body--1col{
  width: 100%;
}
.colorPalette__body.colorPalette__body--devide:nth-child(1){
  width: 255px;
  margin-right: 10px;
}
.colorPalette__body.colorPalette__body--devide:nth-child(2){
  width: 200px;
  margin-right: 10px;
}
.colorPalette__body.colorPalette__body--devide:nth-child(3){
  width: 115px;
}
.colorPalette__name{
  margin-bottom: 5px;
  color: #8B8C9B;
  font-size: 10px;
}
.colorPalette__box{
}


/* -------------------------------------------------------------
palette
------------------------------------------------------------- */
.palette{
  padding: 10px;
  font-family: NotoSansForStudySapuri;
}
.palette.palette--darkText{
  color: #808D96;
}
.palette__name{
  font-weight: bold;
}
.palette__name.palette__name--s{
  font-size: 11px;
}
.palette__name.palette__name--m{
  font-size: 14px;
}
.palette__name.palette__name--l{
  font-size: 18px;
}
.palette__guide{
  font-size: 10px;
}


/* -------------------------------------------------------------
ngColors
------------------------------------------------------------- */
.ngColors{
  padding: 10px 0;
}
.ngColors__image{
  width: 100%;
}
.ngColors__image+.ngColors__image{
  margin-top: 24px;
}


/* -------------------------------------------------------------
specialColors
------------------------------------------------------------- */
.specialColors{
  padding: 10px 0;
  overflow: hidden;
}
.specialColors__image{
  float: left;
  width: 40%;
}
.specialColors__info{
  float: right;
  width: 57%;
}
.specialColors__infoText{
  font-size: 12px;
}
.specialColors__infoImage{
  margin-top: 10px;
}

/* -------------------------------------------------------------
listDisc
------------------------------------------------------------- */
.listDisc{
  padding-left: 1em;
  margin-left: 1em;
  margin-bottom: 24px;
}
.listDisc__item{
  list-style: disc;
  margin-bottom: 0;
}
.listDisc__item+.listDisc__item{
  margin-top: 0;
}
.listDisc__item a{
  text-decoration: underline;
}
.listDisc__item a:hover{
  opacity: 0.8;
}


/* -------------------------------------------------------------
.list
------------------------------------------------------------- */
.list {
  display: grid;
  margin-bottom: 16px;
}
.list.-col2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.list__item{
  text-align: center;
}

/* -------------------------------------------------------------
tag
------------------------------------------------------------- */
.tag{
  display: inline-block;
  padding-inline: 10px;
  border-radius: 9000px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  width: 110px;
  text-align: center;
  margin-bottom: 16px;
}
.tag.-do{
  background: #3EC1BD;
}
.tag.-dont{
  background: #DE30CA;
}



/* -------------------------------------------------------------
fonts
------------------------------------------------------------- */
.fonts{
}
.fonts__image{
}
.fonts__text{
  padding: 30px 0 0;
  overflow: hidden;
}
.fonts__text:nth-child(2){
  border-top: 1px solid #95989A;
}
.fonts__text:nth-child(3){
  border-top: 1px dotted #95989A;
}
.fonts__textItem{
  float: left;
  width: 32%;
  margin-bottom: 30px;
}
.fonts__textItem:nth-child(3n+1){
  clear: left;
}
.fonts__textItem:nth-child(2n){
  margin-right: 2%;
  margin-left: 2%;
}
.fonts__textTitle{
  color: #91919F;
  font-size: 14px;
  font-weight: bold;
}
.fonts__textName{
  color: #91919F;
  font-size: 10px;
}
.fonts__textDevide{
  color: #91919F;
}
.fonts__textSample{
  font-size: 24px;
  font-weight: bold;
}
.fonts__textGuide{
  float: left;
  width: 20%;
}
.fonts__textGuideName{
  color: #91919F;
  font-size: 10px;
}
.fonts__textGuideProperty{
  color: #91919F;
  font-size: 20px;
  font-weight: bold;
}


/* -------------------------------------------------------------
tone
------------------------------------------------------------- */
.tone{
}
.tone__image{
}
.tone__body{
  padding: 20px;
  background: #E7EBED;
}
.tone__photo{
  margin-bottom: 25px;
  text-align: center;
}
.tone__photo:last-child{
  margin-bottom: 0;
}

.sns{
  text-align: center;
}
.sns__circle{
  margin: 15px 0 30px;
}
.sns__post{
  margin: 10px 0 40px;
}
.snsIndent{
  margin: 40px 15px 0;
}




/* -------------------------------------------------------------
writing
------------------------------------------------------------- */
.writing{
  margin-bottom: 10px;
  padding: 15px;
  background: #fff;
}
.writing__title{
  margin-bottom: 10px;
  padding: 0 0 10px 22px;
  border-bottom: 1px solid #95989A;
  color: #7C7C8C;
  font-size: 10px;
}
.writing__title--01{
  background: url(../img/visual_architecture/icon01.png) no-repeat 0 1px;
  background-size: auto 15px;
}
.writing__title--02{
  background: url(../img/visual_architecture/icon02.png) no-repeat 0 1px;
  background-size: auto 15px;
}
.writing__title--03{
  background: url(../img/visual_architecture/icon03.png) no-repeat 0 0;
  background-size: auto 15px;
}
.writing__title--04{
  background: url(../img/visual_architecture/icon04.png) no-repeat 0 0;
  background-size: auto 14px;
}
.writing__text{
  color: #7C7C8C;
  font-size: 12px;
}


/* -------------------------------------------------------------
contentsTable
------------------------------------------------------------- */
.contentsTable{
  width: 100%;
  margin-bottom: 50px;
}
.contentsTable th{
  width: 33.333%;
  padding: 10px 15px;
  border-collapse: collapse;
  border:1px solid #D3D4D4;
  background: #E7EBED;
  font-weight: normal;
  text-align: left;
}
.contentsTable td{
  width: 33.333%;
  padding: 10px 15px;
  border-collapse: collapse;
  border:1px solid #D3D4D4;
  background: #fff;
}
.contentsTable_good{
}
.contentsTable_ng{
  color: #98999A;
}
.contentsTable_memo{
  color: #98999A;
}
.contentsTable_title{
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}



/* -------------------------------------------------------------
illustration
------------------------------------------------------------- */
.secondaryUnit__subtitle + .illustration,
.secondaryUnit__accenttitle + .illustration{
  margin-block: 20px 50px;
}
.illustration.-center{
  text-align: center;
}
.illustration:last-child{
  margin-bottom: 0;
}
.illustration__image{
  text-align: left;
  pointer-events: none;
  user-select: none;
}
.illustration__menu{
  margin-block: 50px 30px;
}
.illustration__menuTitle{
  font-weight: normal;
  margin-bottom: 16px;
  font-size: 14px;
}
.illustration__menuList{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}
.illustration__menuListItem{
  border: 2px solid #0B41A0;
  border-radius: 12px;
}
.illustration__menuListLink{
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: 12px;
  font-weight: bold;
  color: #0B41A0;
  font-size: 14px;
  gap: 4px;
}
.illustration__menuListLink:visited{
  color: #0B41A0;
}
.illustration__menuListLink::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 2px solid #0B41A0;
  border-bottom: 2px solid #0B41A0;
}
.illustration__menuListImage{
  width: 62px;
}
.illustration__note{
  margin-top: 20px;
  color: #AFB8BE;
  font-size: 9px;
  text-align: left;
}


/* -------------------------------------------------------------
teachers
------------------------------------------------------------- */
.teachers{
}
.teacher__list{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
.teacher__listItem{
  margin-bottom: 50px;
}
.teacher__listItem:last-child{
  margin-bottom: 0;
}


/* -------------------------------------------------------------
teacher
------------------------------------------------------------- */
.teacher{
  overflow: hidden;
}
.teacher__photo{
  float: left;
  width: 140px;
}
.teacher--vertical .teacher__photo{
  float: none;
}
.teacher__photoImage{
  width: 100%;
  pointer-events: none;
  touch-callout: none;
  user-select: none;
}
.teacher__info{
  float: left;
  width: 125px;
  margin: 0 0 0 20px;
  padding: 15px 0 0;
}
.teacher--vertical .teacher__info{
  float: none;
  width: auto;
  margin: 0;
  text-align: center;
}
.teacher__infoSubject{
  margin-bottom: 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid #B9B9B9;
  color: #B9B9B9;
  font-size: 13px;
}
.teacher__infoName{
  margin: 8px 0 5px;
  line-height: 1.3;
  font-size: 23px;
  font-weight: bold;
}
.teacher__infoKana{
  margin-bottom: 10px;
  color: #B9B9B9;
  font-size: 12px;
}
.teacher__infoDownload{
}
.teacher__infoDownload .download{
  text-align: left;
}
.teacher--vertical .teacher__infoDownload .download{
  text-align: center;
}


/* -------------------------------------------------------------
watermark
------------------------------------------------------------- */
.watermark{
  margin: 25px 20px;
}
.watermark__image{
  margin: 10px 0 20px;
}
.watermark_note{
  margin-top: -10px;
  font-size: 12px;
}


/* -------------------------------------------------------------
toeic
------------------------------------------------------------- */
.toeic{
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #95989A;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.toeic__text{
  color: rgba(36, 36, 63, 0.6);
  font-size: 11px;
  font-weight: bold;
}
.toeic__text span{
  font-size: 7px;
}

/* -------------------------------------------------------------
info
------------------------------------------------------------- */
.info{
  display: flex;
  align-items: center;
  gap: 20px;
}
.info__text{
  padding: 20px;
  border-left: 1px solid #707070;
}