@charset "utf-8";

/*------------------------------------------------------------
  トップページ
------------------------------------------------------------*/
.contentBox:not(:last-of-type) {
  margin-bottom: 100px;
}

.contentBox * {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 2;
}

.textAlignRight {
  display: block;
  text-align: right !important;
}

.textAlignCenter {
  display: block;
  text-align: center !important;
}

.contentHeader {
  margin-bottom: 30px;
  padding-bottom: 5px;
  color: #006896;
  font-size: 35px;
  font-family: "游明朝", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", "ＭＳ Ｐ明朝", "ヒラギノ明朝 Pro W6", serif;
  text-align: center;
  border-bottom: 1px solid #006896;
}

.contentTitle {
  margin-bottom: 30px;
  padding: 5px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  background-color: #006896;
}

.contentContainer:not(:last-of-type) {
  margin-bottom: 50px;
}

.contentSubTitle {
  margin-bottom: 5px;
  font-size: 20px;
}

.contentSubTitle::before {
  content: "■";
  margin-right: 5px;
  color: #006896;
}

.contentText {
  text-align: justify;
}

.contentItem {
  padding-left: 1em;
  text-indent: -1em;
}

.contentAnnotation {
  margin-top: 30px;
  padding: 20px;
  text-align: center;
  border: 3px solid #006896;
  background-image: url(../img/company/background_annotation.jpg);
  background-position: 90px 25px;
  background-repeat: no-repeat;
  background-size: 100px;
}

.contentAnnotationTitle {
  color: #006896;
  font-size: 20px;
  font-weight: normal;
}

.contentAnnotationList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 25px;
  padding-left: 30px;
}

.contentAnnotationList li {
  width: 50%;
  text-align: left;
}

.contentAnnotationList li:nth-of-type(2n) {
  width: 45%;
}

.contentLink {
  color: #215aea !important;
  text-decoration: underline !important;
}

.contentLink.emphasis {
  font-size: 20px;
}

.contentButtonContainer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.contentButton {
  padding: 10px;
  color: #006896 !important;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border: 3px solid #006896;
}

.contentButtonDouble {
  width: 47.5%;
}

.contentButtonTriple {
  width: 27.5%;
}

.contentTable {
  width: 50%;
  text-indent: 0;
  border-collapse: collapse;
}

.contentTable tr {
  border-top: 1px solid #333;
}

.contentTable tr:last-of-type {
  border-bottom: 1px solid #333;
}

.contentTable th {
  width: 15%;
  padding: 5px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  background-color: #5ea2bf;
}

.contentTable td {
  width: 35%;
  padding: 5px;
  text-align: center;
}

.contentImage {
  display: block;
  margin: auto;
}

.contentImageRespo {
  width: 80%;
  max-width: 400px;
  height: auto;
  margin: 85px auto;
}

.outlineBox {
  display: flex;
  justify-content: space-between;
}

.outlineList {
  display: flex;
  flex-wrap: wrap;
  width: 630px;
  font-size: 16px;
}

.outlineList dt {
  width: 20%;
}

.outlineList dd {
  width: 80%;
}

.outlinePhoto {
  width: 320px;
}

.outlinePhoto img:not(:last-of-type) {
  margin-bottom: 15px;
}

.missionBox {
  height: 340px;
  padding: 30px;
  border-radius: 20px;
  background-color: #dff2fa;
  background-image: url(../img/company/background_mission.jpg);
  background-position: left;
  background-repeat: no-repeat;
}

.missionText {
  padding-left: 220px;
  font-size: 20px;
  line-height: 2.25;
  text-align: justify;
}

.historyBox {
  background-image: url(../img/company/background_history.png);
  background-position: right top;
  background-repeat: no-repeat;
}

.historyList {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 16px;
}

.historyList dt {
  width: 140px;
}

.historyList span {
  display: inline-block;
  width: 80px;
}

.historyList dd {
  width: 860px;
}

.certificationBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
}

.certificationTitle {
  width: 100%;
  margin-bottom: 15px;
  font-size: 30px;
  font-family: "游明朝", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", "ＭＳ Ｐ明朝", "ヒラギノ明朝 Pro W6", serif;
  text-align: center;
}

.certificationTitle span {
  color: #91004f;
  font-size: inherit;
}

.certificationTitle span {
  color: #91004f;
  font-size: inherit;
}

