@charset "utf-8";

/*共通*/
.inter_w {
    width: 100%;
    margin: 0 auto 40px;
}

.inter_middl {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 80px;
}

.mb120 {
    margin-bottom: 120px;
}

.tb_no {
    display: inline;
}

.smp_on {
    display: none;
}

h3{
    font-weight: 500;
    font-size: 1.6em;
    line-height: 1.4em;
    margin-bottom: 20px;
}

h3 span {
    font-size: 120%;
}


.free_felx {
    display: flex;
    justify-content: space-around;
}

.free_felx_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.free_felx_pc_col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.ml {
    margin-left: 30px;
}

.img_400 {
    width: 400px;
}

.bg_diagonal {
    width: 100%;
    margin: 0;
    position: relative;
}

.bg_diagonal::before {
    content: '';
    position: absolute;
    top: -130px;
    bottom: 60px;
    left: 0;
    right: 0;
    transform: skewY(-10deg);
    z-index: -1;
}

.bg_diagonal.ryou_bgc::before {
    background-color: #f0f8ff; 
}

.bg_diagonal.abroad_bgc::before {
    background-color: #fff5e8; 
}

/*content*/
.inter_header {
    background-image: url(/common_d/connect/future/international/img/international_header.jpg);
    background-size: cover;
    background-position: top right;
    margin: 20px 0 0;
    height: 400px;
    position: relative;
}

.inter_ttl{
    position: absolute;
    bottom: 50px;
    left: 10%;
    margin-right: 10%;
    color: #fff;
    font-size: 3.5em;
    line-height: 1.0em;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", 'Noto Serif JP', serif;
    text-shadow: #333 1px 0 10px;
}
/*
.inter_line {
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #16328a;
    bottom: -50px;
}
*/
p.inter_top{
    line-height: 1.5;
    font-size: 1.5em;
    font-weight: bold;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", 'Noto Serif JP', serif;
    text-align: center;
    margin: 20px auto 60px;
}

.heading {
    width: 100%;
    margin: 20px auto 0;
    position: relative;
    padding: 500px 0 20px;
}

.heading h2 {
    color: #FFF;
    padding: 1em;
    line-height: 1.5;
    font-size: 2.0em;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", 'Noto Serif JP', serif;
    display: inline-block;
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 10;
    min-width: 40%;
}

.heading.gsuqu_head {
    background: url(/common_d/connect/future/international/img/cont1_img.jpg) center left / 70% no-repeat;
}

.heading.gsuqu_head h2 {
    background: #00008b;
}

.gsuqu {
    padding: 0 10% 0 15%;
    position: relative;
    top: -50px;
}

.gsuqu .waku {
    padding: 20px;
    background-color:#f5f5f5;
}

.katsudo_waku {
    width: 100%;
}

.fukidashi {
  position: relative;
  display: inline-block;
  margin: 0 0 15px 20px;
  padding: 7px 10px;
  width: 30%;
  min-width: 180px;
  height: 100%;
  color: #FFF;
  font-size: 16px;
  text-align: center;
  background: #41ab87;
  border: solid 3px #41ab87;
  box-sizing: border-box;
  border-radius: 10px;
}

.fukidashi:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 16px solid transparent;
  border-top: 16px solid #41ab87;
  z-index: 1;
}

.banzai {
    font-size: 1.6em;
    font-weight: 500;
    color: #41ab87;
    text-align: center;
    margin: 15px 0;
}

.gsuqu_katsudo {
    text-align: center;
}

.gsuqu_katsudo p {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 500;
    padding-top: 10px;
}

/*.ryou_img {
    width: 100%;
    height: 100%;
    max-width: 400px;
}*/

.japan_copy{
    color: #fff;
    padding: 10px;
    background-color: #00008b;
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    margin: 20px 0;
}

.japan_copy span{
    font-size: 140%;
}

.japan_st {
    position: relative;
    width: 300px;
    height: 250px;
    margin: 60px 30px 0;
}

.japan_st.muraki {
    background-image: url(/common_d/connect/future/international/img/japan1.png);
}
.japan_st.nukata {
    background-image: url(/common_d/connect/future/international/img/japan2.png);
}
.japan_st.shimabukuro {
    background-image: url(/common_d/connect/future/international/img/japan3.png);
}
.japan_st.kurosima {
    background-image: url(/common_d/connect/future/international/img/japan4.png);
}
.japan_st.ibaragi {
    background-image: url(/common_d/connect/future/international/img/japan5.png);
}

.fukidashi2 {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 8px;
    background-color: #ffffff;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: #000000;
    top:-30px;
    left: -10px;
}

.fukidashi2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 75%;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: #000000 transparent transparent;
    translate: -50% 100%;
}

