@charset "utf-8";

/* 共通部分
　　----------------------------------------------------------------- */

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

body {
  overflow-x: clip;
}

/*　絆福祉会　ロゴの位置設定　*/
.logo img{
    position: absolute; 
    text-align: left;
    margin-left: 0.2rem;
    z-index: 101;
    width: 22%;
}

/* スライドショーの表示位置と大きさの指示 */
.slider {
  width: 100%;
  aspect-ratio: 2.6 / 1;/*縦横比が 2:1*/
  overflow: hidden;
  position: relative;
  max-width: 1800px;/*横幅1800px以上は拡大しない*/
}

.slider div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 2.6 / 1;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 36s;
  animation-iteration-count: infinite;
}

@keyframes fade {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  95%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}

/* 1枚目のスライド */
.slider>div:first-of-type{
  background-image: url("../images/ansko/AS_P_L_01.webp");
}

/* 2枚目のスライド */
.slider>div:nth-of-type(2){
  background-image: url("../images/ansko/AS_P_L_02.webp");
   animation-delay: 6s;
}

/* 3枚目のスライド */
.slider>div:nth-of-type(3){
  background-image: url("../images/ansko/AS_P_L_03.webp");
   animation-delay: 12s;
}

/* 4枚目のスライド */
.slider>div:nth-of-type(4){
  background-image: url("../images/ansko/AS_P_L_04.webp");
   animation-delay: 18s;
}

/* 5枚目のスライド */
.slider>div:nth-of-type(5){
  background-image: url("../images/ansko/AS_P_L_05.webp");
   animation-delay: 24s;
}

/* 予備のスライド１ [#]にファイル名を入力してください */
/*.slider>div:nth-of-type(6){
  background-image: url("../images/#/#.webp");
   animation-delay: 30s;
}*/

/* 予備のスライド２ [#]にファイル名を入力してください*/
/*.slider>div:nth-of-type(7){
  background-image: url("../images/#/#.webp");
   animation-delay: 36s;
}*/

/* 最後のスライド */
.slider>div:last-of-type{
  background-image: url("../images/ansko/AS_P_L_06.webp");
   animation-delay: 30s;
}

/* スライドに重ねて乗せるコピー ********
住み慣れた地域で暮らし続けたい・・・ ********* */

.message {
	position: absolute;
	background-color: rgba(10,10,10,30%);
	z-index: 200;
	width: 100%;
	top: 10;
	left: 50%;
	transform: translate(-50%,-100%);
	margin: 0;
	padding: 0;
}

.message p {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	text-align: center;
	font-size: 2.5vw;
	color: #fff;
	font-weight: 600;
}



/* -------------- スマホサイズのスライドショー ---------------- */

.slider-s {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  overflow: hidden;
  position: relative;
  max-width: 800px;
}

.slider-s div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1.6 / 1;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 11;
  opacity: 0;
  animation-name: fade;
  animation-duration: 36s;
  animation-iteration-count: infinite;
}

@keyframes fade {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  95%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}

/* 1枚目のスライド */
.slider-s>div:first-of-type{
  background-image: url("../images/ansko/AS_P_S_01.webp");
}

/* 2枚目のスライド */
.slider-s>div:nth-of-type(2){
  background-image: url("../images/ansko/AS_P_S_02.webp");
   animation-delay: 6s;
}

/* 3枚目のスライド */
.slider-s>div:nth-of-type(3){
  background-image: url("../images/ansko/AS_P_S_03.webp");
   animation-delay: 12s;
}

/* 4枚目のスライド */
.slider-s>div:nth-of-type(4){
  background-image: url("../images/ansko/AS_P_S_04.webp");
   animation-delay: 18s;
}

/* 5枚目のスライド */
.slider-s>div:nth-of-type(5){
  background-image: url("../images/ansko/AS_P_S_05.webp");
   animation-delay: 24s;
}

/* 予備のスライド１ [#]にファイル名を入力してください*/
/*.slider-s>div:nth-of-type(6){
  background-image: url("../images/#/#.webp");
   animation-delay: 30s;
}*/

