@charset "UTF-8";

/* ------------------------------- */
/* *{ */
    /* box-sizing:border-box; 余白や線を幅や高さに含める */
/* } */

/* --- 表示 非表示 --------------- */
/* .pc-only {
  display:block;
} */
/* デフォルト（PC含む）は非表示 */
.sp-only {
  display: none;
}

/* ------------------------------- */
body {  
  font-size: 16px;
  line-height: 1.6;
  font-family: "Noto Sans SC", "Noto Sans", "Helvetica Neue",sans-serif;
  /* font-family: "Noto Sans","Helvetica Neue", sans-serif; */
  /* min-width: 481px; */
  /* min-height: 100dvh; */
  /* margin: 0; */
  /* color: #222; */
}

/* --- link ---------------------------- */
a,
a:visited {
  color: #014099;
}

a:hover {
  opacity: 0.8;
}

/* --- header ---------------------------- */
#header {
  background: #014099;
}

.header_inner {
  height: 75px;
  display: flex;
  align-items: center;
}

.site-logo {
  padding: 0px 1%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* z-index: 1; */
}

.logo {
    width: 100%;
    max-width: 457px; /* 元サイズ */
    height: auto;
}

.site-logo a:hover {
  opacity: 1.0;
}

/* --- wrapper ---------------------------- */
/* --- wrapper page-title ---------------------------- */

.page-title {
  width: min(80%, 1000px);
  margin: 0 auto;
  height: 28px;
  position: relative;
}

/* --- wrapper page-title breadcrumb ---------------------------- */
.breadcrumb {
  position: absolute;
  top: 50%;          /* 親要素の中央に */
  right: 5px;
  transform: translateY(-50%); /* 要素自身の高さの半分戻す */
}

.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 75%;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb a {
  text-decoration: none;
  color: #999;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: url(../images/arrow_t.png) no-repeat center;
}

.breadcrumb li[aria-current="page"] {
  color: #999;
}

/* --- main ---------------------------- */
/* --- main article ---------------------------- */
.article {
  width: min(80%, 1000px);
  margin: 0 auto;
  /* float: none; */
}

/* --- main article company_header ---------------------------- */

.indexBase {
  background: #014099;
  color: #fff;
  width: 100%;
  height: 120px;
  display: flex;              
  align-items: center;       
  justify-content: space-between; 
  padding: 20px 22px;
  box-sizing: border-box;
}

.indexTxt {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.indexThumb {
  height: 80px;
  width: auto;
}

/* --- section <hタグ>---------------------------- */
.article h2 {
  font-size: 1.4rem;
  color: #014099;
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 0px;
}
/* --- section profile ---------------------------- */
/* style_profile.css */

/* --- section location_map ------------------------ */
#location_map {
  margin: 25px 25px 25px 25px;
}

.map_embed {
  width:100%;
  height: 400px;  
  border:0;
}

/* --- footer ---------------------------------------------- */
#footer {
  background: #014099;
  position: sticky;
  top: 100%;
}

.copyright {
  text-align: center;
  color: #fff;
}


/* --- dialog ---------------------------------------------- */
dialog {
  border: none;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  padding: 24px;
  box-sizing: border-box;
}

.dialog-title{
  font-size: 1.4rem;
  /* font-weight: 600; */
  border-bottom: 2px solid #d0d0d0;
  padding-bottom: 5px;
}

.dialog-text {
  margin-top: 1em;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.confirm-dialog-content a {
  display: block;
  margin-left: 1em;
}

.policy-link {
  margin-top: 1em;
}

.terms-link {
  margin-top:0.25em;
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 24px;
}

.dialog-buttons button {
    cursor: pointer;
    padding: 10px 20px;
}

#dialogAgree {
    width: 170px;
    height: 40px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 10px 10px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dialogAgree:hover {
    background: #555;
}

#dialogCancel {
    background: transparent;
    border: none;
    color: #000;
    /* text-decoration: underline; */
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}

/* --- check ------------------------------------------ */
body {
    /* outline: 3px solid red; */
}

#wrapper {
    /* outline: 3px solid green; */
}

#header {
    /* outline: 3px solid yellow; */
}
/* --------------------------------------------------- */
/* 画面幅が1024px以下の場合に表示 */
@media screen and (max-width: 1024px) {}

/* --------------------------------------------------- */
/* 画面幅が768px以下の場合に表示 */
@media screen and (max-width: 768px) {

  /* --- header ---------------------------- */
  .site-logo {
    padding: 0;
    /* display: flex; */
    width: 96%;
  }

  .logo {
    width: 100%;
  }

  /* --- wrapper page-title ---------------------------- */
  .page-title {
    width: 98%;
  }

  /* --- main ---------------------------- */
  /* --- main article ---------------------------- */
  .article {
    width: 100%;
  }

  /* --- main article company_header ---------------------------- */

  .sp-only {
    display: block;
  }
  .company_header{
      margin-top: 10px;
  }
    
  #flag {    
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  #flag img {
      max-height: 100%;
      width: auto;
  }

  #company {
    margin-top: 10px;
  }
  .indexBase {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;  /* 横中央 */
    align-items: center;      /* 縦中央 */
    text-align: center;       /* テキスト中央揃え */
  }

  .indexThumb {
    display: none;
  }

  .indexTxt {
    position: static;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(0.938rem, 0.714rem + 1.12vw, 1.25rem); 
  }

}

/* --------------------------------------------------- */
/* 画面幅が480px以下の場合に表示 */
@media screen and (max-width:480px) {

  /* ------------------------------- */
  /* .header_inner, */
  /* #wrapper { */
    /* width: 100%; */
    /* margin: 0 auto; */
  /* } */

  /* ------------------------------- */
  .page-title {
    height: auto;
  }

  /* --- wrapper page-title breadcrumb ---------------------------- */
  .breadcrumb {
    position: static;
    transform: none;
    padding-right: 10px; /* 右余白 */
  }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* gap: 2px; */
  }
 
  /* --- Map section --------------- */
  /* --- location_map ---------------- */ 
  #location_map {
  margin: 5px 15px 50px;
  }
 
  .map_embed {height: 300px;}

  /* --- footer -------------------- */   
  /* --- Copyright ----------------- */
 small {font-size: 70%;}

}

/* --- 印刷時だけ適用されるCSS ------------------------------------------------ */

@media print {
  body {
    background: #fff;
  }

}