@charset "UTF-8";



.test-bg{
background: #FFFFFF;
width: 100%;	
height: 150px;
position: fixed;
z-index: 999;	
/*background-size: cover;
background-position: center top;*/	
}




.wrapper{
max-width: 1280px;
margin: 0 auto;
padding: 0 4%;
}


.tel-accsess{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;	
}







/*.mail img{
padding: 0px 15px;	
margin-top: 6px;	
}*/


.header_bg{
display: flex;
margin-top: 20px;
}





/*.access-mail{
padding: 0px 0px 10px 280px;	
}*/


.rogo_pc{
display: block;
/*transform: scale(1, 1);*/	
}

.rogo_sp{
display: none;
}




.tel-number_pc  img {
display: block;
}

	
.tel-number_sp  img {
display: none;
}	





.tel-number_pc img{
padding-top: 0px;
padding-right: 40px;
	
}



.tel-number-instagram{
display: flex;	
}



/*.tel-number  a img {
text-decoration-line: none;	
padding-top: 0px;
padding-left: 0px;
align-items: center;	
}*/

/*.tel-number  a span{
font-size: 1rem;	
}*/







/* トップ画像 ここから*/
.top-img-pc{
display: block;	
padding-top: 150px;	
}


.top-img-sp{
display: none;	
}




/*ここから 最新情報*/
.inframe-pc{
display: block;	
}


.inframe-sp{
display: none;	
}

.information{
padding: 70px 70px;
}

.info_title h4{
font-weight: bold;
font-size: 2rem;
font-feature-settings: "palt";
font-family: 'Meiryo', serif;	
}


.information_list{
border: 2.5px solid #000080;
width: 40%;
height: auto;
margin: 1rem;
padding: 0.7rem;
margin: 0 auto;
margin-top: 3rem;	
}


.infolist p{
text-align: center;
margin: 0 auto;	
}




/* 障害者就労専門職との ここから*/
.second-img-pc{
display: block;	
}	
	
	
.second-img-sp{
display: none;	
}	
	


.second-img{
position: static;
}


.second-comento{
position: absolute;
margin-top: 160px;
color: #FFFF00;
text-align: center;	
}


.second-comento h1{
font-weight: bold;
font-size: 5rem;
font-feature-settings: "palt";	
}



.second-comento p{
color: #FFFFFF;
font-size: 25px;
text-align: justify;
margin-top: 30px;
max-width: 1200px;	
}




/* ここから　　段階的な引き上げ */

.second_text_title h1{
font-weight: bold;
font-size: 4.7rem;
font-feature-settings: "palt";
color: white;
}


.second_text_title p{
color: white;
font-size: 1rem;	
}



.second_bg {
font-family: 'Arial', sans-serif;
background-color: deeppink; /* ピンク色の背景 */
color: #333; /* 濃いテキストカラーで読みやすく */
padding: 180px;
margin-top: -90px;
width: auto;
/*box-sizing: border-box;*/
}



/* ここから　　楕円アイコン */



/* 楕円アイコン1 */

.llipse1_texte{
float: left;	
}

.llipse1_circle{
float: left;	
}



.llipse1_circle{
width: 100px;/*幅*/
height: 100px;/*高さ*/
border-radius: 50%;/*角丸*/
background: white;
text-align:center;
line-height: 100px;
font-size: 25px;	
}


.llipse1_texte{
color: white;
margin: 20px 15px;
line-height: 30px;	
}	


.llipse1_texte p{
font-size: 2rem;	
}


.llipse1_texte p span{
font-size: 0.7rem;
}


.llipse1_texte h1{
font-size: 4rem;
margin: -10px;	
}



/* 矢印 */
.llipse1_arrow_pc{
display: block;	
}

.llipse1_arrow_sp{
display: none;	
}

.llipse1_arrow_pc{
float: left;	
font-size: 40px;
color: white;
padding: 25px;	
}




/* 楕円アイコン2 */

.llipse2_texte{
float: left;	
}

.llipse2_circle{
float: left;	
}



.llipse2_circle{
width: 100px;/*幅*/
height: 100px;/*高さ*/
border-radius: 50%;/*角丸*/
background: yellow;
text-align:center;
line-height: 100px;
font-size: 25px;	
}


.llipse2_texte{
color: yellow;
margin: 20px 15px;
line-height: 30px;	
}	


.llipse2_texte p{
font-size: 2rem;
}


.llipse2_texte p span{
font-size: 0.7rem;
}


.llipse2_texte h1{
font-size: 4rem;
margin: -10px;
color: yellow;	
}





















