@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 640px) {

/*============================
#topPanelArea
============================*/
#topPanelArea {}
#topPanelArea h1 {}
#topPanelArea .en {}

/*============================
#workArea
============================*/
#workArea { padding-bottom: 60px; margin-top: 30px; }
#workArea .topCopy { padding-bottom: 0; font-size: 1em; line-height: 1.75; }
#workArea .content { margin-top: 0; }
#workArea .content .container { flex-direction: column; margin-top: 30px; gap: 20px; }
#workArea .content .container .top { width: 100%; }
#workArea .content .container .top .title { gap: 10px; white-space: inherit; }
#workArea .content .container .top .title .number { gap: 5px; }
#workArea .content .container .top .title .number span {}
#workArea .content .container .top .title .ja { font-size: 1.125em; margin-top: 3px; font-weight: 600; line-height: 1.35; font-feature-settings: 'palt'; }
#workArea .content .container .top .copy { margin-top: 15px; line-height: 1.5; font-size: 0.875em; }
#workArea .content .container .image { width: 100%; height: 250px; overflow: hidden; }
#workArea .content .container .image img { height: 100%; object-fit: cover; }
#workArea .content .note { position: relative; padding: 20px 10px 20px 60px; margin-top: 30px; }
#workArea .content .note:before { width: 76px; height: 32px; top: 0; left: -15px; }
#workArea .content .note.first:after { width: 100px; height: 108px; left: -35px; bottom: 30px; }
#workArea .content .note.second:after { width: 70px; height: 150px; left: -17px; }
#workArea .content .note.third:after { width: 80px; height: 143px; left: -20px; }
#workArea .content .note .catch { padding: 7px 5px 6px; }
#workArea .content .note .text { margin-top: 10px; font-size: 0.875em; line-height: 1.5; letter-spacing: normal; }

}