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

/* -------------------------
   GREETING
------------------------- */
#greeting {
  padding: 80px 0;
  position: relative;
  background: linear-gradient(to bottom,color-mix(in srgb, var(--color-sub) 20%, transparent 20%),#f5f5f5);}
#greeting .absolute { color: color-mix(in srgb, var(--color-white) 35%, transparent);}
#greeting::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/common/noise.png");
  background-repeat: repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 2;}
#greeting .contents {
  position: relative;
  z-index: 2;}
#greeting h1 { margin-bottom: 48px;}
#greeting .flex {
  gap:32px;
  display: flex;}
#greeting .flex .photo { width: 480px;}
#greeting .flex .textbox { flex: 1;}
#greeting .flex .textbox .txs-24 {
  padding-top: 24px;
  text-align: right;}
@media screen and (max-width: 1080px) {
  #greeting .flex .photo,#greeting .flex .textbox { width: 100%;flex: auto;}}
@media screen and (max-width: 768px) {
  #greeting { padding: 56px 0;}
  #greeting h1 { margin-bottom: 32px;}
  #greeting .flex { flex-wrap: wrap; flex-direction: column-reverse;}
  #greeting .flex .textbox { width: 100%;}
  #greeting .flex .photo img { width: 100vw; max-width: 100vw; margin-left: -20px;}}

/* -------------------------
   PHILOSOPHY
------------------------- */
#philosophy { padding: 80px 0;}
#philosophy h1 { margin-bottom: 48px;}
#philosophy p { color: #000;}

@media screen and (max-width: 768px) {
  #philosophy { padding: 56px 0;}
  #philosophy h1 { margin-bottom: 32px;}}

/* -------------------------
   PROFILE
------------------------- */
#profile {
  padding: 80px 0;
  background: #fff;}
#profile table {
  margin-top: 48px;
  width: 100%;
  border: 1px solid #c2c2c2;
  border-collapse: collapse;}
#profile table th,
#profile table td {
  border-bottom: 1px solid #c2c2c2;
  padding: 20px;
  text-align: left;
  vertical-align: middle;}
#profile table th {
  width: 230px;
  background: var(--color-main);
  color: #fff;
  font-weight: 600;}
#profile .photo {
  gap:32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 48px;}
#profile .item { width: calc(50% - 16px);}
#profile .photo h2 {
  padding: 16px 0 0;
  font-weight: 600;
  color: #000;
  text-align: center;}
#profile .photo h2::after {
  margin: 14px auto 0;
  display: block;
  width: 160px;
  height: 1px;
  content: "";
  background: var(--color-main);}

@media screen and (max-width: 768px) {
  #profile { padding: 56px 0;}
  #profile table { border: none;margin-top:32px;}
  #profile table th,
  #profile table td {
    display: block;
    padding: 16px 20px;
    width: 100%;
    border: none;}
  #profile table th { padding: 15px 20px;}
  #profile table td { font-size: 14px;}
  #profile .photo { padding-top: 32px; gap:8px;}
  #profile .item { width: calc(50% - 4px);}
  #profile .photo h2 { font-size: 14px; padding-top: 8px;}
  #profile .photo h2::after { width: 64px;margin: 8px auto 0;}}

/* -------------------------
   ACCESS
------------------------- */
#access { padding: 80px 0;}
#access iframe{ margin: 32px 0 24px;}
#access p { color: #000;}

@media screen and (max-width: 768px) {
  #access { padding: 56px 0;}
  #access iframe{ height: 240px; margin-bottom: 8px;}
  #access p { font-size: 12px;}}

/* -------------------------
   BRANCH
------------------------- */
#branch {
  padding: 80px 0;
  background: #fff;}
#branch .list {
  border-top: 1px solid #999;
  margin-top: 32px;}
#branch h2 { color: #000;}
#branch .item {
  padding: 48px 0;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
  gap:32px;
  border-bottom: 1px solid #999;}
#branch .item img { width: 344px;}
#branch .item h2 { padding-bottom: 24px;}

@media screen and (max-width: 768px) {
  #branch { padding: 56px 0;}
  #branch .item { gap:16px; padding: 32px 0;}
  #branch .item img { width: 100%;}
  #branch .item h2 { padding-bottom: 8px;}
  #branch .item p { font-size: 14px;}}