@charset "UTF-8";

/* RESET */

html { box-sizing: border-box; scroll-behavior: smooth; }
*, *:before, *:after{ box-sizing: inherit; }
article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }
body, h1, figure { margin: 0; }
a { text-decoration: none; color: inherit; }
img { border: none; max-width: 100vw; height: auto; }

/* INIT */

body {
  background: #fff;
  color: #333;
  font-size: 17px;
  font-family: 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', 'MS PMincho', serif;
  line-height: 1;
  overflow-x: hidden;
}
article > section, article > aside, article > div { overflow-x: auto; overflow-y: hidden; }
section, aside { margin: 2em 0; padding: 1em 0; }

h2 img { display: block; margin: auto; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.9em; }
h2 small, h3 small { font-size: .55em; vertical-align: top; }
h3, h4, h5 { line-height: 1.2em; }
h4, h5, h6 { margin: 1em 0; font-size: 1.1em; font-weight: normal; }

p { margin: 1em 0; }
p, dl { padding: 0 .5em; line-height: 1.7em; }
dt { font-weight: bold; line-height: 1.2em; }
dd { margin: .5em 0 1.5em 0; }
pre { padding: .5em; font-size: .85em; background: #eee; }
ul { list-style: none; }
nav > ul { margin: 0; padding: 0; }
strong { font-style: inherit; font-size: 1.4em; word-break: keep-all; line-height: 1.1em; }
em { font-style: normal; color: #c00; }

table { border-collapse: collapse; border-spacing: 0; margin-bottom: .5em; }
table, th, td { border: 1px solid #eee; }
th,td { padding: .5em; line-height: 1.7em; }
th { text-align: left; vertical-align: top; white-space: nowrap; }
table.scrolling {
  max-width: 90vw;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* function class */

.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

.center {
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.overflow { overflow: hidden; }
.noscroll { overflow-x: hidden; }
.empty { height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

hr.cover { border: none; height: 16px; background: #fff0f0 url(../images/background.jpg); }
section hr { border: none; height: 3px; margin: 12px 0; background: url(../images/border.png); }

.small { font-size: 0.9em; line-height: 1.2em; }
.big { font-size: 1.2em; }
strong.big { font-size: 1.8em; }
.nowrap { white-space: nowrap; }
.wbr, label { display: inline-block; }
.separate { margin-right: 1.5em; }

mark, .mark { background: #f2f5f6; }
.mark { padding: .8em; }

.cell {
  display: inline-block;
  margin: 1em 0; padding: 6px 1.2em;
  background: #fff;
  border: 1px solid #888;
}
.dot { background: url(../images/border-dot.png) center bottom repeat-x; padding-bottom: 0.5em; }
h3.dot { margin-bottom: .7em; padding-bottom: .3em; }

.fadein { animation: fadein 6s ease forwards; animation-delay: 1s; opacity: 0; }
@keyframes fadein { 100% {  opacity: 1;} }

a.button {
  display: block;
  position: relative;
  width: fit-content;
  min-width: 300px;
  margin: 1.5em auto;
  padding: 1em .5em;
  text-align: center;
  font-family: sans-serif;
  font-size: 0.85em;
  letter-spacing: 1px;
  word-break: keep-all;
  color: #333;
  background: #f3f4f6;
  border: 1px solid #a7a7a7;
  border-radius: 6px;
  overflow: hidden;
}
button,
.kirari {
  position: relative;
  overflow: hidden;
}
a.button:before,
button:before,
.kirari:before {
	animation: 5s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 100%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-25deg);
	width: 50%;
}
@keyframes shine {
	20% { left: 150%; }
	100% { left: 150%; }
}
a.button:after {
  content: "";
  display: inline-block;
  width: 1.7em; height: 19px;
  vertical-align: middle;
  background: url(../images/icon-li.svg) right top no-repeat;
}

a.circle {
  content: "";
  position: absolute;
  bottom: 32px; right: 32px;
  display: inline-block;
  width: 33px; height: 33px;
  text-indent:-9999px;
  background: url(../images/icon-a.svg) right top no-repeat;
}
@media screen and (max-width:959px) {
  a.circle {
    top: 32px;
  }
}
a.icon-red {
  padding-left: 1.2em;
  background: url(../images/icon-li-red.svg) left center no-repeat;
}
a:hover, .pointer:hover { opacity: 0.7; }
figure:hover img { transition-duration: .5s; transform: scale(1.05,1.05); }
button, input[type="submit"], .pointer { cursor: pointer; }

.count { counter-reset: i; }
.count dt:before { counter-increment: i; content: counter(i) ". "; }
.count dt, .count dd { padding-left: 1.2em; }
.count dt { text-indent: -1.2em; }


/* hana */

h3.hana {
  margin-top: .5em; padding-bottom: 28px;
  text-align: center;
  background: url(../images/icon-hana.png) center bottom no-repeat;
}
h4.hana {
  padding-left: 1.8em;
  font-size: 1.3em;
  background: url(../images/icon-hana.png) left top no-repeat;
}

dl.hana dt, dl.hana dd {
  padding-left: 1.8em;
}
dl.hana dt {
  font-size: 1.1em;
  line-height: 1.4em;
  color: #d3605b;
  background: url(../images/icon-hana.png) left top no-repeat;
}

table.hana, table.hana th, table.hana td { border-color: #eedbdb; }
table.hana th { color: #fff; background: #d5655f; }

em.hana, span.hana {
  padding-left: 1.8em;
  background: url(../images/icon-hana.png) left center no-repeat;
}

/* function flex */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.wrap > * {
  margin-left: auto; margin-right: auto;
}
.flex.banner {
  flex-wrap: wrap;
  justify-content: center;
  text-align: center\9; /* IE hack */
}
.order0 { order: 0; }
.order1 { order: 1; }

@media screen and (max-width:959px) {
  .flex.div { flex-wrap: wrap; }
  .flex.div > * { width: 100%; }
}
.flex.div2 {
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width:1110px) {
  .flex.div2 {
    justify-content: center;
  }
}
.flex.div2 > * {
  width: 100%; max-width: 548px;
  margin: 0 0 2em 0;
}

.flex.flow {
  margin: 2em -20px 1em 0;
  flex-wrap: wrap;
  justify-content: center;
}
.flex.flow > * {
  position: relative;
  width: 265px; height: 200px;
  max-width: 40%;
  margin: 0 20px 20px 0;
  background: #222;
  overflow: hidden;
}
.flow > * .layer2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s ; }
.flow > * .layer3 { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; transition: 1.0s ; }
.flow > *:hover .layer1 { opacity: .4; transition-duration: .5s; transform: scale(1.05,1.05); }
.flow > *:hover .layer2 { opacity: 0; }
.flow > *:hover .layer3 { opacity: 1; }
.flow > * .layer2 { font-size: 18px; writing-mode: vertical-rl; color: #fff; }
.flow > * div.layer2 { height: 100%; text-align: center; text-shadow: 1px 1px 4px #000; }
.flow > * .layer3 { padding: 0 16px; color: #fff; }
.flow > * .layer3 p { margin: 1em 0 0 0; padding: 0;}

@media screen and (max-width:959px) {
}




/* layout */

#layout {
  max-width: 1728px;
  margin: auto;
}
#layout .subframe {
  max-width: 1120px;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}
#layout > header,
#layout > footer,
.cover {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
}
#layout > header {
  position: relative; /* IE hack */
  position: sticky; top: 0;
  z-index: 100;
}
#layout > header h1 {
  position: relative;
  z-index: 1;
}
#layout > footer {
  padding-top: 1.5em; padding-bottom: 1.5em;
}

article > section {
  padding-left: 16px;
  padding-right: 16px;
}
article > section.full {
  padding-left: 0;
  padding-right: 0;
}
article > section.full > p {
  padding: .5em 1.5em;
}
.half { width: 48%; }
.flex-pic { width: 65%; }
.flex-text { width: 35%; padding: 0 1%; }

@media screen and (max-width:959px) { /* SP */
  .half { width: 96%; }
  .flex-pic { width: 100%; }
  .flex-text { width: 100%; padding: 0 1%; }    
}


/* color */

#layout > header {
}
#layout > footer {
  background: #cb5a6e;
}

#head-top {
  background: #fff4f4 url(../images/background.jpg);
  border-top: 1px solid #fff; border-bottom: 1px solid #fff;
}
#nav,
.compact #head-top {
  background: rgba(255,255,255,0.8);
  background-blend-mode: lighten;
}
#menu-contact .mark,
#head-contact .mark {
  color: #fff;
  background: #cb5a6e;
}
#nav ul li,
#outline ul li {
  border: 1px none #cb5a6e;
}
.current {
  background: #ca8081;
}

