@charset "utf-8";
/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-break: break-all;
word-wrap: break-word;
}
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
line-height: 1.3;
}
body {
padding: 0;
margin: 0;
background: #fff;
color: #000;
font-size: 1.6rem;
font-family: 'メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック';
font-family: "Noto Sans JP";
font-weight: normal;
width: 100%;
height: 100%;
}
li{
list-style: none;
}
ul::before,
ul::after,
ol::before,
ol::after,
dl::before,
dl::after {
display: none;
}
img {
max-width: 100%;
vertical-align: top;
}
a {
color: #000;
text-decoration: none;
transition: .3s;
}
a:hover {
opacity: 0.7;
}
/* reset end */

/* wrap */
#wrap {
min-width: 320px;
overflow: hidden;
line-height: 1.7;
}
#header {
min-width: 320px;
}
#wrap * {
box-sizing: border-box;
}
#wrap img {
vertical-align: top;
height: auto;
}
	@media screen and (max-width: 768px) {
	html {

	}
	#wrap {
	}
	}
main#main {
font-family: "Noto Serif JP", serif;
}
/* wrap end */

/* area */
.area {
position: relative;
padding: 70px 20px;
box-sizing: border-box;
}
.inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1020px;
margin: 0 auto;
box-sizing: border-box;
}
.pc {
display: block;
}
.sp {
display: none;
}
#main {
background: #000 url(../img/bg01.jpg) no-repeat right top / 100% auto;
background-attachment: fixed;

color: #fff;
}
	@media screen and (max-width: 768px) {
	.area {
	padding: 30px 20px;
	}
	.inner {
	max-width: 100%;
	}
	.pc {
	display: none;
	}
	.sp {
	display: block;
	}
	}
/* area end */

/* header */
#wrap .ph.area {
padding: 0;
border-bottom: solid 1px #1f1f1f;
}
#wrap .ph .inner {
max-width: inherit;
transition: height .3s ease;
position: relative;
margin: 0 auto;
width: 86.667vw;
height: 6.458vw;
}
#wrap .ph .logo {
transition: top .3s ease;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: .417vw;
position: absolute;
left: 0;
top: 1.667vw;
z-index: 1;
}
#wrap .ph .logo img {
transition: height .3s ease;
display: block;
width: auto;
height: 3.385vw;
}
#wrap .ph .logo p {
margin: 0;
padding: 0;
font-size: .573vw;
color: #8f8f8f;
}
#wrap .ph .logo .mynavinews img {
display: block;
width: auto;
height: 1.875vw;
}
@media screen and (max-width: 768px) {
#wrap .ph .inner {
transition: height 0.3s ease;
position: relative;
margin: 0 auto;
width: 87.467vw;
height: 25.333vw;
height: 14.4vw;
}
#wrap .ph .logo {
transition: top 0.3s ease;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 2.133vw;
position: absolute;
left: 0;
top: 3.2vw;
z-index: 1;
}
#wrap .ph .logo img {
transition: height 0.3s ease;
display: block;
width: auto;
height: 8vw;
}
#wrap .ph .logo p {
margin: 0;
padding: 0;
font-size: 2.667vw;
color: #8f8f8f;
}
#wrap .ph .logo .mynavinews img {
display: block;
width: auto;
height: 8vw;
}
}
/* header end */

