@charset "UTF-8";

body {
    background: #fff;
}
.Interview-Main-content {
    background: no-repeat right top;
    background-size: auto 100%;
    height: 600px;
    margin: auto;
    max-width: 1366px;
    position: relative;
    width: 100%;
    z-index: 1;
    animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) both;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#wrapper > .bg1 {
    background: url(/assets/common/img/back01.png) no-repeat center center;
    background-size: contain;
    height: 437px;
    margin-right: 16px;
    position: absolute;
    right: 53%;
    top: 160px;
    width: 701.469px;
    z-index: 0;
}
.Interview-Main-content .block1 {
    margin: auto;
    max-width: 1080px;
    width: 100%;
    position: relative;
    top: 233px;
    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.5s;
}
@keyframes slideIn {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
.Interview-Main-content .block1 h2 {
    font-size :40px;
    background: linear-gradient(328deg, rgba(0,169,214,1) 0%, rgba(0,114,179,1) 100%);
    color: #fff;
    padding: 2px 18px 8px;
    margin: 10px;
    width: fit-content;
    line-height: 1.3;
    letter-spacing: 0.05em;
}
.Interview-Main-content .block1 h2:nth-of-type(2) {
    margin-left: 105px;
}
.Interview-Main-content .block1 p {
    margin: 0
}
.Interview-Main-content .block1 .copy1 {
    font-size: 20px;
    width: 395px;
    line-height: 1.5;
    margin-top: 20px;
}
.Interview-Main-content .block1 div {
    display: flex;
    margin-top: 30px;
}
.Interview-Main-content .block1 div .name1 {
    font-size: 18px;
    line-height: 1.5;
}
.Interview-Main-content .block1 div .name2 {
    font-size: 30px;
    margin-left: 30px;
}
.Interview-Main-content .block1 div .name2 span {
    font-size: 22px;
    margin-left: 3px;
}

.Interview-content01 {
    background: #f9f9f9;
    width: 100%;
    padding: 50px 0 130px;
}
.Interview-content01 .Interview-frame {
    width: 100%;
    max-width: 850px;
    margin: 100px auto 0;
    display: flex;
    justify-content: space-between;
}
.Interview-content01 .Interview-frame .img-box {
    width: 400px;
}
.Interview-content01 .Interview-frame .img-box img {
    width: 100%;
}
.Interview-content01 .Interview-frame .text-box{
    width: 390px;
}
.Interview-content01 .Interview-frame .text-box p {
    margin: 0;
}
.Interview-content01 .Interview-frame .text-box .q1 {
    color: #0072b3;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 1.5px solid;
    margin-bottom: 15px;
    line-height: 1.25;
    padding: 6px 0 13px;
    letter-spacing: 0.02em;
}
.Interview-content01 .Interview-frame .text-box .a1 {
    font-size: 16px;
    line-height: 1.6;
}
.bg-01 {
    background-image: url(/assets/interview/img/bg-01.svg);
    background-repeat: no-repeat;
    background-size: 203px auto;
    background-position: top 95px right 20px;
}
.bg-02 {
    background-image: url(/assets/interview/img/bg-02.svg);
    background-repeat: no-repeat;
    background-size: 248px auto;
    background-position: top 95px left 20px;
}
.bg-03 {
    background-image: url(/assets/interview/img/bg-03.svg);
    background-repeat: no-repeat;
    background-size: 248px auto;
    background-position: top 95px right 20px;
}
.bg-04 {
    background-image: url(/assets/interview/img/bg-04.svg);
    background-repeat: no-repeat;
    background-size: 253px auto;
    background-position: top 95px left 20px;
}

.Interview-content02 {
    background: #f2f2f2;
    width: 100%;
    padding: 40px 0 60px;
}
.Interview-content02 .copy01 {
    font-size: 17px;
    color: #0072b3;
    text-align: center;
    margin: 0;
}
.Interview-content02 .copy02 {
    font-size: 28px;
    color: #222222;
    text-align: center;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.Interview-content02 .other-img {
    display: flex;
    width: 100%;
    max-width: 850px;
    margin: 40px auto 0;
    position: relative;
    justify-content: space-between;
}
.Interview-content02 .other-img img {
    width: 100%;
}
.Interview-content02 .other-img .item {
    width: 195px;
    height: 260px;
    overflow: hidden;
    position: relative;
}
.Interview-content02 .other-img .item .caption {
    font-size: 16px;
	text-align: center;
	padding-top: 95px;
	color: #fff;
    font-weight: 700;
}
.Interview-content02 .other-img .item .caption span {
    font-size: 14px;
    font-weight: 500;
}
.Interview-content02 .other-img .item .mask {
    width: 100%;
	height: 100%;
	position: absolute;	/* 絶対位置指定 */
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition: all 0.2s ease;
}
.Interview-content02 .other-img .item:hover .mask {
    opacity: 1;
}
.Interview-content02 .other-img .item a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: inline-block;
}

.Interview-content03 {
    background: #f9f9f9;
    width: 100%;
    padding: 80px 0 130px;
}
.I-button a {
    background: #0072b3;
    border-radius: 9999px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 185px;
    padding: 8px 25px 10px;
    color: #fff;
    line-height: 1.7;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 700;
    font-size: 25px;
    letter-spacing: 0.05em;
}
.I-button a:hover {
    background: #42a2dc;
}
.I-button a img{
    width: 12px;
}
.I-button a:hover:after {
    border-color: #FFF;
}

footer {
    margin-top: 0;
}



@media only screen and (max-width: 768px) {
    
.Interview-Main-content {
    max-height: 281px;
    max-width: 100%;
    background-position: center;
    top: 60px;
}
.Interview-Main-content .block1 {
    max-width: 80%;
    top: 230px;
}
.Interview-Main-content .block1 h2 {
    font-size :18px;
    padding: 2px 7px 4px;
    margin: 6px 0;
}
.Interview-Main-content .block1 h2:nth-of-type(2) {
    margin-left: 40px;
}
.Interview-Main-content .block1 .copy1 {
    font-size: 15px;
    width: 100%;
    margin-top: 10px;
}
.Interview-Main-content .block1 div {
    margin-top: 15px;
}
.Interview-Main-content .block1 div .name1 {
    font-size: 14px;
}
.Interview-Main-content .block1 div .name2 {
    font-size: 20px;
    margin-left: 15px;
    line-height: 2.9;
}
.Interview-Main-content .block1 div .name2 span {
    font-size: 14px;
}
    
.Interview-content01 {
    padding: 1px 0 115px;
    margin-top: 210px;
}
.Interview-content01 .Interview-frame {
    max-width: 90%;
    margin: 60px auto 0;
    flex-direction: column;
}
.Interview-content01 .Interview-frame:nth-of-type(2),
.Interview-content01 .Interview-frame:nth-of-type(4){
    flex-direction: column-reverse;
}
.Interview-content01 .Interview-frame .img-box {
    width: 90%;
    margin: 0 auto;
}
.Interview-content01 .Interview-frame .text-box{
    width: 100%;
    min-height: 136px;
}

.Interview-content01 .Interview-frame .text-box .q1 {
    font-size: 15px;
    margin-bottom: 10px;
    line-height: 1.1;
    padding: 15px 0 5px;
}
.Interview-content01 .Interview-frame .text-box .a1 {
    font-size: 14px;
    line-height: 1.4;
}    
    
 .bg-01 {
    background-size: 138px auto;
    background-position: top 0px right 10px;
}
.bg-02 {
    background-size: 168px auto;
    background-position: top 2px right 10px;
}
.bg-03 {
    background-size: 169px auto;
    background-position: top 8px right 10px;
}
.bg-04 {

    background-size: 170px auto;
    background-position: top 3px right 10px;
}   
    
.Interview-content02 {
    padding: 40px 0 30px;
}
.Interview-content02 .copy01 {
    font-size: 13px;
    margin: 0;
}
.Interview-content02 .copy02 {
    font-size: 18px;
}
/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
  
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}
  
/*===========
.f_area
===========*/
.scroll-box {
  overflow-x: auto;
  margin-top: 20px;
}
.scroll-box .f_area {
  display: flex;
  justify-content: center;
  justify-content: flex-start;
  overflow-x: scroll;
  padding: 0 0 15px;
}
.scroll-box .f_area .f_one {
  width: 113px;
  flex: 0 0 37%;
  margin-right: 15px;
}
.scroll-box .f_area .f_one a {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}
.scroll-box .f_area .f_one a img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  transform: scale(1);
  transition: .5s;
}
.scroll-box .f_area .f_one a  {
  text-decoration: none;
  color: #222222;
}   
.scroll-box .f_area .f_one p {
   line-height: 1.2;  
   text-align: center;
   margin: 0;
} 
.scroll-box .f_area .f_one .p1 {
    font-size: 12.5px;
    font-weight: 700;
    margin: 9px 0 5px;
}
.scroll-box .f_area .f_one .p2 {
    font-size: 12px;  
}
    
    
.Interview-content03 {
    padding: 40px 0 60px;
}
.I-button a {
    max-width: 132px;
    padding: 10px;
    line-height: 1.6;
    font-size: 16px;
}
.I-button a img{
    width: 10px;
}

    

}