@charset "utf-8";



/*==================================================
/*機能編 5-4-1タブメニュー*/
/*===================================*/
/*tabの形状*/
ul.tab{
	display: flex;
	flex-wrap: wrap;
    margin: 10px 15px 0;
    column-gap: 2px;
    position: relative;
    z-index: 1;
}
.tab li a{
	display: block;
	background:var(--cl-01-1);
	border-radius: 6px 6px 0 0;
	width: 5em;
	font-size: 14px;
	text-align: center;
    box-shadow: 1px -1px 3px var(--cl-01-3);
    border-bottom: none;
	line-height: 1.2;
	padding: 0.5rem 0;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:rgb(190, 233, 255);
    border-bottom: 2px solid var(--cl-01-1);
    border-bottom: solid 2px rgb(190, 233, 255);
}
/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: rgb(190, 233, 255);
    box-shadow: 1px -1px 3px var(--cl-01-3);
	padding: 10px 5% 50px;
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
	border-radius: 0 16px 10px 10px;
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*==================================================
機能編 9-2-1 任意の場所をクリックすると隠れていた内容が開く
===================================*/
/*アコーディオン全体*/
.container > img{
    border-radius: 20px 20px 0 0;
}
.container figure{
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px 20px 0 0;
}
#interview .container,#environment  .container{
	border: solid 1px var(--cl-b_2);
    border-radius: 20px;
}

.accordion-area{
    margin:0 auto;
    background-color: var(--cl-01-1);
    border-radius: 0 0 20px 20px;
}
.accordion-area section{
    background-color: var(--cl-0);
    border-radius: 20px;
    margin: 1rem;
}
.accordion-area li{
    margin: 0 0 10px;
    display: grid;
}



/*アコーディオンタイトル*/
.accordion-area .title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    padding-left: 50px;
    transition: all .5s ease;
}
.accordion-area h2.title,
.accordion-area h3.title{
	border: none;
    background-color: transparent;
    font-size: 2rem;
    text-align: start;
	margin: 0;
	padding: 10px 0 10px 50px;
}
/*アイコンの＋と×*/
.accordion-area .title::before,
.accordion-area .title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: rgb(30, 30, 30);
}
.accordion-area .title::before{
    top: 0;
	bottom: 0;
    left: 20px;
	margin: auto;
    transform: rotate(0deg);
}
.accordion-area .title::after{    
    top: 0;
	bottom: 0;
    left: 20px;
	margin: auto;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.accordion-area .title.close::before{
	transform: rotate(45deg);
}
.accordion-area .title.close::after{
	transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
	margin: 0;
    padding: 0 1vw 1rem;
}
.box li{
	margin-bottom: 3em;
	position: relative;
}
.box li:last-child{
	margin-bottom: 0;
}
.box li .new{
	position: absolute;
	top: 0;
	left: 0;
}
.box h3,.box h4{
    font-size: 1.8rem;
	border-left: solid 6px var(--cl-01-3);
}
.box p{
	margin-left: 0.5em;
}
ul.news-art .box{
	background-color: transparent;
	padding: 0;
}
.news-art li{
	margin: 0;
}

/*===========================================================*/
/* 	スライドショー
	-複数画像を中央に注目させて見せる-*/
/*===========================================================*/
/*スライダーのためのcss*/
.slider_01 {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto 16px;
}
.slider_01 .slick-slide {
	transform: scale(0.7);/*左右の画像のサイズを70%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}
.slider_01 .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.slider_01 li{/*indexの事業所だより*/
    width: 28vw;
}
.slider_01 .title{
	font-size: unset;
	margin-bottom: 0;
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick_01-prev, 
.slick_01-next {
    position: absolute;/*絶対配置にする*/
    top: 36%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid var(--cl-01-3);/*矢印の色*/
    border-right: 2px solid var(--cl-01-3);/*矢印の色*/
    height: 15px;
    width: 15px;
	z-index: 1;
}
.slick_01-prev {/*戻る矢印の位置と形状*/
    transform: rotate(-135deg);
	left: 2vw;
}
.slick_01-next {/*次へ矢印の位置と形状*/
    transform: rotate(45deg);
	right: 2vw;
}
@media screen and (max-width:768px){
	.slider_01 {/*横幅94%で左右に余白を持たせて中央寄せ*/
		width:94%;
		margin:0 auto 16px;
	}
	.slider_01 li{/*indexの事業所だより*/
		width: 50vw;
	}
	.slick_01-prev {/*戻る矢印の位置と形状*/
		left: 18vw;
	}
	.slick_01-next {/*次へ矢印の位置と形状*/
		right: 18vw;
	}
}

@media screen and (max-width:500px){
	.slider_01 li{/*indexの事業所だより*/
		width: 80vw;
	}
	.slick_01-prev {/*戻る矢印の位置と形状*/
		left: 0vw;
	}
	.slick_01-next {/*次へ矢印の位置と形状*/
		right: 0vw;
	}
}

/*===========================================================*/
/* スライドショー
	ズームあり フェードイン・アウトさせて全画面で見せる*/
/*===========================================================*/
.slider_02 {
	width: 100vw;
	height: calc(100vh - 78px);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	overflow: hidden; /* 画像がはみ出ないようにする */
    margin: 0;
}
.catchcopy.slider_02 {
	height: calc(100vh - 76px);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	z-index: 2;
	position: absolute;
	top: 0;
	display: grid;
	align-content: center;
}
.catchcopy.slider_02 li{
	text-align: center;
	font-weight: bold;
	color: rgb(255, 88, 50);
	text-shadow: 2px 2px 10px rgb(255, 251, 226), -2px -2px 10px white;
	letter-spacing: 0.2em;
}
.slider_02 .slick-track {
	display: flex;
}
.slider_02 .slick-slide {
	height: auto !important;
}
.slider_02 img{
	width: 100%;
	height: calc(100vh - 60px);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	object-fit: cover;
}
@keyframes zoomUp {
	0% {
	transform: scale(1);
	}
	100% {
	  transform: scale(1.15); /* 拡大率 */
	}
}
.add-animation {
	animation: zoomUp 10s linear 0s normal both;
}

/*文字を重ねて表示*/
li.slick-img{
	position: relative;
}
li.slick-img p{
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	translate: -54% -62%;
	color: var(--cl-wh-1);
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 2px var(--cl-01-7);
	width: 100vw;
	text-align: center;
    
}
.font-size-XL {
    font-size: clamp(2rem, calc(1.6rem + 3vw), 7rem);
}

@media screen and (min-width:1280px){
	li.slick-img p{
		font-size: 50px;
	}
}
@media screen and (max-width:980px){
	.slider_02 {
		height: 100%;
	}
	li.slick-img p{
		font-size: 30px;
	}
	.slider_02 img{
		height:calc(100vh - 78px);
	}
}
@media screen and (max-width:768px){
	li.slick-img p{
		font-size: 24px;
	}
}
@media screen and (max-width:580px){
	.slider_02 img{
		height:40vh;
	}
	li.slick-img p{
		font-size: 16px;
	}
}

/*===========================================================
	スライドショー
	-複数画像を流して見せる-
===========================================================*/
/*スライダーのためのcss*/
.slider_03{
    margin-top: 76px;
    background-color:var(--cl-01-1);
}
.slider_03 li {
	height: calc(100vh - 76px);
}
.slider_03 img {
	width: 100%;
	height: 100%;
	object-fit:contain
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider_03 .slick-slide {
    margin:0 0;/*スライド左右の余白調整*/
}
/*==================================================
		スライドショー swiper
===================================*/
/* コンテナー */
.slide_container {
	width: 100%;
	height: calc(100vh - 76px);
	background-color: var(--cl-01-1);
	position: relative;
}
/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
	transition-timing-function: linear;
}
/* スライド */
.infinite-slider .swiper-slide {
	height: calc(100vh - 76px) !important; /* 高さを指定 */
	width: auto !important;
}
/* スライド内の画像 */
.infinite-slider .swiper-slide img {
	width: auto;
	height: 100%;
	padding: 20px 0;
}

/*===========================================================
	テキストの動き
	-背景色が伸びて出現（左から右）-
===========================================================*/
/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
	from {
		opacity:0;
	}

	to {
		opacity:1;  
	}
}
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--cl-01-3);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

