/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://test.albion-cosmetics.com/
 * File name: contents.css
 * Summary:   ABOUT USコンテンツの固有スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    about
 *
 * ===============================================================
*/

/** =1
 * ========================================
 * about
 * ========================================
 */

#about {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
}

/* [ modal - about ]
 ------------------------------ */
.modalAbout {
}
.modalAboutTitle {
  line-height: 1.18;
}
.modalAboutContent {
  border-top: 1px solid #e3e3e3;
}
.modalAbout .itemImage img {
  max-width: 100%;
  height: auto;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .modalAboutTitle {
    font-size: 2.2rem;
  }
  .modalAboutContent {
    margin-top: 1em;
    padding-top: 15px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .modalAboutTitle {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .modalAboutContent {
    margin-top: 1.7em;
    padding-top: 1.8em;
  }
}

/* albionUK */
#albionUK {
}
#albionUK .modalAboutTitle {
  text-transform: none;
}
.albionUKTitle {
  line-height: 1.2;
}
.albionUKContent .itemTitle {
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .albionUKTitle {
    font-size: 2rem;
  }
  .albionUKContent .itemTitle {
    margin-top: 2em;
    line-height: 1.4;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .albionUKTitle {
    font-size: 26px;
    font-size: 2.6rem;
  }
  .albionUKContent .itemTitle {
    margin-top: 2em;
    line-height: 1.7;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  #albionUK .l-inner {
    width: 920px;
  }
}

/**
 * about top
 * ----------------------------------
 */
body[id="about"].home .l-main {
  margin-top: 0;
}

/* [ message ]
 ------------------------------ */
.sectionAboutMessage {
  padding-top: clamp(40px, calc(60 / 960 * 100vw), 60px);
  padding-bottom: clamp(50px, calc(120 / 960 * 100vw), 120px);
  background-image: linear-gradient(to bottom, #daeafc, #ffffff);
}
.sectionAboutMessageMovie {
  margin-bottom: 35px;
}
.sectionAboutMessageMovie video {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 599px) {
  .sectionAboutMessage {
    padding-top: 0;
    background-image: linear-gradient(
      to bottom,
      #daeafc calc(519 / 920 * 100vw),
      #ffffff
    );
  }
  .sectionAboutMessage > .l-inner {
    display: flex;
    flex-direction: column;
  }
  .sectionAboutMessageTitle {
    order: 1;
  }
  .sectionAboutMessageContent {
    display: contents;
  }
  .sectionAboutMessageMovie {
    order: 0;
    margin-inline: -15px;
  }
  .sectionAboutMessageText {
    order: 2;
  }
  .boxAboutMessageLogo {
    order: 3;
  }
}

.boxAboutMessageLogo {
  margin-top: 35px;
}
.boxAboutMessageLogoTitle {
  margin-bottom: 10px;
  font-size: clamp(20px, calc(24 / 960 * 100vw), 24px);
  text-transform: none;
}
.boxAboutMessageLogoImage img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 599px) {
  .boxAboutMessageLogoImage {
    width: min(274px, calc(274 / 690 * 100%));
    margin-top: 30px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 600px) {
  .boxAboutMessageLogo {
    display: grid;
    grid-template-columns: auto 180px;
    grid-template-rows: auto 1fr;
    column-gap: 40px;
  }
  .boxAboutMessageLogoText {
    grid-column: 1 / 2;
    grid-row: 2/3;
  }
  .boxAboutMessageLogoImage {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
  }
}

/* [ High-Quality ]
 ------------------------------ */
.sectionAboutHighQuality {
  padding-top: clamp(50px, calc(120 / 960 * 100vw), 120px);
  padding-bottom: clamp(50px, calc(120 / 960 * 100vw), 120px);
}
.sectionAboutHighQuality:not(:first-child) {
  border-top: 1px solid #ddd;
}
.sectionAboutHighQualityTitle {
  line-height: 1.4;
  text-transform: none;
}

.boxAboutHighQualityMovie {
  margin-bottom: clamp(30px, calc(60 / 960 * 100vw), 60px);
}

.boxAboutHighQualityPursue {
  display: grid;
}
.boxAboutHighQualityPursueTitle {
  font-size: clamp(1.6rem, calc(30 / 960 * 100vw), 3rem);
  text-transform: none;
}
.boxAboutHighQualityPursueImage img {
  width: 100%;
  height: auto;
}
.boxAboutHighQualityPursueText01 {
  margin-top: clamp(25px, calc(50 / 960 * 100vw), 50px);
}
.boxAboutHighQualityPursueText01Lead {
  margin-bottom: clamp(15px, calc(20 / 960 * 100vw), 20px);
  color: #000;
  font-weight: bold;
  font-size: clamp(1.4rem, calc(18 / 960 * 100vw), 1.8rem);
}
.listAboutHighQualityPursue {
  display: grid;
  row-gap: clamp(15px, calc(20 / 960 * 100vw), 20px);
  padding-left: 0;
  counter-reset: numberHighQualityPursue;
}
.listAboutHighQualityPursue .listAboutHighQualityPursueItem {
  display: grid;
  grid-template-columns: 2em auto;
  list-style-type: none;
  counter-increment: numberHighQualityPursue;
}
.listAboutHighQualityPursue .listAboutHighQualityPursueItem::before {
  content: counter(numberHighQualityPursue, upper-roman) ". ";
}
.boxAboutHighQualityPursueText02 {
  margin-top: clamp(25px, calc(50 / 960 * 100vw), 50px);
}

@media screen and (max-width: 599px) {
  .boxAboutHighQualityPursue {
    grid-template-columns: auto calc(290 / 690 * 100%);
    column-gap: 15px;
  }
  .boxAboutHighQualityPursueTitle {
    align-self: center;
  }
  .boxAboutHighQualityPursueImage img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .boxAboutHighQualityPursueText01,
  .boxAboutHighQualityPursueText02 {
    grid-column: 1 / span 2;
  }
}
@media screen and (min-width: 600px) {
  .boxAboutHighQualityPursue {
    grid-template-columns: auto max(160px, calc(280 / 920 * 100%));
    grid-template-rows: auto 1fr auto;
    column-gap: 40px;
  }
  .boxAboutHighQualityPursueImage {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
  }
  .boxAboutHighQualityPursueText02 {
    grid-column: 1 / span 2;
  }
}

/* [ Material ]
 ------------------------------ */
.sectionAboutMaterial {
  padding-top: clamp(50px, calc(120 / 960 * 100vw), 120px);
  padding-bottom: clamp(50px, calc(120 / 960 * 100vw), 120px);
}
.sectionAboutMaterial:not(:first-child) {
  border-top: 1px solid #ddd;
}

.sectionAboutMaterialTitle {
  margin-bottom: clamp(30px, calc(40 / 960 * 100vw), 40px);
  line-height: 1.4;
  text-transform: none;
}
.sectionAboutMaterialText {
  margin-bottom: clamp(25px, calc(55 / 960 * 100vw), 55px);
}
.sectionAboutMaterialImage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: clamp(30px, calc(60 / 960 * 100vw), 60px);
}
.sectionAboutMaterialImage img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 600px) {
  .sectionAboutMaterialImage {
    column-gap: calc(40 / 920 * 100%);
  }
}

