@charset "utf-8";
/* CSS Document */

html {
font-size: 62.5%;
}

body {
margin: 0;
color: rgba(30,30,30,1.0);
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size: 1.6rem;
line-height: 1.8;
}

img {
max-width: 100%;
height: auto;
border: 0;
}

ol, ul {
list-style-type: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

img, input, select, textarea {
vertical-align: middle;
}

.clearfix:after {
content: "";
display: block;
clear: both;
}
 
.clearfix:before {
content: "";
display: block;
clear: both;
}
 
.clearfix {
display: block;
}

a{
text-decoration: none;
}

a:link,
a:visited {
color: rgba(30,30,30,1.0);
}

#top_kyujin .link_list a:link,
#top_kyujin .link_list a:visited {
color: rgba(255,255,255,1.0);
}

.yuji-syuku-regular{
font-family: "Yuji Syuku", serif;
font-weight: 400;
font-style: normal;
line-height: 1.2;
}

.tategaki{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}

#wrap{
position: relative;
overflow: hidden;
}

.bg_navy{
background-color: rgba(34,51,68,1.0);
}

.bg_yellow{
background-color: rgba(241,201,76,1.0);
}

.bg_beige{
background-color: rgba(239,232,216,1.0);
}

.bg_grey{
background-color: rgba(90,90,90,1.0);
}

.bg_lightgrey{
background-color: rgba(247,247,247,1.0);
}

.bg_palerose{
background-color: rgba(207,165,165,1.0);
}

.bg_paleblue{
background-color: rgba(175,193,212,1.0);
}

.bg_lavendergray{
background-color: rgba(186,167,186,1.0);
}

.bg_white{
background-color: rgba(255,255,255,1.0);
}

.font_navy{
color: rgba(34,51,68,1.00);
}

.font_yellow{
color: rgba(241,201,76,1.0);
}

.font_white{
color: rgba(255,255,255,1.0);
}


/*sm*/
.inner_sm{
width: 90%;
margin: 0 auto;
}

.br_mdlg{
display: none;
}

#title{
position: relative;
margin-top: 30px;
height: 130px;
}

#title h2{
position: absolute;
top: -30px;
left: 5%;
z-index: 1;
padding: 20px 10px;
box-shadow: 2px 2px 2px 0px rgba(30,30,30,0.2);
background-color: rgba(255,255,255,1.0);
font-size: 2.0rem;
}

.no_contents{
text-align: center;
}

#facility_list .no_contents{
padding-bottom: 50px; /*デザイン調整のため*/
}

#news,
#kyujin{
padding: 50px 0;
}

#facility,
#company{
padding: 50px 0 0 0;
}

#top_contact{
padding: 30px 0;
}


/*md*/
@media screen and (min-width: 768px) {
.inner_md{
width: 86%;
margin: 0 auto;
}

.br_mdlg{
display: block;
}

#title{
margin-top: 50px;
height: 300px;
}

#title h2{
top: -50px;
left: 7%;
padding: 25px 15px;
font-size: 2.4rem;
}

#news,
#facility,
#kyujin{
padding: 100px 0;
}

#facility{
padding: 100px 0 50px;
}

#company{
padding: 100px 0 0 0;
}

#top_contact{
padding: 50px 0;
}
}


/*lg*/
@media screen and (min-width: 1024px) {
.inner_lg{
width: 80%;
max-width: 1024px;
margin: 0 auto;
}

#title h2{ 
left: 10%;
}
}


/*sm　header*/
#nav_smmd{
position: relative;
width: 100%;
height: 100px;
top: 0;
}

#nav_smmd h1 img{
position: absolute;
top: 20px;
right: 20px;
width: 150px;
}

/* ボタン本体（p）をブロック化して、透明ヒットエリアを追加 */
.btn_gnav{
position: relative;
display: block;
width: 100%;
height: 100%;
}

/* ボタン外枠（当たり判定を44px以上に） */
#nav_smmd .hamburger{
display: block;
position: fixed;
top: 20px;
left: 20px;
z-index: 15;
width: 44px;   /* （推奨値） */
height: 44px;  /* （推奨値） */
box-sizing: border-box;
cursor: pointer;
transition: all 0.5s;
}

/* 3本線の見た目（44px内で中央寄せに調整） */
.hamburger span{
position: absolute;
left: 8px;
right: 8px;
height: 1px;
border-radius: 10px;
background: rgba(60,60,60,1.0);
transition: all 0.5s;
}

/* 線の縦位置（44px高さに合わせて配置） */
.hamburger span:nth-child(1){ top: 12px; }
.hamburger span:nth-child(2){ top: 22px; }
.hamburger span:nth-child(3){ top: 32px; }

