@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* @end */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

a {
  text-decoration: none;
  outline: 0;
  color: black;
}

a:hover {
  text-decoration: underline;
}

html {
  /*	background-color: black; */
}

.aspect.narrow {
  /* Chrome,Safari */
  /* Firefox */
  /* Opera */
  /* IE */
  transform: scale(0.9, 1);
  /* CSS3 */
  transform-origin: left bottom;
  margin-left: 8%;
}

body {
  font: 12px "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Sans", Hiragino Kaku Gothic ProN, Roboto, "Droid Sans", YuGothic, "游ゴシック", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: block;
  margin: 0 auto;
}

html > body {
  font-size: 16px;
}

/* variables */
/* media query */
/* アスペクト比固定 */
/* .ratio-hd (16:9) */
/* .ratio-sd (4:3) */
/* .ratio-cinema (2.35:1) */
/* .ratio-golden (黄金比) */
*[class*="ratio-"] {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* 他に何もクラスを入れていないと画像は横幅合わせで100% */
  /* height-fitクラスを追加すると画像は高さ合わせで100% */
}

*[class*="ratio-"]::before {
  content: "";
  display: block;
  width: 100%;
  position: relative;
}

*[class*="ratio-"] img,
*[class*="ratio-"] div,
*[class*="ratio-"] span,
*[class*="ratio-"] figure {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: auto;
}

*[class*="ratio-"].height-fit img,
*[class*="ratio-"] div,
*[class*="ratio-"] span,
*[class*="ratio-"] figure {
  width: auto;
  height: 100%;
}

.ratio-hd::before {
  padding-top: 56.25%;
}

.ratio-sd::before {
  padding-top: 75%;
}

.ratio-cinema::before {
  padding-top: 42.55319%;
}

.ratio-golden::before {
  /* 黄金比の場合 */
  padding-top: 61.8047%;
}

.forSP {
  display: none !important;
}

.noSP {
  display: block;
}

/*	PC --------------------------------------------------- */
#content {
  margin-top: 58pt;
  padding-top: 87pt;
  margin: 0 auto;
}

#content .hero {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
  background-color: #f7fbfd;
  position: relative;
}

#content .hero .content-width {
  display: block;
  width: 735pt;
  height: calc(100% - 110pt);
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - calc(735pt / 2));
  margin-top: 110pt;
}

#content .hero .hero-frame {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: silver;
  background-image: url(images/newYearPhoto.jpg);
  background-repeat: no-repeat;
  background-position: 50% -520px;
  background-size: 1920px 1080px;
}

#content .hero .wrapper {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(to top, rgba(247, 251, 253, 0.9), #eff6ff 36.55%, rgba(223, 235, 254, 1) 57.14%, rgba(245, 249, 255, 0.46) 65.97%, rgba(245, 247, 248, 0.25));
  position: relative;
  margin-top: -87pt;
  padding-top: 87pt;
  z-index: 1;
}

#content .hero .hero-content-frame {
  background-color: white;
  display: block;
  width: 90%;
  height: auto;
  border-radius: 10pt;
  margin: 100pt auto 26pt auto;
  padding: 30pt;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1));
}

#content .hero .hero-content-frame .topStory {
  display: block;
}

#content .hero .hero-content-frame .topStory h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 26pt;
  color: #243b6f;
}

#content .hero .hero-content-frame .topStory .topStory-contents {
  display: block;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item {
  width: 31%;
  margin-bottom: 0;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child {
  display: flex;
  width: 100%;
  margin-bottom: 26pt;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .headline-contents-image {
  margin-bottom: 0;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .headline-contents-image img {
  -o-object-position: 50% 0 !important;
  object-position: 50% 0 !important;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .entry-title {
  margin-left: 2.5vw !important;
  width: 80%;
  padding: 0;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .entry-title .description-text {
  display: block;
  font-size: 0.9em;
  line-height: 1.5rem;
  color: #757575;
  font-weight: 400;
  margin-top: 13pt;
  margin-bottom: 0;
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#content .hero .hero-content-frame .topStory .topStory-contents .content-item:last-child {
  margin-bottom: 13pt;
}

#content .hero .hero-content-frame .topStory .topStory-contents .thumbnail-frame {
  margin: 0;
}

#content .hero .hero-content-frame .topStory .topStory-contents .thumbnail-frame .headline-contents-image {
  margin-bottom: 13pt;
}

#content .hero .hero-content-frame .topStory .topStory-contents .thumbnail-frame img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0;
  object-position: 50% 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#content .hero .hero-content-frame .topStory .topStory-contents .entry-title {
  padding-top: 13pt;
  width: 75%;
  margin: 0 auto;
}

#content .hero .hero-content-frame .topStory .topStory-contents .entry-title .title-frame {
  margin: 0;
}

#content .hero .hero-content-frame .topStory .topStory-contents .entry-title .category-text {
  display: block;
  font-size: 1.1em;
  margin-bottom: 8pt;
  color: #757575;
  font-weight: 300;
}

