.container {
position: relative;
}
#content00 {
padding: 0px;
}




.main-img {
overflow: hidden;
opacity: 0;
}
.main-box {
width: 110%;
margin: 0px 0px 0px -5%;
padding: 10% 0px 0px;
}
.main-box.pc-main {
display: none;
}
.main-box img {
	height: auto;
	width: 100%;
	margin: 0px auto;
	display: block;
}

.main-zoominEfc {
animation-duration: 6s;
animation-fill-mode: forwards;
animation-name: zoominEfc;
animation-delay: 1s;
}

.image-back {
animation-duration: 2s;
animation-fill-mode: forwards;
animation-name: imageBlur;
}

.main-slider .child {
background-color: rgba(255,255,255,1.00);
}

@keyframes zoominEfc {
  0% {
    opacity: 0.0;
		transform: scale(1.05,1.05);
  }
  100% {
    opacity: 1;
		transform: scale(1.0,1.0);
  }
}

@keyframes imageBlur {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1;
  }
}



#content00 .cont-photo,
.photo-layout .cont-photo {
overflow: hidden;
}
/*
content00">
  <div class="cont-photo"
*/


@media print, screen and (min-width: 375px) {

}

@media print, screen and (min-width: 768px) {

}

@media print, screen and (min-width: 1024px) {

}

@media print, screen and (min-width: 1200px) {

}

@media print, screen and (min-width: 1400px) {

}




 /* 横向き */
@media print, screen and (orientation: landscape) {

.main-img {
overflow: hidden;
}
.main-box {
width: 95%;
margin: 0px auto;
padding: 5% 0px 0px;
}
.main-box.sp-main {
display: none;
}
.main-box.pc-main {
display: block;
}

}


@media print, screen and (orientation: landscape) and (min-width: 1024px) {

}


@media print, screen and (orientation: landscape) and (min-width: 1400px) {

}



























article {
background-image: url(./../images/back00.jpg);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
article::after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
transition: all 2.0s;
background-color: rgba(255,255,255,1.00);
}
article::before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
transition: all 1.0s;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1.00));
}
.actveback article::after {
opacity: 0;
}






/*
.contents-box {
margin: 0px auto;
max-width: 1140px;
}
*/
.contents-box {
}
.contents-layout {
}
.contents-layout li {
border-radius: 15px;
background-color: rgba(255,255,255,1.00);
position: relative;
overflow: hidden;
margin: 0px 0px 15px;

opacity: 0.0;
}
.rotateY-efc {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-name: rotateY-efc-mov;
transform : perspective(140vw) rotateY(45deg);
}
@keyframes rotateY-efc-mov {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1;
		transform : perspective(140vw) rotateY(0deg);
  }
}
.contents-layout li::after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid rgba(185,185,185,1.00);
border-radius: 15px;
box-sizing: border-box;
}
.contents-layout li .layout-in {
padding: 25px 15px 20px;
position: relative;
z-index: 10;
}

/* .cont-header */
.cont-header {
}
.cont-header .cont-label {
display: block;
position: absolute;
left: 0px;
top: 0px;
color: rgba(255,255,255,1.00);
font-size: 12px;
line-height: 1em;
background-color: rgba(102,151,0,1.00);
border-bottom-right-radius: 12px;
padding: 4px 15px;
}
.snew .cont-header .cont-label {
background-color: rgba(255,102,0,1.00);
}
.cont-header .postdate {
font-size: 11px;
line-height: 1.1em;
text-align: right;
color: rgba(132,132,132,1.00);
position: absolute;
top: 7px;
right: 15px;
}




/*
.cont-photo {
overflow: hidden;
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
display: flex !important;
justify-content: center;
align-items: center;
background-color: rgba(200,200,200,1.00);
}

.cont-photo img {
  width: auto;
  height: auto;
  margin: 0px;
  padding: 0px;
  display: block;
}


						<a href="#">
							<div class="cont-photo img-over2"><img src="images/banner01_t.jpg" alt="活動予告" width="720" height="966"></div>
							<h3 class="box-catch"><p>衣料支援・サッカー支援プロジェクト</p></h3>
							<div class="cont-text"><p>サンプルテキスト・・・より人間らしく、自然と生きる＝グリーンカラー」という働きがいと生きがいを融合させたライフスタイルが提案されたことをきっかけに始まったプロジェクトです。</p></div>
							<div class="more-text"><p>詳細はこちら</p></div>
						</a>
*/






