@charset "utf-8";

/* === .fBox (flexBox) === */
@media screen and (min-width: 768px){
  .fBox {
    display: -webkit-box;
    display: flex;
  }
}

/* === .swiper === */
.swiper-pagination {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 200px;
  width: 80px !important;
  height: 28px !important;
  left: 10px !important;
}
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}
.swiper-pagination-bullet-active {
  background: #f26462;
}
.swiper-button-next {
  border-radius: 200px;
  top: auto;
  right: auto;
  left: 100px;
  bottom: 10px;
  display: -webkit-box;
  display: flex;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.7);
}
.swiper-button-next::after {
  content: "";
  display: block;
  background: #f26462;
  width: 14px;
  height: 18px;
  margin-left: 4px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* === .mhead h2.mhead__title === */
@media not all and (min-width: 768px) {
  .mhead h2.mhead__title img {
    height: 24px;
  }
  .mhead h2.mhead__title img.descender {
    height: 32px;
  }
}

/* === .arwLineLnk === */
.arwLineLnk {
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  border-bottom: 1px solid #810319;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.arwLineLnk::after {
  content: "";
  border-right: 1px solid #810319;
  transform: skew(40deg);
  position: absolute;
  right: 0;
}
.arwLineLnk:hover {
  opacity: 0.7;
}
a:hover .arwLineLnk {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  .arwLineLnk {
    font-size: calc(20 / 16 * 1rem);
    height: 58px;
    padding-right: 20px;
  }
  .arwLineLnk::after {
    width: 40px;
    height: 40px;
    bottom: -20px;
  }
}
@media not all and (min-width: 768px) {
  .arwLineLnk {
    font-size: 5vw;
    letter-spacing: 0.08em;
    height: 48px;
    padding-right: 24px;
  }
  .arwLineLnk::after {
    width: 40px;
    height: 40px;
    bottom: -20px;
  }
}

/* === #mv === */
#mv .mvSlide {
  color: #000;
  text-decoration: none;
  display: block;
  position: relative;
  width: 100%;
}
#mv .mvSlide img {
  display: block;
  width: 100%;
}
#mv .mvSlide dl {
  background-color: #fff;
}
#mv .mvSlide dl dt strong {
  font-weight: bold;
}
#mv .mvSlide dl dt div {
  letter-spacing: 0;
}
#mv .mvSlide dl dd {
  line-height: 1.5;
}
#mv .mvSlide.mv_company dl dt div span {
  color:#810319;
}
#mv .mvSlide.mv_sustainability dl dt {
  color: #1c6a0e;
}
#mv .mvSlide.mv_ir dl dt {
  color: #070059;
}
#mv .mv_company,
#mv .mv_sustainability,
#mv .mv_ir {
  background-size: cover;
}
@media screen and (min-width: 768px) {
  #mv a.mv_sustainability,
  #mv a.mv_ir {
    transition: opacity 0.3s ease;
  }
  #mv a.mv_sustainability:hover,
  #mv a.mv_ir:hover {
    opacity: 0.7;
  }
  #mv .mvSlide {
    height: 400px;
  }
  #mv .mvSlide dl {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 540px;
    padding: 20px;
  }
  #mv .mvSlide dl dt {
    padding-bottom: 16px;
  }
  #mv .mvSlide dl dt strong {
    font-size: calc(20 / 16 * 1rem);
  }
  #mv .mvSlide dl dt div {
    font-size: calc(15.5 / 16 * 1rem);
  }
  #mv .mvSlide dl dd {
    font-size: calc(15.5 / 16 * 1rem);
    padding-top: 16px;
  }
  #mv .mvSlide.mv_company dl {
    box-shadow: 10px 12px #810319;
  }
  #mv .mvSlide.mv_company dl dt {
    border-bottom: 4px solid #810319;
  }
  #mv .mvSlide.mv_sustainability dl {
    box-shadow: 10px 12px #1c6a0e;
  }
  #mv .mvSlide.mv_sustainability dl dt {
    border-bottom: 4px solid #1c6a0e;
  }
  #mv .mvSlide.mv_ir dl {
    box-shadow: 10px 12px #070059;
  }
  #mv .mvSlide.mv_ir dl dt {
    border-bottom: 4px solid #070059;
  }
  #mv .mv_company {
    background: url('/company/img/index_mv_company.jpg') no-repeat 50% 50%;
    background-size: cover;
  }
  #mv .mv_sustainability {
    background: url('/company/img/index_mv_sustainability.jpg') no-repeat 50% 50%;
    background-size: cover;
  }
  #mv .mv_ir {
    background: url('/company/img/index_mv_ir.jpg') no-repeat 50% 50%;
    background-size: cover;
  }
}
@media not all and (min-width: 768px) {
  #mv .mvSlide .spFrame {
    padding: 0 12px 12px 0;
  }
  #mv .mvSlide.mv_company .spFrame {
    background-color: #810319;
  }
  #mv .mvSlide.mv_sustainability .spFrame {
    background-color: #1c6a0e;
  }
  #mv .mvSlide.mv_ir .spFrame {
    background-color: #070059;
  }
  #mv .mvSlide dl {
    padding: 24px 16px;
  }
  #mv .mvSlide dl dt {
    padding-bottom: 8px;
  }
  #mv .mvSlide dl dt strong {
    font-size: 6vw;
  }
  #mv .mvSlide dl dt div {
    font-size: 4.3vw;
  }
  #mv .mvSlide dl dd {
    font-size: 4.9vw;
    padding-top: 8px;
  }
  #mv .mvSlide.mv_company dl dt {
    border-bottom: 4px solid #810319;
  }
  #mv .mvSlide.mv_sustainability dl dt {
    border-bottom: 4px solid #1c6a0e;
  }
  #mv .mvSlide.mv_ir dl dt {
    border-bottom: 4px solid #070059;
  }
}

