@charset "UTF-8";
#photo {
  background: url("../images/company/main.jpg") no-repeat center center;
  background-size: cover;}

/* --------------------
   box
-------------------- */
.normalbox { padding-top: 160px;}
.normalbox .flex { display: flex; justify-content: space-between;}
.normalbox .title_item { width: 440px;}
.normalbox .right_item { width: 640px;}
.normalbox h1 { letter-spacing: 0.1em;}
.normalbox h1 span { line-height: 1.5; display: block;}

@media screen and (max-width: 768px){
  .normalbox { padding-top: 20vw;}
  .normalbox .flex { display: block;}
  .normalbox .title_item { width: 100%;}
  .normalbox .right_item { width: 100%; padding-top: 8vw;}
  .normalbox h1 { text-align: center;}}
  
/* --------------------
   message
-------------------- */
#message p { padding-bottom: 24px;}

/* --------------------
   about
-------------------- */
#about table th {
  color: #00694C;
  padding-bottom: 8px;
  display: block;
  text-align: left;}
#about table td {
  padding-bottom: 24px;
  display: block;}
#about .photo {
  margin-top: 80px;
  display: flex;
  gap:4px;
  flex-wrap: wrap;}
#about .photo img { width: calc(50% - 2px);}

#mission h2 { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#mission h3 { margin: 40px 0 10px;}
#mission ul {
  list-style: decimal inside;}

/* --------------------
   history
-------------------- */
#history { padding-bottom: 160px;}
#history .list .item {
  padding-left: 30px;
  padding-bottom: 16px;
  position: relative;
  display: flex;}
#history .list .item::before {
  height: 100%;
  width: 1px;
  background: #DDE8D6;
  display: block;
  position: absolute;
  top: 13px;
  left: 4px;
  content: "";}
#history .list .item::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background:#DDE8D6;
  display: block;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 13px;}
#history .list .item .year1 { width: 50px;}
#history .list .item .year2 { width: 80px; text-align: right;}
#history .list .item .month { width: 40px; text-align: right; margin-right: 20px;}
#history .list .item .text { flex: 1;}

@media screen and (max-width: 768px){
  #about .photo { margin-top: 5vw;}
  #history { padding-bottom: 20vw;}
  #history .list .item { flex-wrap: wrap;}
  #history .list .item .year2 { text-align: left;}
  #history .list .item .month { text-align: left;}
  #history .list .item .text { width: 100%;flex:auto;}}