#catch-image,
#catch-slider {
  background: #cb5a6e;
}

#foot-leg {
  background: #fff;
}
#copyright {
  color: #fff;
}

table, th, td { border-color: #edeae2; }
th { background: #dedbd3; }





/* HEADER */

#head-logo {
  position: absolute; top: 0;
  width: 144px;
  margin-left: 8px;
  margin-top: -32px;
  opacity: .8;
  z-index: 1; /* IE hack */
  transition: all ease-out .2s; /* 動きの秒数指定 */
}
.diffuse #head-logo {
  opacity: 1;
}

#head-top {
  position: relative;
  height: 115px;
  margin-top: 60px;
}
#head-top.flex {
  justify-content: space-between;
  align-items: center;
}
#head-title {
  margin-left: 160px;
}
#head-title img {
  display: block;
  margin: 12px 0;
}
#head-contact {
  width: 240px;
  text-align: center;
  float: right\9; /* IE hack */
}
#head-contact .mark {
  margin: 2px 0; padding: 4px;
  font-size: 14px;
}
#head-contact .sns > * {
  padding: 2px;
}

#nav ul {
  padding: 16px 0;
}
#nav ul li {
  flex-grow: 1;
  text-align: center;
  border-left-style: solid;
}
#nav ul li:last-child {
  border-right-style: solid;
}