/* 予備のスライド２ [#]にファイル名を入力してください*/
/*.slider-s>div:nth-of-type(7){
  background-image: url("../images/#/#.webp");
   animation-delay: 36s;
}*/

/* 最後のスライド */
.slider-s>div:last-of-type{
  background-image: url("../images/ansko/AS_P_S_06.webp");
   animation-delay: 32s;
}

.message-s {
	position: absolute;
	background-color: rgba(10,10,10,30%);
	z-index: 200;
	width: 100%;
	top: 10;
	left: 50%;
	transform: translate(-50%,-100%);
	margin: 0;
	padding: 0;
}

.message-s p {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	text-align: right;
	font-size: 4vw;
	color: #fff;
	font-weight: 600;
	margin-right: 20px;
}

/*　施設名と住所の記述 ------------- */
.name-add { /* 全体の記述 */
    position: relative;
    display: flex;
    width: 96%;
	margin: 2em auto 0;
}

.name-add p { /* 住所と電話番号の表示設定 */
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    display: block;
    text-align: right;
	font-size: 2.6vw;
	font-weight: 600;
	line-height: 2.6vw;
	width: 45%;
	margin: 0 auto 0 0;
}

.name-add span {
	font-size: 2vw;
}

.name-add table {
    border: 2px solid #C4C4C4;
    border-radius: 20px;
}

.name-add tr {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1.8vw;
	color: #3E3E3E;
}

.name-add td {
	background-color: #F9FDB7;
	padding: 4px 10px;
	font-weight: 600;
}

.name-add th {
	padding: 4px 10px;
}

.td-top {
    border-top-left-radius: 20px;	
}

.td-bottom {
	border-bottom-left-radius: 20px;
}

.th-top {
	background-color: #E1E1E1;
	border-top-right-radius: 20px;
}

.th-middle {
	background-color: #E1E1E1;
}

.th-bottom {
	background-color: #E1E1E1;
	border-bottom-right-radius: 20px;
}

.separate-line {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid #51B77F 3px;
	margin-top: 1em;
}

/* 事業所名以下の全体ひとまとめ */
.contents {
    position: relative;
    width: 96%;
    margin: 0 auto;
}

/* あんすこのロゴマークと全体説明文 */
.main-info {
	display: flex;
	width: 96%;
	gap: 1%;
	margin: 1em auto 0;
}

.main-info-img {
	width: 20%;
}

.main-info img {
	width: 100%;
}

.main-info-p {
	margin:  auto ;
	width: 70%;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 1.8vw;
	line-height: 3.2vw;
}



/* 主な相談内容 ******** */
.sub-title01 {
	position: relative;
	width: 96%;
	margin: 5em auto 0;
}

.sub-title01 p {
    position: relative;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 2.6vw;
    font-weight: bolder;
    color: #1F1F1F;
    margin-left: 0.2em;
    width: 65%;
    line-height: 4.5vh;
}

.under-line {
    position: relative;
    width: 100%;
    display: flex;
}

.title-underline-01 {
    border-left: none;
    border-right: none;
    border-top: none;
    width: 19%;
    border-bottom: 3px solid #ADDC30;
}

.title-underline-02 {
    border-left: none;
    border-right: none;
    border-top: none;
    width: 81%;
    opacity: 40%;
    border-bottom: 3px solid #B4BEC3;
}

/* 主な相談内容の全体枠 */
.info-01 {
    position: relative;
    display: block;
	gap: 3%;
    width: 94%;
    margin: 1em auto 0;
}


/* 相談内容と電話連絡先 */
.text-info{
	display: flex;
	width: 96%;
	margin: 0 auto; 
}

/* 箇条書きの相談内容の制御記述 */
.text01 {
	position: relative;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	width: 98%;
	margin: 0.5em 2% 0;
}
/* 相談内容の文字制御 */
.text01 ul {
	margin-left: 1em;
	font-size: 2vw;
	line-height: 4vw;
}

/* 電話24時間受付の枠の制御 */
.contact {
	width: 100%;
}