#content .hero .hero-content-frame .topStory .topStory-contents .entry-title .content-link {
  font-size: 1.3em;
  font-weight: 600;
}

#content .hero .hero-content-frame .topStory .topStory-contents .entry-title .content-link .sub {
  display: block;
  font-weight: 300;
  font-size: 85%;
  margin-top: 8pt;
}

#content .hero .hero-content-frame .topStory .topStory-contents .entry-title .description-text {
  display: none;
}

#content .hero .jima-title-frame {
  display: flex;
  width: 525pt;
  height: 64pt;
  margin: 0 auto;
  margin-top: 80pt;
  padding: 0;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

#content .hero .jima-title-frame .jima-logo-holizontal {
  width: 40%;
  margin-right: 26pt;
}

#content .hero .jima-title-frame .jima-logo-holizontal h1 {
  width: 110%;
  height: 0;
  padding-top: 52pt;
  background: url(images/newYearLogo.svg) 50% 0 no-repeat;
  background-size: cover;
  overflow: hidden;
  opacity: 1;
}

#content .hero .jima-title-frame .statement-texts {
  width: auto;
  font-size: 1.2em;
  margin-top: 0;
  font-weight: 600;
  color: #17214a;
  flex-direction: column;
  justify-content: center;
}

#content .news_info {
  width: 735pt;
  margin: 0 auto;
  margin: 38pt auto;
}

#content .news_info .headline-list {
  width: 100%;
}

#content .news_info .headline-list .thumbnail-frame {
  height: 100%;
}

#content .news_info .headline-list .thumbnail-frame .thumbnail-image {
  height: 80pt;
}

#content .news_info .headline-list .thumbnail-frame img {
  -o-object-fit: cover;
  object-fit: cover;
}

#content .news_info .headline-list .headline-contents .content-frame {
  display: flex;
  margin: 0 0 13pt 0 !important;
  border-bottom: solid 1px #E6E6E6;
  padding-bottom: 13pt;
}

#content .news_info .headline-list .headline-contents .content-frame:last-child {
  border-bottom: initial;
}

#content .news_info .headline-list .headline-contents .content-frame .content-link.thumbnail {
  width: 120pt;
  margin-top: 0pt;
  margin-right: 20pt;
}

#content .news_info .headline-list .headline-contents .content-frame .content-text-frame {
  width: 100%;
}

#content .news_info .headline-list .headline-contents .content-frame .content-text-frame.withImage {
  width: calc(100% - 120pt);
}

#content .news_info-frame {
  display: flex;
  flex-wrap: wrap;
}

#content .news_info-frame .fieldOfMedia-list {
  order: 1;
}

#content .news_info-frame .headline-news {
  order: 5;
}

#content .news_info-frame #socialNews {
  order: 10;
}

#content .news_info-frame h2 {
  width: 100%;
  font-size: 1.1em;
  font-weight: 600;
  color: #243b6f;
  padding-left: 5pt;
  margin-bottom: 13pt;
}

#content .news_info-frame .headline-with-image {
  width: 48%;
  height: auto;
  margin-bottom: 0;
  margin-right: 26pt;
}

#content .news_info-frame .headline-with-image .headline-contents {
  width: 100%;
  display: block;
}

#content .news_info-frame .headline-with-image .headline-contents .content-link {
  width: 100%;
}