.current img, .current-img { display: none; }
.current .current-img { display: inline; }


/* compact header */

.compact #head-logo {
  width: 74px;
  margin-top: 0;
  opacity: 1;
}
.compact #head-top {
  height: 50px;
  border: none;
}
.compact #head-top.flex {
  align-items: flex-start;
}
.compact #head-title {
  margin-left: 84px;
  padding-top: 14px;
}
.compact #head-title img {
  display: inline-block;
  margin: 0;
}
.compact #head-contact,
.compact #nav {
  display: none;
}

@media screen and (max-width:1023px) { /* Tablet */
}

@media screen and (max-width:959px) { /* SP */

  #head-logo, .diffuse #head-logo {
    width: 90px;
    margin-top: 0;
  }
  #head-top {
    height: 80px;
    margin-top: 0;
    border: none;
  }
  #head-title {
    margin-left: 110px;
  }

  #head-contact,
  #nav {
    display: none;
  }

  .compact #head-top {
    height: 50px;
  }
  .compact #head-logo {
    width: 48px;
  }
  .compact #head-title { display: none; }

}



/* menu */

#nav-check, #nav-open, #nav-close, #nav-out { display: none; }

#menu-open { display: block; }
#menu-check, #menu-close, #menu-out { display: none; }

#menu, #menu-open, #menu-close, #menu-out {
  position: fixed;
  top: 0; right: 0;
  transition: .3s ease-in-out;
  z-index: 2;
}
#menu-close { z-index: 3; }
#menu { right: -100%; }
#menu-out { width: 100%; height: 100%; background: #000; opacity: 0; }

#menu-check:checked ~ #menu { right: 0; }
#menu-check:checked ~ #menu-close { display: block; }
#menu-check:checked ~ #menu-out { display: block; opacity: .5; }