/* 開いたときの変形（中央に集めて×に） */
.hamburger .open span:nth-child(1){
top: 22px;
transform: rotate(-45deg);
}
.hamburger .open span:nth-child(2),
.hamburger .open span:nth-child(3){
top: 22px;
transform: rotate(45deg);
}

#gnav_smmd{
position: fixed;
top:  -100%;
z-index: 10;
width: 100%;
height: 100%;
box-sizing: border-box;
background: rgba(255,255,255,1.0);
transition: 0.5s;
}

#gnav_smmd.open{
top: 0px;
}

#gnav_smmd ul{
margin: 100px 0 0 30px;
font-weight: bold;
}

#gnav_smmd ul li a{
display: inline-block;
margin : 10px 0;
}

#nav_lg,
#gnav_hamburger_lg{
display: none;
}


/*lg　header*/
@media screen and (min-width: 1024px) {
#nav_smmd{
display: none;
}

#nav_lg{
display: flex;
justify-content: flex-end;
position: relative;
width: 100%;
height: 360px;
top: 0;
right: 10%;
}

#nav_lg .nav_flame{
position: absolute;
top: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 117px 0;/*360-125*/
}

#nav_lg .nav_flame ul{
display: flex;
flex-direction: row-reverse;
gap: 30px;
font-weight: bold;
}

#nav_lg .nav_flame ul li{
transition: 0.3s;
}

#nav_lg .nav_flame ul li:hover{
opacity: 0.7;
}

#nav_lg h1{
width: 300px;
margin-left: 30px;
}

#nav_lg .hamburger{
display: block;
position: fixed;
top: 20px;
right: 20px;
z-index: 15;   /* 上に */
width: 44px;   /* （推奨値） */
height: 44px;  /* （推奨値） */
box-sizing: border-box;
cursor: pointer;
transition: all 0.5s;
transform: translateY(-250px); /* 初期は画面外 */
}

#gnav_hamburger_lg{
display: block;
position: fixed;
top: -100%;
z-index: 10;
width: 100%;
height: 100%;
box-sizing: border-box;
background: rgba(255,255,255,1.0);
transition: 0.5s;
}

#gnav_hamburger_lg.open{
top: 0px;
}

#gnav_hamburger_lg ul{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 300px;
margin: 100px auto;
font-weight: bold;
}

/* アニメ後の実用状態（クリック可能に） */
#nav_lg .hamburger.is-visible{
opacity: 1;
transform: translateY(0);
cursor: pointer;
}
}

/* 1024px以上のときの #nav_lg ハンバーガー入退場 */
#nav_lg .hamburger.UpMove{
  animation: UpAnimeNav 0.5s ease-out forwards;
}
@keyframes UpAnimeNav{
  from { opacity: 0; transform: translateY(-250px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 退場（上へフェードアウト） */
#nav_lg .hamburger.DownMove{
  animation: DownAnimeNav 0.4s ease-in forwards;
}
@keyframes DownAnimeNav{
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-250px); }
}


/* sm breadcrumbs */
#breadcrumb ul{
display: flex;
overflow-x: scroll;
word-break: keep-all;
white-space: nowrap;
padding: 9px 0 8px;
font-size: 1.2rem;
line-height: 1.4;
}
	
#breadcrumb ul::-webkit-scrollbar {
display: none;
}

#breadcrumb ul li{
position: relative;
padding-right: 20px;
}

#breadcrumb ul li:not(:last-child):after{
content: "";
position: absolute;
top: 26%;
right: 8px;
width: 6px;
height: 6px;
border-top: 1px solid rgba(60,60,60,1.0);
border-right: 1px solid rgba(60,60,60,1.0);
transform: rotate(45deg);
}

#breadcrumb ul li a{
color: rgba(60,60,60,1.0);
} 


/* md　breadcrumbs */ 
@media screen and (min-width: 768px) {
#breadcrumb ul{
padding: 14px 0 13px;
font-size: 1.4rem;
}
}


/* sm top_contact */
#top_contact h3{
text-align: center;
font-size: 2.0rem;
}

#top_contact a{
display: block;
max-width: 400px;
margin: 0 auto;
padding: 15px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,1.0);
background-color: rgba(255,255,255,1.0);
}


/* md top_contact */
@media screen and (min-width: 768px) {
#top_contact h3{
font-size: 2.4rem;
}
}

/* lg top_contact */
@media screen and (min-width: 1024px) {
#top_contact a{
transition: 0.3s;
}

#top_contact a:hover{
border: 1px solid rgba(60,60,60,1.0);
background-color: rgba(239,232,216,1.0);
}
}

/* sm footer */
.footer_top{
padding: 50px 0 30px;
font-size: 1.4rem;
}

.footer_top p{
font-size: 1.8rem;
}

.footer_top ul{
padding-top: 30px;
}

