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

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

main { overflow: visible; }
.container_unique { padding: 0 50px; position: relative; }

/*============================
#topPanelArea
============================*/
#topPanelArea { padding: 230px 50px; }
#topPanelArea h1 {}
#topPanelArea .en {}

/*============================
.sticky_container
============================*/
.sticky_container { position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: 100px; }

/*============================
#titleArea
============================*/
#titleArea { position: sticky; top: 50%; transform: translateY(-50%); height: max-content; align-self: start; }
#titleArea .image { overflow: hidden; width: 400px; height: 240px; }
#titleArea .image img { width: 100%; height: auto; }
#titleArea .title { position: absolute; top: -65px; }
#titleArea .title span.top { display: inline-block; white-space: nowrap; padding: 8px 8px 6px 8px; font-size: 1.75em; font-weight: 600; font-feature-settings: 'palt'; color: #fff; background-image:url("../../imageFile/global/bg_letter01.png"); background-position: left top; background-repeat: no-repeat; }
#titleArea .title span.bottom { display: inline-block; white-space: nowrap; padding: 8px 8px 6px 8px; margin-top: 10px; font-size: 1.75em; font-weight: 600; font-feature-settings: 'palt'; color: #fff; background-image:url("../../imageFile/global/bg_letter02.png"); background-position: left top; background-repeat: no-repeat; }
#titleArea .data { margin-top: 55px; }
#titleArea .data .detail { font-weight: 500; }
#titleArea .data .name { margin-top: 15px; font-weight: 600; font-size: 1.5em; }