#content .news_info-frame .headline-with-image .headline-contents .title-frame {
  width: 100%;
  background-color: white;
  padding: 13pt;
  box-sizing: border-box;
  color: initial;
  border: solid 1px #E6E6E6;
}

#content .news_info-frame .headline-with-image .headline-contents .title-frame .title-text {
  width: calc(100% - 100pt);
}

#content .news_info-frame .headline-with-image .headline-contents img {
  display: block;
  width: 100%;
  height: 160pt;
  -o-object-fit: cover;
  object-fit: cover;
}

#content .news_info-frame .headline-with-image .headline-contents .description-frame {
  display: none;
}

#content .news_info-frame .headline-with-image .headline-contents.vertical {
  display: flex;
  margin-bottom: 38pt;
}

#content .news_info-frame .headline-with-image .headline-contents.vertical .content-link {
  width: 50%;
}

#content .news_info-frame .headline-with-image .headline-contents.vertical img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#content .news_info-frame .headline-with-image .headline-contents.vertical .title-frame {
  width: 50%;
  background-color: #4e7eee;
  padding: 13pt;
  color: white;
}

#content .news_info-frame .headline-with-image .headline-contents.vertical .description-frame {
  display: block;
  font-size: 0.8em;
  text-align: justify;
}

#content .news_info-frame .headline-with-image figure.headline-contents {
  height: 100%;
}

#content .news_info-frame .headline-with-image .category-text {
  display: none;
  margin-bottom: 8pt;
}

#content .news_info-frame .headline-with-image .category-text a {
  color: #2E2E2E;
  font-size: 0.8em;
  font-weight: 600;
}

#content .news_info-frame .headline-with-image .title-text {
  font-size: 1.1em;
  margin-bottom: 5pt;
}

#content .news_info-frame .headline-with-image .title-frame {
  margin: 0;
}

#content .news_info-frame .headline-with-image .title-frame .content-link {
  color: #2E2E2E;
}

#content .news_info-frame .headline-with-image .date {
  font-size: 0.8em;
  display: block;
  text-align: right;
  color: #243b6f;
}

#content .fieldOfMedia-list {
  display: block;
  width: 100%;
  height: 100%;
  margin-right: 0;
  margin-bottom: 38pt;
}

#content .fieldOfMedia-list .headline-contents {
  display: flex;
  width: 50%;
  height: 114pt;
  margin-left: 50%;
  margin-bottom: 13pt;
  padding: 0;
}

#content .fieldOfMedia-list .headline-contents.top {
  display: block;
  width: 48%;
  height: 240pt;
  margin: 0;
  padding: 0;
  padding-right: 13pt;
  float: left;
}

#content .fieldOfMedia-list .headline-contents.top .headline-contents-image {
  height: 60% !important;
  margin-right: 0;
}

#content .fieldOfMedia-list .headline-contents.top .thumbnail-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#content .fieldOfMedia-list .headline-contents.top .title-frame {
  width: 100%;
  height: 40%;
  padding: 10pt;
  box-sizing: border-box;
  background-color: #4e7eee;
  color: white;
}

#content .fieldOfMedia-list .headline-contents.top .title-frame .title-text {
  display: block;
  margin-bottom: 5pt;
}

#content .fieldOfMedia-list .headline-contents.top .title-frame .date {
  color: white;
  display: block;
  text-align: right;
}

#content .fieldOfMedia-list .headline-contents.top a.content-link {
  margin: 0;
  color: white;
}

#content .fieldOfMedia-list .headline-contents:last-child {
  margin-bottom: 0;
}

#content .fieldOfMedia-list .headline-contents-image {
  display: block;
  height: 100%;
  margin-right: 15pt;
}

#content .fieldOfMedia-list .headline-contents-image .thumbnail-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% -5px;
  object-position: 50% -5px;
}

#content .fieldOfMedia-list a.content-link {
  width: 50%;
}

#content .fieldOfMedia-list .title-frame {
  width: 50%;
}

#content .fieldOfMedia-list .title-frame .title-text .content-link {
  display: block;
  width: 100% !important;
  margin-bottom: 5pt;
}