.footer_top ul li:not(:last-child){
margin-bottom: 20px;
}

.footer_bottom{
margin-bottom: 50px;
font-size: 1.2rem;
}

.footer_link{
padding: 50px 0;
text-align: center;
}

.footer_link p{
margin-bottom: 20px;
font-size: 1.4rem;
}

.footer_link ul li:not(:last-child){
margin-bottom: 20px;
}


/* md footer */
@media screen and (min-width: 768px) {
.footer_top{
padding: 100px 0 50px;
}

.footer_top .footer_flame{
display: flex;
justify-content: space-between;
width: 80%;
max-width: 768px;
margin: 0 auto;
}

.footer_top ul{
padding-top: 0;
}

.footer_link ul{
display: flex;
align-content: space-between;
}

.footer_link ul li{
width: 24%;
}

.footer_link ul li:not(:last-child){
margin-right: 2%;
margin-bottom: 0;
}
}


/* lg footer */
@media screen and (min-width: 1024px) {
.footer_link ul li{
transition: 0.3s;
}

.footer_link ul li:hover{
opacity: 0.7;
}
}

/* sm btn_fix */
#btn_fix{
position: fixed;
right: 0;
bottom: 10px;
z-index: 9;
width: 40px;
height: 170px;
opacity: 0;
transform: translateY(250px);
pointer-events: none;
}

/* 表示 */
#btn_fix.UpMove{
animation: UpAnime 1.0s forwards;
pointer-events: auto;
}

/* 非表示 */
#btn_fix.DownMove{
animation: DownAnime 1.0s forwards;
pointer-events: none;
}

@keyframes UpAnime{
  from {
    opacity: 0;
    transform: translateY(250px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes DownAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(250px);
  }
}

#btn_fix .btn_kyujin{
margin-bottom: 10px;
}


/* md　btn_fix */
@media screen and (min-width: 768px) {
#btn_fix{
bottom: 20px;
width: 50px;
height: 210px;
}
}


/* lg　btn_fix */
@media screen and (min-width: 1024px) {
#btn_fix p{
transition: 0.3s;
}

#btn_fix p:hover{
transform: translateY(10px);
}
}


/* sm　button */
#top_news .link_list ,
#top_kyujin .link_list,
#top_menu .link_list,
#kyujin .btn_kyujin,
#kyujin .btn_entry,
#kyujin .btn_list,
#news .btn_list,
#area_nav li,
#facility_list .btn_detail,
#facility_detail .btn_map,
#facility_detail .btn_list{
position: relative;
}

#top_news .arrow_black-black:after,
#top_kyujin .arrow_white-white:after,
#top_menu .arrow_black-black:after,
#kyujin .btn_kyujin .arrow_black-black:after,
#kyujin .btn_entry .arrow_white-black:after,
#kyujin .btn_list .arrow_black-black:after,
#news .btn_list .arrow_black-black:after,
#facility_list .btn_detail .arrow_black-black:after,
#facility_detail .btn_map .arrow_black-black:after,
#facility_detail .btn_list .arrow_black-black:after{
content: "";
position: absolute;
width: 8px;
height: 8px;
transform: rotate(45deg);
}

#area_nav li .arrow_black-black:after{
content: "";
position: absolute;
top: 35%;
right: 30px;
width: 8px;
height: 8px;
transform: rotate(135deg);
}

#top_news .arrow_black-black:after,
#top_kyujin .arrow_white-white:after{
top: 35%;
right: 15px;
}

#top_menu .arrow_black-black:after{
top: 35%;
right: -13px;
}

#facility_list .btn_detail .arrow_black-black:after{
top: 18%;
right: 10px;
}

#kyujin .btn_kyujin .arrow_black-black:after,
#kyujin .btn_entry .arrow_white-black:after,
#kyujin .btn_list .arrow_black-black:after,
#news .btn_list .arrow_black-black:after,
#facility_detail .btn_map .arrow_black-black:after,
#facility_detail .btn_list .arrow_black-black:after{
top: 40%;
right: 50px;
}

.arrow_black-black:after,
.arrow_black-white:after{
border-top: 1px solid rgba(30,30,30,1.0);
border-right: 1px solid rgba(30,30,30,1.0);
}

.arrow_white-white:after,
.arrow_white-black:after{
border-top: 1px solid rgba(255,255,255,1.0);
border-right: 1px solid rgba(255,255,255,1.0);
}

#kyujin .btn_kyujin,
#kyujin .btn_entry,
#kyujin .btn_list,
#news .btn_list,
#facility_detail .btn_map,
#facility_detail .btn_list{
width: 100%;
border-radius: 30px;
box-sizing: border-box;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}

#kyujin .btn_kyujin,
#kyujin .btn_list{
margin-bottom: 20px;
border: 1px solid rgba(30,30,30,1.0);
}