/* 「東垂水あんしんすこやかセンター」の文字 */
.contact h3 {
    background-color: #6CAD62;
    text-align: center;
    color: #FFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	padding-top: 4px;
}

/* 電話番号記述部の枠 */
.contact-bottom {
	border: solid #6CAD62 2px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.contact p,.contact h2 {
	padding: 3px 0 0 10px;
}
/* お電話は２４時間 部分の文字制御*/
.contact p {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 2.0vw;
	color: #5F5353;
}

/* お気軽にお電話ください の文字制御 */
.contact span {
	font-size: 2.6vw;
	font-weight: 700;
}

/* 電話番号 */
.contact h2 {
	color: #4C96C5;
	text-align: center;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 3.5vw;
	line-height: 3vw;
	margin-top: 10px;
}

/* 主な相談内容項目の写真部分 */

/*.photo-group01 {
	width: 94%;
	display: flex;
	margin: 2em auto 0;
}*/

/* 男性職員発言中・事務所引き画像 */
.photo-group01a {
	width: 96%;
	display: flex;
	margin: 2em auto 0;
	gap: 0.3%;
}

.p01 {
	width: 60%;
	flex-grow: 1;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center;
}

.photo-group01b {
	width: 40%;
	display: flex;
	gap: 1%;
}

.p02 {
	width: 10%;
    flex-grow: 1;
    object-fit: cover;
	object-position: center 5%;
}



.separate-line02 {
	margin: 0 auto 20px;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: solid #FF91C1 4px;
	width: 86%;
	
}

.blank_line {
	margin-top: 0.5em;
}
.tb-size {
	display: none;
}


/* 担当地域 ************************************* */

.sub-title02 {
	position: relative;
	width: 96%;
	margin: 6em auto 0;
}

.sub-title02 p {
    position: relative;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 2.6vw;
    font-weight: bolder;
    color: #1F1F1F;
    margin-left: 0.2em;
    width: 48%;
    line-height: 4.5vh;
}

.title-underline-03 {
    border-left: none;
    border-right: none;
    border-top: none;
    width: 13%;
    border-bottom: 3px solid #ADDC30;
}

.title-underline-04 {
    border-left: none;
    border-right: none;
    border-top: none;
    width: 87%;
    opacity: 40%;
    border-bottom: 3px solid #B4BEC3;
}

/* 担当地域 *********************** */
.info-02 {
	position: relative;
	display: block;
	margin: 1em auto 6em;
	width: 92%;
}


/* 担当地域の文字情報と自転車に跨る職員さんの写真 */
.info-02-t-p {
	display: flex;
	gap: 1%;
}

.info-02-t-p img{
	height: 240px;
	object-fit: cover;
	margin-top: 1.2em;
}

/* 自転車に乗る職員さんの写真 */

.p03 {
	flex-grow: 1;
	width: 20%;
	aspect-ratio: 1/ 1.5;
	object-fit: cover;
}

/* 担当地域の文字情報 */
.text02 {
	position: relative;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 1.8vw;
	line-height: 3.8vw;
	margin: 1em auto;
	width:100%;
	text-align: center;
}

/* 東垂水のふれあいまつり参加時の写真と紹介文 */

.info-02-t-p02 {
	display: flex;
	gap: 1%;
	width: 100%;
	margin: 0 auto 6em;
}

.p04{
	width: 45%;
	flex-grow: 1;
	aspect-ratio: 2.8 / 1 ;
	object-fit: cover;
	object-position: center;
}

.text03 {
	text-align: left;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 1.9vw;
	line-height: 3.8vw;
	padding: 6% 0 ;
}

.separate-line03 {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: dashed #6A6A6A 1px;
	margin: 2em auto;
	width: 96%;
	opacity: 20%;
	
}

.dtsp-size,.sp-size {
	display: none;
}

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

.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: 0px;
	right: 2%;
	z-index: 202;
}

.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;
}

