@charset "utf-8";

:root {
    --main-color: #5286c1;
}


*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; backface-visibility: hidden;}
html { margin: 0; padding: 0;}
html, body {
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
}
#header, section, .inner {
    flex: 1;
}
body { font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; color: #535353; font-size: 16px; line-height: 1.8; word-break: break-all; margin: 0; padding: 0;}
div,p,ul,ul li,dl,dt,dd { margin: 0; padding: 0; font-size: 100%; list-style: none; box-sizing: border-box;}
img,video,object { max-width: 100%; height: auto; border: none;}
img { image-rendering: -webkit-optimize-contrast;}
a { text-decoration: none; color: inherit;}
a:hover { text-decoration: underline;}
a:hover img { opacity: 0.8; transition: 0.3s;}
a[href^="tel:"] { text-decoration: none; pointer-events: none; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration: none; pointer-events: none;}

.alC { text-align: center;}
.mt3 { margin-top: 3em !important;}
.mt10 { margin-top: 10px !important;}
.small { font-size: 0.8em;}
.none { display: none !important;}

h2 { font-size: 24px; font-weight: bold; text-align: center; position: relative; margin-bottom: 2em;}
h2::after { content: ''; display: block; width: 60px; height: 3px; background-color: #4a90e2; margin: 8px auto 0; color: var(--main-color);  border-radius: 10px;}


.pc { display: inherit;}
.tb { display: none;}
.sm { display: none;}
@media only screen and (max-width:820px) { 
 .pc { display: none; }
 .tb { display: block; }
 .sm { display: none; }
}

@media only screen and (max-width:468px) { body { font-size: 15px; min-width: 375px; }
 .pc { display: none; }
 .tb { display: none; }
 .sm { display: block; }
}


/* =========================================================================================
Header
=========================================================================================*/
#header { padding-top: 1em; padding-bottom: 1em; position: relative; z-index: 1000; }
#header .inner { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; }
#header .logo a { display: flex; max-width: 250px;}
#g-navi-area { display: flex; align-items: center; }
#g-navi-list ul { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; transform: none; opacity: 1; visibility: visible; position: static; background-color: transparent; box-shadow: none; border-radius: 0; }
#g-navi-list li { border-radius: 40px; transition: background-color 0.3s ease, transform 0.3s ease; background-color: rgba(255, 255, 255, 0.9); text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border: 1px solid var(--main-color);}
#g-navi-list li:hover { background-color: var(--main-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
#g-navi-list a,#g-navi-list input[name="logout"] { text-decoration: none; padding: 0.2em 2em; color: var(--main-color); font-size: 1em; display: block; }
#g-navi-list li:hover a { color: #fff; }
#g-navi-list li:last-child { background-color: var(--main-color); color: #ffffff; border: 2px solid var(--main-color); }
#g-navi-list li:last-child:hover { background-color: #ffffff; color: var(--main-color); }
#g-navi-list li:last-child a { color: #ffffff; }
#g-navi-list li:last-child:hover a { color: var(--main-color); }
#g-navi-list li:last-child input[name="logout"] { color: #ffffff; }
#g-navi-list li:last-child:hover input[name="logout"] { color: var(--main-color); }


.nav-toggle { display: none; }

@media (max-width: 820px) { 
    #header { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } 
    #g-navi-area { flex-direction: column; align-items: flex-end; width: 100%; } 
    #g-navi-list ul {  display: none;  flex-direction: column;  width: 100%;  transform: scale(0.95);  opacity: 0;  transition: transform 0.3s ease, opacity 0.3s ease;  visibility: hidden;  position: absolute;  top: 100%;  right: 0;  background-color: transparent;  box-shadow: none;  border-radius: 0; }
    #g-navi-list ul.active { max-width: 350px; display: flex;  transform: translateX(-50%) scale(1);  opacity: 1;  visibility: visible;  left: 50%;  background-color: #ffffff;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  border-radius: 8px;  width: 90%;  padding: 1rem; }
  
    .nav-toggle { display: flex; background-color: transparent; border: none; cursor: pointer; width: 30px; height: 30px; position: relative; align-self: flex-end; } 
    .nav-toggle::before, .nav-toggle::after { content: ''; background-color: var(--main-color); height: 2px; width: 24px; position: absolute; transition: all 0.3s ease; }
    .nav-toggle::before { top: 8px; }
    .nav-toggle::after { bottom: 8px; }
    .nav-toggle.active::before { transform: translateY(4px) rotate(45deg); }
    .nav-toggle.active::after { transform: translateY(-8px) rotate(-45deg); }
  }
  
  



/* =========================================================================================
Footer
=========================================================================================*/
#footer { padding-inline: 30px; overflow: hidden; margin-top: auto;}
#footer .inner { display: flex; justify-content: space-between; gap: 30px; padding-block: 30px;}
#footer .address { padding: 0 50px 0 0;}
#footer .address .logo img { max-width: 250px;}

#footer .copyright { color: #FFF; text-align: center; background: var(--main-color);  width: 100vw; margin: 0 calc(50% - 50vw); font-size: 0.9em;}
/* footer-navi */
#footer .f-navi { display: flex; justify-content: right; flex-wrap: wrap; gap: 10px 30px;}
#footer .f-navi ul { display: flex; justify-content: right; gap: 20px;}
#footer .f-navi li { display: inline-table; list-style-type: none;}
#footer .f-navi li ul { display: inline-block; margin-left: 1.0em;}
#footer .f-navi li ul li { display: list-item; list-style-type: disc;}
@media only screen and (max-width:820px) { 
 #footer .inner { flex-direction: column; gap: 0; }
 #footer .inner .address { width: 100%; }
 #footer .f-navi { justify-content: center; }
 #footer .copyright { text-align: center; }
}

@media only screen and (max-width:468px) { #footer .inner { flex-wrap: wrap; align-items: center; justify-content: center; }
 #footer .f-navi { display: none; }
}






/* =========================================================================================
commonn 共通
=========================================================================================*/
.content-description { width: fit-content; margin: 0 auto; margin-bottom: 3em;}


/* =========================================================================================
DL DT DD
=========================================================================================*/
section.user dl:not(:last-of-type) { padding-bottom: 1em;}
section.user dt { font-size: 0.9em;}
section.user dd p { padding: 0.3em;}


section.information dd:not(:last-of-type)  { padding-bottom: 2em;}
section.information dd strong { color: var(--main-color); font-size: 1.5em;}
section.information dd { font-size: 0.9em;}
section.information dd .ellipsis { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}



/* =========================================================================================
button
=========================================================================================*/
.login {  display: flex; justify-content: center; align-items: center; width: 250px; margin: 0 auto; padding: 0.5em 1em; border: 1px solid var(--main-color);  border-radius: 5px; background-color: #fff; color: var(--main-color); margin-top: 2em; box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);}
.login:hover { background-color: var(--main-color);  color: #fff;}
.login::after { transform: rotate(45deg); width: 5px; height: 5px; margin-left: 10px; border-top: 2px solid var(--main-color); border-right: 2px solid var(--main-color); content: ''; padding-top: 0px; position: relative; top: 1px;}
.login:hover::after { border-color: #fff;}
.button { display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto; padding: 0.5em 3em; border: none; border-radius: 5px; box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%); background-color: var(--main-color); color: #fff; font-size: 1em; margin-top: 3em;}
.button:hover { background-color: #1579c0; text-decoration: none;}
.button.white { background-color: #fff; color: var(--main-color); border: 1px solid var(--main-color);} 
.flex_button {  display: flex; justify-content: space-between; margin: 0 auto;}
.download { display: inline-flex; align-items: center; color: var(--main-color); text-decoration: none; font-size: 1.1em; background-image: url('../images/common/download.svg'); background-repeat: no-repeat; background-position: right center; padding-right: 1.5em; background-size: 17px 20px; font-weight: bold; margin-top: 2em;}




/* =========================================================================================
FORM
=========================================================================================*/

/* フォーム入力フィールドのデザイン */
form input:not([name="logout"]), form select, form input[type="date"] { font-size: 0.9em; width: 100%; padding: 0.5em 1em 0.5em 1em; border-radius: 8px; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset; outline: none; transition: all 0.3s ease; background-color: #fff; text-align: left; height: 40px;}
/* ホバーとフォーカス時のスタイル */
form input:not([name="logout"]):hover, form input:not([name="logout"]):focus, form select:hover, form select:focus, form input[type="date"]:hover, form input[type="date"]:focus { border-color: var(--main-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) inset; background-color: #fff; color: var(--main-color);}
/* 電話番号のフィールドは特別なスタイルにする場合 */
form input[type="tel"] { text-align: left; width: 50%;}
/* select */
form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23888888" d="M4 5l4 4 4-4H4z"/></svg>'); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 3em; box-shadow: none; width: fit-content;}
form .fit { width: 50% !important; min-width: 170px;}

input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media only screen and (max-width:820px) { }
@media only screen and (max-width:468px) {}

/* =========================================================================================
Layout
=========================================================================================*/
#wrapper { position: relative; margin: 0; padding: 0; overflow: hidden;}
#container { margin: 0; padding: 100px 0 150px 0;}
section { padding-inline: 30px; margin-top: 70px; margin-bottom: 100px;}

.inner { max-width: 1000px; width: 100%; margin: 0 auto; position: relative; box-sizing: border-box;}
.sub_inner { max-width: 400px; margin: 0 auto;}
.sub_inner2 { max-width: 500px; margin: 0 auto;}

@media only screen and (max-width:468px) { 
    section { padding-left: 2%; padding-right: 2%; }
}


/* =========================================================================================
Tab
=========================================================================================*/
.tab { display: flex; flex-wrap: wrap; margin: 0 auto;}
.tab > label { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); flex: 1 1; order: -1; min-width: 70px; padding: .7em 0em .5em; border-bottom: 1px solid #f0f0f0; background-color: #F7FAFD; color: #535353; text-align: center; cursor: pointer; border-radius: 5px 5px 0px 0px;}
.tab > label input { display: none;}
.tab > div { display: none; width: 100%;}
.tab > label:has(:checked) { background-color: #fff; border-color: var(--main-color) #f0f0f0 #fff; border-style: solid; border-width: 4px 1px 1px; border-radius: 5px 5px 0px 0px; color: var(--main-color); padding: 7px 0em .5em;}
.tab > label:has(:checked) + div { display: block;}

/* edit/info.htmlにある場合のスタイル */
body.page-info .tab > label { display: none;}


dl dd input[type="radio"] { display: none;}
dl dd label { position: relative; padding-left: 30px; margin-right: 1.5em; cursor: pointer; line-height: 2;}
dl dd label:before {  content: ""; position: absolute; left: 0; top: 7px; height: 15px; width: 15px; border: 3px solid var(--main-color); border-radius: 50%; background-color: #FFF; box-sizing: content-box;}
dl dd input[type="radio"]:checked + label:before { background-color: #FFF; border-color: var(--main-color);}
dl dd input[type="radio"]:checked + label:after {  content: ""; position: absolute; left: 6px; top: 13px; width: 8px; height: 8px; background-color: var(--main-color); border-radius: 50%;}



/* =========================================================================================
info
=========================================================================================*/

.info dl { display: flex; gap: 0.8em; justify-content: space-between; padding: 1em 0.5em; border-bottom: 1px solid #f5f5f7; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.info dl:nth-of-type(odd) { background-color: #F7FAFD;}
.info dl:nth-of-type(even) { background-color: #ffffff;}
.info dt { flex: 1; font-weight: 600;}
.info dd { flex: 2;}
.info dd:has(input[type="radio"]) { display: flex; flex-wrap: wrap; }
.escape { height: 30px;}

/* dd内にtableが含まれている場合のスタイルを上書き */
.info dl:has(.table-container) { display: block;}
.info dl:has(.table-container) dd { flex: none;}

@media only screen and (max-width:468px) { 
     .info dl {  flex-direction: column; }
}



/* =========================================================================================
table
=========================================================================================*/
.table-container { margin-top: 0.5em; overflow-y: auto; overflow-x: hidden; width: 100%; box-sizing: border-box; position: relative; font-size: 0.9em; box-shadow: 0px 0px 2px 0px rgba(82, 134, 193, 1);}
.table-container table { width: 100%; border-collapse: collapse;}
.table-container thead { position: sticky; top: 0; z-index: 2; background-color: #F7FAFD;}
.table-container th { text-align: left; padding: 0.5em 1.5em; border-bottom: 1px solid #f5f5f7; text-wrap: nowrap;}
.table-container th:first-child { width: 40%;}
.table-container th:last-child { width: 30%;}
.table-container td { background-color: #ffffff; border-bottom: 1px solid #f5f5f7; vertical-align: middle; padding: 0.5em 1.5em;}

@media only screen and (max-width: 820px) {

.table-container table, .table-container thead, .table-container tbody, .table-container th, .table-container td, 
.table-container tr {  display: block;  width: 100%;}
.table-container thead tr {  position: absolute; top: -9999px; left: -9999px;}
.table-container tr {  border: 1px solid #e6e6e6; }
.table-container tr:last-child { margin-bottom: 0;}
.table-container td {  border: none; position: relative; padding-left: 35%;  text-align: left; border-bottom: 1px solid #f5f5f7;}
.table-container td:before {  content: attr(data-label); position: absolute; left: 0; width: 45%;  padding-left: 0.5em;  white-space: nowrap;}
}