@charset "utf-8";


html {
    font-size: 100%;  /* 設定したフォントサイズを正しく表示するための指示*/
}

body {
	margin: 0 0 0 0;
}

.wrapper {
	width: 100%;
	margin: 0 auto 0 ; 
	max-width: 1800px;
}

/* 冒頭のブルーの岩と絆福祉会のロゴ */
#logo {
    position: absolute;
    top: 0;
    left: 20;
	width: 16%;
}

#logo img { /* 絆福祉会ロゴの表示位置・大きさの設定 */
    margin-top: 0.2em;
    margin-left: 1em;
	width: 100%;
}

/* ブルーの岩の写真の設定 */
.top_image img {
	position: relative;
	width: 100%;
    border-bottom: solid #DCFF80 4px;
}

/* メインビジュアル */
/* 外国人スタッフたちの組み写真 */

.main_visual {
	position: relative;
	width: 100%;
	margin: -0.3em auto 0;
	aspect-ratio: 2.6/1;
	overflow: hidden;
	max-width: 1800px;
}

.main_visual p {

    position: absolute;
    background-color: #fff;
    z-index: 101;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
	text-align: center;
	font-weight: 700;
	font-size: 3.3vw;
	line-height: 4.4vw;
	color: #629AC3;
	width: 120%;
	top: 44%;
	left: -9.5%;
	transform: rotate(-1.6deg)
}


.photo_group_01 {
	position: relative;
	display: flex;
	gap: 1%;
	width: 100%;
	aspect-ratio: 5/1;
	margin: -0.6em auto 0;
	overflow: hidden;
}

.p01 img {
	position: absolute;
	width: 30%;

}

.p02 img {
	position: absolute;
	width: 40%;
	left: 30%;
	top: -20%
}

.p03 img {
	position: absolute;
	width: 35%;
	right: 0;
}

.photo_group_02 {
	position: relative;
	display: flex;
	gap: 0;
	width: 100%;
	aspect-ratio: 4.5/1;
	margin: 0 auto;
	overflow: hidden;
}

.p04 img {
	position: absolute;
	width: 40%;
	left: -3%

}

.p05 img {
	position: absolute;
	width: 35%;
	left: 33%;
	top: -1%;
}

.p06 img {
	position: absolute;
	width: 40%;
	right: 0;
}

.contents_01 {
	position: relative;
	width: 96%;
	margin: 2em auto 0;
}

.contents_01 p {
    position: relative;
    width: 100%;
	margin: 0 auto 0.6em;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 2vw;
	color: #2E2E2E;
}

.contents_02 {
	position: relative;
	width: 96%;
	margin: 4em auto 0;
}

h1 {
	position: relative;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 3vw;
	line-height: 3vw;
	font-weight: 700;
	color: #1760a0;
	z-index: 101;
	margin-left: 0.5em;
}

.sub_title_01 {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid #b3d0d7;
}

h2 {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size: 2.4vw;
    font-weight: 700;
    color: #547EA3;
	margin-left: 1.5em
}

.under_line {
	position: absolute;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid #abedf0 6px;
	width: 68%;
	bottom: 93%;
}

.text_01_L p {
	position: relative;
    width: 86%;
	margin: 1em auto 3em;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 2vw;
	color: #2E2E2E;
}

.text {
	position: relative;
    width: 86%;
	margin: 0.4em auto 3em;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 2vw;
	color: #2E2E2E;	
}

.text p {
	margin-top: 0.6em;
}

.contents_03 {
	position: relative;
	width: 96%;
	margin: 4em auto 0;
}

.pict_01 {
	width: 75%;
	margin: 0.5em auto;
}

.contents_03 img {
	width: 100%;
}

.contents_04 {
	position: relative;
	width: 96%;
	margin: 4em auto 0;
}



/*トップページへ・トップへボタンの制御記述*/
.for_top_page {
	border: solid 2px #6A774C;
	background-color: #FFFFFF;
	opacity: 80%;
	width: 65px;
	height: 65px;
	border-radius: 50px;
	position: fixed;
	top: 300px;
	right: 2%;
	z-index: 1020;
}

.for_top_page a {
    text-decoration: none;
}

.for_top_page p {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	text-align: center;
	font-size: 15px;
	line-height: 14px;
	font-weight: 700;
	color: #6A774C;
	margin: 8px auto;
}

.for_top_page span{
	font-weight: 900;
	font-size:18px;
	line-height: 4px;
}