/* トップへ・トップページへボタンの制御記述 */
@media (min-width: 1600px) {
	.for_top_page {
		left: calc(50% + 720px);
	}
	
	.for_top {
		left: calc(50% + 720px);
	}
	
	.logo img {
		width: 14%;
	}
	
	.message p {
		font-size: 36px;
	}
	
	.name-add p {
		font-size: 36px;
	}
	
	.name-add span {
		font-size: 28px;
	}
	
	.sub-title01 p {
		font-size: 38px;
		line-height: 38px;
	}
	
	.text01 li ,.text02 li {
		font-size: 28px;
		line-height: 46px;
	}
	
	.th-top {
		font-size: 30px;
	}
}


/* フッターの制御記述 */


.copyright {
	background-image: url("../images/footer.webp");
	background-size: cover;
	text-align: center;
	margin-top: -0.6em;
	color: #fff;
}

/* ----- デスクトップ用記述 800px以上----- */
@media(min-width: 801px){
	
	body {
		max-width: 1600px;
		margin: 0 auto ;
	}
	
	.slider-s {
		display: none;
	}
	
	.message-s {
		display:none;
	}
	
	.sp-size {
		display: none;
	}
	
	.tbsp-size {
		display: none;
	}
	
	.dttb-size {
		display: block;
	}
	
	.photo-group01-s {
		display: none;
	}
	
	.info-02-S {
		display: none;
	}
	
}
	

