@charset "UTF-8";

/* フォントサイズ */
body.corporate {
  font-family: "Noto Sans JP", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #3c3c43;
}
@media only screen and (max-width: 600px) {
  body.corporate {
    font-size: 4vw;
  }
}

#purpose #pageTop {
  z-index: 99;
}

/* フッターナビ非表示 
div.footerNav{ display: none; }
footer{ border-top: none; }
*/

/* ぶら下がり */
.hanging_indent {
  padding-left: 1em;
  text-indent: -1em;
}

/* 戻るボタン：news_article_2022から移植して修正 */
.btn_area {
  padding-top: 65px;
  text-align: center;
}
a.btn_back {
  display: inline-block;
  position: relative;
  padding: 8px 0 8px 24px;
  margin: 0 8px;
  border: 1px solid #c0272d;
  border-radius: 40px;
  width: 170px;
  font-size: 1rem;
  font-weight: bold;
  color: #c0272d;
}
.btn_back:first-of-type:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-54%);
  width: 20px;
  height: 20px;
  background-image: url("../svg/mark_back.svg");
  background-repeat: no-repeat;
  background-size: contain;
  /* 黒アイコンを赤に */
  filter: invert(19%) sepia(60%) saturate(4933%) hue-rotate(347deg)
    brightness(80%) contrast(85%);
}
@media only screen and (max-width: 600px) {
  .btn_area {
    padding-top: 16vw;
  }
  a.btn_back {
    padding: 2.13vw 2vw 2.13vw 10vw;
    width: 35.2vw;
    font-size: 3.73vw;
    font-weight: bold;
  }
  .btn_back:first-of-type:after {
    left: 5.33vw;
    transform: translateY(-54%);
    width: 5.33vw;
    height: 5.33vw;
  }
}

/* ルビ */
[rubie],
[rubie_near],
[rubie_narrow] {
  position: relative;
  white-space: nowrap;
}
[rubie]::before {
  content: attr(rubie);
  position: absolute;
  font-size: 0.5em;
  top: -1em;
  left: -0.5em;
  right: -0.5em;
  white-space: nowrap;
  text-align: center;
}
[rubie_near]::before {
  content: attr(rubie_near);
  position: absolute;
  font-size: 0.5em;
  top: -0.8em;
  left: -0.5em;
  right: -0.5em;
  white-space: nowrap;
  text-align: center;
}
[rubie_narrow]::before {
  content: attr(rubie_narrow);
  position: absolute;
  font-size: 0.5em;
  top: -1em;
  left: -0.5em;
  right: -0.5em;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transform: scale(0.8, 1);
  text-indent: -1em;
}

/* 表示領域：使わないかも */
.display_area {
  width: 94%;
  max-width: 1120px;
  margin: 0 auto;
}
@media only screen and (max-width: 600px) {
  .display_area {
    width: 92%;
  }
}

/* トップ：パーパス部 */
.purpose_part {
  position: relative;
}
/* パーパス部：スライドショー */
.image_frame {
  position: relative;
  width: calc((100% + 1192px) / 2);
  height: 350px;
  margin: 0 auto 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 1192px) {
  .image_frame {
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .image_frame {
    height: 46vw;
  }
}

.img00,
.img01,
.img02,
.img03,
.img04 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}
.img00::before,
.img04::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #fff 100px, rgba(255, 255, 255, 0) 500px);
}
/* 初期24s */
.img00 {
  background-image: url("../images/sky_green.png");
  /*
	animation: slide-animation-10 8s infinite;
	*/
}
.img01 {
  background-image: url("../images/hand1.png");
  animation: slide-animation-11 8s infinite;
}
.img02 {
  background-image: url("../images/hand2.png");
  animation: slide-animation-12 8s infinite;
}
.img03 {
  background-image: url("../images/hand3.png");
  animation: slide-animation-13 8s infinite;
}
.img04 {
  background-image: url("../images/kamihikoki4.png");
  animation: slide-animation-14 8s infinite;
  /*
}@media only screen and (max-width:1192px) {
	.img01, .img02, .img03, .img04{ background-position: right -75px center; }
}
*/
  /* 横幅が狭くなったとき、画像の起点を少しずつ右にずらして行く */
}
@media only screen and (max-width: 1192px) {
  .img00 {
    background-position: right -150px center;
  }
  .img02 {
    background-position: right -75px center;
  }
  .img03 {
    background-position: right -125px center;
  }
  .img04 {
    background-position: right -150px center;
  }
}
@media only screen and (max-width: 1050px) {
  .img00 {
    background-position: right -250px center;
  }
  .img01 {
    background-position: right -75px center;
  }
  .img02 {
    background-position: right -150px center;
  }
  .img03 {
    background-position: right -200px center;
  }
  .img04 {
    background-position: right -225px center;
  }
}
@media only screen and (max-width: 950px) {
  .img00 {
    background-position: right -350px center;
  }
  .img01 {
    background-position: right -175px center;
  }
  .img02 {
    background-position: right -250px center;
  }
  .img03 {
    background-position: right -300px center;
  }
  .img04 {
    background-position: right -325px center;
  }
}
@media only screen and (max-width: 870px) {
  .img00 {
    background-position: right -350px center;
  }
  .img01 {
    background-position: right -225px bottom -50px;
  }
  .img02 {
    background-position: right -300px bottom -25px;
  }
  .img03 {
    background-position: right -350px center;
  }
  .img04 {
    background-position: right -375px center;
  }
}
@media only screen and (max-width: 820px) {
  .img00 {
    background-position: right -450px center;
  }
  .img01 {
    background-position: right -325px bottom -100px;
  }
  .img02 {
    background-position: right -400px bottom -50px;
  }
  .img03 {
    background-position: right -450px bottom -25px;
  }
  .img04 {
    background-position: right -475px center;
  }
}
@media only screen and (max-width: 720px) {
  .img00 {
    background-position: right -550px center;
  }
  .img01 {
    background-position: right -425px bottom -100px;
  }
  .img02 {
    background-position: right -500px bottom -50px;
  }
  .img03 {
    background-position: right -550px bottom -25px;
  }
  .img04 {
    background-position: right -575px center;
  }
}
@media only screen and (max-width: 620px) {
  .img01 {
    background-size: 1200px;
    background-position: right -250px bottom -50px;
  }
  .img02 {
    background-size: 1200px;
    background-position: right -250px bottom -25px;
  }
  .img03 {
    background-size: 1200px;
    background-position: right -250px bottom -0px;
  }
  .img04 {
    background-position: right -600px center;
  }
}
@media only screen and (max-width: 600px) {
  .img00 {
    background-position: right 50% bottom;
  }
  .img01 {
    background-size: 160vw;
    background-position: right 30% bottom -4vw;
  }
  .img02 {
    background-size: 160vw;
    background-position: right 31% bottom -4vw;
  }
  .img03 {
    background-size: 160vw;
    background-position: right 32% bottom -4vw;
  }
  .img04 {
    background-position: right 50% bottom;
  }
}