#menu {
  overflow: auto;
  height: 100vh;
  width: 90%;
  background: #fff; background-color: rgba(255, 255, 255, 0.9);
  margin: 0 auto 0 auto;
  padding: 16px 0 0 0;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

#menu nav {
  margin: 3em 0 0 1em;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#menu nav ul {
  font-size: .85em;
  line-height: 2em;
  font-family: sans-serif;
  flex-wrap: wrap;
  flex-direction: column;
}
#menu nav ul:first-child {
  margin-top: -3em;
}
@media (min-width:480px) { /* PC */
  #menu ul {
    margin-left: auto;
  }
}
#menu ul li {
	position:relative;
  margin: 0 1.5em 1em 1.5em;
	padding: 0 1em 0 1.5em;
  min-width: 14em;
  border-bottom: solid 1px #cb5a6e;
}
#menu ul li:before {
  position: absolute;
  content: '';
  top: 0.5em; left: 0.5em;
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #cb5a6e;
}
#menu ul li.top {
	padding: 0;
}
#menu ul li.top:before {
  border: none;
}
#menu ul li.sub {
	margin-left: 3em;
  border-bottom: dashed 1px #cb5a6e;
}

@media screen and (max-width:959px) { /* SP */
  #menu ul li.sub,
  #menu ul li.side {
  	display: none;
  }
}

#menu-info {
  text-align: center;
}
#menu-reserve input,
#menu-reserve select {
  font-size: 18px;
}
#menu-reserve button,
#menu-reserve a {
  display: inline-block;
  font-size: 14px;
  font-family: sans-serif;
  border-radius: 10px;
  margin-top: 1em;
  padding: 16px 20px;
}
#menu-reserve button {
  margin-left: 20px;
  margin-right: 20px;
  border: 1px solid #cb5a6e;
  background: #cb5a6e;
  color: #fff;
  font-size: 20px;
}
#menu-reserve a {
  width: 200px;
  border: 1px solid #cb5a6e;
  background: #fff;
  white-space: nowrap;
  font-size: 14px;
  text-align: center;
}

#menu-reserve h6 {
  padding-bottom: 0.5em;
  border-bottom: solid 1px #cb5a6e;
  font-size: 30px;
  text-align: center;
}

#menu-contact {
  width: 240px;
  text-align: center;
  float: right\9; /* IE hack */
  margin: 3em auto;
}
#menu-contact .mark {
  margin: 2px 0; padding: 4px;
  font-size: 16px;
}
#menu-contact .sns > * {
  padding: 2px;
}

.reserve_con {
  font-family: sans-serif;
  font-size: .85em;
  margin: .8em auto 1.5em auto;
  width: fit-content;
  word-break: keep-all;
  line-height: 160%;
}
.reserve_con a + a:before {
  content: " / ";
  color: #caaa84;
  font-weight: bold;
}



/* TAB */

#head-below {
  display: none;
  position: fixed; bottom: -2px; left: 10%;
}
@media screen and (max-width:1024px), screen and (max-height: 700px) { /* サイドタブとフッタータブ切り替え */
  #head-side { display: none; }
  #head-below { display: block; }
}

#side-reserve {
  position: fixed; top: 45%; right: 0;
  transform: translateY(-105%);
  text-align: right;
}

#side-tokuten {
  position: fixed; top: 240px; right: -553px;
  width: 610px; height: 365px;
  background: url(../images/background-tokuten.png) no-repeat;
  transition: .3s ease-in-out;
}
#side-tokuten-check:checked ~ #side-tokuten { right: 0; }

#side-tokuten-check { display: none; }
#side-tokuten-open { position: absolute; top: 0; left: 0; }
#side-tokuten-close { position: absolute; top: 5px; right: 5px; }

#side-tokuten-body {
  margin-left: 57px; padding-top: 1px;
}
#side-tokuten-body h6 {
  margin: 15px 0; padding: 6px 20px;
  font-size: 17px;
  font-weight: normal;
  color: white;
  background: #d08e38;
}

