@charset "UTF-8";
/* $col-space-wide: 30px; */
/* ---------------------------------------------------
   text
*/
span.em2 {
  background: #EA0029;
  color: #fff;
  display: inline-block;
  padding: 0 5px;
}

.orange {
  color: #EA0029;
}

.orange2 {
  color: #EA0029;
}

a.linktxt {
  font-weight: 600;
  text-decoration: underline;
  color: #F5F8FF;
  position: relative;
  z-index: 100;
}
#apply-note a.linktxt,
#section-what a.linktxt { color: #222; }
#apply-note a.linktxt.red { color: #EA0029; }

a.linktxt:hover {
  text-decoration: none;
}

a.linktxt2 {
  color: #222;
}
a.linktxt2:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------
   h*
*/
h1.title {
  text-align: center;
  line-height: 1;
}
h1.title span {
  display: block;
}
h1.title span.jp {
  font-size: 3.2rem; /* font-size: 2vw; */
  font-weight: 700;
  margin-top: 12px;
}
@media screen and (max-width: 767px) {
  h1.title span.jp {
    font-size: 4.5vw;
  }
}
h1.title span.en {
  font-size: 12rem;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #fff;
  paint-order: stroke;
}
@media screen and (max-width: 1299px) {
  h1.title span.en {
    font-size: 7.5vw;
  }
}
@media screen and (max-width: 767px) {
  h1.title span.en {
    font-size: 12vw;
  }
}
h1.title span.en .o {
  color: #FF6633;
  display: inline;
}