/* === #topics === */
#topics h3 {
  color: #810319;
  border-bottom: 2px solid #810319;
}
#topics a {
  color: #000;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
#topics a:hover {
  opacity: 0.7;
}
#topics dl {
  border-bottom: 1px solid #000;
}
@media screen and (min-width: 768px) {
  #topics .fBox {
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  #topics .fBox > * {
    width: calc((100% - 60px) / 2);
  }
  #topics h3 {
    font-size: calc(22 / 16 * 1rem);
    padding-bottom: 16px;
  }
  #topics dl {
    padding: 12px 0;
  }
}
@media not all and (min-width: 768px) {
  #topics h3 {
    font-size: calc(18 / 16 * 1rem);
    padding-bottom: 12px;
  }
  #topics dl {
    font-size: calc(15 / 16 * 1rem);
    padding: 12px 0;
  }
  #topics dl dt {
    margin-bottom: 4px;
  }
  #topics dl dd {
    line-height: 1.35;
  }
  #topics .fBox > * {
    margin-bottom: 24px;
  }
}
/* === .news__list === */
.news__list {
  border-bottom: none !important;
  padding: 0 !important;
}
.news__list dt {
  color: #000;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding: 0;
}
.news__list dd {
  padding: 0;
}
.news__list dd a {
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .news__list dt,
  .news__list dd {
    font-size: calc(16 / 16 * 1rem);
  }
  .news__list dt {
    padding-top: 12px;
  }
  .news__list dd {
    padding-bottom: 8px;
  }
}
@media not all and (min-width: 768px) {
  .news__list dt,
  .news__list dd {
    font-size: calc(15 / 16 * 1rem);
  }
  .news__list dt {
    margin-top: 12px;
  }
  .news__list dd {
    padding-bottom: 12px;
  }
}

