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

.sp-only {display: none; }
@media screen and (max-width: 768px){
  body { font-size: 1rem; }
  .sp-only {display: inline; }
}
/*MV*/
.mv-lead-wrapper{  }
.mv-lead-wrapper .lead{font-size: 1.2em;margin-bottom: 3em; padding-bottom: 3em; border-bottom: 1px solid #CCC; }
.mv-lead-wrapper p:not(:first-of-type){margin-top: 1.4em;}
.mv-wrap img{width: 100%;}


/*セクション*/
.section + .section{padding-top: 17vw;}

.section-head .title_wrapper{background:var(--color-bg); padding: 2rem 0;position: relative; }
.section-head .title_wrapper:after{content: "";    width: 100%;  height: 3em;background: var(--color-bg) ;display: block; position: absolute; z-index: -1;    bottom: 0; transform: translateY(3em);}
.section-head .title_wrapper .title{font-size: 1.1em;}
.section-head .title_flex{display: flex; column-gap: 8%;}
.section-head .title_flex .num{ font-size: 3.5em;    font-weight: bold;color: #fff;    line-height: 1;}
.section-head .title_flex .sub{color:var(--color-accent);    font-size: 0.8em;}
.tutor_flex{display: flex; column-gap: 7%; align-items: center;margin-bottom: 1em;}
.tutor_flex .img{width: 44%;}
.tutor_flex p,.tutor_flex .name .small{font-size: 0.7rem;}
.tutor_flex .name{font-size: 1.2em;}
.tutor .tutor_lead{    font-size: 4.6vw;  background: linear-gradient(transparent 0%, #3878D2 0%);display: inline;
    padding: 6px;color: #fff;  line-height: 1.9;font-weight: 600;}
.tutor .tutor_lead.-pc{display: none;}
.tutor .tutor_text .info{font-size: 2.5vw;}

.section_body{margin-top: 12vw;}
.section_body .section_lead {font-size: 1.125rem; font-weight: bold; line-height: 1.7;  padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #eb0000; }
.section_body p + p{margin-top: 3em;}
.section_body .img{padding: 2rem 0;margin:0 7vw; }
.section_body .img .caption{font-size: 0.8em;}

@media screen and (min-width: 768px){
	.section + .section{padding-top: 10vw;}
	.section_body{margin-top: 8vw;}
	.tutor .tutor_lead.-sp{display:none;}
	.tutor .tutor_lead.-pc{display: inline;font-size: 1.5em;}
	.tutor .tutor_text .info{    font-size: initial;margin-top: 1em;}
	.tutor_flex .img{    width: 27%;}
}

@media screen and (min-width: 1024px){
	.section + .section{padding-top: 10vw;}
	.section_body{margin-top: 4vw;}
	.section_body .img{padding: 5em 0;}
	.section-head .title_flex .num{font-size: 5em;}
	.section-head .title_flex{    column-gap: 5%;}
	.section-head .title_wrapper .title{font-size: 1.4em;}
	.section-head .title_wrapper{    padding: 4.5em 0 3.5em 0;}
	.section-head .title_wrapper:after{    transform: translateY(4em); height: 4em;}
	.tutor .tutor_lead{   font-size: 2em;}
	.tutor_flex .img{    width: 22%;}
	.tutor_flex p, .tutor_flex .name .small{font-size: 0.8rem;}
}

.mv-wrap { }
.main-title { text-align: center; font-weight: bold; font-size: 1.3rem; margin-bottom: 1em; background: #eb0000; color: #FFF; width: 100%; line-height: 1.5; padding: 4em 2em 6em; margin-bottom: -4em; text-align: left; position: relative; }
.main-title .teidan { display: block; background: #FFF; color: #eb0000; margin-left: -2rem; margin-bottom: 2em; width: fit-content; padding: .3em 2em;  clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 100%, 0 100%); width: 10em; position: absolute; left: 0; top: 0; margin: auto; }
.main-title .title { display: block; font-size:1.5em; }
.main-title .sub { font-size: 2.5em; }

.main_img { display: grid; grid-template-columns: 32% 65%; gap: 3%; margin-bottom: 3em;width: 90%; margin: 0 auto; position: relative; z-index: 3; }
.main_img img { height: 100%; object-fit: cover; }

.main_img .description { display: flex; flex-direction: column; justify-content: flex-end; font-size: .8735rem; line-height: 1.5; width: fit-content; position: relative; padding: 1em; color: #333;  }
.main_img .description p + p { margin-top: 2em; }
.main_img .description .name { font-size: 1.3em; }

@media screen and (max-width: 1500px){
  .main-title { margin-bottom: -3rem; padding-bottom: 5rem; }
  .main_img { width: 95%; }
}

@media screen and (max-width: 1250px){
  .main_img { display: flex; flex-direction: column-reverse; width: 90%; }
  .main-title .title { font-size: 1.3rem; }
.main-title .sub { font-size: 2em; }
}

@media screen and (max-width: 900px){
  .main-title { margin-bottom: -5rem; padding: 3em 2rem 6rem;  }
  .main-title .teidan { font-size: 1rem;   }
  .main-title .title { font-size: 1.2rem; }
  .main-title .sub { font-size: 1.4rem; }
}


.mv-lead-wrapper { margin-top: 5rem;}
.lead-title-l { font-size: 2.5rem; font-weight: bold; text-align: center; line-height: 1.7; }
.lead-title-l::after { content: ''; width: 5em; height: 2px; display: block; background: #eb0000; margin: .5em auto; }
.lead-title-s { font-size: 1.4rem; font-weight: 500;text-align: center; margin-bottom: 2em; margin-top: 1em;  line-height: 1.7; }

@media screen and (max-width: 900px){
  .lead-title-l { font-size: 2rem; }
  .lead-title-s { font-size: 1.2rem; }
}

@media screen and (max-width: 600px){
  .lead-title-l { font-size: 1.7rem; }
  .lead-title-s { font-size: 1.125rem; }
}
  
.title-section { font-weight: bold; font-size: 2rem; margin: 4em 0 1.5em; position: relative; padding-left: 1em; line-height: 1.6; }
.title-section::before { content: ''; width:7px; height: 1em; display: inline-block; vertical-align: middle; background: #eb0000; margin-left: -1em; margin-right: calc(1em - 7px); }
@media screen and (max-width: 900px){
  .title-section { font-size: 1.5rem; }
}

.talker { background: #FFF; float: right; width: 400px; margin-left: 2em; margin-bottom: 1em; }
.talker img{ margin: 0; vertical-align: bottom; }
.talker .profile { padding: 1em; line-height: 1.5; font-size: .9rem;  }
.talker .profile .name { display: block; }
.talker .profile .name span { font-size: 1.2rem; }

.talker.left{ float: left;margin-left: 0; margin-right: 2em; }

@media screen and (max-width: 900px){
  .talker,
  .talker.left { float: none; margin: 0 auto 2em; width: 100%; max-width: 400px; }
}


.question { margin: 2em 0 1em; font-weight: bold; font-size: 1.2rem; }
.question::before { content: ''; width: 2em; height: 1px; display: inline-block; vertical-align: middle; margin-right: .5em; background: currentColor;}
.answer-name { margin-right: 1em; font-weight: bold; }


@media screen and (max-width: 900px){
  .question { font-size: 1.125rem; line-height: 1.6; }
}

.post_figure { margin: 4em 0;}
.figure_title { font-size: 1rem; font-weight: bold; text-align:center; margin-bottom: .5em; }
.post_figure figcaption { font-size: .9375rem; line-height: 1.6; }

.foot-fujitsu-logo { text-align: center; margin: 5rem auto 0; }
.foot-fujitsu-logo img { width: 60%; max-width: 350px; }

/*共通*/
.link-item .link-arrow{color: var(--color-accent);position: relative;    margin: 3em 0 0 auto;
    display: block; text-align: right;}
.link-item .link-arrow:after{content: "";width: 1.3em;height: 1.3em;border-top: 1px solid var(--color-accent); border-right: 1px solid var(--color-accent);transform: rotate(45deg);display: inline-flex;    vertical-align: middle; margin-top: -0.2em;}
@media screen and (min-width: 768px){
	.link-item .link-arrow{font-size: 0.8em;}
}


/*リンク*/
.link-wrapper{    background: var(--color-bg); padding: 2rem;}
.link-wrapper .link-title{font-size: 1.1em;margin-bottom: 1em;}
.link-wrapper .link-item{    display: block;   text-decoration: underline;  color: #3878D2;}

/*jsフェードイン*/
.js-fadein{opacity: 0; visibility: hidden; transform: translateY(15px);transition: opacity 1s, visibility 1s, transform 1s;}
.js-fadein.is-active{opacity: 1; visibility: visible;transform: translateX(0);}

.js-title{display: none;}


.download-btn { display: block; text-align: center; background: #eb0000; color: #FFF; width: 800px; max-width: 90%; margin: 0 auto; border-radius: 20px; margin: 5em auto; padding: 2em; }
.download-btn .main { font-weight: bold; font-size: 1.5rem; display: block; line-height: 1.5; }
.download-btn .sub { font-size: .9rem; display: block; line-height: 1.5; }
@media screen and (max-width: 768px){
  .download-btn { padding: 1.5em 0; }
  .download-btn .main { font-size: 1.2rem; margin-bottom: .5em; line-height: 1.3; }
  .download-btn .sub { font-size: .8rem; }
}