@charset "UTF-8";
@import url("global.css");
#contents {
  padding-bottom: 0; }

#pagetitle {
  margin-bottom: 0; }

.section {
  margin-bottom: 100px; }
  .section .inner {
    display: flex;
    justify-content: space-between;
    gap: 40px; }

.titlearea {
  min-width: 240px;
  flex-shrink: 0; }
  .titlearea .title {
    position: sticky;
    top: 200px;
    white-space: nowrap;
    font-size: min(26px,2.3vw);
    font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
    .titlearea .title span {
      position: relative;
      padding-left: 30px; }
      .titlearea .title span::before {
        content: "";
        width: 8px;
        height: 8px;
        background: #132240;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 16px; }

.mainarea {
  width: 1100px; }
  .mainarea .mainarea_item + .mainarea_item {
    margin-top: 80px; }
  .mainarea .h {
    background: #132240;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 30px;
    font-size: 110%;
    font-weight: 600; }
  .mainarea table {
    width: 100%;
    border-collapse: collapse; }
    .mainarea table tr {
      border-bottom: 1px solid #dcdcdc; }
      .mainarea table tr th, .mainarea table tr td {
        padding: 15px;
        box-sizing: border-box; }
      .mainarea table tr th {
        width: 160px; }
      .mainarea table tr td .maplink {
        margin-left: 15px;
        color: #132240;
        font-size: 13px;
        font-family: "Roboto", "Noto Sans JP", sans-serif; }
        .mainarea table tr td .maplink i {
          padding-right: 5px; }

#message {
  background: #132240;
  padding: 100px 0; }
  #message .titlearea .title {
    color: #fff; }
  #message .mainarea {
    display: flex;
    justify-content: space-between; }
    #message .mainarea .img_area {
      width: 300px; }
      #message .mainarea .img_area .name {
        color: #fff;
        margin-top: 10px;
        font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
    #message .mainarea .text_area {
      flex: 1;
      padding-left: 60px; }
      #message .mainarea .text_area .catch {
        color: #fff;
        margin-bottom: 30px;
        font-size: clamp(16px, 2.6vw, 25px); }
      #message .mainarea .text_area p {
        color: #fff; }

#philosophy .mainarea .philosophy_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #D2C8B9; }
  #philosophy .mainarea .philosophy_item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0; }
  #philosophy .mainarea .philosophy_item .philosophy_title {
    width: 250px; }
    #philosophy .mainarea .philosophy_item .philosophy_title h4 {
      color: #B4975A;
      line-height: 1.2;
      font-size: clamp(18px, 3.9vw, 40px);
      font-family: "Roboto", "Noto Sans JP", sans-serif; }
      #philosophy .mainarea .philosophy_item .philosophy_title h4 span {
        display: block;
        font-size: clamp(11px, 1.6vw, 15px);
        font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif; }
  #philosophy .mainarea .philosophy_item .philosophy_cnt {
    flex: 1; }
    #philosophy .mainarea .philosophy_item .philosophy_cnt ol li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 1em; }
      #philosophy .mainarea .philosophy_item .philosophy_cnt ol li .num {
        width: 1.5em;
        font-size: 120%; }
      #philosophy .mainarea .philosophy_item .philosophy_cnt ol li .text {
        flex: 1; }

#history {
  background: url("../img/company/bg_history.jpg") no-repeat center center;
  background-size: cover;
  padding: 100px 0; }
  #history .mainarea ul li {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #D2C8B9; }
    #history .mainarea ul li:last-of-type {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none; }
    #history .mainarea ul li .date {
      width: 200px;
      padding-left: 40px;
      box-sizing: border-box; }
    #history .mainarea ul li .text {
      flex: 1;
      padding-left: 40px; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .mainarea {
    font-size: 15px; }

  #message .mainarea .img_area {
    width: 200px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .section {
    margin-bottom: 70px; }
    .section .inner {
      display: block; }
    .section + .section {
      padding-top: 60px; }

  .titlearea .title {
    position: static;
    font-size: min(26px,5.5vw);
    margin-bottom: 30px; }

  .mainarea {
    width: auto;
    font-size: inherit; }
    .mainarea .h {
      margin-bottom: 20px; }

  #message {
    padding: 70px 0; }
    #message .mainarea .text_area {
      padding-left: 40px; }

  #philosophy .mainarea .philosophy_item .philosophy_title {
    width: 200px; }

  #history {
    padding: 70px 0; }
    #history .mainarea ul li .date {
      width: 140px;
      padding-left: 0; }
    #history .mainarea ul li .text {
      padding-left: 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .section {
    margin-bottom: 50px; }
    .section + .section {
      padding-top: 40px; }

  .titlearea .title {
    margin-bottom: 20px; }
    .titlearea .title span {
      padding-left: 20px; }
      .titlearea .title span::before {
        top: 12px; }

  .mainarea {
    font-size: 13px; }
    .mainarea .mainarea_item + .mainarea_item {
      margin-top: 40px; }
    .mainarea .h {
      margin-bottom: 10px; }
    .mainarea table tr th {
      width: 100px; }

  #message {
    padding: 50px 0; }
    #message .mainarea {
      display: block; }
      #message .mainarea .img_area {
        width: 70%;
        margin: 0 auto 20px; }
      #message .mainarea .text_area {
        padding-left: 0; }
        #message .mainarea .text_area .catch {
          margin-bottom: 10px; }

  #philosophy .mainarea .philosophy_item {
    display: block;
    margin-bottom: 30px;
    padding-bottom: 30px; }
    #philosophy .mainarea .philosophy_item .philosophy_title {
      width: auto;
      margin-bottom: 20px; }
    #philosophy .mainarea .philosophy_item .philosophy_cnt ol li {
      margin-bottom: 1em; }
      #philosophy .mainarea .philosophy_item .philosophy_cnt ol li .num {
        width: 1.5em;
        font-size: 120%; }

  #history {
    padding: 50px 0; }
    #history .mainarea ul li .date {
      width: 100px; } }