/*.second_text {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px;
    border-radius: 8px;
    box-sizing: border-box;
	letter-spacing: 0.05em;  横書きテキストのカーニング調整
}*/ 

/* .bubble {
background-color: #FFFFFF; /* バブルを濃いピンク色に */
/*color: #FFF; /* バブル内テキストを白色に */
/*max-width: 300px;
border-radius: 50px;
padding: 5px;
text-align: center; 
}*/




/*ここから　ご存知ですか　吹き出し*/
.bubble{
max-width: 300px;	
position: relative;
padding: 1rem 1rem 0.1rem 2rem;
border-radius: 30px;
background-color: #FFFFFF;
color: white;
font-weight: bold;
font-size: 26px;
margin-top: 200px;	
}

.bubble:before {
position: absolute;
top: 100%;
left: 60px;
height: 0;
width: 0;
border-style: solid;
border-color: transparent;
border-top-color: #FFFFFF;
border-width: 15px;
content: "";
}

/*ここまで　ご存知ですか　吹き出し*/


.pink-text {
color: deeppink; /* ピンクテキストも白色に変更 */
font-size: 35px;
}

.info {
padding-top: 20px;
width: 1120px;
}

.bold-text {
font-size: 70px;
font-weight: bold;
text-align: center;
color: #FFFFFF;	
}

.detail-text {
font-size: 25px;
text-align: justify;
margin-top: 10px;
color: #FFFFFF;
}

.additional-info {
color: #FFFFFF; /* 追加情報のテキストを濃い色に */
line-height: 1.4em;
font-size: 50px;
font-weight: bold;
text-align: left;
margin-top: 50px;
width: 1150px;

}

.highlight {
font-size: 70px;
color: yellow;
}


.highlight span{
font-size: 80px;	
}



/* ここまで　　ご存知ですか */







/* ここから　　障害者雇用は福祉のプロに */

.third_bg {
background-color: #FFFFE0; /* 薄い黄色の背景 */
height: 900px;
margin: 0;
display: flex;
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
}

.conta {
display: flex; /* フレックスボックス */
align-items: center; /* アイテムを中央揃え */
}

.horizontal-text-left, .horizontal-text-right {
}

.horizontal-text-left {
/*writing-mode: horizontal-tb;  横書き表示 */
/*letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */
font-feature-settings: "palt";	
line-height: 1.3em;	/* 行間の調整 */
margin-right: 20px; /* 右の余白 */
font-size: 40px; /* フォントサイズ */
font-family: 'Meiryo', serif;
font-weight: bold;	
}






.horizontal-text-left p{
/*letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
font-size: 25px; /* フォントサイズ */	
padding-top: 20px;
font-family: "Sawarabi Gothic";	
font-weight: 100;	
}

.horizontal-text-right {
/*letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
line-height: 1.3em;	/* 行間の調整 */	
margin-left: 20px; /* 左の余白 */
order: 3; /* フレックスアイテムの順序 */
font-size: 40px; /* フォントサイズ */
font-family: 'Meiryo', serif;
font-weight: bold;
}

.horizontal-text-right p{
/*letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
line-height: 1.6em;	/* 行間の調整 */		
font-size: 25px; /* フォントサイズ */
padding-top: 20px;
font-family: "Sawarabi Gothic";	
font-weight: 100;	
}

.vertical-text {
writing-mode: vertical-rl; /* 縦書き表示 */
font-size: 90px; /* フォントサイズ */
color: deeppink;
line-height: 1.3em;	/* 行間の調整 */	
text-align: center; /* 中央揃え */
order: 2; /* フレックスアイテムの順序 */
letter-spacing: 0.1em; /* 縦書きテキストのカーニング調整 */
font-family: "M PLUS 1p";  /*グーグルフォント */
font-weight: bold;		
}

/* ここまで　　障害者雇用は福祉のプロに */





/*.third-img-pc{
display: block;	
}	
	
	
.third-img-sp{
display: none;	
}	*/













/* ナビメニューここから*/


a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}






@media screen and (min-width: 960px) {
  .header__title {
    width: 120px;
  }
}

.header__title img {
  display: block;
  width: 100%;
  height: 100%;
}

.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #fff;
  transition: ease .4s;
  padding-top: 8px;
	
}


@media screen and (min-width: 960px) {
  .header__nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 100%;
  }
}


@media screen and (min-width: 960px) {
  .nav__items {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-evenly;
  }
}

.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}


@media screen and (min-width: 960px) {
  .nav-items {
    padding-top: inherit;
    padding-bottom: inherit;
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }
}

.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
  font-size: 1rem;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
  .nav-items__item a {
    margin-bottom: 0;
  }
}


