@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%;
	/*height: 70px;*/
    border-bottom: solid #DCFF80 4px;
}
.contents_01 {
	position: relative;
	width: 88%;
	margin: 0.2em auto 0;
}

/* 垂水区と明石海峡大橋の写真 */
.title_pict {
	position: relative;
	width: 100%;
	margin: -0.3em auto 0;
}

.pict_01 {
	width: 100%;
}

.pict_01 img {
	width: 100%
}


/* ふるさとの地域貢献活動_文字 */
.main_text {
    position: absolute;
	z-index: 101;
	width: 100%;
	top: 0;
	left: 0%;
    transform: translate(0,70%);
}

.main_text p {
    color: rgba(255,255,255,60%);
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    text-align: center;
    font-size: 5vw;
    line-height: 6vw;
    font-weight: 600;
    letter-spacing: 10px;
}

/* 地域貢献活動を行う理由_文字　*/
.text_01 {
    position: relative;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 2vw;
    color: #4B3D3E;
    width: 90%;
    text-align: left;
    z-index: 110;
	margin: 0 auto;
}

/* ぷくすけ「ふるさと夏祭り」*/
.pukusuke_01 {
	position: absolute;
	width: 40%;
	top: 70%;
	left: 15%;
}

.puku01 {
	width: 50%;
	position: absolute;
	z-index: 101;
	transform: rotate(25deg);
	top: 27%;
	left: -4%;
}

.bubble01 {
	position: relative;
	z-index: 1;
	transform: rotate(-10deg);
}

.bubble01 img {
	z-index: 1;
	width: 40%;
    top: 0;
	left: 0;
	transform: translate(73%,-28%);
}

.puku_line01{
    position: absolute;
    color: #72BDD8;
    font-family: "Osaka-mono", "MS Gothic", "monospace";
    font-size: 3vw;
    line-height: 4vw;
    font-weight: 700;
    text-align: center;
    z-index: 102;
    top: -2%;
    left: 32%;
}

/* ふるさと夏祭りの写真3枚組 */
.photo_group01 {
	display: flex;
	width: 90%;
	gap: 1%;
	margin: 1em auto;
}

