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

/*GMBの和プロジェクト2022*/

article.wa-project{
 padding: 0 0 300px 0;
}
.mv-project{
 text-align: center;
 padding: 0px 0;
 margin: 0 0 50px 0;
}
.mv-project h1{
 font-size: 17px;
 font-weight: normal;
 margin: 0 0 20px 0;
}
.title-project {
 margin: 0 0 15px 0;
}
.title-project img{
 height: 85px;
 width: auto;
}
.mv-project hr{
 width: 50px;
 margin: 20px auto 25px;
}
.mv-project p{
 font-size: 20px;
 font-weight: 800;
 line-height: 150%;
}

#loop {
 margin: 0px auto 0px;
 width: 100%;
 height:280px;
 text-align: left;
 position: relative;
 z-index: 0;
 overflow: hidden;
 }
#loop ul {height:280px; float: left; display: inline; overflow: hidden;margin:0;}
#loop ul li { width: 320px; height:auto; float: left; display: inline; padding: 15px 0 0 0;overflow: hidden;}
#loop ul li img{
 width: 100%;
 height: auto;
 padding:0 35px;
 border: none;
 box-shadow: 0 0 0 rgba(0,0,0,0);
 border-radius: 50%;
}

.ani{
 animation-name: upDown01;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1.5s;
}

@keyframes upDown01 {
0% {
    transform: translate(0,0px);
}

100% {
    transform: translate(0,-15px)
}
}

.ani02{
 animation-name: upDown02;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 2s;
}

@keyframes upDown02 {
0% {
    transform: translate(0,0px);
}

100% {
    transform: translate(0,-15px)
}
}

.ani03{
 animation-name: upDown03;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 2.5s;
}

@keyframes upDown03 {
0% {
    transform: translate(0,0px);
}

100% {
    transform: translate(0,-15px)
}
}

.projectInfo--insert{
 width: 1000px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.projectInfo--insert .box{
 width: 48%;
 background-color: rgba(255,255,255,0.9);
 padding: 25px;
 border-radius: 0 0 4px 4px;
}
.projectInfo--insert .box.red{
 border-top: 4px solid #cf1225;
}
.projectInfo--insert .box.blue{
 border-top: 4px solid #153683;
}
.projectInfo--insert .box .title{
 text-align: center;
 border-bottom: 1px solid #ddd;
 padding: 0 0 20px 0;
 margin: 0 0 20px 0;
}
.projectInfo--insert .box .title h2{
 font-size: 18px;
}
.projectInfo--insert .box .title .din{
 font-family: din-2014,sans-serif;
 font-weight: 700;
 font-style: normal;
 font-size: 18px;
 letter-spacing: 0.05em;
 margin: 0 0 3px 0;
}
.projectInfo--insert .box.red .title{
 color: #cf1225;
}
.projectInfo--insert .box.blue .title{
 color: #153683;
}
.projectInfo--insert .box dl{
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 margin: 15px 0;
 padding: 15px 0;
 display: flex;
 justify-content:flex-start;
 font-weight: bold;
}
.projectInfo--insert .box dl dt{
 padding: 0 20px 0 0;
 font-weight: bold;
 color: #cf1225;
}
.projectInfo--insert .box dl dd{
 padding: 0 0px 0 0;
}
.projectInfo--insert .box .notice{
 font-size: 12px;
 line-height: 170%;
 color: #777;
}
.projectInfo--insert .box h3{
 text-align: center;
 padding: 20px 0;
 font-size: 17px;
}

.target{
 background-color: #153683;
 text-align: center;
 color: #fff;
 font-weight: bold;
 padding: 6px 0;
 margin: 0 0 15px 0;
}

.projectInfo--insert .outline{
 width: 100%;
 background-color: rgba(255,255,255,0.9);
 padding:35px 25px;
 border-radius: 4px 4px;
 margin: 40px 0 0 0;
 text-align: center;
}
.outline h2{
 font-size: 22px;
 font-weight: 800;
}
.outline hr{
 width: 45px;
}
.outline p{
 margin: 30px 0 0 0;
}
.outline .list{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap:10px 0;
}
.outline .list dl{
 width: 50%;
 text-align: left;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.outline .list dl dt{
 width: 125px;
 font-size: 13px;
 text-align: center;
}
.outline .list dl dt span{
 display: block;
 background-color: #cf1225;
 color: #fff;
 padding: 2px 0;
}
.outline .list dl dd{
 width: calc(100% - 140px);
}


@media screen and (max-width: 1000px) {
article.wa-project{
 background-image: none!important;
 background-color: #fff;
 padding: 0 0 30px 0;
}

.mv-project{
 background-image: url(../../present/wa-project/img/main-waProject.jpg);
 background-size: cover;
 background-position: center bottom;
 padding: 50px 0 140px;
 margin: 0 0 0px 0;
}
.title-project{
 margin: 0 0 12px 0;
}
.title-project img {
    height: 38px;
}
.mv-project h1 {
    font-size: 15px;
    margin: 0 0 10px 0;
}

#loop {
 margin: 0px auto 0px;
 width: 100%;
 height:160px;
 text-align: left;
 position: relative;
 z-index: 0;
 overflow: hidden;
 }
#loop ul {height:160px; float: left; display: inline; overflow: hidden;margin:0;}
#loop ul li { width: 180px; height:auto; float: left; display: inline; padding: 15px 0 0 0;overflow: hidden;}
#loop ul li img{
 width: 100%;
 height: auto;
 padding:0 20px;
 border: none;
 box-shadow: 0 0 0 rgba(0,0,0,0);
 border-radius: 50%;
}
.mv-project p {
    font-size: 16px;
}

.projectInfo--insert {
    width: auto;
    padding: 20px;
    display: block;
}
.projectInfo--insert .box {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    border: 1px solid #ddd;
    margin: 0 0 20px 0;
}
.projectInfo--insert .box .title .din {
    font-size: 16px;
}
.projectInfo--insert .box .title h2 {
    font-size: 17px;
    line-height: 130%;
}
.projectInfo--insert .box .title {
    padding: 0 0 16px 0;
    margin: 0 0 16px 0;
}
.projectInfo--insert .box h3 {
    padding: 10px 0 20px 0;
}
.projectInfo--insert .outline {
    padding: 0px;
    margin: 40px 0 0 0;
}
.outline h2 {
    font-size: 20px;
}
.outline .list {
    display: block;
    border-bottom: 1px solid #ddd;
}
.outline .list dl {
    width: 100%;
    text-align: center;
    display: block;
}
.outline .list dl dt {
    width: 100%;
    font-size: 14px;
}
.outline .list dl dd {
    width: 100%;
    padding: 15px 0;
}




/*---------------------------------------------------------------------------------------------------------------------------------------- 1000px */
}