#facility_detail .btn_map{
margin-top: 15px;
border: 1px solid rgba(30,30,30,1.0);
}

#facility_detail .btn_list{
margin-bottom: 50px;
border: 1px solid rgba(30,30,30,1.0);
}

#kyujin .btn_entry{
border: 1px solid rgba(34,51,68,1.0);
}

#kyujin .btn_entry a{
color: rgba(255,255,255,1.0);
}

#kyujin .btn_kyujin a,
#kyujin .btn_entry a,
#kyujin .btn_list a,
#news .btn_list a,
#facility_detail .btn_map a,
#facility_detail .btn_list a{
display: block;
padding: 10px 0;
}

#news .btn_list{
border: 1px solid rgba(30,30,30,1.0);
}


/* md btn */
@media screen and (min-width:768px) {
#kyujin_list .btn_frame,
#kyujin_detail .btn_frame{
width: 80%;
max-width: 700px;
display: flex;
justify-content: space-between;
align-content: flex-start;
margin: 0 auto;
}

#kyujin .btn_kyujin,
#kyujin .btn_entry,
#kyujin .btn_list,
#news .btn_list,
#facility_detail .btn_map{
width: 48%;
margin: 0 auto;
}

#facility_detail .btn_list{
width: 48%;
margin: 0 auto 50px;
}

#kyujin_list .btn_kyujin,
#kyujin .btn_list{
margin-bottom: 0;/*smでのデザインを解除*/
}
}


/* lg　button */
@media screen and (min-width: 1024px) {
#top_news .link_list,
#top_kyujin .link_list,
#top_menu li div,
#kyujin .btn_kyujin,
#kyujin .btn_entry,
#kyujin .btn_list,
#news .btn_list,
#area_nav li,
#facility_list .btn_detail,
#facility_detail .btn_map,
#facility_detail .btn_list{
transition: 0.3s;
}

.arrow_black-black:after,
.arrow_white-white:after,
.arrow_black-white:after,
.arrow_white-black:after{
transition: 0.3s;
}

.arrow_white-white:hover:after,
.arrow_black-white:hover:after{
border-top: 1px solid rgba(255,255,255,1.0);
border-right: 1px solid rgba(255,255,255,1.0);
}

.arrow_white-black:hover:after{
border-top: 1px solid rgba(30,30,30,1.0);
border-right: 1px solid rgba(30,30,30,1.0);
}

#top_news .arrow_black-black:hover:after,
#top_kyujin .arrow_white-white:hover:after{
right: 10px;
}

#facility_list .btn_detail .arrow_black-black:hover:after{
right: 5px;
}

#top_menu li div:hover .link_list.arrow_black-black:after{
right: -18px;
}

#kyujin .btn_kyujin .arrow_black-black:hover:after,
#kyujin .btn_entry .arrow_white-black:hover:after,
#kyujin .btn_list .arrow_black-black:hover:after,
#news .btn_list .arrow_black-black:hover:after,
#facility_detail .btn_map .arrow_black-black:hover:after,
#facility_detail .btn_list .arrow_black-black:hover:after{
right: 45px;
}

#area_nav li .arrow_black-black:hover:after{
top: 40%;
}

#kyujin .btn_kyujin:hover,
#kyujin .btn_list:hover,
#news .btn_list:hover{
background-color: rgba(237,237,237,1.0);
border: 1px solid rgba(237,237,237,1.0);
}

#kyujin .btn_entry:hover{
background-color: rgba(255,255,255,1.0);
border: 1px solid rgba(34,51,68,1.0);
}

#kyujin .btn_entry a:hover{
color:rgba(30,30,30,1.0);
}

#news .btn_list{
width: 400px;
}
}

/* sm　pagination */
.page_nav-frame{
margin-top: 10px;
}

.pagination{
display: flex;
justify-content: center;
align-items: center;
margin: 5px auto 0;
width: 90%;
text-align: center;
}

.pagination_item-link{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 30px;
height: 30px;
margin: 0 5px;
transition: 0.3s;
}

.pagination_item-link.current{
background: rgba(90,99,90,0.2);
}

/* lg　pagination */
@media screen and (min-width: 1024px) {
.pagination_item-link:not(.current):hover{
background: rgba(90,99,90,0.2);
}
}

/* 下から */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration: 1.0s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* 上から */
.fadeDown{
animation-name: fadeDownAnime;
animation-duration: 1.0s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* 左から */
.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration: 1.0s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeLeftAnime{
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* 右から */
.fadeRight{
animation-name: fadeRightAnime;
animation-duration: 1.0s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeRightAnime{
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
opacity: 0;
}



/*list 共通*/
.data-for-aidemlog{ /* 独自ログ計測用 */ } 