/* ---------------------------------------------------
<h2 class="h2">
<span class="jp">
<span class="sub">Australia-Japan Foundation</span>
豪日交流基金助成金<br>プログラムとは
</span>
<span class="en">What is the <span class="o">AJF</span> ?</span>
*/
h2.h2 {
  position: relative;
  line-height: 1.3;
  margin-bottom: 80px;
  text-align: center;
  color: #00205C;
}
.section_dark h2.h2 {
  color: #fff;
}
h2.h2 .sub {
  display: block;
  margin-bottom: 5px;
  font-size: 1.3rem;
}
h2.h2 .jp {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
h2.h2 { margin-bottom: 30px; }
  h2.h2 .jp {
    font-size: 1.6rem;
  }
}
h2.h2 .jp:before, h2.h2 .jp:after {
  content: "";
  width: 30px;
  height: 2px;
  display: inline-block;
  margin: 0 20px;
  background: #222;
}
.section_dark h2.h2 .jp:before, .section_dark h2.h2 .jp:after {
  background: #fff;
}
h2.h2 .en {
  font-size: 10rem;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  /* text-transform: uppercase; */
}
@media screen and (max-width: 1299px) {
  h2.h2 .en {
    font-size: 8vw;
  }
}
@media screen and (max-width: 767px) {
  h2.h2 .en {
    font-size: 11vw;
  }
}
h2.h2 .en .o {
  color: #EA0029;
  display: inline;
}
h2.h2:after {
  content: "";
  position: absolute;
  top: 3em;
  left: -190px;
  width: 0px;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(#90ecff), to(#5b88a6));
  background: -webkit-linear-gradient(left, #90ecff, #5b88a6);
  background: linear-gradient(90deg, #90ecff, #5b88a6);
  -webkit-transition: width 0.3s 0.4s;
  transition: width 0.3s 0.4s;
}
h2.h2.active:after {
  width: 180px;
}

.h3 {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: left;
  margin: 100px 0 1em;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .h3 {
    font-size: 2rem;
  }
}
.h3::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background: #EA0029;
  display: inline-block;
  -webkit-transform: translateY(0.15em);
          transform: translateY(0.15em);
  margin-right: 0.4em;
}

.section_dark .h3::before {
  background: #EA0029;
}

.h4 {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1em;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .h4 {
    font-size: 1.8rem;
  }
}

/*---------------------------------------------------
list
*/
.list-inline li {
  margin-right: 1em;
}

/* ---------------------------------------------------
.btn
*/
.btn {
  display: inline-block;
  border-radius: 2em;
  padding: 0 1.5em;
  line-height: 3em;
  height: 3em;
  font-weight: 600;
  background-color: #00205C;
  color: #fff;
  -webkit-transition: color 0.2s, background-color 0.2s;
  transition: color 0.2s, background-color 0.2s;
}
.btn { text-decoration:none; }
.btn:hover {
  color: #fff;
  background-color: #222;
  text-decoration: underline;
}
.btn::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.6em;
  background: url(../images/icon_right.svg) center center no-repeat;
  background-size: contain;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  -webkit-transform: translate(0, -0.1em);
          transform: translate(0, -0.1em);
}
.btn:hover::after {
  -webkit-transform: translate(0.1em, -0.1em);
          transform: translate(0.1em, -0.1em);
}
.btn-s {
  font-size: 1.1rem;
}
.has-text-align-right { position: relative; z-index: 100; }
#btn-cases-other.btn { background-color: #EA0029; margin: 20px 0 0 auto; position: static !important; border-radius: 2em; padding: 0 2.0em; line-height: 4em; height: 4em; }
#btn-cases-other.btn:hover { background-color: #f07b8f; text-decoration: none; }
/* #btn-Interview-other.btn { background-color: #EA0029; margin: 20px 0 0 auto; position: static !important; border-radius: 2em; padding: 0 2.0em; line-height: 4em; height: 4em; }
#btn-Interview-other.btn:hover { background-color: #f07b8f; text-decoration: none; } */

/* ---------------------------------------------------
.fig
*/
.fig {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.fig.fig_left {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.fig.fig_right {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.fig.fig_left, .fig.fig_right {
  margin-bottom: 0px;
}
.fig.fig_left figure, .fig.fig_right figure {
  max-width: 75vw;
}
.fig figure figcaption {
  display: block;
  font-size: 1.2rem;
  text-align: left;
  line-height: 1.3;
}
.fig figure figcaption .copyright {
  display: block;
}

/* ---------------------------------------------------
   .lead
*/
.lead {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .lead {
    font-size: 2rem;
  }
}

.lead2 {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .lead2 { font-size: 1.6rem; font-weight: 800; }
  .lead2.wht { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
  #section-scope .h3 + .lead2 { margin-top: 30px !important; }
}

@media screen and (min-width:600px) and (max-width:767px) {
  .lead2 { font-size: 2.0rem; font-weight: 800; }
}

.lead3 {
  font-weight: 500;
  font-feature-settings: "palt";
}

p.p-center {
  text-align: center;
}

/*---------------------------------------------
.box
*/
.box {
  margin-bottom: 30px;
  padding: 30px;
  background-color: #fff;
  color: #222;
  overflow: hidden;
  /* border-radius: 20px; */
}
.box .boxtitle {
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 15px;
  background-color: #EA0029;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.box .boxtitle.boxtitle2 {
  /* background-color: #FF6633; */
}
.box .h4:first-child {
  margin-top: 0;
  color: #fff;
}
.box .p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .box {
    padding: 30px 20px;
  }
}
.box2 {
  background: #fff;
  color: #222;
  position: relative;
  margin-bottom: 30px;
}
.box2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    /* width: 50vw;
    height: 50vw; */
    width: min(700px,100%);
    height: 70%;
    background: url(/ajf2026/images/bg_scope.svg) top center no-repeat;
    background-size: contain;
    z-index: 1;
}
.box2 .txt_area { position: relative; z-index: 10; padding: 40px 50px; }
.box2 .txt_area h4 { color: #fff; margin-bottom: 0.9em; }
.box2 .txt_area p.p_line { border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 15px 0; font-size: 1.6rem; font-weight: 600; margin-bottom: 10px; }
.box2 .txt_area p.note {text-align: left; font-size: 1.4rem; line-height: 1.6; margin-bottom: 0.5em; }

@media screen and (min-width:768px) and (max-width:1152px) {
  .box2 .txt_area { padding: 40px 50px 50px 50px; }
  .box2 .txt_area p.p_line { font-size: 1.45rem; padding: 10px 0; }
  .box2 .txt_area p.note { font-size: 1.3rem; }
}

@media screen and (max-width: 767px) {
  .box2 { overflow: hidden ;}
  .box2::before {
      top: 0;
      width: 120vw;
      height: 120vw;
  }
  .box2 .txt_area { padding: 15px 20px; }
  .box2 .txt_area h4 { font-size: 1.7rem; }
  .box2 .txt_area p.p_line { padding: 10px 0; font-size: 1.4rem; }
}

/* ---------------------------------------------------
<div class="circle-set">
<div class="e">
<h4>啓蒙・情報<br>コミュニケーション</h4>
<p>Communication,<br>Information and Advocacy</p>
</div>
*/
.circle-set {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
@media screen and (max-width: 1160px) {
  .circle-set {
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
}
.circle-set .e {
  width: 260px;
  height: 260px;
  border-radius: 200px;
  position: relative;
  margin: 0 30px -10px;
  background: #FAF5ED;
  border: #F4911D solid 5px;
  color: #222;
  line-height: 1.3;
}
@media screen and (max-width: 1160px) {
  .circle-set .e {
    max-width: 41vw;
    max-height: 41vw;
    margin: 0 0 4vw;
  }
}
.circle-set .e h4 {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 40px auto 5px;
}
@media screen and (max-width: 767px) {
  .circle-set .e h4 {
    font-size: 3.8vw;
    margin-top: 6vw;
  }
}
.circle-set .e p {
  padding: 0 10px;
  line-height: 1.1;
}
@media screen and (max-width: 767px) {
  .circle-set .e p {
    font-size: 3.2vw;
  }
}
.circle-set .e::after {
  content: "";
  margin: auto;
  display: block;
  width: 55%;
  height: 30%;
  margin-top: 5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.circle-set .e:nth-child(1)::after {
  background-image: url(../images/icon_communication.svg);
  height: 20%;
}
.circle-set .e:nth-child(2)::after {
  background-image: url(../images/icon_geopolitics.svg);
}
.circle-set .e:nth-child(3)::after {
  background-image: url(../images/icon_studies.svg); /*bottom:10%;*/
  left: 5%;
  height: 23%;
}
.circle-set .e:nth-child(4)::after {
  background-image: url(../images/icon_science.svg); /*bottom:12%;*/
}
.circle-set .e:nth-child(5)::after {
  background-image: url(../images/icon_culture.svg); /*bottom:2%;*/
}

/* ---------------------------------------------------
   .tgt-scrollIn
*/
/*
.tgt-scrollIn.active {
  &:nth-of-type(1) { transition-delay:000ms; }
  &:nth-of-type(2) { transition-delay:200ms; }
  &:nth-of-type(3) { transition-delay:400ms; }
  &:nth-of-type(4) { transition-delay:600ms; }
  &:nth-of-type(5) { transition-delay:800ms; }
  &:nth-of-type(6) { transition-delay:1000ms; }
  &:nth-of-type(7) { transition-delay:1200ms; }
  &:nth-of-type(8) { transition-delay:1400ms; }
}
*/
.tgt-scrollIn.transition-fadein {
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.tgt-scrollIn.transition-fadein.active {
  opacity: 1;
}
.tgt-scrollIn.transition-fadeup {
  opacity: 0;
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}
.tgt-scrollIn.transition-fadeup.active {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
.tgt-scrollIn.transition-3d {
  opacity: 0;
  -webkit-transform: translate3d(-20px, 30px, -10px);
          transform: translate3d(-20px, 30px, -10px);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}
.tgt-scrollIn.transition-3d.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.tgt-scrollIn.transition-delay0ms {
  -webkit-transition-delay: 0s !important;
          transition-delay: 0s !important;
}
.tgt-scrollIn.transition-delay200ms {
  -webkit-transition-delay: 200ms !important;
          transition-delay: 200ms !important;
}
.tgt-scrollIn.transition-delay400ms {
  -webkit-transition-delay: 400ms !important;
          transition-delay: 400ms !important;
}
.tgt-scrollIn.transition-delay500ms {
  -webkit-transition-delay: 500ms !important;
          transition-delay: 500ms !important;
}
.tgt-scrollIn.transition-delay1000ms {
  -webkit-transition-delay: 1000ms !important;
          transition-delay: 1000ms !important;
}
.tgt-scrollIn.transition-delay1500ms {
  -webkit-transition-delay: 1500ms !important;
          transition-delay: 1500ms !important;
}
.tgt-scrollIn.transition-delay2000ms {
  -webkit-transition-delay: 2000ms !important;
          transition-delay: 2000ms !important;
}
.tgt-scrollIn.transition-delay2500ms {
  -webkit-transition-delay: 2500ms !important;
          transition-delay: 2500ms !important;
}
.tgt-scrollIn.transition-delay3000ms {
  -webkit-transition-delay: 3000ms !important;
          transition-delay: 3000ms !important;
}
.tgt-scrollIn.transition-delay3500ms {
  -webkit-transition-delay: 3500ms !important;
          transition-delay: 3500ms !important;
}
.tgt-scrollIn.transition-delay4000ms {
  -webkit-transition-delay: 4000ms !important;
          transition-delay: 4000ms !important;
}
.tgt-scrollIn.transition-delay5000ms {
  -webkit-transition-delay: 5000ms !important;
          transition-delay: 5000ms !important;
}

/* ---------------------------------------------------
   小さいモーダル
*/
.modalset {
  position: relative;
  display: inline-block;
}
.modalset .linkmodal {
  display: inline-block;
  background-color: #29abe2;
  border-radius: 10px;
  padding: 0 0.6em;
  margin: 0 0.2em;
  color: #fff;
  line-height: 1.3;
  font-size: 0.9em;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.modalset .linkmodal:after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.1em;
  vertical-align: center;
  background: url(../images/icon_newwin_wht.svg) center center no-repeat;
  background-size: contain;
  -webkit-transform: translateY(0.1em);
          transform: translateY(0.1em);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.modalset .linkmodal:hover {
  color: #fff; /*cursor:pointer; transform:scale(1.05);*/
}
.modalset .modal-note {
  position: absolute;
  top: 1.3em;
  left: -15em;
  width: 30em;
  max-width: 85vw;
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: -1;
  background-color: #29abe2;
  color: #fff;
  padding: 10px 23px;
  border-radius: 10px;
  line-height: 1.3;
  -webkit-box-shadow: 1px 1px 5px rgb(0, 0, 0);
          box-shadow: 1px 1px 5px rgb(0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.modalset .modal-note:hover {
  cursor: pointer;
}
.modalset .modal-note::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: url(../images/icon_close.svg);
  background-size: contain;
}
.modalset .modal-note.show {
  opacity: 1;
  z-index: 99;
}
.modalset .modal-note a {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
  margin: 0 2px;
}

.pconly {
  display: block;
}
@media (max-width: 767px) {
  .pconly {
    display: none;
  }
}

.sponly {
  display: none;
}
@media (max-width: 767px) {
  .sponly {
    display: block;
  }
}