/* ハンバーガーメニュー */

.button-bg{
background:#FFFFFF;
width: 100%;
margin-top:20px;
}


.header__hamburger {
  width: 48px;
  height: 100%;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
  
}

@media screen and (min-width: 960px) {
  .hamburger {
    display: none;
	  
  }
}


.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #000;
  position: relative;
  transition: ease .4s;
  display: block;	
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}


/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
} 

/*ここまで*/



/*ボタン ここから*/

.botton-info{
margin-top: 80px;	
}





.button{
font-size: 1.1rem;
background: #4689FF;
color: #FFFFFF;
border-radius: 20px;
padding: 12px 70px;
}

.button:hover{
background: #8EB8FF;	
}




/*問い合わせフォーム ここから*/
.Inquiryform  {
font-size: 1.6rem;
font-weight: bold;
margin-top: 80px;	
}














/*挨拶 ここから*/


.mission-bg{
background: #D7EEFF;
height: 400px;
background-size: cover;	
background-position: center top;
}



.mission-info{
padding-top: 90px;
max-width: 1200px	
}



.mission-title1{
line-height: 15px;	
}


.mission-title1 h1{
color:#000080;
font-size: 1.9rem;
text-align: center;	
}


.mission-title1 p{
color:#4689FF;
font-size: 1.8rem;
text-align: center;	
}


.mission-komento{
font-size: 1.2rem;
padding-top: 10px;
line-height: 35px;
}

/*ここまで*/





/*組合セクション背景*/
.section-bg{
background: #FFFFFF;
height: 1450px;		
}

/*組合紹介 ここから*/
/*.button{
font-size: 1.1rem;
background: #4689FF;
color: #FFFFFF;
border-radius: 20px;
padding: 12px 70px;
}

.button:hover{
background: #8EB8FF;	
}*/


.shokai-img{
width: 350px;
height: auto;
}


.shokai{
display: flex;
padding-top: 70px;
}

.shokai-info{
max-width: 800px;
padding-right: 70px;

}

.shokai-title1{
border-bottom: 2px solid #4689FF;
}

.shokai-title1 h4{
color: #4689FF;	
}

.shokai-komento p{
padding-top: 20px;
padding-bottom: 20px;
}
/*ここまで*/




/*組合施設 ここから*/
.shisetsu{
display: flex;
padding-top: 150px;	
}

.shisetsu-img{
width: 350px;
height: auto;
}


.shisetsu-info{
max-width: 800px;
padding-left: 70px;
}

.shisetsu-title1{
border-bottom: 2px solid #4689FF;
}

.shisetsu-title1 h4{
color: #4689FF;	
}


.shisetsu-komento h5{
padding-top: 20px;	
}



.shisetsu-komento p{
padding-top: 10px;
padding-bottom: 20px;	
}
/*ここまで*/

/*事業の内容　ここから*/



.naiyou-title1{
border-bottom: 2px solid #4689FF;
}

.naiyou-title1 h4{
color: #4689FF;	
	margin-top: 150px;
}


.naiyou-komento h4{
	
}



.naiyou-komento p{
padding-top: 10px;
padding-bottom: 20px;	
}








/*カテゴリー　ここから*/
.category-iner{
display: flex;
justify-content: space-around;
padding-top: 150px;	
}

.category-iner img{
width: 350px;
height: auto;	
}
/*ここまで*/




/*リンクとアドレス　ここから*/

/*.link-menu-iner{
display: flex;
width: 100%;
text-align: center;
justify-content: space-around;
padding: 0px 0px;
margin-top: -120px;	
}

.link-menu-iner a{
font-size: 0.9rem;	
}*/


.link-address-info{
text-align: center;
line-height: 15px;
padding-top: 100px;	
}


.link-address-info a{
color: #000000;	
font-size: 1.3rem;
line-height: 2em;	
}












/*フッター　ここから*/
.footer-bg{
background: #000080;
height: 50px;
margin-top: 50px;	
}

.footer-info p{
text-align: center;
padding-top: 15px;
color: #FFFFFF;
font-size: 0.7rem;	
}














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


.wrapper{
margin: 0 auto;
padding: 0 6%;
}	
	
	
	
.tel-accsess{
margin-top: -15px;
}
	
	
.rogo_pc{
display: none;	
}


.rogo_sp{
display: block;
transform: scale(0.8, 0.8);
padding-left: 0px;
padding-top: 20px;	
}	
	
		

.tel-number-instagram{
display: flex;
padding-top: 20px;

	
}	
		
	
	