/* footer */
#wrap .pb.area {
padding: 0;
background-color: #1f1f1f;
padding: 6.667vw 0 3.333vw 0;
padding: 3.333vw 0;
}
#wrap .pb .inner {
margin: 0 auto;
width: 86.667vw;
}
.pb .pankuzu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
font-size: .729vw;
}
.pb .pankuzu a {
text-decoration: none;
color: #8f8f8f;
}
.pb .pankuzu li:not(:first-child)::before {
content: ">";
margin: 0 .625vw;
color: #8f8f8f;
}
@media screen and (max-width: 768px) {
.pb .pankuzu {
font-size: 2.667vw;
}
}
.pf.area {
padding: 0;
}
.pf .pftop {
background-color: #333;
}
#wrap .pf .pftop .inner {
max-width: inherit;
display: flex;
flex-flow: column;
width: 100%;
box-sizing: border-box;
max-width: 1200px;
margin: auto;
padding: 50px 40px;
}
.pftop_head {
display: block;
margin-bottom: 18px;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: .08em;
}
.footerTop_information {
width: 63.8%;
}
.pftop_information_list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.pftop_information_list li {
width: 50%;
font-size: 14px;
}
.pftop_information_list li a {
display: inline-block;
transition: opacity .3s ease;
color: #fff;
font-size: 11px;
letter-spacing: .08em;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
#wrap .pf .pftop .inner {
padding: 35px 20px;
}
}
.pfbottom {
background: #fff;
}
#wrap .pf .pfbottom .inner {
max-width: inherit;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
max-width: 1200px;
margin: auto;
padding: 35px 40px;
}
.pfbottom_logo {
transition: opacity .3s ease;
display: flex;
flex-direction: column;
width: 100%;
}
.pfbottom_logo_svg {
width: 108px;
height: 20px;
}
.pfbottom_copy {
margin-top: 16px;
font-size: 10px;
letter-spacing: .08em;
}
@media screen and (max-width: 768px) {
#wrap .pf .pfbottom .inner {
padding: 25px 20px;
}
.pftop_information_list li {
width: 100%;
}
}
/* footer end */

/* pagetop */
#pagetop {
position: fixed;
right: 0;
bottom: 2%;
transition: all 0.3s linear;
z-index: 100;
cursor: pointer;
flex: 0 1 50px;
width: 50px;
height: 50px;
}
#pagetop:hover {
opacity: 0.6;
}
#pagetop a{
display: block;
width: 50px;
height: 50px;
background: #373737;
text-indent: -9999px;
}
#pagetop a:before {
content: "";
position: absolute;
right: 50%;
top: 50%;
width: 15px;
height: 15px;
margin: -6px -9px 0 0;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
}
	@media screen and (max-width: 768px) {
	#pagetop {
	width: 40px;
	height: 40px;
	}
	#pagetop.active,
	#pagetop:hover {
	opacity: 0.8;
	}
	#pagetop a {
	width: 40px;
	height: 40px;
	}
	#pagetop a:before {
	width: 10px;
	height: 10px;
	margin: -4px -6px 0 0;
	}
	}
	@media screen and (max-width: 520px) {
	}
/* visual
-------------------------------------------------------*/
#visual .inner {
max-width: 1400px;
max-width: 1200px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
#visual .visual_ttl {
width: 50%;
text-align: center;
}
#visual .visual_ttl img {
max-width: 610px;
width: 100%;
}
#visual .visual_img {
width: 50%;
}
	@media screen and (max-width: 768px) {
	#visual .visual_ttl {
	width: 100%;
	}
	#visual .visual_ttl img {
	width: 100%;
	}
	}
/*
height: calc(100vw * (670 / 500));
*/
/* common 
-------------------------------------------------------*/
	@media screen and (max-width: 768px) {
	}

/* lead
-------------------------------------------------------*/
#lead .txt {
text-align: left;
font-size: 1.6rem;
line-height: 2;
}
	@media screen and (max-width: 768px) {
	#lead .txt {
	font-size: 1.4rem;
	}
	}

/* interview
-------------------------------------------------------*/
#interview {
padding: 0;
}
#interview .inner {
max-width: inherit;
}
.interview_box {
display: flex;
flex-flow: column;
gap: 50px;
}
.interview_box .box {
display: flex;
flex-flow: row wrap;
column-gap: 50px;
align-items: flex-start;
}
.interview_box .box.img_l {
flex-flow: row-reverse wrap;
}
.interview_box .box.img_no {
max-width: 1060px;
padding: 0 20px;
margin: 0 auto;
}
.interview_box .box.img_no .txt_box {
flex: 1 0 100%;
}
.interview_box .box .txt_box {
flex: 1 0 50%;
}
.interview_box .box.img_r .txt_box {
padding-left: calc((100vw - 1040px) / 2);
}
.interview_box .box.img_l .txt_box {
padding-right: calc((100vw - 1040px) / 2);
}
	@media screen and (max-width: 1060px) {
    .interview_box .box.img_r .txt_box {
    padding-left: 20px;
    }
    .interview_box .box.img_l .txt_box {
    padding-right: 20px;
    }
    }
