#top #mv {
    padding-top: 0px;
    padding-bottom: 0;
    position: relative;
    background-image: url("../img/home/mv_img.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    /* 重なり順を制御 */
    /*overflow: hidden; */
	overflow: visible;
	display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 991px) {
#top #mv {
  padding-top: 10px;
}
}
#top #mv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 1. ドットパターン（網点）と 2. 暗めの色の2層を合成 */
    background-image: 
        radial-gradient(rgba(0,0,0, 0.3) 1px, transparent 1px), 
        linear-gradient(rgba(0,0,0, 0.2), rgba(0,0,0, 0.2));
	background-image: 
        radial-gradient(rgba(130,119,102, 0.3) 1px, transparent 1px), 
        linear-gradient(rgba(130,119,102, 0.6), rgba(130,119,102, 0.1));
    background-size: 3px 3px, auto; 
    z-index: 1;
}
#top #mv > * {
    position: relative;
    z-index: 2;
}




.mv-frame {
    position: absolute; 
    z-index: 2;  
    width: 90vw;
    height: calc(100vh - 200px);	
    border: 1px solid rgba(255, 255, 255, 0.8); 
    box-sizing: border-box;
	overflow: visible!important;
}
@media screen and (max-width: 575px) {
.mv-frame {    
    height: calc(100vh - 150px);
}
}
/* --- 追加：枠線に被るお知らせ --- */
.mv-info_wrap {
    position: absolute;
    bottom: -3vh;
    right: -3vw;
    min-width: 450px;
    z-index: 10;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.15); /* 影を少し強めると立体感が出ます */    
}
@media screen and (max-width: 575px) {
  .mv-info_wrap {
        /* 1. PC版の配置を完全にリセット */
        right: auto !important; 
        left: 50% !important;
        
        /* 2. 中央寄せを適用 */
        /* PC版でtransformを使っていなかった場合でも、ここで適用します */
        transform: translateX(-50%) !important;
        
        /* 3. 画面からはみ出さないように横幅を制限 */
        min-width: 0 !important; 
        width: 95vw !important; /* 画面幅の90% */
        
        /* 4. 下位置の微調整（適宜変更してください） */
        bottom: -20px !important;
    }
}

                
.mv-info_ttl {
    display: table;      /* もしくは inline-block */
    margin-left: auto;   /* 左右オートで中央寄せ */
    margin-right: auto;
	position: relative;
    padding: 1rem 1.5rem; /* 上下の余白を確保 */
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    }

.mv-info_ttl::before,
.mv-info_ttl::after {
    position: absolute;
    top: 50%;             /* 中央から配置 */
    height: 1.8rem;
    margin-top: -0.9rem;  /* 高さの半分戻して垂直中央揃え */
    content: '';
}

.mv-info_ttl::before {
    border-left: solid 3px;
    left: -20px;          /* テキストの左外側20pxに配置 */
    transform: rotate(-30deg);
}

.mv-info_ttl::after {
    border-right: solid 3px;
    right: -20px;         /* テキストの右外側20pxに配置 */
    transform: rotate(30deg);
}


.mv-info {    
    background-color: rgba(255,255,255,0.9);
    color: #333;
    padding: 5px 5px;
    min-width: 450px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    height: 250px;
}
@media screen and (max-width: 575px) {
  .mv-info {
        min-width: 0 !important;
        width: 100% !important;
	  padding: 5px;
	  height: 230px;
    }
}
.mv-info_inner {
    padding: 15px 25px;
    border: 1px solid #9E9381;
    height: 240px;
    overflow-y: scroll;
	scrollbar-width: thin;
  scrollbar-color: #827766 #f1f1f1;
}
@media screen and (max-width: 575px) {
  .mv-info_inner {        
	  height: 220px;
    }
}
/* --- Chrome, Edge, Safari (WebKit系) 向けの指定 --- */

/* 1. スクロールバー全体の幅 */
.mv-info_inner::-webkit-scrollbar {
  width: 8px; /* 横スクロールならheight */
}

/* 2. スクロールバーの背景（レール）部分 */
.mv-info_inner::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px;
}

/* 3. 動くつまみ（ハンドル）部分 */
.mv-info_inner::-webkit-scrollbar-thumb {
  background: #827766; 
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* レールとの間に隙間を作るとより綺麗 */
}

/* 4. つまみにホバーした時 */
.mv-info_inner::-webkit-scrollbar-thumb:hover {
  background: #827766; 
}

.mv-info .info_box {
    margin-bottom: 10px;
    border-bottom: 1px dashed #9E9381;
}
.mv-info .date {
    display: block;
    font-size: 12px;
    color: #827766;
    margin-bottom: 1px;
}
.mv-info .text {
    display: block;
    font-size: 14px;
    color: #827766;
	margin-bottom: 1px;
}