/* アニメーション設定 */
@keyframes slide-animation-01 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  15% {
    opacity: 1;
  }
  25% {
    opacity: 0;
    transform: scale(1.15);
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-animation-02 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
    transform: scale(1.1);
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-animation-03 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes slide-animation-04 {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes slide-animation-10 {
  0% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-animation-11 {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-animation-12 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-animation-13 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-animation-14 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* トップ：パーパス文 */
.purpose_frame {
  position: absolute;
  top: 2.5em;
  right: calc(1rem + (100% - 1192px) / 2);
  width: 36em;
  height: 9em;
  background-color: rgba(240, 240, 240, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@media only screen and (max-width: 1192px) {
  .purpose_frame {
    right: 1em;
  }
}
@media only screen and (max-width: 950px) {
  .purpose_frame {
    width: 26.4em;
    height: 12em;
  }
}
@media only screen and (max-width: 600px) {
  .purpose_frame {
    top: 5vw;
    right: 0;
    width: 75vw;
    height: 25vw;
  }
}
/* アニメーション */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(240px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.purpose_frame p {
  font-size: 1.6em;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}
@media only screen and (max-width: 600px) {
  .purpose_frame p {
    font-size: 5vw;
  }
}
/* ２行と３行をカスタム幅で出し分け */
.purpose_frame p.two_lines {
  display: block;
}
.purpose_frame p.three_lines {
  display: none;
}
@media only screen and (max-width: 9500px) {
  .purpose_frame p.two_lines {
    display: none;
  }
  .purpose_frame p.three_lines {
    display: block;
  }
}

/* トップ：リンクボタン */
.link_frame {
  box-sizing: border-box;
  height: 2.75em;
  padding: 0 2em;
  border-radius: 1.375em;
  background-color: white;
  border: 3px solid #c0272d;
  color: #c0272d;
  font-weight: 700;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 600px) {
  .link_frame {
    font-size: 3.5vw;
    height: 2.5em;
    padding: 0 1.25em;
    border: 2px solid #c0272d;
  }
}
/* 山括弧マーク */
.link_frame a {
  position: relative;
  padding-left: 0.75em;
  line-height: 1;
}
.link_frame a p::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -0.75em;
  transform: translateY(-50%) rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #c0272d;
  border-right: 2px solid #c0272d;
}
@media only screen and (max-width: 600px) {
  .link_frame a p::before {
    left: -0.25em;
  }
}

.link_frame p {
  font-weight: 500;
}

/* パーパス部のリンクボタン */
.purpose_part .link_frame {
  position: absolute;
  top: 15em;
  right: calc((100% - 1192px) / 2 + 4em);
}
@media only screen and (max-width: 1192px) {
  .purpose_part .link_frame {
    right: 2em;
    top: 15em;
  }
}
@media only screen and (max-width: 950px) {
  .purpose_part .link_frame {
    right: 2em;
    top: 17em;
  }
}
@media only screen and (max-width: 600px) {
  .purpose_part .link_frame {
    right: 2vw;
    top: 33vw;
  }
}

/* トップ：社長部 */
.president_part {
  background-color: #eeebe4;
  width: 100%;
  height: 315px;
  margin-top: 1em;
}
@media only screen and (max-width: 600px) {
  .president_part {
    font-size: 4vw;
  }
}
.president_area {
  width: 672px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3em;
}
@media only screen and (max-width: 700px) {
  .president_area {
    width: calc(100% - 2em);
    gap: 2em;
  }
}
@media only screen and (max-width: 600px) {
  .president_part {
    height: 44vw;
  }
  .president_area {
    width: calc(100% - 1.5em);
    gap: 1em;
  }
}
/* 社長部：左テキスト */
.text_side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.copy {
  font-size: 1.375em;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}
@media only screen and (max-width: 600px) {
  .copy {
    font-size: 4.75vw;
  }
}
/* コピー２行目のスペース削除 */
@media only screen and (max-width: 700px) {
  .space01 {
    display: none;
  }
}
@media only screen and (max-width: 690px) {
  .space02 {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .space03 {
    display: none;
  }
}
.signature {
  display: flex;
  align-items: center;
  column-gap: 1em;
}
.signature_frame {
  width: 150px;
}
@media only screen and (max-width: 600px) {
  .signature {
    font-size: 3.5vw;
  }
  .signature_frame {
    width: 25vw;
  }
}
.signature_frame > img {
  width: 100%;
}

/* 社長部：右写真（横長から正方形） */
.photo_side {
  width: 280px;
  overflow: hidden;
}
@media only screen and (max-width: 660px) {
  .photo_side {
    width: 230px;
  }
}
@media only screen and (max-width: 600px) {
  .photo_side {
    width: 30vw;
    height: 30vw;
  }
}
.photo_side > img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
@media only screen and (max-width: 600px) {
  .photo_side > img {
    height: 30vw;
  }
}

/* 回遊メニュー */
.link_part {
  margin-top: 1em;
}
@media only screen and (max-width: 600px) {
  .link_part {
    font-size: 4.5vw;
  }
}
.link_part .link_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  max-width: 932px;
  margin: 0 auto;
}
@media only screen and (max-width: 600px) {
  .link_part .link_area {
    gap: 0.25em;
  }
}
.link_part li {
  width: 30%;
  min-width: 240px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-sizing: border-box;
}
.link_part li a {
  box-sizing: border-box;
  position: relative;
}
@media only screen and (max-width: 814px) {
  .link_part li {
    width: 45%;
    max-width: 300px;
  }
}
@media only screen and (max-width: 600px) {
  /* スマホはアイコン表示 */
  .link_part li {
    width: 100%;
    /*
		height: 15vw;
		*/
    max-width: 600px;
    background-color: #b0906a;
    box-shadow: none;
    padding: 0 0 0 0.5em;
    /*
		border-left: .5em solid #b0906a;
		*/
  }
  .link_part li a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
  }
  .link_part li .icon {
    width: 15vw;
    /* 黒アイコンを白に https://codepen.io/sosuke/pen/Pjoqqp 
		filter: invert(100%) sepia(3%) saturate(10%) hue-rotate(56deg) brightness(102%) contrast(101%);
		*/
    padding: 0;
    box-sizing: border-box;
  }
  .link_part li .icon img {
    width: 100%;
  }
}
.link_part li .pic {
  width: 100%;
  object-fit: cover;
}
.link_part li p {
  /*
	background-color: #9c9380;
	*/
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  color: #3c3c43;
  line-height: 1;
  padding: 1em;
  font-weight: 500;
  position: absolute;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}
@media only screen and (max-width: 600px) {
  .link_part li p {
    padding: 1em 0.5em;
    position: relative;
    text-align: left;
    margin-left: 0.5em;
    padding-left: 1em;
    background-color: #f1f1f1;
  }
}

/* 記事ページ */
/* 記事：タイトル部 */
.title_part {
  font-size: 20px;
  height: 100px;
  background-color: #eeebe4;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 600px) {
  .title_part {
    font-size: 4.5vw;
    height: 17.5vw;
  }
}
.title_part img {
  width: 40px;
  display: none;
}
.title_part p {
  font-weight: 500;
  /*
	margin-left: 1em;
	*/
}

/* 記事：ジャンプリスト部 */
/* sticky を使うので、hidden解除 */
body.corporate,
body.corporate main {
  overflow: visible;
}
.anchor_part {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1rem 0;
  background-color: #fff;
}
.anchor_area {
  margin: 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: #c0272d;
  display: flex;
  gap: 1em;
  justify-content: space-around;
  max-width: 1192px;
}
@media only screen and (max-width: 600px) {
  .anchor_area {
    font-size: 3vw;
  }
}
/* jump_boxはページ内ジャンプ */
.jump_box {
  margin-right: 0.25em;
  text-decoration: underline;
  color: #c0272d;
}
/* link_boxは別のページへジャンプ */
.link_box {
  text-decoration: underline;
  color: #af8f68;
}
.anchor_area li,
.jump_box {
  position: relative;
}
.anchor_area li::after,
.jump_box::after {
  content: "";
  width: 1em;
  height: 1em;
  background-image: url("../svg/mark_anchor.svg");
  /* 黒アイコンを赤に */
  filter: invert(19%) sepia(60%) saturate(4933%) hue-rotate(347deg)
    brightness(80%) contrast(85%);
}
.anchor_area li::after {
  position: absolute;
  top: 0.25em;
  right: -1.25em;
}
.jump_box::after {
  content: "";
  display: inline-block;
}
@media only screen and (max-width: 600px) {
  .anchor_area li::after {
    right: -1em;
  }
}
.jump_box::after {
  right: -1em;
}

/* 記事：リード文 */
.lead_part {
  margin: 1rem auto 0;
  max-width: 800px;
}
.lead_part p {
  line-height: 1.75;
}
.article_page h2 {
  font-size: 35px;
  font-weight: 700;
  color: #c0272d;
  max-width: 1192px;
  margin: 6rem auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 600px) {
  .article_page h2 {
    font-size: 7vw;
  }
  .article_page #statement + h2 {
    margin-top: 6rem;
  }
  .article_page #guideline + h2 {
    margin-top: 10rem;
  }
}

/* 記事：パーパス文 */
.d_part {
  max-width: 1192px;
  margin: 2rem auto;
  height: 170px;
  background-image: url("../svg/icon_d.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.d_part > .transparent_cover {
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 170px;
}
.d_part p {
  font-size: 30px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}
@media only screen and (max-width: 600px) {
  .d_part p {
    font-size: 6.5vw;
  }
}

/* ２行と３行をカスタム幅で出し分け */
.d_part p.two_lines {
  display: block;
}
.d_part p.three_lines {
  display: none;
}
@media only screen and (max-width: 800px) {
  .d_part p.two_lines {
    display: none;
  }
  .d_part p.three_lines {
    display: block;
  }
}

/* 記事：ステートメント */
.statement_part {
  font-size: 18px;
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 500;
  font-style: normal;
  margin: 4rem auto 0;
  width: 100%;
  /*
	max-width: 1192px;
	*/
  position: relative;
}
@media only screen and (max-width: 600px) {
  .statement_part {
    font-size: 4.2vw;
    margin-top: 4rem;
  }
}
.statement_area {
  background-color: rgba(249, 249, 249, 0.7);
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
  padding: 2.77em;
  width: 37em;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}
@media only screen and (max-width: 1000px) {
  .statement_area {
    width: 34em;
    padding: 2.25em 2em;
  }
}
@media only screen and (max-width: 870px) {
  .statement_area {
    width: 32em;
    padding: 2em 0.5em 2em 1.5em;
  }
}
@media only screen and (max-width: 800px) {
  .statement_area {
    width: calc(100% - 14em);
    padding: 2em 1.5em 2em 2em;
  }
}
@media only screen and (max-width: 700px) {
  .statement_area {
    width: calc(100% - 9em);
  }
}
@media only screen and (max-width: 600px) {
  .statement_area {
    width: calc(100% - 3em);
    padding: 1.5em 1em 1.5em 1em;
  }
}
.statement_area p {
  line-height: 2;
}
/* すべてを、改行 */
@media only screen and (max-width: 755px) {
  .break01 {
    display: none;
  }
}

.statement_area p:not(:first-child) {
  margin-top: 2em;
}
/* 記事：ステートメントまわりの写真 */
.statement_part .bg01,
.statement_part .bg02,
.statement_part .bg03 {
  position: absolute;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}
.statement_part .bg02 {
  opacity: 0.4;
}

/*
.statement_part .bg01::before,
.statement_part .bg02::before,
.statement_part .bg03::before{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: radial-gradient(rgba(255,255,255,0) 0, #fff 90%);
	position: absolute;
	top: 0;
	left: 0;
	filter: blur(20%);
}
*/
/* imageでははみ出しが出る。scroll-x:hiddenというのは効かなかった */
.statement_part .bg01 {
  height: 15.55em;
  top: -7em;
  /*
	background-color: rgba(255,0,0,.2);
	*/
  background-image: url("../images/baby.png");
  background-position: right 1em top 0;
}
.statement_part .bg02 {
  height: 22.22em;
  top: 6em;
  /*
	background-color: rgba(0,255,0,.2);
	*/
  background-image: url("../images/adults.png");
  background-position: left -6em top 0;
}
.statement_part .bg03 {
  height: 19.44em;
  bottom: -6em;
  /*
	background-color: rgba(0,0,255,.2);
	*/
  background-image: url("../images/kids.png");
  background-position: right 0 top 0;
}
@media only screen and (max-width: 1200px) {
  .statement_part .bg01 {
    top: -8em;
  }
  .statement_part .bg03 {
    background-position: right -2em top 0;
  }
}
@media only screen and (max-width: 1080px) {
  .statement_part .bg01 {
    background-position: right -1em top 0;
  }
  .statement_part .bg03 {
    background-position: right -4em top 0;
  }
}
@media only screen and (max-width: 900px) {
  .statement_part .bg01 {
    height: 13.6em;
  }
  .statement_part .bg03 {
    height: 17em;
  }
}
@media only screen and (max-width: 800px) {
  .statement_part .bg01 {
    background-position: right -2em top 0;
  }
  .statement_part .bg03 {
    background-position: right -5em top 0;
  }
}
@media only screen and (max-width: 600px) {
  .statement_part .bg01 {
    top: -4.5em;
    height: 8em;
    background-position: right 0 top 0;
  }
  .statement_part .bg02 {
    top: 12em;
    height: 18em;
    background-position: right -6em top 0;
  }
  .statement_part .bg03 {
    bottom: -8em;
    height: 10em;
    background-position: left -1em top 0;
  }
}

/* 記事：背景 */
.guideline_part {
  font-size: 16px;
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 400;
  font-style: normal;
  margin: 4rem auto 0;
  padding: 0 1em;
}
@media only screen and (max-width: 600px) {
  .guideline_part {
    font-size: 4vw;
    margin-top: 3rem;
  }
}
.guideline_intro {
  max-width: 800px;
  margin: 0 auto;
}
.guideline_area {
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}
.guideline_area dt {
  line-height: 2;
  margin-top: 1rem;
  font-weight: 700;
}
.guideline_area dd {
  margin-left: 1em;
}

.background_part {
  font-size: 16px;
  width: 90%;
  max-width: 800px;
  margin: 6rem auto 0;
  padding: 3em;
  background-color: #f6e7e0;
  overflow: hidden;
  /* max-widthを指定し直さないとx方向にスクロールが出る */
}
@media only screen and (max-width: 920px) {
  .background_part {
    max-width: 90%;
    padding: 3em 1.5em;
  }
}
@media only screen and (max-width: 600px) {
  .background_part {
    max-width: 85%;
    font-size: 3.5vw;
    margin-top: 8rem;
  }
}
.background_part h3 {
  font-size: 1.125em;
  margin-bottom: 1em;
  text-align: center;
}
.background_part .lines p {
  line-height: 2;
}

/* 記事：社長コピー */
.copy_zone {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(0, 0, 0, 0.05) 20%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0) 80%
  );
}
@media only screen and (max-width: 920px) {
  .copy_zone {
    width: 95%;
  }
}
@media only screen and (max-width: 880px) {
  .copy_zone {
    width: 98%;
  }
}
@media only screen and (max-width: 700px) {
  .copy_zone {
    background: none;
  }
}
.copy_part,
.message_part,
.date_part,
.signature_part {
  width: 90%;
  max-width: 800px;
  margin: 3rem auto 0;
}
.copy_part {
  font-size: 24px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
@media only screen and (max-width: 850px) {
  .copy_part {
    gap: 0.5em;
  }
}
@media only screen and (max-width: 600px) {
  .copy_part {
    font-size: 5vw;
    flex-direction: column;
  }
}

.copy_part p {
  /*
	color: #736357;
	*/
  padding: 1.5em;
  text-indent: -0.5em;
}
@media only screen and (max-width: 840px) {
  .copy_part p {
    padding: 0.5em;
  }
}
.copy_part .photo_area {
  width: 350px;
  background-color: red;
}
@media only screen and (max-width: 780px) {
  .copy_part .photo_area {
    width: calc(100% - 14em);
  }
}
@media only screen and (max-width: 740px) {
  .copy_part .photo_area {
    width: 60vw;
  }
  /*
}@media only screen and (max-width:600px) {
	.copy_part .photo_area{
		width: 49vw;
	}
*/
}
.copy_part .photo_area img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}
@media only screen and (max-width: 720px) {
  .copy_part .photo_area img {
    height: 240px;
  }
}
@media only screen and (max-width: 640px) {
  .copy_part .photo_area img {
    height: 220px;
  }
}
@media only screen and (max-width: 600px) {
  .copy_part .photo_area img {
    height: 49vw;
  }
}

/* 記事：社長メッセージ */
.message_part {
  font-size: 16px;
}
@media only screen and (max-width: 600px) {
  .message_part {
    font-size: 4vw;
  }
}

.message_part p {
  line-height: 1.75;
}
.message_part p:not(:first-child) {
  margin-top: 2rem;
}

/* 記事：日付・署名 */
.date_part {
  font-size: 15px;
  text-align: right;
}
@media only screen and (max-width: 600px) {
  .date_part {
    font-size: 3.75vw;
  }
}
@media only screen and (max-width: 600px) {
  .signature_part {
    margin-top: 1em;
  }
}
.signature_area {
  font-size: 16px;
  max-width: 150px;
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 600px) {
  .signature_area {
    font-size: 3.75vw;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
  }
  .signature_area .signature_frame {
    width: 40vw;
  }
}
.signature_part p {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

/* 記事：汎用パーツ */
.corporate_area {
  width: 92%;
  max-width: 800px;
  margin: 0 auto;
}
.corporate_area h3 {
  font-size: 1.25em;
  font-weight: 500;
  text-align: center;
  width: 70%;
  max-width: 17.5em;
  margin: 3rem auto 0;
  padding-bottom: 0.6em;
  border-bottom: 2px solid;
}
@media only screen and (max-width: 600px) {
  .corporate_area h3 {
    width: 90%;
  }
}
.corporate_area p {
  line-height: 2;
}
.corporate_area.ngc_plan h3 {
  border-color: #d3a48d;
}
.corporate_area.healthcare h3 {
  border-color: #b9d3a0;
}
.corporate_area.recruit h3 {
  max-width: 20em;
  border-color: #c0272d;
}

.intro {
  margin: 3rem auto 0;
}
.intro p {
  line-height: 1.75;
}

/* 記事：見出し後アキ */
.corporate_area h3 + p {
  margin-top: 2.3em;
}

/* 記事：次世代色文字 */
.ngc_period {
  color: #d3a48d;
  font-weight: 600;
}
/* 記事：次世代行動内容dl */
.ngc_actions,
.healthcare_actions {
  margin-top: 2.3em;
}
.ngc_actions dl {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}
.ngc_actions dt {
  width: 3em; /* 中身の指定になる paddingが追加されたものが表示される */
  padding: 0.5em 1em;
  text-align: center;
  border-radius: 0.5em;
  font-weight: 500;
}
.ngc_actions dt:nth-child(4n + 1) {
  background-color: #f2ded5;
}
.ngc_actions dt:nth-child(4n + 3) {
  background-color: #e5e5e5;
}
.ngc_actions dd {
  width: calc(100% - 6em); /* gapを計算に入れておく。gapではうまくいかない */
  padding: 0.5em 0;
}

.bg_part {
  position: relative;
}
.bg_ngc {
  position: absolute;
  bottom: -9.25em;
  left: calc((100% + 800px) / 2 - 18.875em);
  width: 382px;
  height: 180px;
  background-image: url("../images/hands.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
@media only screen and (max-width: 1000px) {
  .bg_ngc {
    left: calc(100% - 382px - 1em);
  }
}
@media only screen and (max-width: 600px) {
  .bg_ngc {
    width: 47.75vw;
    left: calc(100% - 47.75vw - 6em);
    top: 0;
    transform: rotate(7deg);
  }
}
.bg_part + .btn_area {
  margin-top: 10em;
}
@media only screen and (max-width: 600px) {
  .bg_part + .btn_area {
    margin-top: 7em;
  }
}

/* 記事：健康企業宣言 */
.certificate_and_text {
  margin-top: 2.3em;
  display: flex;
  justify-content: space-between;
  gap: 2em;
}
.certificate_area {
  width: 280px;
}
.certificate_area img,
.silver_logo_area img {
  width: 100%;
}
.certificate_area img {
  border: 1px solid #999;
}
.certificate_text {
  width: calc(100% - 280px - 2em);
}

.silver_logo_area {
  width: 320px;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  .silver_logo_area {
    width: 90%;
  }
}

@media only screen and (max-width: 700px) {
  .certificate_area {
    width: 40%;
  }
  .certificate_text {
    width: calc(60% - 2em);
  }
}
@media only screen and (max-width: 600px) {
  .certificate_and_text {
    flex-direction: column-reverse;
    gap: 1em;
    align-items: center;
  }
  .certificate_area,
  .silver_logo_area {
    max-width: 280px;
    width: 70%;
  }
  .certificate_text {
    width: 100%;
  }
}

/* 記事：健康経営づくりの取り組み */
.healthcare_actions {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
@media only screen and (max-width: 600px) {
  .healthcare_actions {
    flex-direction: column;
    gap: 1em;
  }
}
.healthcare_actions ul {
  display: flex;
  gap: 1em;
  flex-direction: column;
}
.healthcare_actions li::before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  margin-right: 0.5em;
  background-color: #b9d3a0;
}
/* 記事：健康企業宣言：参考リンク見出し */
.healthcare h4 {
  margin: 3rem auto 0;
  font-weight: 500;
}
.link_list li {
  line-height: 2;
}
.with_mark_blank {
  position: relative;
  text-decoration: underline;
  color: #656565;
}
.with_mark_blank::after {
  content: "";
  width: 1em;
  height: 1em;
  background-image: url("../svg/mark_link.svg");
  position: absolute;
  bottom: 0.25em;
  right: -1.25em;
  /* 黒アイコンを灰色 #656565; に */
  filter: invert(41%) sepia(8%) saturate(16%) hue-rotate(125deg) brightness(92%)
    contrast(86%);
}

/* 記事：行動規範：行動規範 */
.square_frame_area {
  margin: 2.3rem auto 0;
  border: 1px solid #3c3c43;
  padding: 2em;
}
@media only screen and (max-width: 600px) {
  .square_frame_area {
    padding: 1em 0.5em;
  }
}
.compliance h4 {
  font-size: 1.125em;
  text-align: center;
  font-weight: 500;
}
.compliance h5 {
  margin-top: 1rem;
  font-size: 1em;
  line-height: 2;
  font-weight: 500;
}
.compliance ol {
  /* 効かない 
	list-style: decimal;
	*/
  counter-reset: number;
}
.compliance ol li {
  margin-left: 3em;
  position: relative;
  line-height: 2;
}
.compliance ol li::before {
  counter-increment: number;
  content: counter(number) ".";
  position: absolute;
  left: -1.5em;
}
@media only screen and (max-width: 600px) {
  .compliance ol li {
    margin-left: 2em;
  }
  .compliance ol li::before {
    left: -1.25em;
  }
}

ul.square li,
ul.circle li,
ol.number {
  padding-left: 1.25em;
  text-indent: -1.25em;
}
ol.number.indent {
  padding-left: 2.25em;
  text-indent: -1.25em;
}
ul.square li::before {
  content: "■";
  padding-right: 0.25em;
}
ul.circle li::before {
  content: "●";
  padding-right: 0.25em;
}
ul.two_column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.two_column li {
  width: 45%;
}
@media only screen and (max-width: 600px) {
  ul.two_column li {
    width: 100%;
  }
}

.governance_area {
  margin: 2.3rem auto 0;
}
.committee_fig_area {
  width: 90%;
  margin: 1rem auto 0;
}
.committee_fig_area img {
  width: 100%;
}
.committee_area {
  margin-top: 2em;
}
.committee_area h5 {
  font-size: 1em;
  line-height: 2;
  font-weight: 700;
}
.committee_area li {
  margin-left: 3em;
  position: relative;
  line-height: 2;
}
.committee_area li::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  position: absolute;
  left: -1.5em;
  top: 0.7em;
}
.committee_area.compliance_c h5 {
  color: #ff4b00;
}
.committee_area.compliance_c li::before {
  background-color: #ffdbcc;
}
.committee_area.textbook_c h5 {
  color: #00af7a;
}
.committee_area.textbook_c li::before {
  background-color: #ccefe4;
}
.committee_area.harassment_c h5 {
  color: #f6aa00;
}
.committee_area.harassment_c li::before {
  background-color: #fdeecc;
}
.committee_area.security_c h5 {
  color: #005aff;
}
.committee_area.security_c li::before {
  background-color: #ccdeff;
}

/* 記事：会社概要 */
.about_area,
.recruit_area {
  margin: 2.3rem auto 0;
}

dl.separated_list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  border-bottom: 1px solid #c9c9c9;
  gap: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}
@media only screen and (max-width: 600px) {
  dl.separated_list {
    flex-direction: column;
  }
}
dl.separated_list:first-of-type {
  border-top: 1px solid #c9c9c9;
}
.separated_list > dt {
  font-weight: 700;
  width: 7em;
  padding: 0 0.5em;
}
.separated_list > dd {
  padding: 0 0.5em;
  flex: 1;
}
@media only screen and (max-width: 600px) {
  .separated_list > dd {
    width: calc(100% - 1em);
  }
}
.separated_list .dd_text {
  margin-bottom: 1em;
}
.separated_list .map_area {
  width: 600px;
  height: 450px;
}
@media only screen and (max-width: 850px) {
  .separated_list .map_area {
    width: 100%;
  }
}
.separated_list .map_area > iframe {
  width: 100%;
  height: 100%;
}
.separated_list .map_desc {
  margin-top: 0.5em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
  font-size: 0.875em;
}
@media only screen and (max-width: 600px) {
  .separated_list .map_desc {
    flex-direction: column;
    align-items: flex-start;
  }
}
.separated_list .access_title {
  border: 1px solid #ccc;
  border-radius: 1em;
  padding: 0.5em 1em;
}
@media only screen and (max-width: 600px) {
  .separated_list .access_title {
    margin-top: 1em;
    margin-bottom: -0.5em;
    padding: 0 1em;
  }
}
.separated_list .access_text {
  line-height: 1.5;
}
/* 記事：支社所在地 */
dl.branch_list {
  display: flex;
  gap: 1em;
  justify-content: flex-start;
}
@media only screen and (max-width: 600px) {
  dl.branch_list {
    gap: 0.25em;
    flex-direction: column;
  }
}
dl.branch_list:not(:first-of-type) {
  margin-top: 1em;
}
.branch_list > dt {
  font-weight: 500;
  margin-right: 0.5em;
  width: 4em;
}
.branch_list > dd {
  flex: 1;
}
.branch_list .map_link {
  position: relative;
  white-space: nowrap;
}
.branch_list .map_link::before {
  content: "";
  width: 1em;
  height: 1em;
  background-image: url("../svg/mark_map.svg");
  position: absolute;
  right: 2.25em;
  top: 0.3em;
  /* 黒アイコンを茶灰色 #7a6a56; に */
  filter: invert(40%) sepia(46%) saturate(226%) hue-rotate(353deg)
    brightness(92%) contrast(85%);
}
.branch_list .map_link {
  width: 2em;
  margin-left: 1.5em;
  color: #7a6a56;
  text-decoration: underline;
}

/* 記事：事業内容 */
ol.business_list {
  counter-reset: number;
}
.business_list li {
  margin-left: 1.5em;
  position: relative;
  line-height: 1.5;
}
.business_list li:not(:last-of-type) {
  margin-bottom: 0.5em;
}
.business_list li::before {
  counter-increment: number;
  content: counter(number) ".";
  position: absolute;
  left: -1.5em;
}

/* 記事：ロゴマークについて */
.logo_area {
  margin-top: 3rem;
  padding: 2rem 3rem;
  border-radius: 2rem;
  background-color: #f9f9f6;
}
@media only screen and (max-width: 600px) {
  .logo_area {
    padding: 2em 0.75em 1em 1em;
    border-radius: 1em;
  }
}
.logo_area > h4 {
  font-size: 1.25em;
  font-weight: 700;
  text-align: center;
}
.logo_area .d_logo_area {
  width: 90px;
  margin: 1rem auto;
}

/* 記事：大日本図書の歩み */
.corporate_area.history {
  margin: 2.3rem auto 0;
}
/* 記事：年表部分 */
.era_area {
  display: flex;
  margin-top: 1em;
}
/* 記事：矢羽 */
.era_area h4 {
  font-weight: 500;
  writing-mode: vertical-rl;
  text-align: center;
  padding: 0.5em; /* これで幅が2.5em */
  vertical-align: middle;
  position: relative;
}
/* 矢羽の２項目からは少し上に塗り足す */
.era_area:not(:first-of-type) h4 {
  margin-top: -0.25em;
}
/* 矢羽の１項目は上が平 */
.era_area:not(:first-of-type) h4::before {
  content: "";
  width: 2.5em;
  height: calc(2.5em / 3);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
}
.era_area h4::after {
  content: "";
  width: 2.5em;
  height: calc(2.5em / 3);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: black;
  position: absolute;
  bottom: calc(-2.5em / 3);
  left: 0;
  z-index: 2;
}
@media only screen and (max-width: 600px) {
  .era_area h4 {
    padding: 0.25em;
  }
  .era_area:not(:first-of-type) h4::before {
    width: 2em;
    height: calc(2em / 3);
    top: -0.01em;
  }
  .era_area h4::after {
    width: 2em;
    height: calc(2em / 3);
    bottom: calc(-2em / 3);
  }
}

.era_area.meiji h4,
.era_area.meiji h4::after,
.era_area.meiji .text_area {
  background-color: #e5dbcb;
}
.era_area.taisho h4,
.era_area.taisho h4::after,
.era_area.taisho .text_area {
  background-color: #d8d4d5;
}
.era_area.showa h4,
.era_area.showa h4::after,
.era_area.showa .text_area {
  background-color: #e2d8d5;
}
.era_area.heisei h4,
.era_area.heisei h4::after,
.era_area.heisei .text_area {
  background-color: #dee8e3;
}
.era_area.reiwa h4,
.era_area.reiwa h4::after,
.era_area.reiwa .text_area {
  background-color: #dedeff;
}

.era_area .lead_line {
  width: 2.5em;
  background-image: url("../svg/mark_dots.svg");
  background-repeat: repeat-x;
  background-size: 50%;
  background-position: center;
}
@media only screen and (max-width: 600px) {
  .era_area .lead_line {
    width: 1.25em;
  }
}
.era_area.meiji .lead_line {
  filter: invert(100%) sepia(76%) saturate(380%) hue-rotate(311deg)
    brightness(92%) contrast(94%);
}
.era_area.taisho .lead_line {
  filter: invert(81%) sepia(1%) saturate(989%) hue-rotate(291deg)
    brightness(109%) contrast(86%);
}
.era_area.showa .lead_line {
  filter: invert(100%) sepia(64%) saturate(767%) hue-rotate(292deg)
    brightness(104%) contrast(78%);
}
.era_area.heisei .lead_line {
  filter: invert(99%) sepia(9%) saturate(309%) hue-rotate(72deg) brightness(96%)
    contrast(90%);
}
.era_area.reiwa .lead_line {
  filter: invert(96%) sepia(55%) saturate(4021%) hue-rotate(180deg)
    brightness(101%) contrast(101%);
}

.era_area .text_area {
  flex: 1;
  padding: 1em;
}
.era_area .image_block {
  margin: 0 auto;
}
.era_area .image_block img {
  width: 100%;
}
/* 記事：歩みの書影サイズ */
.image_block.kyoukasho {
  width: 340px;
}
.image_block.niiminankichi {
  width: 148px;
  float: right;
}
.image_block.shashinado {
  width: 284px;
  float: right;
}
.image_block.hyappiki {
  width: 200px;
  box-shadow: 4px 4px 8px rgba(127, 127, 127, 0.5);
}
@media only screen and (max-width: 600px) {
  .image_block.kyoukasho {
    width: 100%;
  }
  .image_block.niiminankichi {
    width: 37.5%;
  }
  .image_block.shashinado {
    float: none;
    width: 75%;
  }
  .image_block.hyappiki {
    width: 75%;
  }
}
.mix_block {
  clear: both;
}

.recruit h5 {
  font-size: 1em;
  line-height: 2;
  font-weight: 500;
}
.recruit ul.circle {
  padding-left: 1em;
}

/* 採用情報：20251215 */
.recruit .closed {
  font-weight: bold;
  color: red;
}