/*****************************************************************************
CSS only for about
*****************************************************************************/

.About {
  padding-bottom: 200px;
}
@media screen and (max-width: 767px) {
  .About {
    padding-bottom: 150px;
    }
}
img {
  max-width: 100%;
  height: auto;
}

/* Intro
-----------------------------------------*/
.Intro {
  padding-bottom: 300px;
  padding-bottom: min(34.0625vw, 654px);
}
@media screen and (max-width: 767px) {
  .Intro {
    padding-bottom: 358px;
    padding-bottom: 95.46666vw;
  }
}
.Intro__inner {
  position: relative;
  padding-bottom: 529px;
  padding: 139px 0 min(27.55208vw, 529px);
  background-image: url(/about/assets/img/bg_brandstory_pc.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .Intro__inner {
    padding-top: 129px;
    padding-bottom: 271px;
    padding: 129px 0 72.26666vw;
  }
}
.Intro__title {
  text-align: center;
}
.Intro__title img {
  width: 87.23958vw;
  max-width: 1675px;
  height: auto;
  opacity: .1;
}
.Intro__text {
  margin: -107px auto 0;
  margin: -5.57291% auto 0;
  max-width: 1200px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Intro__text {
    margin: -170px auto 0;
    padding: 0 20px;
    /* width: 89.33333vw; */
  }
}
.Intro__text p {
  margin-top: 78px;
}
@media screen and (max-width: 767px) {
  .Intro__text p {
    margin-top: 47px;
  }
}
.Intro__text > *:first-child {
  margin-top: 0;
}
.Intro__logo {
  position: absolute;
  bottom: -356px;
  bottom: -25.33807%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Intro__logo {
    bottom: -210px;
    bottom: -18.86792%;
  }
}
.Intro__logo img {
  width: 14.01041vw;
  max-width: 269px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .Intro__logo img {
    width: 41.73333vw;
    max-width: none;
  }
}

/* Emblem
-----------------------------------------*/
.BgBlock {
  overflow: hidden;
}
.Emblem {
  position: relative;
  padding-left: 16.40625vw;
}
@media screen and (max-width: 767px) {
  .Emblem {
    padding-left: 0;
  }
}

.Emblem__inner {
  /* padding: 9.96884% 2.49221% 8.53582% 16.19937%; */
  padding: 7.47663% 1.86915% 6.40186% 12.14953%;
  padding: 160px 40px 137px 260px;
  padding: min(10%, 160px) min(2.5%, 40px) min(8.5625%, 137px) min(16.25%, 260px);
  border-radius: 40px 0 0 40px;
  background-color: #00239c;
}
@media screen and (max-width: 767px) {
  .Emblem__inner {
    padding: 136px 40px 150px;
    border-radius: 20px;
  }
}
.Emblem__title {
  display: inline-block;
  position: relative;
  top: 0;
  left: 37.77777%;
  left: min(37.77777%, 491px);
}
@media screen and (max-width: 767px) {
  .Emblem__title {
    display: block;
    left: auto;
    text-align: center;
  }
}
.Emblem__wrapper {
  display: flex;
  align-items: center;
  gap: 0 6.13%;
  position: relative;
  z-index: 1;
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  .Emblem__wrapper {
    display: block;
    margin-top: 64px;
  }
}
.Emblem__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.94252%;
  max-width: 456px;
  height: 100%;
  max-height: 456px;
  border-radius: 50%;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .Emblem__img {
    width: 94.91525%;
  }
}
.Emblem__img::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.Emblem__img img {
  width: 30.26315%;
  height: auto;
}
.Emblem__explain {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .Emblem__explain {
    margin-top: 49px;
  }
}
.Emblem__explain li:nth-child(n+2) {
  margin-top: 68px;
  margin-top: min(8.84265%, 68px);
}
@media screen and (max-width: 767px) {
  .Emblem__explain li:nth-child(n+2) {
    margin-top: 44px;
  }
}
.Emblem__bgLogo {
  position: absolute;
  top: -15.17241%;
  left: -20.05208%;
  width: 74.375vw;
  max-width: 1428px;
  aspect-ratio: 1 / 2.134;
  z-index: 0;
  background-image: url(/assets/img/bluteonlogo/logo_mark_03.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  filter: invert(93%) sepia(13%) saturate(79%) hue-rotate(168deg) brightness(103%) contrast(94%);
  mix-blend-mode: multiply;
}
@media screen and (max-width: 767px) {
  .Emblem__bgLogo {
    top: 136px;
    left: -124.26666%;
    width: 349.6%;
  }
}

/* Summary
-----------------------------------------*/
.Summary {
  padding: 299px 0 300px;
}
@media screen and (max-width: 767px) {
  .Summary {
    padding: 118px 0 145px;
  }
}
.Summary__inner {
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 0 20px; */
}
.Summary__sec + .Summary__sec {
  margin-top: 159px;
}
@media screen and (max-width: 767px) {
  .Summary__sec {
    width: 81.33333vw;
    margin: 0 auto;
  }
  .Summary__sec + .Summary__sec {
    margin-top: 91px;
  }
}
.Summary__title {
  text-align: center;
}
.Summary__body {
  margin-top: 79px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Summary__body {
    margin-top: 38px;
  }
}
.Summary__group {
  display: inline-block;
}
.Summary__group + .Summary__group {
  margin-top: 63px;
}
@media screen and (max-width: 767px) {
  .Summary__group + .Summary__group {
    margin-top: 50px;
  }
}
.Summary__explain {
  display: flex;
}
@media screen and (max-width: 767px) {
  .Summary__explain {
    display: block;
  }
}
.Summary__explain dt {
  width: 219px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .Summary__explain dt {
    width: auto;
    text-align: center;
  }
}
.Summary__explain dd {
  flex: 1;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .Summary__explain dd {
    margin-top: 27px;
  }
}

/* ImgTitle
-----------------------------------------*/
@media screen and (max-width: 767px) {
  .ImgTitle {
    position: relative;
    height: 70px;
  }
  .ImgTitle img {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    max-width: none;
    max-height: 100%;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scale(.7) translateX(-50%);
    transform: scale(.7) translateX(-50%);
  }
}

/* Uniform
-----------------------------------------*/
.Uniform {
  position: relative;
  padding: 301px 0 305px;
  overflow: hidden;
  background-color: #eef4f7;
}
@media screen and (max-width: 767px) {
  .Uniform {
    padding: 150px 0;
    border-radius: 20px;
  }
}
.Uniform::before {
  content: '';
  display: block;
  position: absolute;
  top: 6.25479%;
  right: -35.66666%;
  width: 119%;
  max-width: 1428px;
  aspect-ratio: 1 / 2.134;
  z-index: 0;
  background-image: url(/assets/img/bluteonlogo/logo_mark_03.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  filter: invert(99%) sepia(3%) saturate(9%) hue-rotate(194deg) brightness(104%) contrast(100%);
}
@media screen and (max-width: 767px) {
  .Uniform::before {
    top: 2.1561%;
    right: auto;
    left: 31.86666%;
    width: 346.93333%;
    max-width: none;
  }
}
.Uniform__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .Uniform__inner {
    margin: 0 20px;
  }
}
.Uniform__sec {
  margin-top: 100px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Uniform__sec {
    margin-top: 52px;
  }
}
.Uniform__title {
  text-align: center;
}
.Uniform__subTitle {
  display: inline-block;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .Uniform__subTitle {
    font-size: 28px;
    line-height: 1.3;
  }
}
.Uniform__subTitle span {
  background-color: #000;
}
@media screen and (max-width: 767px) {
  .Uniform__subTitle span {
    display: block;
  }
}
.Uniform__subTitle span:nth-child(1) {
  padding-left: .65em;
}
@media screen and (max-width: 767px) {
  .Uniform__subTitle span:nth-child(1) {
    padding: 0 3px;
  }
  .Uniform__subTitle span:nth-child(2) {
    margin-top: 1px;
    font-size: 20px;
    line-height: 1.8;
  }
}

.Uniform__img {
  display: flex;
  justify-content: center;
  gap: 0 96px;
  width: 66.58333%;
  margin: 82px auto 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Uniform__img {
    display: block;
    width: 82.53731%;
    margin: 32px auto 0;
  }
}
.Uniform__img img {
  width: calc((100% - 96px) / 2);
}
@media screen and (max-width: 767px) {
  .Uniform__img img {
    width: auto;
  }
  .Uniform__img img:nth-child(2) {
    margin-top: 35px;
  }
}
.Uniform__link {
  margin-top: 100px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Uniform__link {
    margin-top: 80px;
  }
}
.Uniform__link li:nth-child(n+2) {
  margin-top: 29px;
}
@media screen and (max-width: 767px) {
  .Uniform__link li:nth-child(n+2) {
    margin-top: 20px;
  }
}
.Uniform__link .Btn01 {
  width: 880px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .Uniform__link .Btn01 {
    width: auto;
  }
}

/* History
-----------------------------------------*/
.SecTitle {
  margin-bottom: 68px;
  text-align: center;
  font-size: 42px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .SecTitle {
    margin-bottom: 36px;
    font-size: 27px;
  }
}


.History {
  margin: 0 auto;
  padding-top: 186px;
  max-width: 976px;
}

@media screen and (max-width: 767px) {
  .History {
    margin: 0 20px;
    padding-top: 140px;
  }
}

.History__sec + .History__sec {
  padding-top: 146px;
}
@media screen and (max-width: 767px) {
  .History__sec + .History__sec {
    padding-top: 143px;
  }
}


.History > .Page__lineTitle:not(:first-of-type) {
  margin-top: 120px;
}

@media screen and (max-width: 976px) {
  .History > .Page__lineTitle:not(:first-of-type) {
    margin-top: 60px;
  }
}

.History table.Table tr th:nth-child(1) {
  width: 108px;
}

@media screen and (max-width: 976px) {
  .History table.Table tr th {
    padding: 20px 10px;
  }
  .History table.Table tr th:nth-child(1) {
    width: 70px;
  }
}
.History__img ul{
  margin-top: 10px;
}
.History__img ul:after {
content: "";
display: block;
clear: both;
}

.History__img ul li{
  margin-top: 5px;
  float: left;
  width:24%;
  margin-right: 1%;
  text-align:center;
}
@media screen and (max-width: 767px) {
.History__img ul li{
  float: none;
  margin-top: 5px;
  width:auto;
  margin-right: 0;
}
}
.History__img ul li:nth-child(4n){
  margin-right: 0;
}

ul.History__list li {
  margin-bottom: 12px;
}

@media screen and (max-width: 767px) {
  ul.History__list li {
    margin-bottom: 10px;
  }
}

ul.History__list li:last-child {
  margin-bottom: 0;
}

.History__SnsList {
  display: flex;
  align-items: center;
  gap: 0 24px;
}
.History__SnsList img {
  width: 24px;
}
.History__SnsList a:hover {
  opacity: 0.8;
}

/* InlineArrow
-----------------------------------------*/
.InlineArrow {
  position: relative;
  margin-left: 27px;
  padding-left: 15px;
}
@media screen and (max-width: 976px) {
  .InlineArrow {
  margin-left: 0;
  }
}
.InlineArrow::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -3px 0 0 0;
  border-top: solid 2px #004ea2;
  border-right: solid 2px #004ea2;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Award
-----------------------------------------*/
.Award {
  position: relative;
  z-index: 1;
  padding: 178px 0 200px 0;
  background: #000 url("/about/assets/img/bg_award.jpg") no-repeat top left;
  background-size: 100% auto;
  color: #FFF;
}
@media screen and (max-width: 767px) {
  .Award {
    padding: 140px 0 152px 0;
    background: #000 url("/about/assets/img/bg_award-sp.jpg") no-repeat top left;
    background-size: 100%;
  }
}
.Award__inner {
  margin: 0 auto;
  max-width: 976px;
}
@media screen and (max-width: 976px) {
  .Award__inner {
    margin: 0 20px;
  }
}
.Award__match {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 34px;
  padding-bottom: 35px;
  border-bottom: solid 1px #FFF;
}
@media screen and (max-width: 767px) {
  .Award__match {
    padding-bottom: 0;
    display: block;
    border-bottom: none;
  }
}
.Award__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
@media screen and (max-width: 767px) {
  .Award__item {
    display: block;
    margin-bottom: 60px;
    padding-bottom: 30px;
    border-bottom: solid 1px #FFF;
  }
  .Award .Award__item:last-child {
    margin-bottom: 50px;
  }
}
.Award__head {
  padding-bottom: 10px;
}
.Award__itemTitle {
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .Award__itemTitle {
    margin-bottom: 24px;
  }
}
.Award__itemTitle > span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}
.Award__img {
  text-align: center;
}
.Award__win {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  padding-bottom: 22px;
  border-bottom: solid 1px #FFF;
}
@media screen and (max-width: 767px) {
.Award__win {
  margin-top: 27px;
  padding-bottom: 30px;
  font-size: 16px;
  font-size: 1.6rem;
}
}
.Award__history {
  padding-top: 10px;
}
.Award__history p {
  margin-top: 14px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .Award__history p {
    font-size: 12px;
    font-size: 1.2rem;
  }
}
.Award__data {
  text-align: left;
}
.Award__subTitle {
  margin: 55px 0 15px 0;
  font-size: 18px;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .Award__subTitle {
    margin: 50px 0 15px 0;
    font-size: 16px;
    font-size: 1.6rem;
  }
}
.Award__data dl {
  padding: 18px 0 14px 0;
  border-top: solid 1px #FFF;
  display: flex;
  font-size: 14px;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
.Award__data dl {
  padding: 18px 0 14px 0;
  font-size: 12px;
  font-size: 1.2rem;
}
}
.Award__data dl:last-child {
  border-bottom: solid 1px #FFF;
}
.Award__data dl dt {
  width: 203px;
}
@media screen and (max-width: 767px) {
.Award__data dl dt {
  width: 150px;
}
}
.Award__data dl dd {
  flex: 1;
}
.Award__data dl dd ul li {
  display: flex;
  margin-bottom: 4px;
}
.Award__data dl dd ul li span:nth-child(1) {
  font-weight: bold;
  width: 65px;
}
.Award__data dl dd ul li span:nth-child(2) {
  flex: 1;
}

