@charset "UTF-8";
@import url("global.css");
#bodyarea .inner {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
#bodyarea .navi-area {
  width: 240px;
  flex-shrink: 0;
  padding-top: 10px;
}
#bodyarea .navi-area ul#navi {
  position: sticky;
  top: 150px;
  padding-left: 30px;
}
#bodyarea .navi-area ul#navi li {
  margin-bottom: 15px;
}
#bodyarea .navi-area ul#navi li a {
  display: block;
  width: fit-content;
  font-weight: 500;
  padding: 5px;
}
#bodyarea .navi-area ul#navi li a::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #E3E3E3;
  display: inline-block;
  vertical-align: 4px;
  margin-right: 12px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#bodyarea .navi-area ul#navi li a.current::before {
  background-color: #E6001A;
  scale: 1.3;
}
@media (any-hover: hover) {
  #bodyarea .navi-area ul#navi li a:hover::before {
    background-color: #A49375;
  }
}
#bodyarea .main-area {
  width: 1150px;
}
#bodyarea .section {
  container-type: inline-size;
}
#bodyarea .section + .section {
  margin-top: 150px;
}
#bodyarea .section .sectitle {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
#bodyarea .section .sectitle span {
  display: block;
}
#bodyarea .section .sectitle .en {
  font-size: clamp(24px, 5vw, 35px);
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  margin-right: 30px;
}
#bodyarea .section .sectitle .ja {
  padding-top: 8px;
  opacity: .5;
  font-weight: 700;
  font-size: 112.5%;
}

