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


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


#detail{
margin-bottom: 120px;
}
#detail #detail_head{
margin-bottom: 40px;
display: flex;
flex-direction: column-reverse;
}
#detail #detail_head .photo{
width: 90vw;
height: 60vw;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 12vw) 100%, 0% 100%);
}
#detail #detail_head:nth-child(even) .photo{
margin-left: auto;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10vw 100%);
}
#detail #detail_head .text{
margin: 0 5vw;
text-align: left;
position: relative;
}
#detail #detail_head:nth-child(even) .text{
text-align: right;
}
#detail #detail_head .text .type{
display: inline-block;
position: relative;
font-size: 5vw;
line-height: 10vw;
color: #fff;
}
#detail #detail_head .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;
}
#detail #detail_head .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);
z-index: -10 !important;
}
#detail #detail_head: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);
}
#detail #detail_head .text .name{
display: inline-block;
position: relative;
font-size: 8vw;
line-height: 10vw;
color: #fff;
margin-top: -3vw;
margin-bottom: 5vw;
padding-left: 4.5em;
}
#detail #detail_head .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;
}
#detail #detail_head .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);
}
#detail #detail_head: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);
}
#detail #detail_head .text .name .join{
font-size: 4vw;
display: block;
}
#detail #detail_head .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: 22vw;
right: 0;
}
#detail #detail_head .text .copy{
font-size: 18px;
}


#detail #detail_body article{
margin-bottom: 40px;
}
#detail #detail_body article:last-child{
margin-bottom: 0px;
}
#detail #detail_body article dl dt{
color: #cb261e;
font-size: 18px;
margin-bottom: 10px;
}
#detail #detail_body article dl dt::before{
content: "Q";
display: inline-block;
background-color: #cb261e;
color: #fff;
width: 1.5em;
line-height: 1.5;
text-align: center;
margin-right: 0.5em;
}
#detail #detail_body article dl dd{
margin-bottom: 20px;
}
#detail #detail_body article .photo{
}
#detail #detail_body article:nth-child(odd) .photo{
clip-path: polygon(12vw 0%, 100% 0%, 100% 100%, 0% 100%);
margin-right: -5vw;
}
#detail #detail_body article:nth-child(even) .photo{
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 12vw) 100%, 0% 100%);
margin-left: -5vw;
}

/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){
#container{
margin-top: 5vw;
}



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

#detail #detail_head .text .name .join{
font-size: 2vw;
}
#detail #detail_head .text .en{
font-size: 6vw;
top: 9vw;
}
#detail #detail_head .text .copy{
font-size: 2vw;
}


#detail #detail_body article{
margin-bottom: 4vw;
display: flex;
}
#detail #detail_body article:nth-child(even){
flex-direction: row-reverse;
}

#detail #detail_body article .text{
flex: 1;
}
#detail #detail_body article:nth-child(odd) .text{
margin-right: 2vw;
}
#detail #detail_body article:nth-child(even) .text{
margin-left: 2vw;
}
#detail #detail_body article dl dt{
font-size: 24px;
}
#detail #detail_body article dl dd{
font-size: 20px;
}
#detail #detail_body article .photo{
margin: 0 !important;
width: 450px;
height: 300px;
clip-path: polygon(50px 0%, 100% 0%, calc(100% - 50px) 100%, 0% 100%) !important;
}


}