#side-tokuten-body ol {
  margin: 48px 0 32px 0;
  padding-left: 20px;
  list-style: none;
}
#side-tokuten-body ol li {
  margin-bottom:16px; padding-left: 60px;
  min-height: 40px;

}
#side-tokuten-body ol li:nth-child(1) { background: url(../images/icon-tokuten-1.png) left top no-repeat; }
#side-tokuten-body ol li:nth-child(2) { background: url(../images/icon-tokuten-2.png) left top no-repeat; }
#side-tokuten-body ol li:nth-child(3) { background: url(../images/icon-tokuten-3.png) left top no-repeat; }

#side-tokuten-body b {
  display:block;
  margin: 4px 0;
  font-size: 17px;
  color: #d23f09;
}


/* catch ページ毎のヘッダー画像 */

#catch {
  position: relative;
  z-index: -1\9; /* IE hack */
  overflow: hidden;
}
@media (min-width:960px), print { /* PC */
  #catch {
    top: -236px;
    min-height: 236px;
    margin-bottom: -236px;
    overflow: visible;
  }
}

#catch-image,
#catch-slider {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
#catch-image {
  max-height: 870px;
  overflow: hidden;
}
@media print {
  #catch-image,
  #catch-slider {
    max-height: 500px;
  }
}
#catch-image img,
#catch-slider img,
#catch-slider video {
  width: 100%;
  max-width: 1920px;
  display: block;
  margin: auto;
}

#catch-slider a:hover { opacity: 1; }

#catch .bx-wrapper { margin: 0; border: none; }
#catch .bx-wrapper .bx-pager { text-align: center; }
#catch .bx-wrapper .bx-pager.bx-default-pager { bottom: 16px; }

@media screen and (max-width:959px) {
}

#catch h2 {
  position: absolute; bottom: 3vw; left: 5vw;
  margin: 0;
}

/* breadcrumb パンくず */

#breadcrumb {
  position: relative;
  margin: 1.5em 0 1.5em 1em;
  font-family: sans-serif;
}

#page-intro {
  min-height: 238px;
  padding-top: 2em;
  background: url(../images/background-c.png) left top no-repeat;
}
#page-intro .alpha {
  margin-bottom: 1em;
  line-height: 2.5em;
}
#page-intro .beta {
  margin-top: 0; margin-left: auto; padding-right: 0;
}

/* outline もくじ */

#outline {
  margin: 1.5em 0;
}

#outline ul {
  margin: 2em 6px 0 6px; padding: 0;
  justify-content: center;
}
#outline ul li {
  padding: 0 1.5em;
  text-align: center;
  font-family: sans-serif;
  border-left-style: solid;
}
#outline ul li:last-child {
  border-right-style: solid;
}

#outline ul.thumb {
  margin-left:0; margin-right: -10px;
  justify-content: space-evenly;
  gap: 20px 1px;
}
#outline ul.thumb li {
  position: relative;
  max-width: 33%; height: 240px;
  padding: 0;
  border: none;
  overflow: hidden;
}
#outline ul.thumb .layer2 {
  position: absolute; top: 0; left: 24px;
}
@media screen and (max-width:479px) {
  #outline ul.thumb .layer2 {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* banner バナー */

.banner > * {
  display: block;
  margin: .5em;
}
.banner + .banner {
  margin-top: -2em;
}

/* FOOTER */

#foot-leg.flex {
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 440px;
}

#foot-left {
  font-weight: bold;
  font-size: 1.3rem;
}
#foot-leg .sns > * {
  margin-right: 6px;
}
#foot-right {
  max-width: 640px;
  flex-grow: 1;
}
#foot-left,
#foot-right {
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
#foot-left img,
#foot-right img {
  max-width: 100%;
}

#foot-contact-for {
  font-weight: bold;
  color: #b78b32;
}
#foot-contact.flex {
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 1em 0 .5em 0;
}
#foot-contact-button {
  margin: 1em auto;
  padding: .7em;
  color: #fff;
  border: double 4px #fff; 
  background: #633162;
}

