@charset "UTF-8";
/* =====
 * ALL DEVICE::Start
========================================================= */
#Main .billboard {
  background: transparent url("../img/top/bg-01.jpg") no-repeat 50% 50%;
  background-size: 100% 100%;
  padding: 4em 0;
  position: relative;
}
#Main .billboard .ttl-style-01 {}
#Main .billboard .ttl-style-01 ruby {}
/* BLOCK::SIC::01
-----------------------*/
#Main .block-sic-01 {
  background: #f3f1f0 url(../img/sic/bg-01.jpg) no-repeat 50% 0;
  background-size: 100% auto;
  padding: 4em 0;
  position: relative;
}
#Main .block-sic-01 h3 {
  text-align: center;
  color: #29445c;
  font-size: 200%;
  font-family: 'EB Garamond', serif;
  letter-spacing: 0.1em;
  margin: 0 0 1em;
}
#Main .block-sic-01 h3 span {
  display: inline-block;
  white-space: nowrap;
  margin: 0 0.2em;
}
#Main .block-sic-01 h3 ruby {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "MS 明朝", serif;
  display: block;
  font-size: 50%;
}
#Main .block-sic-01 h3 + p {
  text-align: center;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "MS 明朝", serif;
  line-height: 2.5;
  margin: 1em 0 0;
}
#Main .block-sic-01 .tbl-list {
  width: 96%;
  max-width: 1000px;
  margin: 3em auto 0;
  border-spacing: 1em;
}
#Main .block-sic-01 .tbl-list li {
  width: 1%;
  vertical-align: middle;
  text-align: center;
  background-size: cover;
  background-position: 50%;
}
#Main .block-sic-01 .tbl-list li:nth-child(1) {background-image: url("../img/sic/gallery-img-04.jpg");}
#Main .block-sic-01 .tbl-list li:nth-child(2) {background-image: url("../img/sic/gallery-img-05.jpg");}
#Main .block-sic-01 .tbl-list li:nth-child(3) {background-image: url("../img/sic/gallery-img-06.jpg");}
#Main .block-sic-01 .tbl-list li a {
  position: relative;
  display: block;
  padding-top: 66.66%;
  color: #fff;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "MS 明朝", serif;
}
#Main .block-sic-01 .tbl-list li:nth-child(1) a {background-color: rgba(61,59,82,0.6);}
#Main .block-sic-01 .tbl-list li:nth-child(2) a {background-color: rgba(0,0,0,0.5);}
#Main .block-sic-01 .tbl-list li:nth-child(3) a {background-color: rgba(46,25,12,0.6);}
#Main .block-sic-01 .tbl-list li a > span {
  position: absolute;
  top: 50%;
  left: 1em;
  right: 1em;
  transform: translateY(-50%);
  font-size: 125%;
}
#Main .block-sic-01 .tbl-list li a ruby {
  font-size: 80%;
  font-family: 'JaneAusten';
  margin-bottom: 0.5em;
  display: block;
}
#Main .block-sic-01 .tbl-list li a span > span {
  white-space: nowrap;
  display: inline-block;
}

/* BLOCK::SIC::02
-----------------------*/
#Main .block-sic-02 {
  background: transparent url(../img/sic/bg-03.jpg) no-repeat;
  background-size: 100% 100%;
}
#Main .block-sic-02 .ttl-style-04 {
  background: transparent url(../img/sic/bg-04.jpg) no-repeat 50% 0;
  background-size: 100% 100%;
  padding: 2em 0 0;
  margin: 0;
  font-size: 150%;
}
#Main .block-sic-02 .ttl-style-04 span {
  display: block;
  font-size: 150%;
}
#Main .block-sic-02 p:first-child {
  color: #fff;
  line-height: 2;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "MS 明朝", serif;
  margin: 0 0 3em;
  text-align: center;
}
#Main .block-sic-02 p.caps {
  margin-top: -1em;
  margin-right: 1em;
  text-align: right;
  font-size: 75%;
  opacity: 0.8;
  color: #fff;
}
#Main .block-sic-02 ul li {
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1em;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
#Main .block-sic-02 ul li::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #29445c ;
  border-width: 3em;
  transform-origin: 50%;
  transform: rotate(-45deg);
  position: absolute;
  top: -2.5em;
  left: -2.5em;
  z-index: 2;
}
#Main .block-sic-02 ul li::after {
  color: #fff;
  font-size: 200%;
  font-family: 'EB Garamond', serif;
  line-height: 1;
  position: absolute;
  top: 0.25em;
  left: 0.4em;
  z-index: 3;
}
#Main .block-sic-02 ul li:nth-child(1)::after {content: "01";}
#Main .block-sic-02 ul li:nth-child(2)::after {content: "02";}
#Main .block-sic-02 ul li:nth-child(3)::after {content: "03";}
#Main .block-sic-02 ul li:nth-child(4)::after {content: "04";}