/*
.cont-photo {
position: relative;
width: 100%;
height: 400px;
aspect-ratio: 4 / 3;
display: flex !important;
justify-content: center;
align-items: center;
background-color: rgba(200,200,200,1.00);
 img {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
  
 }
}
*/





.box-catch {
color: rgba(0,0,0,1.00);
font-weight: bold;
font-size: 15px;
line-height: 1.5em;
padding: 10px 0px 7px;
}

.contents-layout li .cont-text {
padding: 0px 0px 10px;
}


.cont-detail {
margin: 0px 0px 10px;
}
.cont-detail th {
white-space: nowrap;
padding: 0px 12px 0px 0px;
}
.cont-detail td {
}


.cont-category {
display: flex;
flex-wrap: wrap;
width: calc(100% + 6px);
}
.cont-category dd {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
padding: 0px 6px 6px 0px;
}

.contents-more {
text-align: center;
}

.more-text {
text-align: right;
padding: 0px 10pt 0px 0px;
position: relative;
}
.more-text::after {
content: "";
width: 10px;
height: 10px;
display: block;
position: absolute;
right: 0px;
top: calc(50% - 5px);
border: 1px solid;
border-color: rgba(168,168,168,1.00) rgba(168,168,168,1.00) transparent transparent;
transform: rotate(45deg);
transition: all 0.4s;
}





@media print, screen and (min-width: 375px) {
.contents-layout li {
margin: 0px 0px 20px;
}
.contents-layout li .layout-in {
padding: 25px 20px 20px;
}

/* .cont-header */
.cont-header {
}
.cont-header .cont-label {
padding: 4px 15px;
}

.box-catch {
font-size: 16px;
line-height: 1.5em;
padding: 12px 0px 10px;
}
.contents-layout li .cont-text {
padding: 0px 0px 10px;
}

}


@media print, screen and (min-width: 768px) {

.contents-box {
}
.contents-layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.contents-layout li {
	-ms-flex-preferred-size: calc(50% - 10px);
	flex-basis: calc(50% - 10px);
}
.contents-layout li .layout-in {
padding: 25px 20px 20px;
}


.layout-in .cont-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0px;
  padding: 0px;
}
.layout-in .cont-photo {
position: relative;
width: 100%;
height: 300px;
/* aspect-ratio: 4 / 3; */
display: flex !important;
justify-content: center;
align-items: center;
background-color: rgba(200,200,200,1.00);
}

}



@media print, screen and (min-width: 1024px) {
.contents-layout li {
	-ms-flex-preferred-size: calc(50% - 15px);
	flex-basis: calc(50% - 15px);
	margin: 0px 0px 30px;
}
.contents-layout li .layout-in {
padding: 30px;
}

/* .cont-header */
.cont-header .cont-label {
padding: 6px 15px;
font-size: 13px;
line-height: 1em;
}
.cont-header .postdate {
top: 8px;
right: 15px;
font-size: 12px;
line-height: 1.1em;
}

.box-catch {
font-size: 17px;
line-height: 1.5em;
padding: 14px 0px 10px;
}
.contents-layout li .cont-text {
padding: 0px 0px 12px;
}

.cont-detail th {
padding: 0px 14px 0px 0px;
}

.cont-category dd {
-ms-flex-preferred-size: 16.66%;
flex-basis: 16.66%;
}

}


@media print, screen and (min-width: 1200px) {
.contents-layout li {
	-ms-flex-preferred-size: 550px;
	flex-basis: 550px;
	margin: 0px 0px 40px;
}
.contents-layout li .layout-in {
padding: 39px;
}

.box-catch {
font-size: 18px;
line-height: 1.5em;
padding: 15px 0px 10px;
}

.cont-category dd {
-ms-flex-preferred-size: 14.28%;
flex-basis: 14.28%;
}

}