.for_top_page:hover {
    background-color: #DFDCB1;
}

.for_top {
	border: solid 2px #5B7A80;
	background-color: #FFFFFF;
	opacity: 80%;
	width: 65px;
	height: 65px;
	margin-top: 2em;
	border-radius: 50px;
	position: fixed;
	top: 190px;
	right: 2%;
	z-index: 1020;
}

.for_top p {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    text-align: center;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
	color: #5B7A80;
	margin: 12px auto;
}

.for_top span{
	font-weight: 900;
	font-size:18px;
}

.for_top a {
	text-decoration: none;
}

.for_top:hover {
    background-color: #E4E4E4;
}

/* タブレットサイズ・スマホサイズ表示なし */
.sp_size,.tbsp_size,.tb_size {
	display: none;
}

.blank_line {
	margin-top: 1em
}




/* フッターの制御記述 */
.copyright {
	background-image: url("../images/footer.webp");
	background-size: cover;
	text-align: center;
	margin-top: 4em;
	color: #fff;
}


/* 横幅が1800pxを超えたときの対処記述*/
@media (min-width: 1800px) {
	.for_top_page {
		left: calc(50% + 800px);
	}
	
	.for_top {
		left: calc(50% + 800px);
	}
	
	#logo {
		width: 50%;
	}
	
	#logo img {
		width: 30%;
	}
	
	.main_visual p {
		font-size: 50px;
	}
	
	.contents_01 p{
		font-size: 32px;
	}
	
	.text p {
		font-size: 32px;
	}
	
	.text_01_L p {
		font-size: 32px;
	}
	
	.text_01_S {
		display: none;
	}

}

/* ----- デスクトップ用記述 800px以上----- */
@media(min-width: 801px){
	.tbsp_size,.tb_size,.sp_size{
		display: none;
	}	
	
	.dttb_size {
		display: block;
	}

	.text_01_S {
		display: none;
	}
}

/* ----- タブレット用記述 500～800px----- */
@media(max-width: 800px){
	
	.dt_size,.sp_size {
		display:none;
	}
	.tbsp_size,.dttb_size,.tb_size {
		display: block;
	}

	.contents_01 p {
		font-size: 3.5vw;
		width: 90%
	}
	
	h1 {
		font-size: 4.2vw;
		line-height: 4vw;
	}
	
	h2 {
		font-size: 4vw;
		margin-left: 0.4em;
		margin-top: 2em;
	}
	
	.under_line {
		width: 90%;
		bottom: 93%;
	}
	
	
	.text_01_S p {
		position: relative;
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 3.5vw;
		width: 90%;
		margin: 0.6em auto 0em;
	}

	.text_01_L {
		display: none;
	}
	
	.text p{
		font-size: 3.5vw;
		width: 90%;
	}

}


/* -----スマホ用記述---- */
@media(max-width: 500px){
	
	.dt_size,.tb_size,.dttb_size {
		display: none;
	}
	
	.sp_size {
		display: block;
	}
	
/* ブルーの岩の写真の設定 */
	.top_image img {
		position: relative;
		width: 100%;
		aspect-ratio: 6 / 1 ;
		/*height: 70px;*/
		border-bottom: solid #DCFF80 2px;
}
	
	#logo {
		width: 40%;
	}
	
	.main_visual {
		aspect-ratio: 1/0.8;
	}
	
	.main_visual p {
		font-size: 5vw;
		line-height: 5vh;
	}
	
	.photo_group_01 {
		aspect-ratio: 1/0.4;
	}
	
	.p01 img {
		width: 55%;
		left: -6%;
	}
	
	.p02 img {
		display: none;
	}
	
	.p03 img {
		width: 70%;
		left: 39%
	}
	
	.p04 img {
		width: 70%;
		left: -7%;
		top: 7%;
	}
	
	.p05 {
		display: none;
	}
	
	.p06 img {
		width: 55%;
		top: 20%;
	}
	
	.photo_group_02 {
		aspect-ratio: 2/1;
	}
	
	.contents_01 p {
		font-size: 5vw;
		width: 96%
	}
	
	.under_line {
		top: 2.8%;
		border-bottom: solid #abedf0 4px;
	}
	
	.text_01_S p {
		position: relative;
		font-size: 5vw;
		width: 92%;
		margin: 1em auto 0; 
	}
	
	.text p {
		width: 92%;
		font-size: 4.5vw;
	}

	h1 {
		line-height: 5vw;
	}
}