#content .fieldOfMedia-list .title-frame .date {
  display: block;
  text-align: right;
  font-size: 0.8em;
  color: #243b6f;
}

#content .fieldOfMedia-list .title-frame .category-text {
  display: none;
}

#content .fieldOfMedia-list .title-frame .description-frame {
  display: none;
}

.contents-frame {
  padding: 38pt;
  position: relative;
  border-top-left-radius: 12pt;
  border-top-right-radius: 12pt;
  z-index: 1;
  top: -10pt;
  background-color: white;
}

.contents-frame .content-width {
  display: flex;
  width: 735pt;
  height: 100%;
  margin: 0px auto;
}

.foreground {
  text-align: center;
}

.entries {
  width: 67%;
  margin-right: 13pt;
}

.headline-news {
  display: block;
  width: 100%;
  margin-right: 19pt;
  margin-bottom: 38pt;
}

.headline-news .headline-list .content-frame .content-link .thumbnail-image {
  display: block;
  width: 100%;
  height: 180pt;
  margin-bottom: 13pt;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 0px;
  object-position: 50% 0px;
}

.headline-news .headline-list .title-frame {
  margin-bottom: 5pt;
}

.headline-news .headline-list .title-frame .date {
  width: 150pt !important;
}

.headline-news .headline-list .title-frame {
  display: flex;
  justify-content: space-between;
}

.headline-news .headline-list .title-frame .date {
  /* center of vertical & horizontal */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* end */
}

.headline-news .headline-list .title-frame,
.jima-contents .headline-list .title-frame {
  margin: 0 !important;
}

.headline-news .headline-list .title-frame li a,
.jima-contents .headline-list .title-frame li a {
  display: block;
  margin-bottom: 5pt;
  font-size: 0.8em;
  font-weight: 600;
  color: #243b6f;
}

.headline-news .headline-list .title-frame .title-text,
.jima-contents .headline-list .title-frame .title-text {
  height: auto;
  font-size: 1.3em;
  line-height: 2.2rem;
  color: #17214a;
  margin-top: 5pt;
  margin-bottom: 5pt;
}

.headline-news .headline-list .title-frame .date,
.jima-contents .headline-list .title-frame .date {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 0.8em;
  color: #243b6f;
  margin-top: 5pt;
  margin-bottom: 5pt;
}

.headline-news .headline-list .description-frame,
.jima-contents .headline-list .description-frame {
  font-size: 0.8em;
  color: #2E2E2E;
  line-height: 1.68em;
}

.headline-news .headline-list .description-frame .description-text,
.jima-contents .headline-list .description-frame .description-text {
  color: gray;
}

.jima-contents .contents-title-frame {
  display: block;
  height: 100pt;
  background-color: black;
  overflow: hidden;
  position: relative;
}

.jima-contents .foreground {
  width: 330pt;
  height: 40pt;
  font-size: 2.6em;
  font-weight: 800;
  letter-spacing: 5pt;
  color: white;
  text-shadow: 0px 0px 18px #00000094;
  position: absolute;
  top: calc(50% - 29pt);
  left: calc(50% - 165pt);
  z-index: 1;
}

.jima-contents .wrapper {
  height: 400pt;
  background: url(images/about_JIMA_BG.jpg) 100% 0% no-repeat;
  background-size: 150%;
}

.jima-contents .entries h2 {
  display: none;
}

.jima-contents .headline-list .headline-contents {
  display: flex;
  margin-bottom: 38pt;
}

.jima-contents .headline-list .content-frame {
  width: 50%;
}

.jima-contents .headline-list .content-frame:nth-child(odd) {
  margin-right: 13pt !important;
}

.jima-contents .headline-list .content-frame:nth-child(even) {
  margin-left: 13pt !important;
}

.jima-contents .headline-list .headline-contents {
  margin-bottom: 38pt;
}

.jima-contents .headline-list .title-frame {
  margin-bottom: 5pt;
}

.contents-list {
  width: 33%;
  margin-top: 13pt;
  margin-left: 38pt;
}

.contents-list .item {
  display: flex;
  margin-bottom: 32.5pt;
}

.contents-list .item a {
  height: 100%;
  position: relative;
}