.fukidashi2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 75%;
    border-style: solid;
    border-width: 17.6px 0 0 17.6px;
    border-color: #ffffff transparent transparent;
    translate: calc(-50% + 0.2px) 100%;
}
.japan_st p {
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 0.9em;
    line-height: 1.4em;
}

.japan_st p span {
    font-size: 1.3em;
    font-weight: 500;
}

.interview_box {
    position: relative;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #00008b;
}

.interview_box::before {
    content: "INTERVIEW";
    font-weight: 600;
    color: #fff;
    background-color: #00008b;
    padding: 5px 35px 5px 15px;
    border-radius:0 20px 20px 0;
    position: absolute;
    top: -20px;    
}

.interview_box h3 {
    text-align: center;
}

.interview_box p.spec {
    margin-top: 5px;
    font-size: 0.9em;
    line-height: 1.4em;
}

.interview_box p.spec span {
    font-size: 1.3em;
    font-weight: 500;
}

.interview_list li {
    padding: 15px 0;
    border-bottom: 1px dotted #00008b ;
    position: relative;
}

.interview_list li.icon_m{
    padding-left: 100px;
}
.interview_list li.icon_m::before {
    content: "";
    width: 85px;
    height: 85px;
    background-image: url(/common_d/connect/future/international/img/interview1_m.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
}
.interview_list li.icon_s{
    padding-right: 100px;
}
.interview_list li.icon_s::before {
    content: "";
    width: 85px;
    height: 85px;
    background-image: url(/common_d/connect/future/international/img/interview1_s.png);
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
}


.heading.abroad_head {
    background: url(/common_d/connect/future/international/img/cont2_img.jpg) center left / 70% no-repeat;
}

.heading.abroad_head h2 {
    background: #dc143c;
}

.abroad {
    width: 350px;
    margin-bottom: 30px;
}

.abroad h4 {
    font-size: 1.3em;
    font-weight: 500;
    background-color: #dc143c;
    border: 1px solid #dc143c;
    color: #fff;
    padding: 5px 10px;
    position: relative;
    margin-bottom: 10px;
}

.abroad h4 span {
    position: absolute;
    right: 10px;
    font-size: 0.8em;
    font-weight: 400;
}

.abroad h4.syogaku {
    background-color: #fff;
    color: #dc143c;
    border: 1px solid #dc143c;
}

.kokusai_center h4 {
    font-size: 1.3em;
    font-weight: 500;
    padding-bottom: 10px;
    border-bottom: 1px solid #dc143c;
}

.kokusai_center h4 span {
    color: #dc143c;
}

.interview_box.second_c {
    border-top: 1px solid #dc143c;
}

.interview_box.second_c::before {
    background-color: #dc143c;
}

.interview_2 .midashi1 {
    font-size: 1.1em;
    font-weight: 500;
    border-bottom: 2px dotted #ea553a;
}

.interview_2 .midashi2 {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.4em;
    margin: 10px 0;
}

.interview_2 .midashi2 span {
    background: linear-gradient(transparent 60%, #ffc0ab 60%);
}

.flag {
    margin: 20px auto 40px;
    width: 100%;
    max-width: 1100px;
}

.flag img {
    width: 100%;
}

/*リンクボタン*/

a.float_link{
opacity:1;
display:inline-block;
padding:1.5em 3em;
color:#fff;
border-radius:50px;
position:relative;
transition:0.3s;
background-position:80% 0;
background-size:150%;
width: 400px;
}

a.float_link.ryou_btn {
    background: linear-gradient(to right,#1E00FF,#33bbff 60%,#33bbff);
}
a.float_link.abroad_btn {
    background: linear-gradient(to right,#dc143c,#ea553a 60%,#ea553a);
}


a.float_link:hover{
background-position:0 0;
}

.float_link p{
color:#fff;
font-size:0.8em;
letter-spacing:0.15em;
text-align:center;
}

a.float_link:after{
content:"";
position:absolute;
width:30%;
height:0.5px;
background:#fff;
bottom:15px;
right:0;
transition:0.3s;
}
a.float_link:before{
content:"";
position:absolute;
width:10px;
height:10px;
background:#fff;
bottom:10px;
border-radius:50%;
right:30%;
transition:0.3s;
}

a:hover.float_link:after{
width:10%;
background:#FFFF00;
right:7px;
}
a:hover.float_link:before{
right:10%;
background:#FFFF00;
}

/*数値*/
.inter_list_felx {
    display: flex;
    justify-content: space-between;
}
ul.inter_list{
    display:flex;
    width:500px;
    justify-content:right;
}
ul.inter_list.w800{
    width:800px;
}

ul.inter_list li{
width:30%;
margin:0 0 30px 20px;
}

ul.inter_list li .list_ttl{
text-align:center;
border-top:1px solid #555;
border-bottom:1px solid #555;
margin-bottom:20px;
padding:5px 0;
}


ul.inter_list li .number{
    color:#00008b;
    font-family: 'Affogato-Medium';text-align:right;
    font-weight:bold;
    font-size:1.2em;
}

ul.inter_list li .number span{
    font-size: 3.0em;
}

ul.inter_list li .info_txt{
    text-align:right;
    font-size:0.8em;
}

/*＝＝アニメーション*＝＝/
/* 下から上に移動しながらフェードイン */
.fadeInUp {
    opacity: 0;
    transform: translateY(100px);
}

/* 右から左に移動しながらフェードイン */
.fadeInLeft {
    opacity: 0;
    transform:  translate(-100px, 0);
}
/* 左から右に移動しながらフェードイン */
.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes fadeIn05s {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/* フェードインさせるクラス */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.fadeIn05s {
    animation-name: fadeIn05s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

/*タイトルホバー*/
.left_appear {
  white-space: nowrap;
  /*overflow: hidden;*/
  animation: flowing-anim 1.5s ease forwards;
}
@keyframes flowing-anim {
 0%{
     opacity: 0;
     transform: translateY(-20px);
   }
100%{
     opacity: 1;
     transform: translateY(0);
   }
}


/*＝＝＝＝＝タブレット＝＝＝＝＝＝*/
@media all and (max-width: 959px ) {

    .free_felx {
        flex-direction: column;
    }

    .free_felx.smp_column {
        flex-direction: row;
    }

    .free_felx.tb_col_rever,free_felx_wrap.tb_col_rever {
        flex-direction: column-reverse;
    }

    .tb_right {
        text-align: right;
    }

    .ml {
    margin-left: inherit;
    }

    .tb_no {
    display: none;
    }

    .bg_diagonal::before {
        top:-100px;
        bottom: 20px;
    }

    .inter_ttl {
        left: 20px;
        margin-right: 20px;
        font-size: 3.0em;
    }

    p.inter_top {
        margin: 20px auto;
        padding: 0 10px;
    }

    .heading h2 {
        top:-150px;
    }

    .heading.gsuqu_head,.heading.abroad_head {
        background-position: top center;
        background-size: 100%;
        margin-top: 180px;
    }

    .gsuqu {
        padding: 30px 20px 0;
    }

    .fukidashi {
        margin: 20px auto;
    }

    .interview_box h3 {
    text-align: inherit;
    margin-top: 10px;
    }

    ul.interview_list {
    margin-top: 10px;
    }

    .interview_list li {
        min-height: 110px;
    }

    .ryou_img, .interview1_img, .interview2_img, .japan_map {
        text-align: center;
    }

    .interview_2 .midashi1 {
        margin-top: 20px;
    }

    .inter_list_felx {
        flex-direction: column;
    }

    ul.inter_list{
        width:100%;
    }
    ul.inter_list.w800{
        width:100%;
        margin-top: 20px;
    }

    ul.inter_list li {
    width: 50%;
    margin: 0 5px 30px;
    }

    ul.inter_list.w800 li {
        margin-bottom: 0;
    }

}


/*========smp========*/
@media screen and (max-width: 599px){
    .scroll {
        overflow: auto;
    }

    h3 {
        text-align: center;
    }

    .smp_on {
    display: inline;
    }
    .smp_no {
    display: none;
    }

    .img_400 {
    width: 100%;
    }

    .free_felx {
        flex-direction: column;
    }

    .free_felx.smp_column, .free_felx_wrap.smp_column {
        flex-direction: column;
    }

    .inter_w {
        margin: 0 auto 10px;
    }

    .inter_header {
        height: 250px;
    }

    .inter_ttl {
        left: 10px;
        margin-right: 10px;
        font-size: 2.7em;
        line-height: 1.1em;
        bottom: 15px;
    }

    p.inter_top {
    padding: 0 5px;
    font-size: 1.2em;
    }

    .heading.gsuqu_head {
        margin-top: 140px;
        padding-top: 210px;
    }

    .gsuqu .waku {
        padding: 20px 10px 0;
    }

    .gsuqu_katsudo {
        margin-bottom: 20px;
    }
    
    .heading.abroad_head {
        margin-top: 150px;
        padding-top: 230px;
    } 

    .heading h2 {
        padding: 0.5em;
        top :-120px;
        font-size: 1.8em;
        min-width: 100%;
    }

    .interview_box h3 {
        text-align: center;
    }

    .interview1_img img, .interview2_img img {
        width: 100%;
    }

    a.float_link {
        width: 100%;
    }
    
    ul.inter_list{
    display:flex;
    width:auto;
    justify-content:space-between;
    }
    ul.inter_list.w800{
        width:auto;
    }

    ul.inter_list li .list_ttl {
        font-size: 0.8em;
        margin-bottom: 10px;
    }

    ul.inter_list li .number {
        font-size: 1.0em;
    }

    .flag img {
    width: auto;
    }

}