.certificationText {
  width: 620px;
  text-align: justify;
}

.healthTable {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
}

.healthTable tr {
  border-top: 1px solid #333;
}

.healthTable tr:last-of-type {
  border-bottom: 1px solid #333;
}

.healthTable th {
  width: 15%;
  padding: 10px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  background-color: #5ea2bf;
}

.healthTable td {
  width: 35%;
  padding: 10px;
}

.healthTable th:first-of-type,
.healthTable td:first-of-type {
  border-right: 1px solid #333;
}

.modalItem {
  width: 600px;
  padding: 25px;
  background-color: #fff;
}

.modalTitle {
  margin-bottom: 10px;
  padding-left: 15px;
  color: #006896;
  font-size: 20px;
  border-left: 5px solid #006896;
}

.modalText {
  margin-bottom: 15px;
  padding-left: 15px;
  font-size: 16px;
}

.modalImage {
  display: block;
  margin: auto;
}

/*sdgs*/
.sdgsContent {
  margin-top: 50px;
}
.sdgsContent .subContainer {
  background-color: #dff2fa;
  padding: 25px;
  margin: 55px 0;
}
.sdgsContent .subTitle {
  color: #006896;
  text-align: center;
  font-size: 24px;
  line-height: 1.8;
}
.sdgsContent .subList {
  margin-top: 25px;
}
.sdgsContent .subItem {
  margin-top: 20px;
}
.sdgsContent .subItem .subItem-button {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.sdgsContent .subItem .subItem-button::after {
  position: absolute;
  content: "";
  display: block;
  border-width: 20px;
  border-style: solid;
  border-color:rgba(0, 105, 150, 0)  #006896 #006896 rgba(0, 105, 150, 0);
  bottom: 0;
  right: 0;
}
.sdgsContent .subItem .subItem-button:hover {
  background-color: #fffdb9;
  transition: background-color 0.25s ease-out
}
.sdgsContent .subItem .action-logo {
  width: 20%;
}
.sdgsContent .subItem .action-logo figure,
.sdgsContent .subItem .action-logo figure > img{
  width: 100%;
  margin: 0;
}
.sdgsContent .subItem .action-logo figure:nth-of-type(2) {
  margin-top: 10px;
}
.sdgsContent .subItem dl {
  width: calc(80% - 45px);
}
.sdgsContent .subItem dt {
  color: #006896;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 20px;
  padding-left: 15px;
  font-size: 30px;
  border-left: 5px solid #006896;
}

.sdgsContent .subItem dt span{
  color: rgba(0, 104, 150, 0.76);
  line-height: 1.3;
  margin-bottom: 10px;
  margin-left: 15px;
  font-size: 20px;
  position: relative;
}

.sdgsContent .subItem dd {
  text-indent: -1em;
  margin-left: 1em;
}

@media screen and (max-width: 767px) {
  .sdgsContent .subItem {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  .sdgsContent .subItem .action-logo {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .sdgsContent .subItem .action-logo figure {
    width: 48%;
  }
  .sdgsContent .subItem .action-logo figure:nth-of-type(2) {
    margin-top: 0;
  }
  .sdgsContent .subItem dl {
    width: 100%;
  }
  .sdgsContent .subItem dt span{
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    font-size: 18px;
  }
}

/*sdgs モーダル*/

#modal_sdgs_2.modalItem,
#modal_sdgs_3.modalItem,
#modal_sdgs_12.modalItem,
#modal_sdgs_14_15.modalItem,
#modal_sdgs_17.modalItem  {
  max-width: 600px;
  width: auto;
  box-sizing: border-box;
}
.modalTitleSdgs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.modalTitleSdgsIcon {
  width: 120px;
  display: block;
}
.modalTitleSdcs.two-icon {
  width: 260px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.modalTitleSdgsIcon > img {
  width: 100%;
}
.modalTitleText {
  width: calc(100% - 140px);
  display: block;
  font-size: 17.5px;
  font-weight: bold;
}
.modalSdgsIist {}
.modalSdgsIitem {
  border-style: solid;
  border-width: 6px;
  border-radius: 16px;
  margin: 25px 0;
  padding: 27px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

#modal_sdgs_2 .modalSdgsIitem {
  border-color: #d6a600;
}
/* #modal_sdgs_3 .modalSdgsIitem {
  border-color: #00973b;
} */
#modal_sdgs_3 .modalSdgsBox {
  border-color: #00973b;
  border-style: solid;
  border-width: 6px;
  border-radius: 16px;
  padding: 27px;
  margin: 25px 0;
}
/* #modal_sdgs_14_15 .modalSdgsIitem:nth-of-type(1) {
  border-color: #0076ba;
} */
#modal_sdgs_14_15 .modalSdgsBox:nth-of-type(2) {
  border-color: #0076ba;
  border-style: solid;
  border-width: 6px;
  border-radius: 16px;
  padding: 27px;
  margin: 25px 0;
}
/* #modal_sdgs_14_15 .modalSdgsIitem:nth-of-type(2) {
  border-color: #00973b;
} */
#modal_sdgs_14_15 .modalSdgsBox:nth-of-type(3) {
  border-color: #00973b;
  border-style: solid;
  border-width: 6px;
  border-radius: 16px;
  padding: 27px;
  margin: 25px 0;
}