#foot-nav ul {
  margin: 1em 0 1em 1em;
  font-size: .85em;
  line-height: 2em;
  font-family: sans-serif;
}
#foot-nav ul.flex {
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width:480px) {
  #foot-nav ul {
    max-width: 40em; height: 20em;
    margin-left: auto;
  }
}
@media (min-width:960px) { /* PC */
  #foot-nav ul {
    max-width: 40em; height: 10em;
    margin-left: auto;
  }
}
#foot-nav ul li {
	position:relative;
	padding: 0 1em 0 1.5em;
}
#foot-nav ul li:before {
  position: absolute;
  content: '';
  top: 0.5em; left: 0.5em;
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #caaa84;
}

#copyright {
  padding: 1em 0;
  text-align: center;
  font-size: .85em;
}





/* Responsive */

@media screen and (max-width:959px) { /* SP */
  table.vertical { margin: .5em 8px; }
  table.vertical th, table.vertical td { display: block; width: 100%; }

  #page-intro .alpha, #page-intro .beta { width: 96%; }

  #outline ul.thumb li {
    width: 49%;
    max-width: 49%;
    margin-bottom: 2%;
  }
  #outline ul.vertical li { writing-mode: vertical-rl; }

}


/* printer */

@media print {
  #layout > header { position: relative; }
  #menu-open { display: none; }
  #head-side { display: none; }
  #head-below { display: none; }
  #trip_ai_container { display: none; }
}

section,
aside,
footer,
#outline {
  page-break-inside: avoid;
}


/* tool */

#pagetop {
  position: fixed;
  bottom: 16px; right: 16px;
}

#trip_ai_container {
  z-index: 1 !important;
}


/* bxslider */

.bx-wrapper {
  margin-bottom: 0;
  box-shadow: none;
  background: inherit;
}
.bx-wrapper .bx-controls-direction a {
  z-index: 99;
  opacity: 0;
}
.bx-wrapper .bx-controls-direction a:hover { opacity: 100; }

.picture .bx-wrapper { border: 0; }
.picture .bx-wrapper .bx-caption { background: none; }
.picture .bx-wrapper .bx-caption span { font-size: 1em; font-family: inherit; line-height: 1.2em; }
.picture .bx-wrapper .bx-controls-direction a {
  top: 100%;
  width: 68px; height: 68px;
  margin: -96px 0 0 0;
}
.picture .bx-wrapper .bx-prev { left: 40px; background: url(../images/icon-slider-prev.png) no-repeat 0 0; }
.picture .bx-wrapper .bx-next { right: 40px; background: url(../images/icon-slider-next.png) no-repeat 0 0 !important; }
.picture .bx-wrapper .bx-has-pager { margin-bottom: 60px; }
.picture .bx-wrapper .bx-pager { text-align: right; }
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 12px; height: 12px; border-radius: 6px;
  background: #c88;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #c33;
}

.picture .slider { margin-bottom: 1em; background: #fff; }
.picture .slider img { display: block; width: 100%; }
.picture .slider img:not(:first-child) { display: none; }


/*アニメーション*/
@media not print {
  .scrIn.js {
    opacity: 0;
  }
}
.scrIn.js.active {
  transition: all ease-in 2s; /* 動きの秒数指定 */
  opacity: 1 !important;
  transform: none !important;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slidein {
  from { margin-left: -300px; }
  to { margin-left: 0; }
}

.fadeIn {
  animation-name: fadein;
  animation-duration: 5s;
}

#catch #catch-image {
  animation-name: fadein;
  animation-duration: 2s;
}
#catch h2 {
  animation-name: slidein;
  animation-duration: 1s;
}

/* IE hack */

.flex > * {
  display: inline-block\9;
  vertical-align: top\9;
}

@media all and (-ms-high-contrast:none) {

  #layout > header.compact {
    position: fixed;
    max-width: 1120px;
    margin: 0; padding: 0;
  }

  .compact #head-top {
    margin-top: 0;
  }

}