.mv_read {
    position: absolute;
    bottom: 5%;
    left: 5%;   
    color: #fff;
    z-index: 3;
    font-size: 2vw;
    font-weight: bold;
}

@media screen and (max-width: 991px) {
.mv_read {
    top: 5%;
    font-size: 3.5vw;
	bottom: auto;
}
}

@media screen and (max-width: 575px) {
.mv_read {    
    font-size: 5.5vw;
	top: 10%;
}
}

/* 外枠：中身がはみ出さないように設定 */
.reveal-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block; 
  vertical-align: bottom;
}

/* 追いかける背景（カーテン） */
.reveal-overlay {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* これで文字の高さに合います */
  background-color: #fff;
  transform: translateX(-101%);
  z-index: 2;
  pointer-events: none; /* クリックを邪魔しない */
}


/* 中身のテキスト */
.reveal-content {
  opacity: 0;
  display: block;
  white-space: nowrap; /* 改行を防いで幅を維持 */
}

/* アニメーション実行時の動き */
.is-animated .reveal-overlay {
  animation: slideOut 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.is-animated .reveal-content {
  animation: fadeIn 0.1s 0.6s forwards; /* カーテンが半分過ぎた頃に表示 */
}

/* アニメーションの定義 */
@keyframes slideOut {
  0% { transform: translateX(-101%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ピックアップ
------------------------------------------------------------*/
.pickup_area {
    padding-top: 5%;
    padding-bottom: 5%;
    position: relative;
    padding-right: 0px;
    padding-left: 0px;
    background-color: rgba(158,147,129,0.1);
}
@media screen and (max-width: 1199px) {
.pickup_area {
    padding-left: 5%;
    padding-right: 5%;    
}
}

.swiper_area {
  padding-top: 2%;
  padding-bottom: 1%;
  position: relative;
  padding-right: 50px;
  padding-left: 50px;
}
.swiper {
  width: 100%;
  /*height: 100%;*/
}
.pickup_slide,
.pickup_slide * {
    box-sizing: border-box !important;
}
.swiper-slide {
  /*text-align: center;*/
  font-size: 18px;
  /*background: #fff;*/
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.swiper_area .image01 {
  line-height: 0;
  overflow: hidden;
	/*border-radius: 20px;*/
}
.swiper_area .image01 img {
    width: 100%;
    height: auto;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.swiper_area .image01:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/* 矢印の色を変える（例：黒） */
.swiper-button-next,
.swiper-button-prev {
  color: #9E9381!important; 
}

/* 矢印のサイズを小さくする場合 */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px;
}

/* 画像のホバー演出と干渉しないよう、矢印のz-indexを確保 */
.swiper-button-next,
.swiper-button-prev {
  z-index: 10;
}
.pickup_ttl {
    padding-top: 20px;
    padding-bottom: 0px;
    font-size: 18px;
    color: #000;
    line-height: 1.4;
    font-weight: bold;
}

@media screen and (max-width: 575px) {
.pickup_ttl {    
    font-size: 18px;
}
}
.pickup_tx {
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 16px;
  color: #000;
	line-height: 1.4;
}
@media screen and (max-width: 575px) {
.pickup_tx {
    font-size: 14px;
}
}
.pickup_slide {
  overflow: hidden; /* これではみ出しをカットします */
  position: relative;
}

/*採用情報*/
.recruit_area {
    padding-top: 5%;
    padding-bottom: 5%;
}
@media screen and (max-width: 767px) {
.recruit_area {
    padding-top: 15%;
	padding-left: 5%;
    padding-right: 5%;
    background-image: url("../img/home/recruit_img_s.svg");
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
}
}


/*仕事*/
.works_area {
    padding-top: 5%;
    padding-bottom: 5%;
}
@media screen and (max-width: 1199px) {
.works_area {
    padding-left: 5%;
    padding-right: 5%;    
}
}


.works_link_area {
	margin-bottom: 3%;
	margin-top: 3%;	
}
.works_link01,.works_link02,.works_link03 {
    position: relative;
    overflow: hidden;
    height: 70vh;
    /*border-radius: 5% 5% 5% 5%;*/
    margin-bottom: 20px;
}
@media screen and (max-width: 1399px) {
.works_link01,.works_link02,.works_link03 {    
    height: 50vh;
}
}
.works_link01:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background-image: url("../img/home/works/drugstore.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
	filter: brightness(0.55) saturate(0.9);
	
}

.works_link02:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background-image: url("../img/home/works/pharmacy.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
	filter: brightness(0.55) saturate(0.9);
}
.works_link03:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: url("../img/home/works/nursing.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-position: center 0%;
	filter: brightness(0.55) saturate(0.9);
}
.works_link01:hover:after,.works_link02:hover:after,.works_link03:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
	background-color: rgba(158,147,129,0.9);
}
.works_link01:before,.works_link02:before,.works_link03:before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(158,147,129,0.9);	
}

.works_link_name {
  /*text-align: center;*/
  position: relative;
  z-index: 10;
  color: #fff;
  position: absolute;
  top: 30%;
  left: 10%;  
  /*top: 50%;*/
  /*transform: translate3d(0px, -50%, 0px);*/
  /*transition: opacity 400ms cubic-bezier(0.18, 0.06, 0.23, 1)*/
}
.works_link_name_en {
    display: block;
    font-size: 1.5vw;
    line-height: 1.5;
    font-weight: 100;
    text-transform: uppercase;	  /*text-shadow: 
    black 2px 0px,  black -2px 0px,
    black 0px -2px, black 0px 2px,
    black 2px 2px , black -2px 2px,
    black 2px -2px, black -2px -2px,
    black 1px 2px,  black -1px 2px,
    black 1px -2px, black -1px -2px,
    black 2px 1px,  black -2px 1px,
    black 2px -1px, black -2px -1px;*/
    letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
.works_link_name_en {    
    font-size: 5vw;
}
}
@media screen and (max-width: 575px) {
.works_link_name_en {    
    font-size: 8vw;
}
}

.works_link_name_jp {
    display: block;
    font-size: 15px;
    line-height: 1;
    margin: 29px 0 0;
    text-transform: uppercase;
	letter-spacing: 0.2em;
	
}


/*event*/
.event_area {
    padding-top: 5%;
    padding-bottom: 15%;
    background-image: url("../img/home/event_bg.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
	/*border-radius: 0% 15% 0% 0%;*/
}
@media screen and (max-width: 1699px) {
.event_area {
    background-size: 70%;
	padding-top: 5%;
    padding-bottom: 5%;
}
}

@media screen and (max-width: 767px) {
.event_area {
    background-image: none;
}
}
.event_box {
    background-color: rgba(255,255,255,0.8); 
	padding: 5%;
}

/*com*/
.com_area {    
	padding-top: 5%;
    padding-bottom: 5%;  
	background-color: rgba(158,147,129,0.4);
}
@media screen and (max-width: 767px) {
.com_area {
    padding: 5%;
}
}


/*useful*/
.useful_area {    
	padding-top: 5%;
    padding-bottom: 5%;  
	background-color: rgba(158,147,129,0.1);
}

.useful_box {
    background-color: rgba(255,255,255,0.8); 
	padding: 5%;
}

.styled-list {
  display: flex;
  flex-wrap: wrap; /* 2列にするための設定 */
  list-style: none;
  padding: 0;  
  margin: 0 auto;
	padding-top: 5%;
}

.styled-list li {
  width: 50%; /* 2列にする */
  box-sizing: border-box;
}

.styled-list a {
    display: flex;
    justify-content: space-between; /* テキストと矢印を両端に配置 */
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #ddd; /* 下線 */
    margin-top: 0;
    margin-right: 1vw;
    margin-bottom: 0; /* 左右の余白（必要に応じて調整） */
    transition: background-color 0.3s;
    position: relative; /* 擬似要素の基準にする */
    font-size: 1.6rem;
    font-weight: bold;
}
.styled-list a::after {
  content: "→"; /* ここで矢印を指定 */
  font-size: 1.6rem;
  color: #666;
  transition: transform 0.3s ease; /* アニメーション設定 */
}

/* ホバー時の挙動 */
.styled-list a:hover {
    background-color: rgba(158,147,129,0.2);
}

.styled-list a:hover::after {
  transform: translateX(10px); /* 右にスライド */
  color: #000; /* ホバー時に色を濃くする場合 */
}

/* スマホ対応（768px以下で1列に） */
@media (max-width: 768px) {
  .styled-list li {
    width: 100%;
  }
}

/*footimg_area*/
.footimg_area_area {
    
}


/*info*/
.info_area {
    margin-top: 10%;
    padding-top: 5%;
    padding-bottom: 5%;
    border-radius: 15% 15% 0% 0%;
    background-color: rgba(18,150,143,0.1);
    padding-right: 5%;
	padding-left: 5%;
}
.info_area .links {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 5%;
}

/*.info_area .links {
    width: 61.6%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}*/
/*.info_area .links li {
    width: 48.6%;
    display: inline-block;
}
@media (max-width: 575px) {
.info_area .links li {
    width: 100%;
}
  }*/