.tel-number_pc  img {
display: none;
}

	
.tel-number_sp  img {
display: block;
}	
	
	
.tel-number_sp  img {
transform: scale(0., 0.);
padding-right: 20px;
}	

	
.test-bg{
width: 100%;	
height: 120px;
position: fixed;
z-index: 999;	
}	


	
	
/*トップ画像 ここから*/	
.top-img-pc{
display: none;	
}


.top-img-sp{
display: block;	
padding-top: 80px;	
}	
	

.second-img-pc{
display: none;	
}	
	
	
.second-img-sp{
display: block;	
}	


	
/*ここから 最新情報*/
.inframe-pc{
display: none;	
}


.inframe-sp{
display: block;
}

	
	
.info_title h4{
font-weight: bold;
font-size: 1.3rem;
font-feature-settings: "palt";
font-family: 'Meiryo', serif;	
}	
	

.information{
padding: 50px 50px;
}	
	

	

	
	
	
	
	

/* ここから　　段階的な引き上げ */

.second_text_title h1{
font-size: 1.4rem;
}


.second_text_title p{
font-size: 0.7rem;
text-align: left;	
}




	
	
	
	
	
	

/* 楕円アイコン1 */


.llipse1_circle{
width: 55px;/*幅*/
height: 55px;/*高さ*/
border-radius: 50%;/*角丸*/
background: white;
text-align:center;
line-height: 55px;
font-size: 15px;
font-weight: bold;	
}


.llipse1_texte{
color: white;
margin: 7px 7px;
line-height: 25px;	
}	


.llipse1_texte p{
font-size: 1.5rem;	
}


.llipse1_texte p span{
font-size: 0.5rem;
}


.llipse1_texte h1{
font-size: 2.7rem;
margin: 0px;	
}



/* 矢印 */
.llipse1_arrow_pc{
display: none;	
}

.llipse1_arrow_sp{
display: block;
font-size: 35px;
color: white;
line-height: 30px;
clear:both;
text-align: center;
}	
	
	




/* 楕円アイコン2 */

.llipse2_texte{
float: left;	
}

.llipse2_circle{
float: left;	
}



.llipse2_circle{
width: 55px;/*幅*/
height: 55px;/*高さ*/
border-radius: 50%;/*角丸*/
background: yellow;
text-align:center;
line-height: 55px;
font-size: 15px;
font-weight: bold;	
}


.llipse2_texte{
color: yellow;
margin: 7px 7px;
line-height: 25px;	
}	


.llipse2_texte p{
font-size: 1.5rem;
}


.llipse2_texte p span{
font-size: 0.5rem;
}


.llipse2_texte h1{
font-size: 2.7rem;
margin: 0px;
color: yellow;	
}
	

	
	
	
	
	
	
	
	
/* ここから　　ご存知ですか */

.second_text{
padding-top: 145px;	
}	
	
	
	
/*.second_text {
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border-radius: 0px;
box-sizing: border-box;
letter-spacing: 0.05em;  横書きテキストのカーニング調整
} */



.second_bg {
font-family: 'Arial', sans-serif;
background-color: deeppink; /* ピンク色の背景 */
color: #333; /* 濃いテキストカラーで読みやすく */
padding: 0px;
margin-top: -90px;
height: 800px;	
width: auto;	
/*box-sizing: border-box;*/
}	

/*.second-comento_inr{
margin-top: -20px;	
}*/
	
	
	
/* ここから　　障害者就労専門職との */	
	
.second-comento h1{
font-size: 1.4rem;	
margin-top: 40px;	
}	

/*.second-comento h1 br{
display: none;	
}*/
	
		
.second-comento p{
font-size: 15px;
max-width: 340px;
margin-top: 20px;
}	
	
	
	
	
	
.second-comento{
margin-top: 80px;
}	
	
	
	
	
	
/*ここから　ご存知ですか　吹き出し*/
	
.bubble_bg{
margin-top: -80px;	
}
	
	
	
.bubble{
max-width: 200px;	
position: relative;
padding: 0.3rem 0.3rem 0rem 1.6rem;
border-radius: 30px;
background-color: #FFFFFF;
color: white;
font-weight: bold;
font-size: 20px;
}

.bubble:before {
position: absolute;
top: 100%;
left: 45px;
height: 0;
width: 0;
border-style: solid;
border-color: transparent;
border-top-color: #FFFFFF;
border-width: 13px;
content: "";
}

/*ここまで　ご存知ですか　吹き出し*/	
	
	
	
.pink-text {
color: deeppink; /* ピンクテキストも白色に変更 */
font-size: 22px;
}

.info {
padding-top: 0px;	
max-width: 340px;
}


		
	