#Main .block-sic-02 ul li p {
  line-height: 1.5;
  text-align: center;
  color: #fff;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "MS 明朝", serif;
  margin-top: 1em;
  position: relative;
}
#Main .block-sic-02 ul li p strong {
  color: #b9a14f;
  font-weight: normal;
  font-size: 150%;
  display: block;
  border-right: 1px solid #b9a14f;
  padding-right: 0.5em;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.5em;
}
/* BLOCK::SIC::03
-----------------------*/
#Main .block-sic-03 .gallery {margin: 0;}
#Main .block-sic-03 .container {max-width: 1000px;}
#Main .block-sic-03 .gallery .ttl-style-04 {margin-top: -2.25em; color: #877764;}
#Main .block-sic-03 .gallery .mport-area {
  position: relative;
  padding: 56.4% 0 0;
  margin-bottom: 4em;
}
#Main .block-sic-03 .gallery iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#Main .block-sic-03 .gallery dl {position: relative;}
#Main .block-sic-03 .gallery dl::before {
  content: "";
  display: block;
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#Main .block-sic-03 .gallery p.caps {font-size: 75%;opacity: 0.8;}
#Main .block-sic-03 #Gallery-01 dl::before {background-image: url("../img/sic/gallery-img-01.png");}
#Main .block-sic-03 #Gallery-02 > div {background-color: #f9f7f5;position: relative;}
#Main .block-sic-03 #Gallery-02 dl::before {background-image: url("../img/sic/gallery-img-02.png");}
#Main .block-sic-03 #Gallery-03 dl::before {background-image: url("../img/sic/gallery-img-03.png");}
#Main .block-sic-03 .gallery dl dt {
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.4em;
  margin-bottom: 0.5em;
  font-size: 200%;
  font-family: 'EB Garamond', serif;
  color: #29445c;
  line-height: 1;
  letter-spacing: 0.2em;
  position: relative;
}
#Main .block-sic-03 .gallery dl dt span {
  display: inline-block;
  border: 1px solid #29445c;
  background-color: #29445c;
  padding: 0.2em 1em;
  font-size: 60%;
  color: #fff;
  margin-left: 0.5em;
  vertical-align: bottom;
}
#Main .block-sic-03 .gallery dl dt span.free {
  border: 1px solid #ddd;
  background-color: #f1f1f1;
  color: #353535;
}
#Main .block-sic-03 .gallery dl dd ul li {
  position: relative;
  padding-left: 2em;
}
#Main .block-sic-03 .gallery dl dd ul li span {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: #327ba2;
  border-radius: 3px;
  position: absolute;
  top: 0.1em;
  left: 0;
  font-family: 'EB Garamond', serif;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