@media print, screen and (min-width: 1400px) {

}














/*
		<div class="contents-box">
			<div class="contents-detail snew">
				<div class="layout-in">
					<dl class="cont-header">
						<dd class="cont-label"><p>NEW</p></dd>
						<dd class="postdate"><p>Posted date：2022.4.5</p></dd>
					</dl>

					<h3 class="box-catch"><p>衣料支援・サッカー支援プロジェクト</p></h3>
					<div class="cont-text"><p>サンプルテキスト・・・より人間らしく、自然と生きる＝グリーンカラー」という働きがいと生きがいを融合させたライフスタイルが提案されたことをきっかけに始まったプロジェクトです。</p></div>

					<ul class="photo-layout">
						<li><div class="cont-photo"><img src="common/images/none-image01.jpg" alt="活動予告" width="944" height="634"><p>活動予告</p></div></li>
						<li><div class="cont-photo"><img src="common/images/none-image01.jpg" alt="活動予告" width="944" height="634"><p>活動予告</p></div></li>
						<li><div class="cont-photo"><img src="common/images/sample01.jpg" alt="活動予告" width="944" height="634"></div></li>
					</ul><!-- contents-layout -->

				</div><!-- layout-in -->
			</div>
		</div><!-- contents-box -->
*/
/* detail */
.contents-detail {
border-radius: 15px;
background-color: rgba(255,255,255,1.00);
position: relative;
overflow: hidden;
margin: 0px 0px 30px;
}

.contents-detail::after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
border: 1px solid rgba(185,185,185,1.00);
border-radius: 15px;
box-sizing: border-box;
}
.contents-detail .layout-in {
padding: 25px 15px 20px;
position: relative;
z-index: 10;
}

.contents-detail .cont-text {
padding: 0px 0px 15px;
}
.contents-more {
text-align: center;
}
.photo-layout {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.photo-layout > li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding: 0px 0px 15px;
}
.photo-layout > li:last-child {
padding: 0px;
}



@media print, screen and (min-width: 375px) {
.contents-detail {
margin: 0px 0px 35px;
}
.contents-detail .layout-in {
padding: 25px 20px 20px;
}

.contents-detail .cont-text {
padding: 0px 0px 15px;
}
.photo-layout > li {
padding: 0px 0px 20px;
}

}



@media print, screen and (min-width: 768px) {
.contents-detail {
margin: 0px 0px 50px;
}
.contents-detail .layout-in {
padding: 25px;
}
.contents-detail .cont-text {
padding: 0px 0px 20px;
}
.photo-layout > li {
-ms-flex-preferred-size: calc(50% - 13px);
flex-basis: calc(50% - 13px);
padding: 0px 0px 25px;
}
.photo-layout > li:nth-last-child(1),
.photo-layout > li:nth-last-child(2) {
padding: 0px;
}

#page-detail .box-catch {
font-size: 20px;
line-height: 1.5em;
padding: 15px 0px 10px;
}
#page-detail .contents-detail .cont-text {
font-size: 16px;
line-height: 1.8em;
}

}



@media print, screen and (min-width: 1024px) {
.contents-detail {
margin: 0px 0px 60px;
}
.contents-detail .layout-in {
padding: 30px;
}
.contents-detail .cont-text {
padding: 0px 0px 25px;
}
.photo-layout > li {
-ms-flex-preferred-size: calc(50% - 15px);
flex-basis: calc(50% - 15px);
padding: 0px 0px 30px;
}

#page-detail .box-catch {
font-size: 23px;
line-height: 1.5em;
padding: 15px 0px;
}
#page-detail .contents-detail .cont-text {
font-size: 17px;
line-height: 1.9em;
}

}


@media print, screen and (min-width: 1200px) {
.contents-detail .layout-in {
padding: 40px;
}

#page-detail .box-catch {
font-size: 25px;
line-height: 1.5em;
padding: 20px 0px;
}

}


@media print, screen and (min-width: 1400px) {

}






























