@charset "utf-8";
/* CSS Document */

/***************************************

歩行開発研究所　2026

「TOP PAGE」

     PC　スマホ　共通

****************************************/
/***************************************

配色設定

青	#069
薄水色	#EFF9F5
水色	#CCEDEA
ベージュ#F9F6F0
赤	#E83717
グレー	#404040

****************************************/

.red{
	color:#E83717;
}

/*----------　ページタイトル　------------*/
#title{
	background-image:url(../img/top_backimg.png);
	background-repeat:no-repeat;
	background-position:bottom;
/*
	background-position:center top -200px,bottom;*/

}

#top_title_img{
	background-image:url(../img/top_img.jpg);
	background-repeat:no-repeat;
}
#top_title_img h1{
	color:#FFF;
}
.top_message{
	height:300px;
	align-content:center;
	text-align:center;
}
.top_message p{
	line-height:2em;
	font-size:1.2em;
}


/*----------メインコンテンツ　------------*/
main{
	margin-bottom:4em;
}
/*----------私たちの活動　------------*/
#katsudou h1{
	margin-bottom:1em;
}
.yoko_box{
	width:100%;
	overflow:hidden;
}
.one_box{
	overflow:hidden;
}
/*その１２３の表示*/

.one_box h3{
	text-align:center;
	padding:1.5em;
}
.one_box h3 span{
	background-color:#E83717;
	border:solid 5px #fff;
	color:#FFF;
	padding:1.1em 0.5em;
	border-radius:45px;

}
/*各活動*/
.in_box{
	padding:1em;
/*	height:400px;*/
	overflow:hidden;
	background-color:#FFF;
	border-radius:20px;
}
#katsudou .in_box h2{
	text-align:center;
	margin-bottom:0.5em;
	color:#069;
}
#katsudou .in_box img{
	border-radius:10px;
}
#katsudou  .in_box p:first-of-type{
	text-align:center;
}
#katsudou .in_box p:last-of-type{
	text-align:right;
}
#katsudou .in_box p:last-of-type a{
	text-decoration:none;
	padding-right:1em;
	color:#069;
	background-image:url(../img/arrow_right.png);
	background-repeat:no-repeat;
	background-position:right center;
}
#katsudou .in_box p:last-of-type a:hover{
	color:#E83717;
}
/*----------最新のお知らせ　------------*/
p.to_list {
	text-align:center;
	margin-top:6em;
}
.to_list a{
	margin:auto;
	display:block;
	width:12em;
	background-color:#CCEDEA;
	border-radius:20px;
	background-image:url(../img/arrow_right.png);
	background-repeat:no-repeat;
	background-position:right 1em center;
	text-decoration:none;
}
#osirase h1{
	margin-top:0em;
}
/*その他のお知らせ*/

#othernews a{
	display:block;
	text-decoration:none;
	color:#606060;
}
#othernews .in_box p:first-of-type{
	text-align:center;
}
#othernews .in_box h2{
	margin-bottom:0em;
	color:#069;
	font-size:1em;
	text-align:center;

}
#othernews .in_box p:nth-of-type(2){
	font-size:0.8em;
	margin-bottom:1em;
	text-align:center;

	background-image:url(../img/gaibu_site.png);
	background-repeat:no-repeat;
	background-position:right 25% center;
}

#othernews a:hover{
	opacity:70%;
}



/*最新のお知らせ　コラボレーション　のセレクトボックス*/
.next_box{
	display:block;
	background-color:#FFF;
	border-radius:20px;
	overflow:hidden;
	text-decoration:none;
	margin-top:1em;
	color:#069;

	padding:2em 3em 2em 2em;
	background-image:url(../img/arrow_right_blue.png);
	background-repeat:no-repeat;
	background-position:right 1.3em center;

}
.next_box:hover{
	background-color:#CCEDEA;
}
.date{
	color:#606060;
}
/*NEWSのセレクトボックス*/
#osirase img{
	box-shadow:3px 3px 8px #bbb;
	width:100px;		/*--最新のお知らせ　写真は幅を固定-*/
	height:auto;
	margin-right:2em;
}
.point span{
	font-size:0.8em;
	border:solid 1px #CCC;
	color:#666;
	border-radius:20px;
	padding:0.3em 1em;
}