.p01,.p02,.p03 {
	width: 5%;
	flex-grow: 1;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 清掃活動 */
.contents_02 {
	position: relative;
	width: 88%;
	margin: 10em auto 0;
}

.photo_group02 {
	display: flex;
	width: 90%;
	gap: 1%;
	margin: 1em auto;
}


.p04,.p05,.p06 {
	width: 5%;
	flex-grow: 1;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ぷくすけ「海岸清掃」*/
.pukusuke_02 {
	position: absolute;
	width: 40%;
	top: 78%;
	right: 0%;
}

.puku02 {
	width: 50%;
	position: absolute;
	z-index: 101;
	top: 35%;
	right: 0;
	
}

.bubble02 {
	position: relative;
	z-index: 1;
	transform: rotate( 10deg) ;
	
}

.bubble02 img {
	z-index: 1;
	width: 40%;
    top: 0;
	left: 0;
	transform: translate( 80%,-40%);
}

.puku_line02 {
    position: absolute;
    color: #60CBAF;
    font-family: "Osaka-mono", "MS Gothic", "monospace";
    font-size: 3vw;
    line-height: 3.2vw;
    font-weight: 700;
    text-align: center;
    z-index: 102;
    top: -15%;
    left: 33.5%;
}

/* 東垂水ふれあいの文化祭 */
.contents_03 {
	position: relative;
	width: 88%;
	margin: 6em auto 0;
}

.photo_group03 {
	display: flex;
	width: 90%;
	gap: 1%;
	margin: 1em auto;
}

.p07,.p08,.p09 {
	width: 5%;
	flex-grow: 1;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ぷくすけ「東たるみふれあいの文化祭」*/
.pukusuke_03 {
	position: absolute;
	width: 40%;
	top: 70%;
	left: 5%;
}

.puku03 {
	width: 50%;
	position: absolute;
	z-index: 101;
	top: 35%;
	left: 10%;
}

.bubble03 {
	position: relative;
	z-index: 1;
	transform: rotate( -10deg) ;
	
}

.bubble03 img {
	z-index: 1;
	width: 50%;
    top: 0;
	left: 0;
	transform: translate( 80%,-40%);
}

.puku_line03 {
    position: absolute;
    color: #7891A3;
    font-family: "Osaka-mono", "MS Gothic", "monospace";
    font-size: 3vw;
    line-height: 3.2vw;
    font-weight: 700;
    text-align: center;
    z-index: 102;
    top: -15%;
    left: 43%;
}


/* ほっとかへんネットたるみ */

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

.do_you_know {
	display: flex;
	margin: 0 auto 1em;
	gap: 0.2%;
}

.text_02 {
    width: 38%;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 2vw;
	color: #5b5c76;
	margin-left: 1em;
}

.text_03 {
    width: 45%;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 2vw;
    color: #80796c9;
	margin-top: 1.5em;
}

.symbol {
	position: relative;
	width: 25%;
}

.symbol p {
    position: absolute;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 3vw;
    font-weight: 600;
    text-align: center;
    color: #F67690;
    line-height: 3.6vw;
    z-index: 10;
    top: 16%;
    left: 8%;
}

.symbol span {
	font-size: 2vw;
	color: #4b1900;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    line-height: 1px;
}

.symbol small {
	font-size: 1.8vw;
	color: #4b1900;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	line-height: 1px;
}

.circle {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.circle_01 {
    position: absolute;
    width: 94%;
    height: 94%;
    border: 20px solid #FDFFA9;
    border-radius: 50%;
    margin: 0 auto;
    top: 3%;
    left: 3.0%;
    z-index: 2;
	opacity: 80%;
}

.circle_02 {
    width: 100%;
    height: 100%;
    border: 8px solid #c3f2ff;
    border-radius: 50%;
    margin: 0 auto;
    z-index: 1;
}

.text_04 {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	text-align: center;
	font-size: 2.2vw;
	color: #FF9698;
	font-weight: 700;
}

hr {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: dashed gray 0.6px;
	width: 90%;
	margin: 11em auto 0;
	opacity: 50%;
}

/*トップページへ・トップへボタンの制御記述*/
.for_top_page {
	border: solid 2px #6A774C;
	background-color: #FFFFFF;
	opacity: 80%;
	width: 65px;
	height: 65px;
	border-radius: 50px;
	position: fixed;
	top: 180px;
	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: 60px;
	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: 0.6em
}




/* フッターの制御記述 */
.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%;
	}
	
	.text_01 {
		font-size: 34px;
		width: 86%
	}
	
	.pukusuke_01 {
		top: 65%;
	}
	
	.puku_line01 {
		font-size: 55px;
		line-height: 60px;
		top: 3%;
		left: 32%;
	}
	
	.puku_line02 {
		font-size: 55px;
		line-height: 60px;
		top: -14%;
		left: 33%;
	}
	
	.puku_line03 {
		font-size: 55px;
		line-height: 60px;
		top: -14%;
		left: 43%;
	}
	
	.symbol p {
		font-size: 50px;
		line-height: 54px;
		top: 20%;
		left: 10%;
	}
	
	.text_02,.text_03 {
		font-size: 36px;
	}
	
	.text_04 {
		font-size: 40px;
	}
	
}

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

/* ----- タブレット用記述 500～800px----- */
@media(max-width: 800px){
	
	.dt_size,.sp_size {
		display:none;
	}
	.tbsp_size,.dttb_size,.tb_size {
		display: block;
	}
	
	.main_text {
		top: -23%;
	}
	
	.main_text p {
		font-size: 8vw;
		line-height: 9vw;
	}
	
	.text_01 {
		font-size: 4vw;
		width: 100%;
	}
	
	.photo_group01 {
		width: 96%;
	}
	
	.pukusuke_01 {
		width: 50%;
		left: 10%;
	}
	
	.puku_line01 {
		font-size: 3.8vw;
		line-height: 4.6vw;
		top: 1.2%;
		left: 31.5%;
	}
	
	.contents_02 {
		margin-top: 4em;
	}
	
	.pukusuke_02 {
		width: 50%;
		top: 80%;
		right: -4%;
	}
	
	.photo_group02 {
		width:96%;
	}
	
	.pukusuke_03 {
		left: 0%;
	}
	
	.bubble03 img {
		width: 60%;
	}
	
	.puku_line02 {
		font-size: 3.2vw;
		top: -8%;
		left: 34%;
	}
	
	.puku_line03 {
		width: 65%;
		font-size: 3.2vw;
		left: 46%;
		top: -10%;
	}
	
	hr {
		margin-top: 6em;
	}
	
	.contents_04 {
		margin-top: 3em;
	}
	
	.do_you_know {
		display: block;
		width: 90%;
		margin-bottom: 3em;
	}
	
	.text_02 {
		margin-top: 3em;
		width: 100%;
		font-size: 4.6vw;
	}
	
	.text_03 {
		position: relative;
		width: 92%;
		font-size: 4vw;
		margin: 0 auto;		
	}
	
	.symbol {
		display: none;
	}
	
	.symbol_S {
		
		display: block;
	}
	
	.circle {
		position: absolute;
		width: 40%;
		top: -4.5%;
		left: 30%;
	}
	
	.symbol_S p {
		position: relative;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
		color: #F67690;
		font-size: 5vw;
		text-align: center;
		font-weight: 600;
		line-height: 5.4vw;
		z-index: 200;
	}
	
	.symbol_S small {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 3.8vw;
		color: #4b1900;
	}
	
	.symbol_S span {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 4vw;
		color: #4b1900;
	}
	
	.text_04 {
		font-size: 5vw;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	
}


/* -----スマホ用記述---- */
@media(max-width: 500px){
	
	.dt_size,.tb_size,.dttb_size {
		display: none;
	}
	
/* ブルーの岩の写真の設定 */
	.top_image img {
		position: relative;
		width: 100%;
		aspect-ratio: 6 / 1 ;
		/*height: 70px;*/
		border-bottom: solid #DCFF80 2px;
}
	
	#logo {
		width: 40%;
	}
	
	.main_text {
		top: -45%;
	}
	
	.main_text p {
		font-size: 10vw;
		line-height: 12vw;
	}
	
	.sp_size {
		display: block;
	}
	
	.text_01 {
		font-size: 4.2vw;
	}
	
	.pukusuke_01 {
		width: 80%;
		top: 50%;
		left: 0%;
	}
	
	.puku_line01{
		font-size: 5.4vw;
		line-height: 6vw;
		top: 2%;
		left: 31.5%;
	}
	
	.photo_group01 {
		width: 86%;
		display: block;
	}
	
	.p01,.p02,.p03,.p04,.p05,.p06,.p07,.p08,.p09 {
		width: 100%;
		aspect-ratio: 1 / 0.6;
		/*写真の縦横比率を1：0.6に設定しています*/
	}
	
/*元の写真の比率と設定した比率が違うので
  どの部分を見せるのか以下で設定しています*/
	
	.p01 {
		object-position: center 35%;
	}/*左右位置は真ん中(center)、上下位置は上から30％以下を見せるという設定です*/
	
	.p02 {
		object-position: center 30%;
	}
	
	.p03 {
		object-position: center 30%;
	}
	
	.contents_02 {
		margin-top: 4em
	}
	
	.photo_group02 {
		width: 86%;
		display: block;
	}
	
	.p01 {
		object-position: center 45%;
	}/*左右位置は真ん中(center)、上下位置は上から30％以下を見せるという設定です*/
	
	.p02 {
		object-position: center 70%;
	}
	
	.p03 {
		object-position: center 40%;
	}
	
	.pukusuke_02 {
		width: 80%;
		top: 65%;
	}
	
	.puku_line02 {
		font-size: 5.2vw;
		line-height: 6vw;
		top: -12%;
		left: 34%;
	}
	
	.photo_group03 {
		width: 86%;
		display: block;
	}
	
	.pukusuke_03 {
		width: 70%;
	}
	
	.bubble03 img {
		width: 50%;
		
	}
	
	.puku_line03 {
		font-size: 5vw;
		line-height: 5vw;
		left: 33.5%;
		top: -12%;
	}
	
}