.contents-list .item a:hover {
  text-decoration: none;
}

.contents-list .item .title {
  display: flex;
  width: 70%;
  height: auto;
  margin: 0;
  color: #17214a;
  vertical-align: middle;
  font-size: 1.3em;
  position: relative;
  align-items: center;
}

.contents-list .item .title span {
  width: 100%;
}

.contents-list .item .title a {
  display: block;
  width: 100%;
  height: auto;
  position: inherit;
}

.contents-list .item .title a:hover {
  text-decoration: underline;
}

.contents-list .item a.eyecatch {
  display: block;
  width: 68.2pt;
  height: 66pt;
  border: 3px solid #4e7eee;
  border-radius: 44pt;
  background-color: #4e7eee;
  margin-right: 13pt;
}

.contents-list .item a.eyecatch.icon.member {
  background: #4e7eee url(images/member-icon.svg) 50% 110% no-repeat;
  background-size: 90%;
}

.contents-list .item a.eyecatch.icon.concept {
  background: #4e7eee url(images/concept-icon.svg) 20% 90% no-repeat;
  background-size: 90%;
}

.contents-list .item a.eyecatch.icon.forprospects {
  background: #4e7eee url(images/forprospects-icon.svg) 0% 0% no-repeat;
  background-size: 100%;
}

#socialNews {
  width: 100%;
  height: 100%;
  padding: 19.5pt;
  background-color: #f5f5f5;
  border-radius: 6pt;
  border: 1px solid #E6E6E6;
  box-sizing: border-box;
}

#socialNews .social-title-frame h2 {
  width: 100%;
  font-size: 1.1em;
  font-weight: 600;
  color: #243b6f;
  vertical-align: middle;
  border: initial;
  padding: 0;
}

#socialNews .social-link {
  display: flex;
  width: 30%;
}

#socialNews .social-link .item {
  width: 50%;
  height: 100%;
}

#socialNews .social-link .item br {
  display: none;
}

#socialNews .social-link .item .icon {
  width: 100%;
  height: 100%;
  background-color: #243b6f;
  -webkit-mask-size: contain;
}

#socialNews .social-link .item.twitter .icon {
  -webkit-mask: url(images/twitter.svg) no-repeat 100% 100%;
  mask: url(images/twitter.svg) no-repeat 100% 100%;
}

#socialNews .social-link .item.facebook .icon {
  -webkit-mask: url(images/facebook.svg) no-repeat 100% 100%;
  mask: url(images/facebook.svg) no-repeat 100% 100%;
}

#socialNews .social-post-frame {
  display: flex;
}

#socialNews .social-post {
  display: flex;
  width: 100%;
}

#socialNews .social-post .item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  width: 50%;
}

#socialNews .social-post .item.facebook {
  margin-right: 5%;
}

#socialNews .avator {
  font-size: 1.8em;
  color: #182649;
  position: relative;
  top: 0;
}

#socialNews .post-frame {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 44pt);
  margin-left: 13pt;
}

#socialNews .post-frame .name {
  width: 70%;
  font-size: 1.1em;
  color: #17214a;
  font-weight: 600;
  margin-bottom: 8pt;
  display: block;
}

#socialNews .post-frame .post-date {
  width: 30%;
  font-size: 0.8em;
  line-height: 1.44em;
  text-align: right;
  color: #757575;
  padding-top: 0;
}

#socialNews .post-frame .content {
  width: 100%;
  font-size: 0.8em;
  color: #2E2E2E;
  line-height: 1.6em;
  word-wrap: break-word;
}

#socialNews .post-frame .content:hover {
  text-decoration: none;
  cursor: pointer;
}

#global-nav .logo {
  background-color: initial;
  background-image: url(images/jima_logo_wide_white.svg);
}

#global-nav img.logo-image {
  width: 160px;
  margin-top: 4.8pt;
}