/*============================
#interviewArea
============================*/
#interviewArea {}
#interviewArea .container { overflow: hidden; margin: 0 auto; width: 600px; background-color: #fff; border-radius: 30px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); }
#interviewArea .container .top { display: flex; align-items: center; gap: 20px; background-color: #1771bf; padding: 20px; }
#interviewArea .container .top .icon { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid #66a3d9; }
#interviewArea .container .top .icon img { object-fit: cover; width: 100%; height: 100%; }
#interviewArea .container .top .data {}
#interviewArea .container .top .data .detail { font-size: 0.75em; font-weight: 500; color: #fff; }
#interviewArea .container .top .data .name { margin-top: 10px; font-size: 1.375em; font-weight: 600; color: #fff; }
#interviewArea .container .content { padding: 0 20px 80px; }
#interviewArea .container .content .question { float: right; margin-top: 40px; padding: 20px; border-radius: 20px 20px 3px 20px; background-color: #4b7ba6; line-height: 1.5; color: #fff; font-weight: 600; font-feature-settings: 'palt'; }
#interviewArea .container .content .answer { float: left; margin-top: 20px; padding: 20px; border-radius: 20px 20px 20px 3px; background-color: #ebebeb; line-height: 1.5; font-feature-settings: 'palt'; }
#interviewArea .container .content .answer br { height: 15px; }
#interviewArea .container .content .image { display: inline-block; overflow: hidden; margin-top: 40px; width: 560px; height: 323px; border-radius: 5px; }
#interviewArea .container .content .image img { width: 100%; height: auto; }
#interviewArea .container .content.person01 {  }
#interviewArea .container .content.person01 .element01 { position: relative; }
#interviewArea .container .content.person01 .element01:before { content: ''; position: absolute; right: -25px; bottom: -15px; background-image: url("../../imageFile/interview/element_interview01_01.png"); background-size: contain; background-repeat: no-repeat; width: 65px; height: 75px; }
#interviewArea .container .content.person01 .element02 { position: relative; }
#interviewArea .container .content.person01 .element02:before { content: ''; position: absolute; left: 0; top: -60px; transform: rotate(350deg); background-image: url("../../imageFile/interview/element_interview01_02.png"); background-size: contain; background-repeat: no-repeat; width: 60px; height: 82px; }
#interviewArea .container .content.person01 .element03 { position: relative; }
#interviewArea .container .content.person01 .element03:before { content: ''; position: absolute; right: -45px; bottom: -10px; transform: rotate(120deg); background-image: url("../../imageFile/interview/element_interview01_03.png"); background-size: contain; background-repeat: no-repeat; width: 75px; height: 52px; }
#interviewArea .container .content.person01 .element04 { position: relative; }
#interviewArea .container .content.person01 .element04:before { content: ''; position: absolute; right: -15px; bottom: -35px; background-image: url("../../imageFile/interview/element_interview01_04.png"); background-size: contain; background-repeat: no-repeat; width: 55px; height: 97px; }
#interviewArea .container .content.person01 .element05 { position: relative; }
#interviewArea .container .content.person01 .element05:before { content: ''; position: absolute; background-image: url("../../imageFile/interview/element_interview01_05.png"); background-size: contain; background-repeat: no-repeat; width: 70px; height: 80px; right: -35px; transform: rotate(75deg); top: -5px; }
#interviewArea .container .content.person02 {}
#interviewArea .container .content.person02 .element01 { position: relative; }
#interviewArea .container .content.person02 .element01:before { content: ''; position: absolute; right: -80px; bottom: -30px; background-image: url("../../imageFile/interview/element_interview02_01.png"); background-size: contain; background-repeat: no-repeat; width: 90px; height: 76px; }
#interviewArea .container .content.person02 .element02 { position: relative; }
#interviewArea .container .content.person02 .element02:before { content: ''; position: absolute; right: -10px; bottom: 0; background-image: url("../../imageFile/interview/element_interview02_02.png"); background-size: contain; background-repeat: no-repeat; width: 30px; height: 95px; }
#interviewArea .container .content.person02 .element03 { position: relative; }
#interviewArea .container .content.person02 .element03:before { content: ''; position: absolute; right: -12px; bottom: -30px; background-image: url("../../imageFile/interview/element_interview02_03.png"); background-size: contain; background-repeat: no-repeat; width: 45px; height: 86px; }
#interviewArea .container .content.person02 .element04 { position: relative; }
#interviewArea .container .content.person02 .element04:before { content: ''; position: absolute; transform: rotate(30deg); right: -28px; background-image: url("../../imageFile/interview/element_interview02_04.png"); background-size: contain; background-repeat: no-repeat; width: 46px; height: 60px; }
#interviewArea .container .content.person03 {}
#interviewArea .container .content.person03 .element01 { position: relative; }
#interviewArea .container .content.person03 .element01:before { content: ''; position: absolute; right: -30px; bottom: -10px; background-image: url("../../imageFile/interview/element_interview03_01.png"); background-size: contain; background-repeat: no-repeat; width: 60px; height: 50px; transform: rotate(270deg); }
#interviewArea .container .content.person03 .element02 { position: relative; }
#interviewArea .container .content.person03 .element02:before { content: ''; position: absolute; right: -15px; bottom: -25px; background-image: url("../../imageFile/interview/element_interview03_02.png"); background-size: contain; background-repeat: no-repeat; width: 52px; height: 98px; transform: rotate(45deg); }
#interviewArea .container .content.person03 .element03 { position: relative; }
#interviewArea .container .content.person03 .element03:before { content: ''; position: absolute; right: -15px; top: -17px; background-image: url("../../imageFile/interview/element_interview03_03.png"); background-size: contain; background-repeat: no-repeat; width: 65px; height: 42px; transform: rotate(15deg); }
#interviewArea .container .content.person03 .element04 { position: relative; }
#interviewArea .container .content.person03 .element04:before { content: ''; position: absolute; right: -5px; bottom: -25px; background-image: url("../../imageFile/interview/element_interview03_04.png"); background-size: contain; background-repeat: no-repeat; width: 80px; height: 68px; transform: rotate(15deg); }
#interviewArea .container .content.person03 .element05 { position: relative; }
#interviewArea .container .content.person03 .element05:before { content: ''; position: absolute; right: -75px; bottom: -25px; background-image: url("../../imageFile/interview/element_interview03_05.png"); background-size: contain; background-repeat: no-repeat; width: 100px; height: 68px; }
#interviewArea .container .content.person04 {}
#interviewArea .container .content.person04 .element01 { position: relative; }
#interviewArea .container .content.person04 .element01:before { content: ''; position: absolute; right: -43px; bottom: -15px; background-image: url("../../imageFile/interview/element_interview04_01.png"); background-size: contain; background-repeat: no-repeat; width: 55px; height: 68px; }
#interviewArea .container .content.person04 .element02 { position: relative; }
#interviewArea .container .content.person04 .element02:before { content: ''; position: absolute; right: -12px; bottom: -28px; background-image: url("../../imageFile/interview/element_interview04_02.png"); background-size: contain; background-repeat: no-repeat; width: 55px; height: 81px; }
#interviewArea .container .content.person04 .element03 { position: relative; }
#interviewArea .container .content.person04 .element03:before { content: ''; position: absolute; right: -20px; bottom: -25px; background-image: url("../../imageFile/interview/element_interview04_03.png"); background-size: contain; background-repeat: no-repeat; width: 70px; height: 69px; }
#interviewArea .container .content.person04 .element04 { position: relative; }
#interviewArea .container .content.person04 .element04:before { content: ''; position: absolute; right: -45px; bottom: -25px; background-image: url("../../imageFile/interview/element_interview04_04.png"); background-size: contain; background-repeat: no-repeat; width: 95px; height: 84px; }