.listAboutMaterialPoint {
  display: grid;
  counter-reset: numberMaterialPoint;
}
.listAboutMaterialPointItem {
  counter-increment: numberMaterialPoint;
}
.listAboutMaterialPointTitle {
  display: grid;
  row-gap: clamp(10px, calc(20 / 960 * 100vw), 20px);
  position: relative;
  margin-bottom: clamp(15px, calc(20 / 960 * 100vw), 20px);
  font-size: 2.4rem;
  text-align: center;
  text-transform: none;
}
.listAboutMaterialPointTitle::before {
  font-family: "OptimaLTPro-Roman", Optima, Calibri, Arial, sans-serif;
  font-size: calc(40 / 24 * 1em);
  font-style: italic;
  line-height: 1;
  content: counter(numberMaterialPoint);
}
.listAboutMaterialPointTitle::after {
  position: absolute;
  inset-block-start: calc(18 / 24 * 1em);
  inset-inline: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    #666 calc(50% - 30px),
    rgb(102 102 102 / 0) calc(50% - 30px),
    rgb(102 102 102 / 0) calc(50% + 30px),
    #666 calc(50% + 30px)
  );
  pointer-events: none;
  content: "";
}
@media screen and (max-width: 599px) {
  .listAboutMaterialPoint {
    row-gap: 25px;
  }
  .listAboutMaterialPointTitle::after {
    background-image: linear-gradient(
      to right,
      #666 calc(50% - 20px),
      rgb(102 102 102 / 0) calc(50% - 20px),
      rgb(102 102 102 / 0) calc(50% + 20px),
      #666 calc(50% + 20px)
    );
  }
}
@media screen and (min-width: 600px) {
  .listAboutMaterialPoint {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
  }
  .listAboutMaterialPointItem {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}

/**
 * Corporate Info
 * ----------------------------------
 */
.articleCorporate {
}

.sectionCorporate {
}
.sectionCorporateTitle {
  margin-bottom: 1em;
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
  font-size: 17px;
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1.5;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionCorporate + .sectionCorporate {
    margin-top: 55px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .sectionCorporate + .sectionCorporate {
    margin-top: 65px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .sectionCorporate + .sectionCorporate {
    margin-top: 75px;
  }
}

/* [ table corporate ]
------------------------------ */
.tableCorp {
  width: 100%;
  border-top: 1px solid #e3e3e3;
}
.tableCorp dt,
.tableCorp dd {
  line-height: 1.4;
  vertical-align: middle;
}
.tableCorp dt {
  color: #000;
  font-family: "HelveticaLTPro-Roman", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: normal;
}
.tableCorp dd {
  line-height: 1.4;
}
.tableCorp dd .itemText + .itemText {
  margin-top: 1em;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .tableCorp {
  }
  .tableCorp dt {
    padding: 1.5em 0;
  }
  .tableCorp dd {
    padding: 0 0 1.5em;
    border-bottom: 1px solid #e3e3e3;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .tableCorp div {
    display: grid;
    grid-template-columns: min(140px, 25%) 1fr;
    column-gap: 5%;
    border-bottom: 1px solid #e3e3e3;
  }
  .tableCorp dt,
  .tableCorp dd {
    padding: 1.2em 0;
  }
}

/* [ important announcement ]
------------------------------ */
.sectionCorporateAnnouncement {
  margin-top: clamp(40px, calc(80 / 960 * 100vw), 80px);
}
.sectionCorporateAnnouncementTitle {
  margin-bottom: clamp(10px, calc(20 / 960 * 100vw), 20px);
  font-size: clamp(2.3rem, calc(26 / 960 * 100vw), 2.6rem);
}
.sectionCorporateAnnouncementContent .itemTitle {
  margin-bottom: clamp(15px, calc(20 / 960 * 100vw), 20px);
  color: #000;
  font-family: "HelveticaLTPro-Roman", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: normal;
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* [ symbol ]
------------------------------ */
.sectionCorporateSymbol {
  margin-top: clamp(45px, calc(120 / 960 * 100vw), 120px);
  /* background-color: #f2f2f2; */
}
.sectionCorporateSymbolImage img {
  width: 100%;
  height: auto;
}
.sectionCorporateSymbolContent {
  padding-top: clamp(30px, calc(80 / 960 * 100vw), 80px);
  padding-bottom: clamp(45px, calc(120 / 960 * 100vw), 120px);
}
.sectionCorporateSymbolTitle {
  display: grid;
  row-gap: 5px;
  padding-bottom: clamp(25px, calc(30 / 960 * 100vw), 30px);
  font-size: clamp(1.6rem, calc(26 / 960 * 100vw), 2.6rem);
  text-transform: none;
}
.sectionCorporateSymbolTitle .textMain {
  font-size: clamp(2.8rem, calc(40 / 960 * 100vw), 4rem);
  line-height: 1;
}
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionCorporateSymbolImage {
    margin-inline: -15px;
  }
}
/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .sectionCorporateSymbolImage {
    margin-inline: calc(-5 / 90 * 100%);
  }
}

/**
 * Corporate Info
 * ----------------------------------
 */
body[id="about"].superior .sectionAboutMenu {
  margin-top: clamp(50px, calc(120 / 960 * 100vw), 120px);
}

.articleSuperiorText {
  margin-bottom: clamp(30px, calc(40 / 960 * 100vw), 40px);
}
.articleSuperiorImage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.articleSuperiorImage img {
  width: 100%;
  height: auto;
}
.articleSuperiorImage img:nth-child(1) {
  grid-column: 1 / span 3;
}

@media screen and (max-width: 599px) {
  .articleSuperiorImage {
    gap: calc(16 / 750 * 100vw);
  }
}
@media screen and (min-width: 600px) {
  .articleSuperiorImage {
    gap: min(40px, calc(40 / 960 * 100vw));
  }
}