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

#contents{
margin-top: 0;
}
/* 中身-モバイルファースト======================================================================================================== */

#introduction{
padding-top: 30vw;
position: relative;
}
#introduction::before,
#introduction::after{
content: "";
display: block;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
width: 40%;
height: auto;
aspect-ratio: 1/1;
position: absolute;
top: 0;
z-index: -10;
}
#introduction::before{
background-image: url(../images/bg_tree-r.jpg);
background-image: -webkit-image-set(url(../images/bg_tree-r.jpg) 1x, url(../images/bg_tree-r@2x.jpg) 2x);
right: 0;
}
#introduction::after{
background-image: url(../images/bg_tree-l.jpg);
background-image: -webkit-image-set(url(../images/bg_tree-l.jpg) 1x, url(../images/bg_tree-l@2x.jpg) 2x);
left: 0;
}
#introduction h2{
font-size: 7vw;
font-weight: 700;
line-height: 1.4;
text-align: center;
position: relative;
margin-bottom: 20px;
}
#introduction h2::before{
content: "";
display: block;
width: auto;
height: 200%;
aspect-ratio: 1/1;
background: #cae6ad;
background: radial-gradient(circle,#cae6ad 0%, rgba(255,255,255,0) 70%);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -1;
}
#introduction .marker_b{
color: #218ce6;
}
#introduction .marker_y{
color: #e66b21;
}


#list article{
margin-bottom: 60px;
display: flex;
flex-direction: column-reverse;
}
#list article:last-child{
margin-bottom: 0px;
}
#list article .photo{
width: 75vw;
height: 50vw;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10vw) 100%, 0% 100%);
}
#list article:nth-child(even) .photo{
margin-left: auto;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10vw 100%);
}
#list article .text{
margin: 0 5vw;
text-align: left;
position: relative;
}
#list article:nth-child(even) .text{
text-align: right;
}
#list article .text .type{
display: inline-block;
position: relative;
font-size: 5vw;
line-height: 10vw;
color: #fff;
}
#list article .text .type::before{
content: "";
display: block;
width: calc(100% + 5vw + 1em);
height: 100%;
background-color: #857e7a;
position: absolute;
top: 0;
left: -5vw;
z-index: -10;
}
#list article .text .type::after{
content: "";
display: block;
width: calc(2vw * 2);
height: 100%;
background-color: #857e7a;
clip-path: polygon(0 0,100% 0,50% 100%,0 100%);
position: absolute;
top: 0;
right: calc( -2vw - 1em);
}
#list article:nth-child(even) .text .type::after{
clip-path: polygon(0 0,100% 0,100% 100%,50% 100%,0 0%);
right: inherit;
left: calc( -2vw - 1em);
}
#list article .text .name{
display: inline-block;
position: relative;
font-size: 8vw;
line-height: 10vw;
color: #fff;
margin-top: -3vw;
margin-bottom: 3vw;
}
#list article:nth-child(odd) .text .name{
padding-left: 4.5em;
}
#list article:nth-child(even) .text .name{
padding-right: 4.5em;
}
#list article .text .name::before{
content: "";
display: block;
width: calc(100% + 5vw + 1em);
height: 100%;
background-color: #cb261e;
position: absolute;
top: 0;
left: -5vw;
z-index: -20;
}
#list article .text .name::after{
content: "";
display: block;
width: calc(2.8vw*2);
height: 100%;
background-color: #cb261e;
clip-path: polygon(0 0,100% 0,50% 100%,0 100%);
position: absolute;
top: 0;
right: calc( -2.8vw - 1em);
}
#list article:nth-child(even) .text .name::after{
clip-path: polygon(0 0,100% 0,100% 100%,50% 100%,0 0%);
right: inherit;
left: calc( -2.8vw - 5vw);
}
#list article .text .name .join{
font-size: 5vw;
display: block;
}
#list article .text .en{
display: block;
color: #eee;
font-size: 9vw;
font-weight: 300;
white-space: nowrap;
line-height: 1;
text-align: right;
margin-top: -1vw;
z-index: -50;
position: absolute;
top: 20vw;
right: 0;
}
#list article .text .copy{
font-size: 16px;
}
#list article .text .common_btn{
width: 70%;
margin-top: 3vw;
}
#list article:nth-child(even) .text .common_btn{
margin-left: auto;
}

/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#introduction{
padding-top: 10vw;
}
#introduction::before,
#introduction::after{
width: 25%;
display: block;
}
#introduction .contents_size{
text-align: center;
}
#introduction h2{
width: auto;
font-size: 5vw;
padding: 0 5vw;
margin-bottom: 40px;
}
#introduction h2::before{
}
#introduction p{
font-size: 24px;
}


#list article{
margin-bottom: 12vw;
flex-direction: row-reverse;
}
#list article:nth-child(even){
flex-direction: row;
}
#list article .photo{
width: 36vw;
height: 24vw;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 4vw) 100%, 0% 100%);
}
#list article:nth-child(even) .photo{
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 4vw 100%);
}
#list article .photo img{
width: 100%;
}
#list article .text{
flex: 1;
margin: 2vw 12vw 0 2vw;
}
#list article:nth-child(even) .text{
margin: 2vw 2vw 0 12vw;
}
#list article .text .type{
font-size: 2vw;
line-height: 4vw;
}
#list article .text .type::before{
width: calc(100% + 2vw + 1em + 5vw);
left: calc(-2vw - 5vw);
}
#list article:nth-child(even) .text .type::before{
left: -1em;
}
#list article .text .type::after{
width: calc(.667vw * 2);
right: calc( -0.66667vw - 1em);
}
#list article:nth-child(even) .text .type::after{
left: calc( -0.66667vw - 1em);
}
#list article .text .name{
font-size: 4vw;
line-height: 5vw;
margin-bottom: 1vw;
}
#list article:nth-child(odd) .text .name{
padding-left: 4em;
}
#list article:nth-child(even) .text .name{
padding-right: 4em;
}
#list article .text .name::before,
#list article .text .name::after{
/* height: calc(100% + 1vw);
top: -.5vw; */
}
#list article .text .name::after{
width: calc(1vw * 2);
right: calc( -1vw - 1em);
}
#list article:nth-child(even) .text .name::after{
left: calc( -1vw - 5vw);
}

#list article .text .name .join{
font-size: 2vw;
}
#list article .text .en{
font-size: 6vw;
top: 9vw;
}
#list article .text .copy{
font-size: 2vw;
}
#list article .text .common_btn{
width: auto;
margin-top: 1vw;
text-align: left;
}
#list article:nth-child(even) .text .common_btn{
text-align: right;
}


}