.interview_box .box .img_box {
flex: 0 1 calc(50% - 50px);
position: relative;
}
.interview_box .vwbox .img_box .img {
position: relative;
width: 100%;
height: 100%;
display: flex;
}
.interview_box .box .img_box img {
width: 100%;
height: auto;
}
.interview_box .box .txt_box .ttl {
color: var(--color_blue);
font-size: 5rem;
font-weight: 300;
}
.interview_box .box .txt_box .ttl_jp {
color: var(--color_blue);
font-size: 2.2rem;
font-weight: 500;
}
.interview_box .box .txt_box .main_ttl {
font-size: 5rem;
font-weight: 500;
line-height: 1.2;
margin: 10px 0 30px;
}
.interview_box .box .txt_box .sub_ttl {
color: var(--color_blue);
font-size: 2rem;
font-weight: 500;
border-bottom: 1px solid var(--color_blue);
padding-bottom: 10px;
margin-bottom: 1.8rem;
}
.interview_box .box .txt_box .txt {
line-height: 1.8;
font-size: 1.6rem;
}
.interview_box .box .txt_box .txt b {
line-height: 1.8;
color: var(--color_blue);
font-weight: bold;
}
.interview_box .box:first-child .img_box {
align-self: flex-end;
}
.interview_box .box.name {
position: relative;
height: 50px;
}
.interview_box .box .name_box {
position: absolute;
left: calc(50% + 100px);
bottom: 0;
background: #000;
border: 1px solid #fff;
padding: 30px 20px;
font-weight: 500;
aspect-ratio: 1 / 1;
width: clamp(120px, 16vw, 200px);
display: grid;
place-content: center; 
padding: 16px;
box-sizing: border-box;
gap: 5px;
}
.interview_box .name_box .ttl_en {
color: var(--color_blue);
font-size: 2rem;
}
.interview_box .name_box .name {
font-size: 3rem;
}
.interview_box .name_box .name span {
font-size: 2rem;
}
.interview_box .name_box .title {
font-size: 1.3rem;
}
	@media screen and (max-width: 1090px) {
    .interview_box .name_box .title {
    font-size: 1vw;
    }
    }
	@media screen and (max-width: 1020px) {
    .interview_box .name_box .ttl_en {
    font-size: 1.55vw;
    }
    .interview_box .name_box .name {
    font-size: 2.3vw;
    }
    .interview_box .name_box .name span {
    font-size: 1.55vw;
    }
    .interview_box .name_box .title {
    font-size: 1.1vw;
    }
    }
    @media screen and (max-width: 768px) {
    .interview_box {
    gap: 30px;
    }
    .interview_box .box {
    gap: 30px;
    }

    .interview_box .box.name {
    height: 10px;
    }
    .interview_box .box.img_l .txt_box,
    .interview_box .box.img_r .txt_box {
    padding: 0 20px;
    }
    #interview .box .img_box {
    flex: 1 0 100%;
    width: 100%;
    padding: 0 20px;
    }
    #interview .box .img_box .img {
    margin: 0 auto;
    max-width: 800px;
    }

.interview_box .box .txt_box .txt {
font-size: 1.4rem;
}
/*
	.interview_box .box .txt_box {
	flex: 1 0 100%;
	}
	#interview .box .txt_box .ttl {
	font-size: 3rem;
	}
	#interview .box .txt_box .ttl_jp {
	font-size: 1.8rem;
	}
	#interview .box .txt_box .main_ttl {
	font-size: 4rem;
	margin: 10px 0 20px;
	}
	#interview .box .txt_box .sub_ttl {
	font-size: 2rem;
	}
	#interview .box .txt_box .txt {
	font-size: 1.4rem;

	}
*/

	.interview_box .box .name_box {
    width: clamp(260px, 50vw, 100%);
    left: calc(50%);
transform: translate(-50%,0);
    aspect-ratio: inherit;
padding: 5px;
row-gap: 0;
    }

	.inner.effect .box .name_box .ttl_en {
	font-size: 1.2rem;
	}
	.inner.effect .box .name_box .name {
	font-size: 1.6rem;
	}
	.inner.effect .box .name_box .name span {
	font-size: 1.2rem;
	}
	.inner.effect .box .name_box .title {
	font-size: 1.2rem;
	}
	}