#Main .block-sic-03 .gallery dl dd + dt {margin-top: 1.5em;}
/* =====
 * ALL DEVICE::End
========================================================= */
@media only screen and (min-width:769px) {
  /* =====
   * PC::Start
  ========================================================= */
  /* BLOCK::TAB
    -----------------------*/
  #Main .contentstab {
    position: relative;
  }
  #Main .contentstab > h4 {display: none;}
  #Main .contentstab > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transform: translateY(-50%);
  }
  #Main .contentstab ul {
    margin: 0 auto 0;
    width: 96%;
    max-width: 1260px;
    display: table;
    border: 1px solid #2a4e94;
    background: transparent url("../img/sic/bg-05.png") no-repeat 50% 0;
    background-size: 100% 200%;
  }
  #Main .contentstab ul li {
    display: table-cell;
    margin: 0;
    vertical-align: middle;
  }
  #Main .contentstab ul li a {
    display: block;
    padding:1em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 1.5;
    font-size: 87.5%;
    font-feature-settings: "palt";
    position: relative;
  }
  #Main .contentstab ul li a span {display: inline-block;white-space: nowrap;}
  #Main .contentstab ul li.blank a {
    color: #8a98b4;
    pointer-events: none;
  }
  #Main .contentstab ul li.current {
    background-color: rgba(0, 0, 0, 0.3);
  }
  #Main .contentstab ul li + li a::before {
    display: block;
    content: "";
    width: 1px;
    height: 1em;
    line-height: 1;
    background-color: #2a4e94;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.5em;
  }
  #Main .contentstab ul li.current a::before,
  #Main .contentstab ul li.current + li a::before {
    display: none;
  }
  /* BLOCK::SIC::01
    -----------------------*/
  #Main .block-sic-01 {padding-top: 5em;}
  #Main .block-sic-01 .tbl-list li a:hover {opacity: 1;background-color: rgba(0,0,0,0.3);}

  /* BLOCK::SIC::02
    -----------------------*/
  #Main .block-sic-02 p:first-child span {
    display: inline-block;
    white-space: nowrap;
  }
  #Main .block-sic-02 ul {
    margin: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #Main .block-sic-02 ul li {
    margin: 10px;
    width: calc(33.33% - 20px);
  }
  /* BLOCK::SIC::03
  -----------------------*/
  #Main .block-sic-03 .gallery {margin-top: -80px;padding-top: 80px;}
  #Main .block-sic-03 .gallery dl {margin: 2em 0 0;}
  #Main .block-sic-03 #Gallery-01 dl {padding-left: 21em;padding-bottom: 0;}
  #Main .block-sic-03 #Gallery-02 dl {padding-left: 25em;padding-bottom: 5em;}
  #Main .block-sic-03 #Gallery-03 dl {padding-left: 22em;padding-bottom: 4em;}
  #Main .block-sic-03 .gallery dl::before {position: absolute;top: 0;left: 0;bottom: 0;}
  #Main .block-sic-03 #Gallery-01 dl::before {width: 20em;}
  #Main .block-sic-03 #Gallery-02 dl::before {width: 24em;}
  #Main .block-sic-03 #Gallery-03 dl::before {width: 24em;}
  /* =====
   * PC::End
  ========================================================= */
}
@media only screen and (max-width:1260px) and (min-width:769px) {
  /* =====
   * TAB::Start
  ========================================================= */
  #Main .block-sic-03 .gallery > div {padding: 0 2em;}
  #Main .block-sic-02 ul li {padding: 0 0 1em;}
  #Main .block-sic-02 ul li img {margin: 1em 1em 0;width: calc(100% - 2em);}
  /* =====
   * TAB::End
  ========================================================= */
}
@media only screen and (max-width:768px) {
  /* =====
   * SP::Start
  ========================================================= */
  /* MODULE::SCROLLER
    -----------------------*/
  .scroller {
    overflow-x: scroll;
    position: relative;
  }
  .scroller::before {
    content: "";
    display: block;
    transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent url("../img/sic/img_swipe.png") no-repeat 50% 50%;
    background-size: 20% auto;
    z-index: 2;
  }
  .scroller::after {
    content: "";
    display: block;
    transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    width: 250%;
    padding: 3%;
    z-index: 1;
  }
  .scroller.on::before,
  .scroller.on::after {
    opacity: 0;
  }
  .scroller img {
    width: 250%;
    padding: 3%;
    opacity: 0.5;
    transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;
  }
  .scroller.on img {
    opacity: 1;
  }
  .scroller::-webkit-scrollbar {
    -webkit-appearance: none !important;
    height: 10px !important;
    background: #eaeaea !important;
  }
  .scroller::-webkit-scrollbar-thumb {
    background: #cdcdcd !important;
  }
  /* BLOCK::TAB
    -----------------------*/
  #Main .block-sic-00 {position: relative;}
  #Main .contentstab {
    background: transparent url("../img/sic/bg-05.png") no-repeat 50% 0;
    background-size: 100% 200%;
    position: absolute;
    top: -2em;
    left: 2em;
    right: 2em;
    z-index: 2;
    border: 1px solid #2a4e94;
  }
  #Main .contentstab h4 {
    text-align:  center;
    font-size: 137.5%;
    color: #bcc5d6;
    line-height: 1;
    padding: 1em;
    position: relative;
  }
  #Main .contentstab h4::after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e900";
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -0.5em;
    color: #bcc5d6;
  }
  #Main .contentstab h4.on::after {
    content: "\e901";
  }
  #Main .contentstab h4 + div {
    display: none;
  }
  #Main .contentstab ul {
    margin: 0;
    border-top: 1px solid #2a4e94;
  }
  #Main .contentstab ul li {
    margin: 0;
  }
  #Main .contentstab ul li a {
    display: block;
    padding:1em 0;
    text-align: center;
    text-decoration: none;
    font-size: 125%;
    color: #fff;
    position: relative;
  }
  #Main .contentstab ul li a span {
    display: inline-block;
    white-space: nowrap;
  }
  #Main .contentstab ul li.blank a {
    color: #8a98b4;
    pointer-events: none;
  }
  #Main .contentstab ul li.current {display: none;}
  #Main .contentstab ul li + li a::before {
    display: block;
    content: "";
    width: 1px;
    height: 1em;
    line-height: 1;
    background-color: #2a4e94;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.5em;
  }
  /* BLOCK::SIC::01
    -----------------------*/
  #Main .block-sic-01 h3 {
    line-height: 1.2;
  }
  #Main .block-sic-01 h3 ruby {
    margin-top: 1.5em;
  }
  #Main .block-sic-01 h3 + p {margin-left: 2em;margin-right: 2em;}
  #Main .block-sic-01 .tbl-list {display: none;}
  /* BLOCK::SIC::02
    -----------------------*/
  #Main .block-sic-02 p:first-child {text-align: left;}
  #Main .block-sic-02 ul {}
  /* BLOCK::SIC::03
    -----------------------*/
  #Main .block-sic-03 .gallery .ttl-style-04 {margin-top: 0;}
  #Main .block-sic-03 .gallery > div {padding: 0 2em 4em;}
  #Main .block-sic-03 .gallery dl::before {background-size: auto 100%;background-position: 50% 0;margin: -2em 0 2em;}
  #Main .block-sic-03 #Gallery-01 dl::before {padding-top: 54%;}
  #Main .block-sic-03 #Gallery-02 dl::before {padding-top: 100%;}
  #Main .block-sic-03 #Gallery-03 dl::before {padding-top: 100%;}

  /* =====
   * SP::End
  ========================================================= */
}