.bold-text {
font-size: 1.3rem;
font-weight: bold;
text-align: left;
color: #FFFFFF;
line-height: 1.2em;	
}

.detail-text {
font-size: 0.9rem;
/*text-align: justify;*/
margin-top: 5px;
max-width: 340px;	
color: #FFFFFF;
}

.additional-info {
color: #FFFFFF; /* 追加情報のテキストを濃い色に */
line-height: 1.6em;
font-size: 25px;
font-weight: bold;
text-align: left;
margin-top: 30px;
max-width: 360px;
}

.highlight {
font-size: 40px;
color: yellow;
}


.highlight span{
font-size: 50px;
line-height: 1.1em;	
}	
	
	
/* ここまで　　ご存知ですか */	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

/* ここから　障害者雇用は福祉のプロに */
	
	
.conta {
flex-direction: column; /* アイテムを縦に並べる */
}
	
.horizontal-text-left, .horizontal-text-right, .vertical-text {
writing-mode: horizontal-tb; /* すべて横書き表示に */
text-align: center; /* テキストを中央揃え */
margin: 10px 0; /* 上下の余白 */
}
	
.vertical-text {
order: 1; /* 縦書きテキストを先頭に */
}	
	

.horizontal-text-left {
letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
line-height: 1.3em;	/* 行間の調整 */
margin-right: 20px; /* 右の余白 */
font-size: 28px; /* フォントサイズ */
font-family: 'Meiryo', serif;
font-weight: bold;	
}

.horizontal-text-left p{
letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
font-size: 20px; /* フォントサイズ */	
padding-top: 10px;
font-family: "Sawarabi Gothic";	
font-weight: 100;
text-align: left	
}

.horizontal-text-right {
letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
line-height: 1.3em;	/* 行間の調整 */	
order: 3; /* フレックスアイテムの順序 */
font-size: 28px; /* フォントサイズ */
font-family: 'Meiryo', serif;
font-weight: bold;
padding-top: 10px;
}

.horizontal-text-right p{
letter-spacing: 0.05em; /* 横書きテキストのカーニング調整 */	
line-height: 1.8em;	/* 行間の調整 */		
font-size: 16px; /* フォントサイズ */
margin-left: 20px; /* 左の余白 */	
padding-top: 10px;
font-family: "Sawarabi Gothic";	
font-weight: 100;
text-align: left	
}

.vertical-text {

font-size: 40px; /* フォントサイズ */
color: deeppink;
line-height: 1.1em;	/* 行間の調整 */	
text-align: center; /* 中央揃え */
order: 2; /* フレックスアイテムの順序 */
letter-spacing: 0.1em; /* 縦書きテキストのカーニング調整 */
font-family: "M PLUS 1p";  /*グーグルフォント */
 font-weight: bold;		
}	
	
	
	
	
	
/* ここからまで　障害者雇用は福祉のプロに */	
	
	
	
	
	
	
/*.third-img-pc{
display: none;	
}	
	
	
.third-img-sp{
display: block;	
}*/		
	
	
	
	
	
	
	
	
	
	
.mission-bg{
height: 600px;	
}	

	
.section-bg{
height: 2650px;	
}	
	
	
	
/*組合紹介 ここから*/	
.shokai{
flex-direction: column; 	
}	
	
.shokai-img{
margin-top: 50px;	
}
	
.shokai-info{
max-width: 480px;
padding-right: 0px;
}	
	
	
	
/*組合施設 ここから*/	
.shisetsu{
flex-direction: column-reverse; 	
}	
	
.shisetsu-img{
margin-top: 50px;	
}	
	

.shisetsu-info{
max-width: 480px;
padding-left: 0px;
}	
	

/*カテゴリー ここから*/	
.category-iner{
flex-direction: column;	
}		

.category-iner img{
padding-top: 30px;
text-align: center;	
}	
	
	
/*リンクとアドレス  ここから*/	
.link-menu-iner{
display: block;
text-align: center;
}

	
.link-address-info{
padding-top: 100px;	
}	
	

.link-address-info a{
font-size: 1rem;
line-height: 2em;	
}
	

	
	
/*お問合せフォーム  ここから*/
.Inquiryform {
font-size: 1rem;
line-height: 1.2rem;	
}
	
	

	
	
	
	
	
	
/*電話番号  ここから*/
.tel-number  a span{
font-size: 0.7rem;	
}	

	
.tel-number li {
font-size: 0.8rem;
line-height: 1.3rem;	
}		
	
	
/*フッターロゴ  ここから*/	
.footer-rogo{
transform: scale(0.8, 0.8);
}	
	

.footer-info p{
font-size: 0.5rem;	
}	
	
		

	
	
}