/*コラボレーション　のセレクトボックス*/
#collabo .next_box img{
	margin-bottom:2em;
	border-radius:10px;
}
.jirei_no{
	padding:0.2em 0.5em;
	background-color:#E83717;
	border-radius:20px;
	color:#FFF;
}
#collabo .next_box p:nth-of-type(4){
	color:#666;
}

/*スクロールダウン全体の場所*/
.scrolldown{
	position:relative;
	bottom:0%;
	margin:auto;
 	animation: arrowmove 2s ease-in-out infinite;  /*矢印の動き1秒かけて永遠にループ*/
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
/*      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}*/
      0%{top:23px;}
      25%{top:35px;}
      50%{top:23px;}
     100%{top:23px;}
 }
#area_a{
	width:100%;
	height:100px;
	overflow:hidden;
	text-align:center;
}
/*
.scrolldown{
	position:relative;
	width:120px;
	height:25px;
	background-image:url(img/arrow_down.png);
	background-repeat:no-repeat;
	background-position:bottom center;
}
/*===  矢印が動いてスクロールを促す ここまで ====*/


/****************************

     PC

*****************************/

@media screen and (min-width: 850px){



#logo{
	margin-left:2em;
}
#contact{
	margin-right:2em;
}
#top_title_img{
/*	height:1000px;*/
	height:750px;
	background-position:bottom;

}

#top_title_img h1{
	margin:5em 0 0 1em;
	font-size:3em;
}

#area_a{
    margin-top:170px;

}




/*----------メインコンテンツ　------------*/
/*----------私たちの活動　------------*/

.yoko_box{
	display:flex;
	justify-content:space-between;
}
.one_box{
	width:32%;
}
/*各活動*/
.in_box img{
	width:220px;
	height:auto;
}
/*その１２３の表示*/
.one_box h3{
	text-align:center;
	padding:1.5em;
	margin-bottom:1em;

}
/*最新のお知らせのセレクトボックス*/
#osirase .next_box img{
	float:left;
}

/*コラボレーション　のセレクトボックス*/
#collabo .next_box img{
	float:left;
	margin-right:2em;
}
#collabo .next_box p:nth-of-type(3){
	margin-top:1em;
	font-size:1.2em;
}
#collabo .next_box p:nth-of-type(4){
	float:left;
}

					}
/****************************

     スマホ

*****************************/

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

/*----------　ページタイトル　------------*/
#header{
	padding-left:0.5em;
	background-color:#FFF;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
}
#title{
	background-size:130%;
	background-position:bottom;
}
#top_title_img{
	min-height:400px;
	background-size:100%;
/*	background-color:#ccc;*/
	background-position:bottom;

}

#space{
	position:relative;
/*	z-index:1;*/
	width:100%;
	height:100%;
	opacity:0%;
}

#top_title_img h1{
	position:absolute;

/*	z-index:99;*/

	margin:6em 0 0 1em;
	font-size:2em;

}
/*----------　メッセージ　------------*/

.top_message{
	margin:0 2em;
}

/*----------私たちの活動　------------*/

.yoko_box{
/*	text-align:center;*/
}
.one_box{
	width:80%;
	margin:auto;
	margin-top:2em;
}

.one_box h3{
	display:none;
}
#katsudou img{
	max-width:230px;
}
/*最新のお知らせ　コラボレーション　のセレクトボックス*/


/*最新のお知らせのセレクトボックス*/
#osirase .next_box p:first-of-type{
	text-align:center;
}

/*その他のお知らせ*/

#othernews img{
	max-width:200px;
}




/*コラボレーション　のセレクトボックス*/

#collabo .next_box p:first-of-type{
/*	width:100%;*/
	text-align:center;
}
#collabo .next_box p:nth-of-type(2){
	margin-bottom:1em;
}


					}