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


/* =====================
   worksページ専用スタイル
===================== */ 



/*PC_px*/
/*@media screen and (min-width: 1680px) {}*/



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


.sec01 { border-top: solid 1px var(--color99); padding: 0 0 100px;}

.sec01 h2 { font-size: 90px; margin: 50px 0 80px; text-align: center; color: #FFF; -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}

.works-list { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1000px; margin: 0 auto 50px;}

.card { width: calc( 50% - 15px ); margin-top: 40px;}
.card:nth-of-type(1),
.card:nth-of-type(2) { margin-top: 0;}
.youtube__wrap { position: relative; width: 100%; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;}
.youtube__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.youtube__wrap iframe { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 2;}
.youtube__wrap.active .youtube__thumbnail { display: none;}
.youtube__wrap.active iframe { display: block;}

.caption { display: flex; justify-content: center; padding: 10px 0;}
.caption p { font-size: 18px; font-weight: 500; color: var(--color03);}



}



/*sp*/
@media only screen and (max-width: 767px) {


.sec01 { border-top: none; padding: 0 5.469vw 15.625vw;}

.sec01 h2 { font-size: 14.063vw; margin: 7.813vw 0 12.5vw; text-align: center; color: #FFF; -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}

.works-list { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; max-width: 156.25vw; margin: 4.688vw auto;}

.card { width: 100%; margin-top: 6.25vw;}
.card:nth-of-type(1) { margin-top: 0;}
.youtube__wrap { position: relative; width: 100%; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;}
.youtube__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.youtube__wrap iframe { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 2;}
.youtube__wrap.active .youtube__thumbnail { display: none;}
.youtube__wrap.active iframe { display: block;}

.caption { display: flex; justify-content: center; padding: 1.563vw 0;}
.caption p { font-size: 2.031vw; font-weight: 500; color: var(--color03);}



}



/*sp_px*/
@media screen and (width: 640px) {


.sec01 { border-top: none; padding: 0 35px 100px;}

.sec01 h2 { font-size: 90px; margin: 50px 0 80px; text-align: center; color: #FFF; -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}

.works-list { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; max-width: 1000px; margin: 30px auto;}

.card { width: 100%; margin-top: 40px;}
.card:nth-of-type(1) { margin-top: 0;}
.youtube__wrap { position: relative; width: 100%; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;}
.youtube__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.youtube__wrap iframe { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 2;}
.youtube__wrap.active .youtube__thumbnail { display: none;}
.youtube__wrap.active iframe { display: block;}

.caption { display: flex; justify-content: center; padding: 10px 0;}
.caption p { font-size: 13px; font-weight: 500; color: var(--color03);}



}