/* === #aboutUs === */
#aboutUs .aboutUs_bg {
  background: url('/company/img/index_aboutus_bg.jpg') 50% 50% no-repeat;
  background-size: cover;
}
#aboutUs .aboutUsInner {
  background-color: #fff;
}
#aboutUs .topmessageBox dd {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
#aboutUs .topmessageBox dd span {
  font-size: 80%;
  padding-right: 0.5em;
}
#aboutUs .topmessageBox .arwLineLnk {
  margin: 0 auto;
}
#aboutUs .aboutUs_othermenu {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
#aboutUs .aboutUs_othermenu li {
  line-height: 1.3;
  text-align: center;
  display: -webkit-box;
  display: flex;
}
#aboutUs .aboutUs_othermenu li a {
  font-weight: 700;
  text-decoration: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  transition: opacity 0.3s ease;
}
#aboutUs .aboutUs_othermenu li a:hover {
  opacity: 0.7;
}
#aboutUs .aboutUs_othermenu li a::before {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  background-color: transparent; 
}
#aboutUs .aboutUs_othermenu li a::after {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  background-color: #000;
}
@media screen and (min-width: 768px) {
  #aboutUs .aboutUs_bg {
    padding: 40px 0;
  }
  #aboutUs .aboutUsInner {
    padding: 50px;
  }
  #aboutUs .mhead {
    margin-bottom: 0;
  }
  #aboutUs .aboutUsInner .fBox {
    -webkit-box-align: center;
    align-items: center;
    margin-top: -36px;
  }
  #aboutUs .topmessageBox {
    width: 345px;
  }
  #aboutUs .topmessageBox dd {
    font-size: calc(24 / 16 * 1rem);
  }
  #aboutUs .topmessageBox .arwLineLnk {
    width: 240px;
  }
  #aboutUs .aboutUs_othermenu {
    margin-left: 50px;
    flex: 1;
  }
  #aboutUs .aboutUs_othermenu li {
    font-size: calc(18 / 16 * 1rem);
    width: calc(100% / 3);
    height: 60px;
  }
  #aboutUs .aboutUs_othermenu li:nth-child(n+4) {
    margin-top: 20px;
  }
  #aboutUs .aboutUs_othermenu li:nth-child(3n+1) a::before {
    background-color: #000; 
  }
}
@media not all and (min-width: 768px) {
  #aboutUs .aboutUs_bg {
    padding: 24px 0;
  }
  #aboutUs .aboutUsInner {
    padding: 32px 0;
  }
  #aboutUs .topmessageBox img.sp {
    width: 100%;
  }
  #aboutUs .topmessageBox dd {
    font-size: 6.5vw;
  }
  #aboutUs .topmessageBox .arwLineLnk {
    width: 210px;
  }
  #aboutUs .aboutUs_othermenu {
    margin: 20px 20px 0 20px;
  }
  #aboutUs .aboutUs_othermenu li {
    font-size: 4.5vw;
    width: calc(100% / 2);
    height: 60px;
  }
  #aboutUs .aboutUs_othermenu li:nth-child(n+3) {
    margin-top: 20px;
  }
  #aboutUs .aboutUs_othermenu li:nth-child(2n+1) a::before {
    background-color: #000; 
  }
}

/* === #irInfomation === */
#irInfomation .irInfomation_bg {
  background-color: #e9e9e9;
}
#irInfomation .fBox ul li a div span {
  font-weight: normal;
  line-height: 1.1;
  display: block;
}
#irInfomation .fBox dl {
  text-align: center;
  border: 1px solid #707070;
}
#irInfomation .fBox dl dt img {
  display: block;
}
#irInfomation .fBox dl dd {
  margin-top: 1px;
}
#irInfomation .fBox dl dd a {
  line-height: 1.3;
  text-decoration: none;
  background-color: #fff;
  display: block;
  padding: 8px;
}
#irInfomation .fBox dl dt a,
#irInfomation .fBox dl dd a {
  transition: opacity 0.3s ease;
}
#irInfomation .fBox dl dt a:hover,
#irInfomation .fBox dl dd a:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #irInfomation .irInfomation_bg {
    padding: 40px 0;
  }
  #irInfomation .fBox {
    -webkit-box-align: center;
    align-items: center;
  }
  #irInfomation .fBox ul {
    width: calc((100% - 24px) * 0.75);
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
  }
  #irInfomation .fBox ul li {
    font-size: calc(18 / 16 * 1rem);
    display: block;
    width: calc((100% - 48px) / 3);
    margin-left: 24px;
  }
  #irInfomation .fBox ul li:nth-child(3n+1) {
    margin-left: 0;
  }
  #irInfomation .fBox ul li:nth-child(n+4) {
    margin-top: 24px;
  }
  #irInfomation .fBox ul li a {
    height: 100px;
  }
  #irInfomation .fBox ul li a div span {
    font-size: calc(15 / 16 * 1rem);
    margin-top: 4px;
  }
  #irInfomation .fBox dl {
    width: calc((100% - 24px) * 0.25);
    margin-left: 24px;
  }
  #irInfomation .fBox dl dd {
    font-size: calc(18 / 16 * 1rem);
    font-weight: 700;
  }
}
@media not all and (min-width: 768px) {
  #irInfomation .irInfomation_bg {
    padding: 32px 0;
  }
  #irInfomation .fBox ul {
    width: 70%;
    margin: 0 auto;
  }
  #irInfomation .fBox ul li {
    margin-bottom: 12px;
  }
  #irInfomation .fBox ul li a {
    height: 58px;
  }
  #irInfomation .fBox ul li a div span {
    font-size: 3.5vw;
  }
  #irInfomation .fBox dl {
    font-size: calc(15 / 16 * 1rem);
    font-weight: 700;
    width: 80%;
    margin: 0 auto;
  }
}