#interviewArea .other { width: 600px; margin: 0 auto; padding: 0 20px; }
#interviewArea .other .title { position: relative; margin-top: 150px; }
#interviewArea .other .title .ja { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #00377e; font-weight: 600; font-size: 2em; z-index: 1; }
#interviewArea .other .title .en { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #ebebeb; font-size: 6.625em; font-weight: 700; letter-spacing: 0.05em; z-index: 0; }
#interviewArea .other ul {}
#interviewArea .other ul li { float: left; width: 270px; margin: 40px 20px 0 0; }
#interviewArea .other ul li:nth-child(even) { margin-right: 0; }
#interviewArea .other ul li a {}
#interviewArea .other ul li a .image { overflow: hidden; width: 270px; height: 162px; }
#interviewArea .other ul li a .image img { width: 100%; height: 100%; object-fit: cover; transition: 0.25s all; }
#interviewArea .other ul li a:hover .image img { transform: scale(1.05); }
#interviewArea .other ul li a .detail { margin-top: 15px; font-size: 0.75em; font-weight: 500; line-height: 1.35; }
#interviewArea .other ul li a .name { margin-top: 10px; font-size: 1.125em; font-weight: 600; }
#interviewArea .other .button { text-align: center; margin-top: 60px; }
#interviewArea .other .button a {}


/*====================================================================================
#list
====================================================================================*/
/*============================
#interviewListArea
============================*/
#interviewListArea {}
#interviewListArea ul { display: flex; flex-wrap: wrap; gap: 80px; }
#interviewListArea ul li { width: 540px; }
#interviewListArea ul li a {}
#interviewListArea ul li a .image { width: 540px; height: 334px; overflow: hidden; }
#interviewListArea ul li a .image img { width: 100%; height: 100%; object-fit: cover; transition: 0.25s all; }
#interviewListArea ul li a:hover .image img { transform: scale(1.05); }
#interviewListArea ul li a .title { margin-top: 15px; font-size: 1.5em; font-feature-settings: 'palt'; font-weight: 600; line-height: 1.5; color: #00377e; }
#interviewListArea ul li a .detail { margin-top: 15px; font-size: 0.75em; font-weight: 500; }
#interviewListArea ul li a .name { margin-top: 10px; font-size: 1.125em; font-weight: 600; }