/* ----- タブレット用記述 500～800px----- */
@media(max-width: 800px){

/* ロゴの大きさ */
	.logo img {
		width: 30%
	}
	
/*　他サイズの改行位置指定を無視するための記述 */	
	.dt-size,.sp-size {
		display: none;
	}

/* タブレットサイズに有効な改行位置 */	
	.tb-size {
		display: block;
	}

/* デスクトップサイズのスライドショーは表示しない */
	.slider {
		display: none;
	}
	
	.message {
		display: none;
	}

/* 住所他基本データ */
	.name-add {
		display: block;
		gap: 4%;
	}
	
	.name-add table {
		width: 80%;
		margin: 1em auto;
	}
	
	.name-add tr {
		font-size: 2.4vw
	}
	
	.name-add td {
		width: 30%;
		padding-left: 1em;
	}
	
	.name-add p {
		font-size: 3.5vw;
		line-height: 3.5vw;
		width: 60%;
		margin: 0 0 0 auto;
	}
	
	.name-add span {
		font-size: 3vw;
	}
	
/* あんすこの説明文 ************************ */
	.main-info {
		width: 86%;
		margin: 2em auto;
	}
	
	.main-info-p p {
		font-size: 2.8vw;
		line-height: 4vw;
		margin-left: 1em;
	}
	
	.main-info-img img{
		width: 100%;
	}

/* サブタイトル */
	.sub-title01 p,.sub-title02 p {
		font-size: 4vw;
		width: 86%;
		line-height: 4.5vh;
	}

/* サブタイトルの下のアンダーライン
	奇数が黄緑、偶数がグレー */
	
/* 主な相談内容のアンダーライン　*/
	.title-underline-01 {
		width: 28%;
	}
	
	.title-underline-02 {
		width: 72%;
	}

/* 担当地域のアンダーライン*/	
	.title-underline-03 {
		width: 20%;
	}
	
	.title-underline-04 {
		width: 80%;
	}
  

	
 /* 主な相談内容 */
	.info-01 {
		margin-top: 0em;
	}
	
	.text01 li {
		width: 90%;
		font-size: 2.6vw;
		line-height: 3.5vh;
		margin:0 0 0 0 ;
	}
	
	.contact {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
	.contact p {
		font-size: 2.2vw;
		padding-top: 0.2em;
	}
	
	.photo-group01a {
		display: block;
	}
	
	.photo-group01a img {
		width: 100%;
	}
	
	h3 {
		font-size: 2.5vw;
	}
	
	.photo-group01 {
		display: none;
	}
	
	.photo-group01-s {
		display: block;
		width: 96%;
		margin: 2em auto 0+
	}
	
	.p01-s {
		width: 100%;
	}
	
	
	.photo-group01b-s {
		display: flex;
		gap: 1%;
		width: 100%;
	}
	
	.p02-s {
		flex-grow: 1;
		width: 32%;
		aspect-ratio: 1 / 1.5;
		object-fit: cover;
		object-position: right 40%;
	}
	
	.p03-s {
		flex-grow: 1;
		width: 32%;
		aspect-ratio: 1 / 1.5;
		object-fit: cover;
		object-position: right 10%;
	}
	
	.p04-s {
		flex-grow: 1;
		width: 32%;
		aspect-ratio: 1 / 1.5;
		object-fit: cover;
		object-position: right center;
	}
	
/*	@-moz-document url-prefix(){
    .p02 {
      
		}*/
	
/* 担当地域・地名 */
	.text02 {
		font-size: 3vw;
		line-height: 5vw;
		margin-top: 0em;
	}
	
	.info-02-t-p img{
		margin-top: 0em;
	}
	
	.info-02 {
		display: block;
		margin: 1em auto;
		width: 94%;
	}
	
	.info-02-t-p02  {
		display: block;
		margin-bottom: 0em;
	}
	
	.p04 {
		width: 100%;
		margin-bottom: 0;
	}

	.text03 {
		font-size: 3vw;
		line-height: 4.8vw;
		margin: -1.5em 15% 0 ;
	}
	
	.dttb-size {
		display: block;
	}
	
	.info-02-S {
		display: none;
	}
	
}


/* -----スマホ用記述---- */
@media(max-width: 500px){
	
	.slider {
		display: none;
	}
	
	.message {
		display: none;
	}
	
	.dt-size,.tb-size {
		display: none;
	}
	
	.name-add {
		width: 96%;
		display: block;
	}
	
	.name-add p {
		width: 100%;
		text-align: right;
		font-size: 5.5vw;
		line-height: 5vw;
	}
	
	.name-add span {
		font-size: 4vw;
	}
	
	.name-add table {
		width: 98%;
	}
	
	.name-add tr {
		font-size: 3.5vw;
	}
	
	.main-info {
		display: block;
		width: 98%;
	}
	
	.main-info-img  {
		width: 50%;
		margin: 0 auto 
	}
	
	.main-info-p {
		width: 100%;
	}
	
	.main-info-p p{
		width: 100%;
		font-size: 5vw;
		line-height: 6.5vw;
		margin: 0 0;
	}
	
	.text-info {
		display: block;
	}
	
	.text01 li {
		width: 96%;
		font-size: 5vw;
	}
	
	.contact p {
		font-size: 4.5vw;
	}
	
	.contact span {
		font-size: 5vw;
	}
	
	.contact h2 {
		font-size: 8vw;
		margin-top: 0.5em;
	}
	
	.separate-line02 {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
	
	
	.sp-size {
		display: block;
	}
	
	.dttb-size {
		display: none;
	}
	

	
	.sub-title01 p,.sub-title02 p {
		font-size: 5vw;
		width: 94%;
		line-height: 7vw;
	}
	
	.title-underline-01 {
		width: 36%;
	}
	
	.title-underline-02 {
		width: 64%;
	}
	
	.title-underline-03 {
		width: 26%;
	}
	
	.title-underline-04 {
		width: 74%;
	}

	
	.text01 {
		width: 98%;
		font-size: 4.2vw;
		line-height: 6.5vw;
	}
	
	.dt-size {
		display: block;
	}
	
	.info-02-t-p {
		display: none;
	}
	
	.p03-S {
		display: flex;
		gap:1%;
		width: 96%;
		margin: 0 auto;
	}
	
	.p03-S img {
		width: 49%;
		flex-grow: 1;
		aspect-ratio: 1 / 1 ;
		object-fit: cover;
		object-position: center top;
	}
	
	
	
	.text02 p {
		font-size: 4.2vw;
		line-height: 6.5vw;
	}

	.text03 {
		font-size: 4.2vw;
		line-height: 6.5vw;
	}
	
	.info-02-S {
		display: block;
	}
	


	.for_top_page {
		position: fixed;
		top: 280px;
}

   .for_top {
	   position: fixed;
	   top: 160px
}
}