#modal_sdgs_12 .modalSdgsBox {
  border-color: #d6a600;
  border-style: solid;
  border-width: 6px;
  border-radius: 16px;
  padding: 27px;
  margin: 25px 0;
}
#modal_sdgs_17 .modalSdgsBox {
  border-color: #003067;
  border-style: solid;
  border-width: 6px;
  border-radius: 16px;
  padding: 27px;
  margin: 25px 0;
}
.modalSdgsBoxText {
  font-size: 14px;
}
.modalSdgsIitem dl {
  width: 230px;
}
.modalSdgsIitem dl .modalSdgsItemTitle {
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.modalSdgsItemPicList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 15px;
}
.modalSdgsItemPicList .modalSdgsItemPic {
  width:100%;
  margin-bottom: 15px;
}

#modal_sdgs_2 .modalSdgsIitem dl .modalSdgsItemTitle {
  color: #d6a600;
  border-bottom: 2px dashed #d6a600;
}
/* #modal_sdgs_3 .modalSdgsIitem dl .modalSdgsItemTitle {
  color: #00973b;
  border-bottom: 2px dashed #00973b;
} */
#modal_sdgs_3 .modalSdgsBox h5 {
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #00973b;
  border-bottom: 2px dashed #00973b;
}
/* #modal_sdgs_14_15 .modalSdgsIitem:nth-of-type(1) .modalSdgsItemTitle{
  color: #0076ba;
  border-bottom: 2px dashed #0076ba;
} */
#modal_sdgs_14_15 .modalSdgsBox:nth-of-type(2) h5 {
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #0076ba;
  border-bottom: 2px dashed #0076ba;
}
/* #modal_sdgs_14_15 .modalSdgsIitem:nth-of-type(2) .modalSdgsItemTitle{
  color: #00973b;
  border-bottom: 2px dashed #00973b;
} */
#modal_sdgs_14_15 .modalSdgsBox:nth-of-type(3) h5 {
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #00973b;
  border-bottom: 2px dashed #00973b;
}
#modal_sdgs_12 .modalSdgsBox h5 {
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #d6a600;
  border-bottom: 2px dashed #d6a600;
}

#modal_sdgs_12 .modalSdgsItemPicList li {
  width: calc(50% - 5px);
}

#modal_sdgs_12 .modalSdgsItemPicList li:nth-of-type(1) .modalSdgsItemPic,
#modal_sdgs_12 .modalSdgsItemPicList li:nth-of-type(4) .modalSdgsItemPic {
  transform: rotate(1deg);
}
#modal_sdgs_12 .modalSdgsItemPicList li:nth-of-type(2) .modalSdgsItemPic,
#modal_sdgs_12 .modalSdgsItemPicList li:nth-of-type(3) .modalSdgsItemPic {
  transform: rotate(-1deg);
}
#modal_sdgs_12 .modalSdgsItemPicList .modalSdgsItemPic > img {
  border: 6px solid #fff;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
#modal_sdgs_12 .modalSdgsItemPicList .modalSdgsItemPicCap {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  padding-top: 5px;
}
#modal_sdgs_12 .notes {
  text-align: right;
}

#modal_sdgs_17 .modalSdgsBox h5 {
  font-size: 23px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 15px;
  color: #003067;
  border-bottom: 2px dashed #003067;
}

