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

#header { background-color: transparent; } 

/*====================================================================================
#detail
====================================================================================*/

main { overflow: visible; }
.container_unique { padding: 0; }

/*============================
#topPanelArea
============================*/
#topPanelArea { padding: 35px 0 50px 20px; }
#topPanelArea h1 {}
#topPanelArea .en {}

/*============================
.sticky_container
============================*/
.sticky_container { flex-direction: column; margin-top: 70px; }

/*============================
#titleArea
============================*/
#titleArea { position: inherit; padding: 0 20px; }
#titleArea .image { display: none; }
#titleArea .image img {}
#titleArea .title { position: relative; top: inherit; }
#titleArea .title span.top { font-size: 1.325em; }
#titleArea .title span.bottom { font-size: 1.325em; }
#titleArea .data { display: none; }
#titleArea .data .detail {}
#titleArea .data .name {}

/*============================
#interviewArea
============================*/
#interviewArea {}
#interviewArea .container { width: 100%; border-radius: 20px; }
#interviewArea .container .top {}
#interviewArea .container .top .icon { width: 80px; height: 80px; }
#interviewArea .container .top .icon img {}
#interviewArea .container .top .data {}
#interviewArea .container .top .data .detail { letter-spacing: normal; }
#interviewArea .container .top .data .name {}
#interviewArea .container .content {}
#interviewArea .container .content .question { padding: 10px 20px; border-radius: 10px 10px 3px 10px; }
#interviewArea .container .content .answer { padding: 10px 20px; border-radius: 10px 10px 10px 3px; letter-spacing: 0.05em; }
#interviewArea .container .content .answer br {}
#interviewArea .container .content .image { width: 100%; height: 207px; }
#interviewArea .container .content .image img {}
#interviewArea .container .content.person01 {  }
#interviewArea .container .content.person01 .element01 {}
#interviewArea .container .content.person01 .element01:before { right: -15px; bottom: -20px; width: 60px; height: 70px; }
#interviewArea .container .content.person01 .element02 {}
#interviewArea .container .content.person01 .element02:before { left: inherit; right: -5px; top: inherit; bottom: -20px; transform: rotate(45deg); width: 50px; height: 68px; }
#interviewArea .container .content.person01 .element03 {}
#interviewArea .container .content.person01 .element03:before { right: -20px; bottom: -25px; }
#interviewArea .container .content.person01 .element04 {}
#interviewArea .container .content.person01 .element04:before { width: 40px; height: 72px; bottom: -20px; }
#interviewArea .container .content.person01 .element05 {}
#interviewArea .container .content.person01 .element05:before { width: 65px; height: 72px; }
#interviewArea .container .content.person02 {}
#interviewArea .container .content.person02 .element01 {}
#interviewArea .container .content.person02 .element01:before { right: -40px; bottom: -45px; width: 85px; height: 73px; }
#interviewArea .container .content.person02 .element02:before {}
#interviewArea .container .content.person02 .element03 {}
#interviewArea .container .content.person02 .element03:before { width: 40px; height: 74px; }
#interviewArea .container .content.person02 .element04 {}
#interviewArea .container .content.person02 .element04:before { right: -25px; top: 0; width: 40px; height: 50px; }
#interviewArea .container .content.person03 {}
#interviewArea .container .content.person03 .element01 {}
#interviewArea .container .content.person03 .element01:before { right: -15px; bottom: 0; width: 50px; height: 40px; }
#interviewArea .container .content.person03 .element02 {}
#interviewArea .container .content.person03 .element02:before { right: -10px; width: 40px; height: 75px; }
#interviewArea .container .content.person03 .element03 {}
#interviewArea .container .content.person03 .element03:before { right: -20px; top: -11px; width: 55px; height: 30px; transform: rotate(30deg); }
#interviewArea .container .content.person03 .element04 {}
#interviewArea .container .content.person03 .element04:before { width: 60px; height: 50px; }
#interviewArea .container .content.person03 .element05 {}
#interviewArea .container .content.person03 .element05:before { right: -55px; bottom: -30px; width: 85px; height: 55px; }
#interviewArea .container .content.person04 {}
#interviewArea .container .content.person04 .element01 {}
#interviewArea .container .content.person04 .element01:before { right: -10px; bottom: -20px; width: 45px; height: 55px; transform: rotate(15deg); }
#interviewArea .container .content.person04 .element02 {}
#interviewArea .container .content.person04 .element02:before { right: -20px; bottom: -5px; width: 40px; height: 60px; }
#interviewArea .container .content.person04 .element03 {}
#interviewArea .container .content.person04 .element03:before { right: -15px; bottom: -25px; width: 55px; height: 55px; }
#interviewArea .container .content.person04 .element04 {}
#interviewArea .container .content.person04 .element04:before { right: -25px; bottom: -35px; width: 85px; height: 76px; }

#interviewArea .other { width: 100%; }
#interviewArea .other .title { position: relative; margin-top: 120px; }
#interviewArea .other .title .ja {}
#interviewArea .other .title .en {}
#interviewArea .other ul {}
#interviewArea .other ul li { float: left; width: 49%; margin: 20px 2% 0 0; }
#interviewArea .other ul li:nth-child(even) { margin-right: 0; }
#interviewArea .other ul li a {}
#interviewArea .other ul li a .image { width: 100%; height: auto; }
#interviewArea .other ul li a .image img {}
#interviewArea .other ul li a:hover .image img {}
#interviewArea .other ul li a .detail {}
#interviewArea .other ul li a .name {}
#interviewArea .other .button {}
#interviewArea .other .button a {}



/*====================================================================================
#list
====================================================================================*/
/*============================
#interviewListArea
============================*/
#interviewListArea { margin-top: 60px; }
#interviewListArea ul { flex-direction: column; gap: 30px; }
#interviewListArea ul li { width: 100%; }
#interviewListArea ul li a {}
#interviewListArea ul li a .image { width: 100%; height: auto; }
#interviewListArea ul li a .image img {}
#interviewListArea ul li a:hover .image img {}
#interviewListArea ul li a .title { margin-top: 10px; font-size: 1.125em; }
#interviewListArea ul li a .detail { margin-top: 10px; }
#interviewListArea ul li a .name { font-size: 0.875em; }

}