/*============================
#css-animation
============================*/
@-webkit-keyframes hero-frame-transform {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hero-frame-transform {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes jima-title-frame-transform {
  from {
    opacity: 0;
    bottom: -40pt;
  }
  to {
    opacity: 1;
    bottom: 0pt;
  }
}

@keyframes jima-title-frame-transform {
  from {
    opacity: 0;
    bottom: -40pt;
  }
  to {
    opacity: 1;
    bottom: 0pt;
  }
}

@-webkit-keyframes jima-logo-transform {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes jima-logo-transform {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes statement-text-line01 {
  from {
    opacity: 0;
    left: -40pt;
  }
  to {
    opacity: 1;
    left: 0pt;
  }
}

@keyframes statement-text-line01 {
  from {
    opacity: 0;
    left: -40pt;
  }
  to {
    opacity: 1;
    left: 0pt;
  }
}

@-webkit-keyframes statement-text-line02 {
  from {
    opacity: 0;
    left: -20pt;
  }
  to {
    opacity: 1;
    left: 0pt;
  }
}

@keyframes statement-text-line02 {
  from {
    opacity: 0;
    left: -20pt;
  }
  to {
    opacity: 1;
    left: 0pt;
  }
}

.hero-frame.animation.end {
  -webkit-animation-name: hero-frame-transform;
  animation-name: hero-frame-transform;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  transition: 0.0s;
  transition-timing-function: ease-out;
}

/* #1 frame */
.jima-title-frame.animation.executing {
  -webkit-animation-name: jima-title-frame-transform;
  animation-name: jima-title-frame-transform;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.0s;
  animation-delay: 0.0s;
  transition: 0.0s;
  transition-timing-function: ease-out;
}

/* #2 Line Art */
/* 線描写はinViewAnimation.jsでインサートされたらすぐにスタート */
.jima-title-frame .jima-logo h1 {
  -webkit-animation-name: jima-logo-transform;
  animation-name: jima-logo-transform;
  -webkit-animation-duration: 1.0s;
  animation-duration: 1.0s;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  transition: 0.0s;
  transition-timing-function: ease-out;
}

.jima-title-frame .jima-logo.end h1 {
  -webkit-animation-name: inherit;
  animation-name: inherit;
  opacity: 1 !important;
}

.jima-title-frame .jima-logo.end .lineart {
  opacity: 0 !important;
}

.statement-text01.animation.executing {
  -webkit-animation-name: statement-text-line01;
  animation-name: statement-text-line01;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  transition: 0.0s;
}

.statement-text02.animation.executing {
  -webkit-animation-name: statement-text-line02;
  animation-name: statement-text-line02;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s;
  transition: 0.0s;
}

.animation {
  position: relative;
}

.animation.before {
  opacity: 0;
}

.animation.end {
  opacity: 1 !important;
}

/* Global Navi */
#global-nav {
  background-color: #17214a !important;
}

#global-nav .logo {
  background-size: auto 95%;
  transition: all 100ms 0s ease;
  transform-origin: left center;
}

.hide {
  transform: scaleX(0);
  width: 0pt !important;
}

.appear {
  transform: scaleX(1);
  width: 150pt !important;
}

/*	for Smartphone  --------------------------------------------- */

@media only screen and (min-width: 300px) and (max-width: 767px) {
  .forSP {
    display: block !important;
  }
  .noSP {
    display: none !important;
  }
  #content {
    padding-bottom: 0;
  }
  #content .hero .content-width {
    width: 100%;
    left: calc(50% - calc(100% / 2));
  }
  #content .hero .hero-frame {
    background-image: url(images/newYearPhoto.jpg);
    background-size: 200% !important;
    background-position: 60% -26vw;
  }
  #content .hero .hero-frame.bg-image02 {
    background-position-y: 0;
    bottom: -300px;
    height: 500px;
    top: initial;
  }
  #content .hero .wrapper {
    background: linear-gradient(to top, rgba(247, 251, 253, 0.45), #eff6ff 6%, rgba(223, 235, 254, 0.5), rgba(245, 249, 255, 0.76) 63.87%, rgba(245, 247, 248, 0.45));
  }
  #content .hero .hero-content-frame {
    width: 100%;
    padding: 20pt 0;
    margin-top: 13pt;
    margin-bottom: 100pt;
  }
  #content .hero .hero-content-frame .topStory h2 {
    font-size: 1.1em;
    margin-left: 13pt;
    margin-bottom: 13pt;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item-list {
    display: block;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 26pt;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child {
    display: block;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .entry-title {
    width: 100%;
    margin-left: 0 !important;
    padding: 13pt;
    box-sizing: border-box;
    background-color: #4e7eee;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .entry-title .category-text,
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .entry-title .content-link {
    color: white;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .content-item:first-child .entry-title .description-text {
    display: none;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .entry-title {
    width: 90%;
    margin: 0 auto;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .entry-title .category-text {
    font-size: 0.8em;
    margin-bottom: 5pt;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .entry-title .content-link {
    font-size: 1.1em;
  }
  #content .hero .jima-title-frame {
    display: block;
    height: auto;
    width: 90%;
    margin-top: 70pt;
  }
  #content .hero .jima-title-frame .jima-logo-holizontal {
    width: 100%;
    margin-right: 13pt;
    margin-bottom: 10pt;
  }
  #content .hero .jima-title-frame .jima-logo-holizontal h1 {
    padding-top: 15vw;
    background-size: contain;
  }
  #content .hero .jima-title-frame .statement-texts {
    margin-left: 10pt;
    text-align: center;
    font-size: 3.7vw;
  }
  #content .news_info {
    width: 100%;
  }
  #content .news_info .headline-list .thumbnail-frame .thumbnail-image {
    height: 120pt;
  }
  #content .news_info .headline-list .headline-contents .content-frame {
    display: block;
  }
  #content .news_info .headline-list .headline-contents .content-frame .content-link.thumbnail {
    margin-right: 0;
  }
  #content .news_info .headline-list .headline-contents .content-frame .content-text-frame.withImage {
    width: 100%;
  }
  #content .news_info-frame {
    margin: 28pt auto;
    padding: 0;
    box-sizing: border-box;
  }
  #content .news_info-frame .headline-with-image {
    width: 100%;
    margin: 0;
    margin-bottom: 13pt;
  }
  #content .news_info-frame .headline-with-image .date {
    margin-bottom: 0;
  }
  #content .fieldOfMedia-list {
    width: 100%;
  }
  #content .fieldOfMedia-list .headline-contents {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 8pt;
    margin-bottom: 13pt;
    box-sizing: border-box;
  }
  #content .fieldOfMedia-list .headline-contents.top {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 13pt;
    padding: 0 8pt;
    box-sizing: border-box;
    float: initial;
  }
  #content .fieldOfMedia-list .headline-contents.top .thumbnail-image {
    height: 100%;
  }
  #content .fieldOfMedia-list .headline-contents.top .title-frame {
    width: 100%;
    margin: 0;
  }
  #content .fieldOfMedia-list .headline-contents-image {
    margin-right: 0;
    margin-bottom: -7pt;
  }
  #content .fieldOfMedia-list a.content-link {
    font-size: 1.3em;
    margin-right: 0;
  }
  #content .fieldOfMedia-list .title-frame {
    width: 100%;
    margin: 13pt 0;
    padding: 0;
    box-sizing: border-box;
  }
  #content .fieldOfMedia-list .title-frame .title-text {
    margin-bottom: 13pt;
  }
  .contents-frame {
    padding: 28pt 13pt;
  }
  .contents-frame .content-width {
    width: 100%;
    display: block;
  }
  .entries {
    width: 100%;
    margin-bottom: 42pt;
    padding-bottom: 42pt;
    border-bottom: solid 1px #E6E6E6;
  }
  .headline-news {
    width: 100%;
    margin-right: 0;
    margin-bottom: 42pt;
    padding: 0 8pt;
    box-sizing: border-box;
  }
  .headline-news .headline-list .content-frame .content-link .thumbnail-image {
    margin-bottom: 0;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
  }
  .headline-news .headline-list .title-frame {
    display: block;
  }
  .headline-news .headline-list .description-frame,
  .jima-contents .headline-list .description-frame {
    padding: 0 8pt;
  }
  .jima-contents .wrapper {
    background: url(images/about_JIMA_BG.jpg) 100% 0% no-repeat;
    background-size: 400%;
  }
  .jima-contents .headline-list .headline-contents {
    display: block;
  }
  .jima-contents .headline-list .content-frame {
    width: 100%;
    margin-bottom: 28pt;
  }
  .jima-contents .headline-list .content-frame:nth-child(odd) {
    margin-right: 0 !important;
  }
  .jima-contents .headline-list .content-frame:nth-child(even) {
    margin-left: 0 !important;
  }
  .jima-contents .headline-list .content-frame .content-link .thumbnail-image {
    -o-object-position: 0px -10px;
    object-position: 0px -10px;
    height: 160pt !important;
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .contents-list {
    width: 100%;
    margin-left: 0;
  }
  .contents-list .item {
    display: block;
  }
  .contents-list .item .title {
    width: 100%;
    text-align: center;
  }
  .contents-list .item a.eyecatch {
    width: 55pt;
    height: 55pt;
    border-radius: 55pt;
    margin: 0 auto;
    margin-bottom: 8pt;
  }
  #socialNews {
    border-radius: 0;
    border: none;
    background-color: #f5f5f5;
  }
  #socialNews .social-link .item.facebook .avator {
    top: 2pt;
  }
  #socialNews .social-post {
    display: block;
  }
  #socialNews .social-post .item {
    width: 100%;
    margin-bottom: 19.5pt;
  }
  #socialNews .social-post .item:last-child {
    margin-bottom: 0 !important;
  }
  #socialNews .avator.fa-twitter {
    top: -4pt;
  }
  #socialNews .post-frame .name {
    font-size: 0.9em;
    line-height: 1.2em;
  }
  #global-nav .logo {
    transform-origin: left bottom;
  }
  .hide {
    transform: scaleY(0);
    width: 120pt !important;
  }
  .appear {
    transform: scaleY(1);
    width: 120pt !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #content .hero .content-width {
    width: 100%;
    left: calc(50% - calc(100% / 2));
  }
  #content .hero .hero-frame {
  }
  #content .hero .hero-frame.bg-image02 {
    background-position-y: -140px;
  }
  #content .hero .hero-content-frame {
    width: 95%;
  }
  #content .hero .hero-content-frame .topStory h2 {
    margin-bottom: 13pt;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .entry-title {
    width: 80%;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .entry-title .category-text {
    font-size: 1.6vw;
  }
  #content .hero .hero-content-frame .topStory .topStory-contents .entry-title .content-link {
    font-size: 2vw;
  }
  #content .hero .jima-title-frame {
    width: 80%;
    height: 48pt;
    left: 25pt;
  }
  #content .hero .jima-title-frame .jima-logo-holizontal h1 {
    padding-top: 50pt;
    background-size: contain;
  }
  #content .hero .jima-title-frame .statement-texts {
    font-size: 2.2vw;
  }
  #content .hero .wrapper {
    background: linear-gradient(to top, rgba(247, 251, 253, 1), #eff6ff 51.68%, rgba(223, 235, 254, 0.5) 61.76%, rgba(245, 249, 255, 0.76) 79.83%, rgba(245, 247, 248, 0.45));
    margin-bottom: -20pt;
    padding-bottom: 20pt;
  }
  #content .news_info {
    width: 100%;
    padding: 28pt;
    box-sizing: border-box;
  }
  #content .news_info-frame .headline-with-image {
    margin-right: 13pt;
  }
  #content .fieldOfMedia-list .headline-contents {
    width: 49%;
    margin-left: 51%;
  }
  #content .fieldOfMedia-list .headline-contents.top a.content-link {
    font-size: 1.35vh;
    letter-spacing: -0.3px;
  }
  #content .fieldOfMedia-list .title-frame .title-text .content-link {
    font-size: 1.3vh;
    letter-spacing: -0.3px;
  }
  .contents-frame {
    padding: 28pt;
  }
  .contents-frame .content-width {
    width: 100%;
  }
  .headline-news .headline-list .title-frame .title-text,
  .jima-contents .headline-list .title-frame .title-text {
    font-size: 1.2em;
  }
  .headline-news .headline-list .title-frame .date,
  .jima-contents .headline-list .title-frame .date {
    margin-top: 5pt;
  }
  .jima-contents .wrapper {
    background-size: 280%;
  }
  .contents-list {
    margin-left: 28pt;
  }
}