.modalSdgsIitem dl .modalSdgsItemText {
  font-size: 16px;
}
.modalSdgsItemPic {
  width: calc(100% - 251px);
  margin: 0;
}
.modalSdgsItemPic > img {
  width: 100%
}
.modalSdgsItemPic figcaption {
  color: #fff;
  background-color: #000;
  padding: 10px;
  width: calc(100% - 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: 3px;
}

.modalSdgsItemPic figcaption > span:nth-of-type(1) {
  font-size: 14.5px;
  font-weight: bold;
  display: block;
  line-height: 1;
}
/* .modalSdgs2ItemPic figcaption.narrow > span:nth-of-type(1){
  transform: scale( 0.85 , 1 );
  margin: 0 -10.5px;
} */
.modalSdgsItemPic figcaption > span:nth-of-type(2) {
  font-size: 10px;
  font-weight: 400;
  display: block;
  line-height: 1;
  padding-top: 5px;
}

.modalSdgsEmphasis {
  padding: 27px;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.modalSdgsEmphasis-text {
  color: #fff;
  width: 230px;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
}
#modal_sdgs_3 .modalSdgsEmphasis {
  background-color: #00973b;
}
#modal_sdgs_17 .modalSdgsEmphasis {
  background-color: #003067;
}
.modalInButton {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #91004f;
  height: 50px;
  width: 80%;
  margin: 15px auto;
}
.modalInButton:link {
  color: #fff;
}
#modal_sdgs_3 .modalInButton {
  background-color: #00973b;
  margin: 40px auto 60px;
  height: 80px;
  padding-bottom: 30px;
  position: relative;
}
#modal_sdgs_3 .modalInButton::after {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
  border-width: 20px 30px;
  border-color:rgba(255, 255,255, 1) rgba(255, 255,255, 0) rgba(255, 255,255, 0) rgba(255, 255,255, 0);
  left: calc(50% - 30px);
  bottom: 0;
}
#modal_sdgs_3 .modalInButton:link,
#modal_sdgs_3 .modalInButton:visited {
  color: #fff;
}


/*アルコールチェックの取組みについて*/
.alcohoCheck .contentText .emphasis {
  color: #006896;
}
.alcohoCheckBox1 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  margin: 25px 0;
}
.alcohoCheckBox1 .contentImage {
  width: 519px;
  margin: 0;
}
.alcohoCheckBox1 .notes {
  border:8px solid #006896;
  padding: 25px;
  width: calc(100% - 540px);
  position: relative;
}
.alcohoCheckBox1 .notes::before {
  content: "";
  display: block;
  position: absolute;
  left:-60px;
  bottom: 20px;
  border-style: solid;
  border-width: 20px 30px;
  border-color: rgba(0, 105, 150, 0) rgba(0, 105, 150, 1) rgba(0, 105, 150, 0) rgba(0, 105, 150, 0);
}

.alcohoCheckBox2 h4 {
  font-size: 1.5em;
  text-align: center;
  color: #006896;
}
.alcohoCheckBox2 .contentText {
  text-align: center;
}

.alcohoCheckBox3 {
  color: #006896;
  background-color: #dff2fa;
  border-radius: 20px;
  padding: 25px;
  margin: 50px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.alcohoCheckBox3 > span {
  display: block;
  width: calc(100% - 120px);
}

.alcohoCheckBox3::after {
  content: "";
  display: block;
  background-image: url(../img/company/image_alcoho_box3_img.png);
  background-size: contain;
  width: 100px;
  height: 100px;
}


@media screen and (max-width: 767px) {
  .alcohoCheckBox1 .contentImage {
    width: 100%;
  }
  .alcohoCheckBox1 .notes {
    border:4px solid #006896;
    padding: 25px;
    width: 100%;
    position: relative;
    margin-top:20px;
  }
  .alcohoCheckBox1 .notes::before {
    content: "";
    display: block;
    position: absolute;
    left:inherit;
    bottom: inherit;
    right: 10%;
    top: -60px;
    border-style: solid;
    border-width: 30px 20px;
    border-color: rgba(0, 105, 150, 0) rgba(0, 105, 150, 0) rgba(0, 105, 150, 1) rgba(0, 105, 150, 0);
  }
  .alcohoCheckBox3 {
    display: block;
  }

  .alcohoCheckBox3 > span {
    width: 100%;
  }
  .alcohoCheckBox3::after {
    margin: auto;
  }
}