/* introduction
-------------------------------------------------------*/
.list_intro {
display: flex;
flex-flow: column;
gap: 90px;
}
.list_intro li .sub_ttl {
color: var(--color_blue);
font-size: 2.2rem;
font-weight: 500;
position: relative;
}
.list_intro li .sub_ttl::after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 1px;
background: var(--color_blue);
left: 0;
top: 50%;
transform: translate(0,50%);
z-index: 1;
}
.list_intro li .sub_ttl span {
background: #000;
z-index: 2;
position: relative;
padding-right: 25px;
}
.list_intro li .ttl {
font-size: 4rem;
font-weight: 500;
background: linear-gradient(to right, #7fb5d7, #fff, #fff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin-bottom: 20px;
}
.list_intro li .txt_box {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
gap: 50px;
}
@media screen and (min-width: 768px) {
.list_intro li.list_intro_img_l .txt_box {
flex-flow: row-reverse nowrap;
}
}
.list_intro li .txt_box .txt {
flex: 0 0 50%;
box-sizing: border-box;
}
.list_intro li .txt_box .img {
text-align: center;
}
	@media screen and (max-width: 768px) {
.list_intro {
gap: 60px;
}
.list_intro li .ttl {
font-size: 3.5rem;
}
	.list_intro li .sub_ttl {
	font-size: 1.8rem;
	}
	.list_intro li .sub_ttl span {
	padding-right: 20px;
	}
	.list_intro li .ttl {
	font-size: 2.6rem;
	}
	.list_intro li .txt_box {
	flex-flow: column;
gap: 30px;
	}
	.list_intro li .txt_box .txt {
	flex: 0 0 100%;
	font-size: 1.4rem;
	}
	.list_intro li .txt_box .img {
	margin: 0;
	}
	}

/* summary
-------------------------------------------------------*/
#summary {
background: #373737;
font-size: 1.6rem;
line-height: 2;
}
#summary .txt_box {
margin-top: 40px;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
}
#summary .txt_box .txt {
flex: 0 0 50%;
box-sizing: border-box;
}
#summary .txt_box .img {
margin: 0 0 0 50px;
}
	@media screen and (max-width: 768px) {
	#summary {
	font-size: 1.4rem;
	}
	#summary .txt_box {
	margin-top: 20px;
	flex-flow: column;
	}
	#summary .txt_box .txt {
	flex: 0 0 100%;
	}
	#summary .txt_box .img {
	margin: 20px 0 0;
	}
	}

/* btn_area */
#btn_area {
background: #1F1F1F;
}
.btn01 a {
display: block;
background: #a3dbff;
font-size: 3.5rem;
font-weight: 500;
width: 600px;
max-width: 100%;
height: 100px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
}
.btn01 a::after {
position: absolute;
display: block;
content: "";
right: 30px;
width: 14px;
height: 14px;
border-top: 3px solid #000;
border-right: 3px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
	@media screen and (max-width: 768px) {
	.btn01 a {
	font-size: 2rem;
	height: 60px;
	}
	.btn01 a::after {
	right: 20px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	}
	}
#wrap #note.area {
padding-top: 0;
background: #1F1F1F;
}
#wrap #note.area .txt {
display: flex;
font-size: 1.3rem;
line-height: 2;
}
#wrap #note.area .txt > *:nth-child(1) {
flex: 0 1 4rem;
}
#wrap #note.area .txt > *:nth-child(2) {
flex: 1 0 0%;
}
/* root */
:root {
	--color_blue: #a3dbff;
}
	@media screen and (max-width: 520px) {
	}