/* wp-pagenavi */
.wp-pagenavi {
margin: 0px auto;
text-align: center;
font-size: 14px;
line-height: 1em;
padding: 0px 0px 20px;
}
.wp-pagenavi .pages {
display: none;
}
.wp-pagenavi a.page,
.wp-pagenavi .current {
display: inline-block;
margin: 0px 1px 10px;
padding: 8px 4px;
border-bottom: 2px solid rgba(136,136,136,1.00);
vertical-align: middle;
}
.wp-pagenavi .current {
border-bottom: 2px solid rgba(136,174,37,1.00);
font-weight: bold;
}
a.previouspostslink,
a.nextpostslink,
a.last {
display: inline-block;
position: relative;
transition: all 0.5s ease 0s;
text-indent: -9999px;
border: 1px solid rgba(168,168,168,1.00);
background-color: rgba(255,255,255,1.00);
width: 32px;
height: 32px;
border-radius: 50%;
vertical-align: middle;
}
a.last {
display: none;
}
a.previouspostslink:hover,
a.nextpostslink:hover,
a.last:hover {
background-color: rgba(136,174,37,1.00);
-webkit-box-shadow: 0px 0px 12px 0px rgba(84,118,0,1.00);
box-shadow: 0px 0px 12px 0px rgba(84,118,0,1.00);
}
.wp-pagenavi a.page:hover {
color: rgba(0,102,0,1.00) !important;
}
a.previouspostslink::after,
a.nextpostslink::after,
a.last::after {
content: "";
width: 6px;
height: 6px;
display: block;
position: absolute;
left: calc(50% - 6px);
top: calc(50% - 4px);
border: 1px solid;
border-color: rgba(168,168,168,1.00) rgba(168,168,168,1.00) transparent transparent;
transform: rotate(45deg);
transition: all 0.4s;
}
a.previouspostslink:hover::after,
a.nextpostslink:hover::after,
a.last:hover::after {
border-color: rgba(0,0,0,1.00) rgba(0,0,0,1.00) transparent transparent;
}
a.previouspostslink::after {
transform: rotate(-135deg);
left: calc(50% - 2px);
}



@media print, screen and (min-width: 375px) {
/* wp-pagenavi */
.wp-pagenavi {
font-size: 15px;
line-height: 1em;
padding: 0px 0px 25px;
}
.wp-pagenavi a.page,
.wp-pagenavi .current {
margin: 0px 1px 10px;
padding: 8px 6px;
}
a.previouspostslink,
a.nextpostslink,
a.last {
width: 40px;
height: 40px;
}
a.previouspostslink::after,
a.nextpostslink::after,
a.last::after {
width: 8px;
height: 8px;
left: calc(50% - 7px);
top: calc(50% - 5px);
}
a.previouspostslink::after {
left: calc(50% - 3px);
}

}



@media print, screen and (min-width: 768px) {

/* wp-pagenavi */
.wp-pagenavi {
font-size: 15px;
line-height: 1em;
padding: 0px 0px 30px;
}
.wp-pagenavi a.page,
.wp-pagenavi .current {
margin: 0px 2px 10px;
padding: 8px 12px;
}
a.previouspostslink,
a.nextpostslink,
a.last {
width: 45px;
height: 45px;
}
a.previouspostslink::after,
a.nextpostslink::after,
a.last::after {
width: 10px;
height: 10px;
left: calc(50% - 8px);
top: calc(50% - 6px);
}
a.previouspostslink::after {
left: calc(50% - 2px);
}

}


@media print, screen and (min-width: 1024px) {

/* wp-pagenavi */
.wp-pagenavi {
font-size: 16px;
line-height: 1em;
padding: 0px 0px 40px;
}
.wp-pagenavi a.page,
.wp-pagenavi .current {
margin: 0px 3px 10px;
padding: 8px 15px;
}
a.previouspostslink,
a.nextpostslink,
a.last {
width: 55px;
height: 55px;
}
a.previouspostslink::after,
a.nextpostslink::after,
a.last::after {
width: 10px;
height: 10px;
left: calc(50% - 8px);
top: calc(50% - 6px);
}
a.previouspostslink::after {
left: calc(50% - 2px);
}

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}

















@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

}


@media print, screen and (min-width: 1024px) {

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}