/* === #sustainability === */
#sustainability .fBox {
  margin-bottom: 24px;
}
#sustainability .fBox a {
  /*display: block;*/
  text-decoration: none;
}
#sustainability dl dd {
  margin-top: 16px;
}
#sustainability .arwLineLnk a {
  display: block;
  text-decoration: none;
}
#sustainability a dl dd {
  transition: opacity 0.3s ease;
}
#sustainability a:hover dl dd {
  opacity: 0.7;
}
#sustainability dl dd img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #sustainability .fBox.noImgLnk {
    -webkit-box-pack: center;
    justify-content: center;
  }
  #sustainability .fBox > * {
    width: calc((100% - 32px) / 3);
    margin-left: 16px;
  }
  #sustainability .fBox > *:first-child {
    margin-left: 0;
  }
}
@media not all and (min-width: 768px) {
  #sustainability .fBox.noImgLnk {
    margin-top: 12px;
  }
  #sustainability .fBox > * {
    margin-top: 12px;
  }
  #sustainability .fBox > *:first-child {
    margin-top: 0;
  }
}

/* === .btnArea === */
.btnArea .btnBox_rect a {
  height: 48px;
  width: 100%;
}
.btnArea .btnBox_rect a.btnR03 {
  color: #fff;
  background-color: #840018;
  border: 2px solid #840018;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.btnArea .btnBox_rect a.btnR03::after {
  background: url('/assets/img/common/ico_button2.svg') no-repeat;
  background-size: contain;
  width: 12px;
  height: 12px;
  top: calc((100% - 12px) / 2);
  margin-top: auto;
}
@media screen and (min-width: 768px) {
  .btnArea .fBox {
    -webkit-box-pack: center;
    justify-content: center;
  }
  .btnArea .fBox > * {
    width: calc((100% - 32px) / 3);
    margin-left: 16px;
  }
  .btnArea .fBox > *:first-child {
    margin-left: 0;
  }
}
@media not all and (min-width: 768px) {
  .btnArea .fBox > * {
    margin-top: 16px;
  }
  .btnArea .fBox > *:first-child {
    margin-top: 0;
  }
}

/* === #groupCompany === */
#groupCompany h2 {
  text-align: center;
}
#groupCompany .groupCompany_bg {
  background-color: #e9e9e9;
}
@media screen and (min-width: 768px) {
  #groupCompany h2 {
    margin-bottom: 50px;
  }
  #groupCompany .groupCompany_bg {
    padding: 50px 0;
  }
  #groupCompany .fBox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  #groupCompany .fBox li {
    font-size: calc(18 / 16 * 1rem);
    display: block;
    width: calc((100% - 48px) / 3);
    margin-left: 24px;
  }
  #groupCompany .fBox li:nth-child(3n+1) {
    margin-left: 0;
  }
  #groupCompany .fBox li:nth-child(n+4) {
    margin-top: 24px;
  }
  #groupCompany .fBox li a {
    height: 100px;
  }
}
@media not all and (min-width: 768px) {
  #groupCompany h2 {
    margin-bottom: 25px;
  }
  #groupCompany .groupCompany_bg {
    padding: 32px 0;
  }
  #groupCompany .fBox {
    width: 76%;
    margin: 0 auto;
  }
  #groupCompany .fBox li {
    margin-bottom: 12px;
  }
  #groupCompany .fBox li a {
    height: 58px;
  }
}