/* Originlog
-----------------------------------------*/
.Originlog {
  margin-top: 55px;
  display: flex;
}

@media screen and (max-width: 767px) {
  .Originlog {
    margin-top: 40px;
    display: block;
  }
}

.Originlog__img {
  width: 45%;
  padding: 0 57px;
}

@media screen and (max-width: 767px) {
  .Originlog__img {
    width: auto;
    margin-bottom: 20px;
  }
}

.Originlog__memo {
  flex: 1;
  padding-left: 10px;
}

.Originlog__memo p {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .Originlog__memo p {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

.Originlog__memo > .Table {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .Originlog__memo > .Table {
    margin-top: 40px;
  }
}

.Originlog__name {
  margin-bottom: 23px;
  line-height: 1.8;
}

.Originlog__name strong {
  color: #004ea2;
  font-weight: bold;
  font-size: 20px;
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
  .Originlog__name strong {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.Originlog__name span {
  font-size: 14px;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .Originlog__name span {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

/* Slogan
-----------------------------------------*/
.Slogan__img {
  text-align: center;
  margin: 32px -112px 56px;
}
@media screen and (max-width: 1200px) {
  .Slogan__img {
    margin: 32px 0 56px;
  }
}
.Slogan__text {
  text-align: center;
  margin-bottom: 120px;
}
.Slogan__text > p {
  font-size: 1.8rem;
  line-height: 2;
  margin-bottom: 2.3em;
}
@media screen and (max-width: 1200px) {
  .Slogan__text > p {
    font-size: 1.6rem;
  }
}
.Slogan__text > *:last-child {
  margin-bottom: 0;
}