/*===========================================================
	-ふわっと出現-
===========================================================*/
/* 下から */
.fadeUpTrigger{
	opacity: 0;
}
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(200px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 左から */
.fadeLeft{
	animation-name:fadeLeftAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeLeftAnime{
		from {
			opacity: 0;
			transform: translateX(-200px);
		}
			to {
			opacity: 1;
			transform: translateX(0);
		}
	}

/* 右から */
.fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeRightAnime{
		from {
			opacity: 0;
			transform: translateX(200px);
		}
			to {
			opacity: 1;
			transform: translateX(0);
		}
	}


/*===========================================================
	にゅーん-滑らかに変形して出現-
===========================================================*/
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
	from {
		transform:translate3d(0, 100%, 0) skewY(12deg);
		opacity:0;
	}
	to {
		transform:translate3d(0, 0, 0) skewY(0);
		opacity:1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger{
    opacity: 0;
}

/*===========================================================
	-アニメーションスタートの遅延時間を決めるCSS-
===========================================================*/
.delay_time02{
	animation-delay: 0.2s;
}
.delay_time03{
	animation-delay: 0.3s;
}
.delay_time04{
	animation-delay: 0.4s;
}
.delay_time06{
	animation-delay: 0.6s;
}

/*===========================================================
	スクロールダウン
	-丸が動いてスクロールを促す-
===========================================================*/
/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom: 12px;
	right:50%;
	z-index: 2;
}
/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:-26px;
	bottom:50px;
    /*テキストの形状*/
	color: var(--cl-01-5);
	font-size: 1.6rem;
	font-weight: bolder;
	letter-spacing: 0.1em;
    text-shadow: 1px 1px  var(--cl-02-3);
}
/* 線の描写 */
.scrolldown2::before{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:var(--cl-01-5);
    box-shadow: 0.4px 0px var(--cl-02-3);
}
/* 丸の描写 */
.scrolldown2::after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:var(--cl-01-5);
    box-shadow: 1px 1px var(--cl-02-3);
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
    0%{bottom:45px;}
    100%{bottom:-5px;}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
    0%{opacity:0}
    50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
}

/*事業所だより一覧ページ*/
    #letter_list .scrolldown2{
        /*描画位置※位置は適宜調整してください*/
        position:absolute;
        bottom: unset;
        top: 190px;
        right:50%;
        z-index: 2;
    }

@media screen and (max-width:580px){
	.scrolldown2{
		display: none;
	}
}

/*==================================================
		ローディング
		-ロゴアニメーション-
===================================*/
/* Loading背景画面設定　*/
#splash {
	/*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1001;
	background:var(--cl-01-1);
	text-align:center;
	color:#fff;
    top: 0;
}
/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img {
	width:200px;
}
/* fadeUpをするアイコンの動き */
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes fadeUpAnime{
	from {
	opacity: 0;
	transform: translateY(100px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}