#message .message {
  display: flex;
  gap: min(80px,5vw);
}
#message .message .president {
  width: 460px;
  flex-shrink: 0;
  max-width: 45%;
}
#message .message .president .photo {
  margin-bottom: 10px;
  aspect-ratio: 10 / 7;
}
#message .message .president .name span {
  display: block;
}
#message .message .text p + p {
  margin-top: 1em;
}
@container (width <= 680px) {
  #message .message {
    display: block;
  }
  #message .message .president {
    width: auto;
    max-width: none;
    margin-bottom: 40px;
  }
  #message .message .president .name {
    text-align: right;
    font-weight: 500;
  }
  #message .message .text br {
    display: none;
  }
}
#philosophy .philosophy {
  background-color: #F5F3F0;
  text-align: center;
  padding-block: 80px;
  word-break: keep-all;
  border-radius: 8px;
  color: #5A5657;
  font-weight: 700;
  font-size: clamp(15px, 2.5vw, 20px);
}
#philosophy .philosophy br {
  display: none;
}
@container (width <= 560px) {
  #philosophy .philosophy {
    padding-block: 50px;
  }
  #philosophy .philosophy br {
    display: inline;
  }
}
#outline table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
#outline table tr {
  border-top: #c9c9c9 1px solid;
}
#outline table tr:first-of-type {
  border-color: transparent;
}
#outline table tr th {
  padding: 25px 20px;
  font-weight: 700;
  word-break: keep-all;
  vertical-align: top;
}
#outline table tr td {
  padding: 25px 10px;
}
#outline table tr td:has(dl), #outline table tr td:has(ul) {
  padding-block: 19px;
}
#outline table tr td br.mobile {
  display: none;
}
#outline table .slash {
  display: inline-block;
}
#outline table .slash::before {
  content: "／";
  padding-inline: 10px;
}
#outline table ul li {
  line-height: 1.5;
  margin-block: 8px;
  text-indent: -15px;
  padding-left: 15px;
}
#outline table ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #E3E3E3;
  display: inline-block;
  vertical-align: 3px;
  margin-right: 10px;
  text-indent: 0;
}
#outline table dl {
  display: flex;
  margin-block: 8px;
  line-height: 1.5;
}
#outline table dl dt {
  width: 7em;
  flex-shrink: 0;
  font-weight: 500;
  position: relative;
}
#outline table dl dt::after {
  content: "：";
  position: absolute;
  right: 5px;
}
@container (width <= 500px) {
  #outline table tr th {
    padding: 25px 10px;
  }
  #outline table tr td {
    padding: 25px 10px;
  }
  #outline table dl {
    display: block;
  }
  #outline table dl dt {
    width: auto;
    font-weight: 700;
    margin-bottom: 3px;
  }
  #outline table dl dt::after {
    display: none;
  }
}
@container (width <= 360px) {
  #outline table {
    display: block;
    border-bottom: #c9c9c9 1px solid;
  }
  #outline table thead, #outline table tbody, #outline table tr, #outline table th, #outline table td {
    display: block;
    text-align: center;
  }
  #outline table tr:first-of-type {
    border-color: #c9c9c9;
  }
  #outline table tr th {
    padding: 20px 10px 5px;
  }
  #outline table tr td {
    padding: 0 5px 22px;
  }
  #outline table tr td br.mobile {
    display: inline;
  }
  #outline table tr td:has(dl), #outline table tr td:has(ul) {
    padding-block: 0 19px;
  }
  #outline table ul {
    display: inline-block;
    text-align: left;
  }
  #outline table dl {
    margin-bottom: 12px;
  }
  #outline table dl dt {
    width: auto;
    margin-bottom: 5px;
    position: relative;
    text-decoration-color: rgba(164, 147, 117, 0.6);
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0;
    text-decoration-skip-ink: none;
  }
  #outline table dl dd span {
    display: block;
  }
  #outline table dl br {
    display: none;
  }
}
#data .data {
  --gap: 30px;
  margin-top: 80px;
}
#data .data ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 60px;
  margin-inline: calc(var(--gap) * -1);
}
#data .data ul li {
  width: 50%;
  box-sizing: border-box;
  padding-inline: var(--gap);
  text-align: center;
}
#data .data ul li dl {
  border: #9B9B9B 1px solid;
  border-radius: 8px;
  padding-block: 1px 60px;
}
#data .data ul li dl dt {
  background-color: #E3E3E3;
  width: 240px;
  line-height: 50px;
  border-radius: 100px;
  margin: -25px auto 40px;
  font-size: 20px;
  font-weight: 700;
}
#data .data ul li dl dd span {
  display: block;
}
#data .data ul li dl dd .num {
  color: #A49375;
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  margin-bottom: 20px;
}
#data .data ul li dl dd .num strong {
  font-size: 400%;
  font-weight: 900;
}
#data .data ul li dl dd .num:has(.comma) {
  letter-spacing: -.1em;
}
#data .data ul li dl dd .sub {
  margin-top: 30px;
}
#data .data ul li dl dd .comma {
  display: inline-block;
  margin-inline: -.1em -.2em;
  font-size: .7em;
}
@container (width <= 960px) {
  #data .data {
    --gap: 1.5vw;
  }
  #data .data ul li dl dd .num {
    font-size: 30px;
  }
}
@container (width <= 580px) {
  #data .data {
    margin-top: 50px;
  }
  #data .data ul {
    row-gap: 50px;
  }
  #data .data ul li dl {
    padding-block: 1px 40px;
  }
  #data .data ul li dl dt {
    width: 180px;
    line-height: 46px;
    margin: -23px auto 20px;
    font-size: 18px;
  }
  #data .data ul li dl dd .num {
    font-size: 24px;
    margin-bottom: 20px;
  }
  #data .data ul li dl dd .sub {
    margin-top: 20px;
  }
}
@container (width <= 460px) {
  #data .data {
    --gap: 2vw;
  }
  #data .data ul {
    row-gap: 30px;
  }
  #data .data ul li dl {
    padding-block: 1px 30px;
  }
  #data .data ul li dl dt {
    width: 120px;
    line-height: 36px;
    margin: -18px auto 15px;
    font-size: 15px;
  }
  #data .data ul li dl dd .num {
    font-size: 19px;
    margin-bottom: 15px;
  }
  #data .data ul li dl dd .sub {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0;
  }
}
@container (width <= 200px) {
  #data .data {
    --gap: 30px;
    margin-top: 80px;
  }
  #data .data ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 60px;
    margin-inline: calc(var(--gap) * -1);
  }
  #data .data ul li {
    width: 50%;
    box-sizing: border-box;
    padding-inline: var(--gap);
    text-align: center;
  }
  #data .data ul li dl {
    border: #9B9B9B 1px solid;
    border-radius: 8px;
    padding-block: 1px 60px;
  }
  #data .data ul li dl dt {
    background-color: #E3E3E3;
    width: 240px;
    line-height: 50px;
    border-radius: 100px;
    margin: -25px auto 40px;
    font-size: 20px;
    font-weight: 700;
  }
  #data .data ul li dl dd span {
    display: block;
  }
  #data .data ul li dl dd .num {
    color: #A49375;
    font-weight: 700;
    font-size: 50px;
    line-height: 1;
    margin-bottom: 20px;
  }
  #data .data ul li dl dd .num strong {
    font-size: 400%;
    font-weight: 900;
  }
  #data .data ul li dl dd .sub {
    margin-top: 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #bodyarea .navi-area {
    width: 200px;
  }
  #bodyarea .navi-area ul#navi {
    padding-left: 0;
  }
  #bodyarea .main-area {
    width: 1150px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #bodyarea .inner {
    gap: 5vw;
  }
  #bodyarea .navi-area {
    width: 160px;
  }
  #bodyarea .navi-area ul#navi li {
    margin-bottom: 10px;
  }
  #bodyarea .navi-area ul#navi li a {
    font-weight: 700;
  }
  #bodyarea .navi-area ul#navi li a::before {
    vertical-align: 3px;
    margin-right: 10px;
  }
  #bodyarea .section + .section {
    margin-top: 100px;
  }
  #bodyarea .section .sectitle {
    margin-bottom: 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #bodyarea .inner {
    display: block;
  }
  #bodyarea .navi-area {
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    width: auto;
    padding: 20px 5vw;
    margin-bottom: 50px;
  }
  #bodyarea .navi-area ul#navi {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 15px;
    justify-content: center;
  }
  #bodyarea .navi-area ul#navi li {
    margin-bottom: 0;
  }
  #bodyarea .navi-area ul#navi li a {
    padding: 5px 0;
  }
  #bodyarea .navi-area ul#navi li a::before {
    vertical-align: 2px;
  }
  #bodyarea .navi-area ul#navi li a.current::before {
    background-color: #E3E3E3;
    scale: 1;
  }
  #bodyarea .main-area {
    width: auto;
  }
  #bodyarea .section {
    container-type: inline-size;
  }
  #bodyarea .section + .section {
    margin-top: 70px;
  }
  #bodyarea .section .sectitle {
    display: block;
    margin-bottom: 30px;
    line-height: 1;
    text-align: center;
  }
  #bodyarea .section .sectitle span {
    display: block;
  }
  #bodyarea .section .sectitle .en {
    margin-right: 0;
  }
  #bodyarea .section .sectitle .ja {
    padding-top: 6px;
  }
}

/*# sourceMappingURL=company.css.map */