@charset "UTF-8";
/* CSS Document */
.design-competition {
}
.design-competition .inner{
    width: 90%;
}
.design-competition h1 {
    text-transform:capitalize;
}


.competition01{
    background-image: url(../images/common/background.jpg);
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.design-competition article li:first-child::after{
    content:'>';
    color: #ccc;
    margin: 0 30px;
}

.competition02{
     background-image: url(../images/competition/img_competition_02.png);
     background-size: cover;
     width: 100%;
     height:60vh ;
}
.competition02 h2::after {
    content: '';
    height: 50px;
    width: 1px;
    background-color: white;
    position: absolute;
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
}

.competition03{
    width: 100%;
}
.competition03 h2::before {
    content: '';
    width: 20%;
    height: 1px;
    background: #282836;
    display: block;
}
.competition03 h2::after {
    content: '';
    width: 20%;
    height: 1px;
    background: #282836;
    display: block;
}
.competition03 .box01{
    justify-content: space-between;
}
.competition03 .box01 figure{
    width: 45%;
}
.competition03 .box01 div{
    width: 50%;
}
.competition03 .box02{
    justify-content: space-between;
    flex-direction: row-reverse;
}
.competition03 .box02 figure{
    width: 45%;
}
.competition03 .box02 div{
    width: 50%;
}

.competition04{
    background: #F7F7F2;
    width: 100%;
}
.competition04 .future{
    left: 50%;
    transform: translateX(-50%);
}
.competition04 .box01{
    justify-content: space-between;
}
.competition04 .box01 figure{
    width: 50%;
}
.competition04 .box02{
    background-image: url(../images/competition/img_competition_07.png);
    background-size: cover;
    flex-direction: column;
    text-align: left;
    width: 45%;
}

.competition05{
    width: 100%;
}
.competition05 .future{
    left: 50%;
    transform: translateX(-50%);
}
.competition05 .box01{
    justify-content: space-between;
}
.competition05 .box01 figure{
    width: 50%;
}
.competition05 .box02{
    width: 45%;
}
.competition05 .box03{
    justify-content: space-between;
}
.competition05 .box03 figure{
    width: 50%;
}


.competition06{
    background: #F7F7F2;
    width: 100%;
}
.competition06 .future{
    left: 50%;
    transform: translateX(-50%);
}
.competition06 .box01{
    flex-direction: row-reverse;
    justify-content: space-between;
}
.competition06 .box01 figure{
    width: 50%;
}
.competition06 .box02 {
    background-image: url(../images/competition/img_competition_14.png);
    background-size: cover;
    width: 45%;
    justify-content: center;
    flex-direction: column;
}

.competition07 h2::before {
    content: '';
    width: 20%;
    height: 1px;
    background: #282836;
    display: block;
}
.competition07 h2::after {
    content: '';
    width: 20%;
    height: 1px;
    background: #282836;
    display: block;
}
.competition07 ul{
    justify-content: space-between;
}
.competition07 li{
    width: 45%;
}
.competition07 dt{
    background-image: url(../images/common/background.jpg);
}
.competition07 dd{
    text-align: center;
    border-bottom: dashed 1px #ccc;
    padding: 20px;
}

.competition08{
    background: url(../images/common/background.jpg);
    width: 100%;
}
.competition08 figure{
    background: #F9F9F5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: solid 1px #282836;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5rem;
}
.competition08 ul::before{
    content:'';
    width: 1px;
    height: 89%;
    background: #282836;
    position: absolute;
    left: 5rem;
    z-index: -1;
}
.competition08 ul{
    padding: 2.5rem;
}
.competition08 li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
}
.competition08 li div{
    width: calc(100% - 7rem);
}
.competition08 h3{
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.competition08 p{
    line-height: 2rem;
}


@media screen and (max-width: 767px){
.competition{
    padding-left: 0;
    max-width: 100%;
}
.competition03 .box01 {
    flex-direction: column;
}	
.competition03 .box01 figure {
    width: 100%;
}
.competition03 .box01 div {
    width: 100%;
    margin-top: 1rem;
}
.competition03 .box02 {
    flex-direction: column;
    margin: 3rem auto 0;
}
.competition03 .box02 figure {
    width: 100%;
}
.competition03 .box02 div {
    width: 100%;
    margin-top: 1rem;
}
.competition04 .box01 {
    justify-content: space-between;
    flex-direction: column;
}
.competition04 .box01 figure {
    width: 100%;
    margin-top: 1rem;
}
.competition04 .box02 {
    background-image: url(../images/competition/img_competition_07.png);
    background-size: cover;
    flex-direction: column;
    text-align: left;
    width: 100%;
    margin-top: 2rem;
}
.competition05 .box01 {
    justify-content: space-between;
    flex-direction: column;
}
.competition05 .box01 figure {
    width: 100%;
}
.competition05 .box02 {
    width: 100%;
    margin-top: 1rem;
}
.competition05 .box03 {
    justify-content: space-between;
    flex-direction: column;
}
.competition05 .box03 figure {
    width: 100%;
    margin-bottom: 1rem;
}
.competition06 .box01 {
    flex-direction: column;
    justify-content: space-between;
}
.competition06 .box01 figure {
    width: 100%;
    margin-bottom: 1rem;
}
.competition06 .box02 {
    background-image: url(../images/competition/img_competition_14.png);
    background-size: cover;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    margin-top: 3rem;
}
.competition07 ul {
    justify-content: space-between;
    flex-direction: column;
}
.competition07 li {
    width: 100%;
    margin-bottom: 5rem;
}
.competition08 ul{
    padding: 1rem;
}
.competition08 ul::before {
    content: '';
    width: 1px;
    height: 90%;
    background: #282836;
    position: absolute;
    left: 2.5rem;
    z-index: -1;
}
.competition08 figure {
    background: #F9F9F5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: solid 1px #282836;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
}
.competition08 li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}
.competition08 li div {
    width: calc(100% - 4rem);
}
.competition08 h3 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.competition08 p {
    line-height: 1.5rem;
}

}