@charset "UTF-8";

/**
 * 
 * インデックスページ用レイアウト (PC)
 * June 3, 2019
 * 
**/

/*======================================================================

  #contents-head-index (メインビジュアルエリア)

======================================================================*/

#contents-head-index {
  height:400px; /* メインビジュアルエリアの高さ設定 */
  overflow:hidden;
  position:relative;
}

#contents-head-index > .wrap {
  height:100%;
  overflow:hidden;
  position:relative;
}

/*----------------------------------------------------------------------
  #brand-area (ブランド名)
----------------------------------------------------------------------*/

#contents-head-index #brand-area {
  align-items:center;
  display:flex;
  left:0;
  margin:auto;
  position:absolute;
  right:0;
  top:35%; /* トップからの位置指定(天地中央は50%) */
  -webkit-transform:translate(0, -50%); /* Safari用 */
  transform: translate(0, -50%);
  width:940px;
  z-index:2;
}

#contents-head-index #brand-area .wrap {
  width:50%;
}

#mainContents:not(.js) #contents-head-index #brand-area .wrap {
  overflow:hidden;
}

#contents-head-index #brand-area .wrap + .wrap {
  padding-left:40px;
}

#contents-head-index #brand-area .background {
  display:inline-block;
}

#contents-head-index #brand-area .background.white {
  background-color:rgba(255,255,255,0.5);
}

#contents-head-index #brand-area .background.black {
  background-color:rgba(0,0,0,0.5);
}

#contents-head-index #brand-area .title {
  font-size:1.125rem; /* 18px */
  font-weight:bold;
  line-height:1.3;
}

#contents-head-index #brand-area .title .brand-logo {
  display:block;
  font-style:italic;
}

#contents-head-index #brand-area .title .brand-logo img {
  max-height:20px;
}

#contents-head-index #brand-area .title .brand-name {
  display:inline-block;
  font-size:2.75rem; /* 44px */
  line-height:1;
  margin-top:5px;
}

#contents-head-index #brand-area .title .brand-name img {
  /* max-height:30px; デフォルト値 */
  max-height:36px;
}
#contents-head #brand-area .title .brand-name img {
  /* max-height:30px; デフォルト値 */
  max-height:34px;
}
#contents-head-index #brand-area .more {
  margin-top:20px;
}

/*----------------------------------------------------------------------
  #mainvisual (メインビジュアル)
----------------------------------------------------------------------*/

#mainvisual {
  height:100%;
  padding:0;
  position:relative;
  text-align:center;
}

#mainvisual video {
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
  max-height: inherit;
}

#mainvisual .swiper-slide {
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

#mainvisual .swiper-control {
  bottom:0;
  display:none;
  height:40px;
  left:0;
  line-height:1;
  margin:auto;
  position:absolute;
  right:0;
  width:960px;
  z-index:1;
}

#mainvisual .swiper-button-next,
#mainvisual .swiper-button-prev {
  height:40px;
  margin:0;
  position:relative;
  top:0;
  width:40px;
}

#mainvisual .swiper-button-prev {
  float:left;
  left:0;
}

#mainvisual .swiper-button-next {
  float:right;
  right:0;
}

#mainvisual .swiper-pagination {
  bottom:0;
  left:0;
  margin:auto;
  right:0;
  top:15px;
  width:880px;
}

#mainvisual .swiper-pagination-bullet {
  background-color:#fff;
  border:none;
  border-radius:0;
  height:10px;
  margin:0 10px;
  opacity:0.4;
  width:10px;
}

#mainvisual .swiper-pagination-bullet-active {
  opacity:1;
}

#mainvisual .video-control {
  bottom:10px;
  cursor:pointer;
  display:block;
  right:10px;
  list-style:1;
  position:absolute;
  width:15px;
  z-index:1;
}

#mainvisual .video-control > span {
  height:15px;
  display:block;
}

#mainvisual .video-control > span.none {
  display:none;
}

#mainvisual .video-control .pause:before,
#mainvisual .video-control .pause:after {
  background-color:rgba(255,255,255,0.7);
  content:"";
  display:block;
  height:15px;
  list-style:1;
  position:absolute;
  top:0;
  width:5px;
}

#mainvisual .video-control .pause:before {
  left:0;
}

#mainvisual .video-control .pause:after {
  right:0;
}

#mainvisual .video-control .play:before {
  border-top:8px transparent solid;
  border-bottom:8px transparent solid;
  border-left:12px rgba(255,255,255,0.7) solid;
  content:"";
  display:block;
  height:0;
  left:2px;
  list-style:1;
  position:absolute;
  top:0;
  width:0;
}

/*----------------------------------------------------------------------
  #head-banner (メインビジュアル内のバナーエリア)
----------------------------------------------------------------------*/

#contents-head-index > #head-banner,
#head-banner .swiper-control {
  display:none;
}

#head-banner {
  padding:0;
}

#head-banner .swiper-button-next,
#head-banner .swiper-button-prev {
  bottom:0;
}

#head-banner .swiper-button-next {
  right:0;
}

#head-banner .swiper-button-prev {
  left:0;
}

#head-banner .swiper-pagination {
  bottom:0;
  left:0;
  margin:auto;
  right:0;
  width:100%;
}

#head-banner .swiper-pagination-bullet-active {
  opacity:1;
}

#head-banner a {
  background-color:#fff;
  display:block;
}

/*----------------------------------------------------------------------
  #release-area (プレスリリース)
----------------------------------------------------------------------*/

#release-area {
  bottom:20px;
  left:0;
  margin:auto;
  overflow:hidden;
  position:absolute;
  right:0;
  /*width:940px;*/
  width:100%;
  z-index:2;
}

#mainvisual + #release-area {
  bottom:50px;
}

#mainvisual.unmove + #release-area {
  bottom:0;
}

#release-area a {
  display: block;
  margin: auto;
  text-decoration:none;
  width: 940px;
}

#release-area a:hover {
  text-decoration:underline;
}

#release-area a.colorWhite {
  color:#fff;
}

#release-area.background.black {
  background-color:rgba(0,0,0,0.5);
  padding: 10px;
}

/*======================================================================

  #event-banner (イベントバナーエリア)

======================================================================*/

#event-banner {
  background-position:center;
  background-size:cover;
  clear:both;
  display:flex;
  width:100%;
}

#event-banner .container {
  align-items:center;
  display:flex;
  min-height:105px;
  padding:20px 0;
}

#event-banner .container > div {
  color:#fff;
  flex:1;
  font-size:1.625rem; /* 26px */
  font-weight:bold;
  line-height:1.2;
  margin-right:10px;
}

#event-banner .container > nav {
  margin-left:10px;
  text-align:right;
}

/*======================================================================

  .layout.features (特長ボックス)

======================================================================*/

.layout.features {
  text-align:center;
}

.layout.features .wrap {
  display:inline-block;
  text-align:left;
}

.layout.features .box {
  border:2px #ccc solid;
  border-radius:6px;
  display:block;
  float:left;
  margin:25px 10px 0 10px;
  padding:15px 10px;
  position:relative;
  width:300px;
}

#mainContents .layout.features a.box {
  color:#333;
  text-decoration:none;
  transition-duration:.2s;
  transition-property:border-color, color;
}

#mainContents .layout.features a.box:hover {
  border-color:#528ce3;
  color:#0045b3;
  text-decoration:underline;
}

.layout.features .box:nth-child(-n+3) {
  margin-top:0;
}

.layout.features .box:nth-child(3n+1) {
  clear:left;
  margin-left:0;
}

.layout.features .box:nth-child(3n+3),
.layout.features .box:last-child {
  margin-right:0;
}

.layout.features .box .icon {
  left:0;
  position:absolute;
  top:0;
}

.layout.features .box .icon img {
  max-width:80px;
}

.layout.features .box .icon + .text {
  padding-left:75px
}

.layout.features .box .text {
  font-size:0.875rem; /* 14px */
  line-height:1.4;
}

/*======================================================================

  .layout.banners (バナーエリア)

======================================================================*/

.layout.banners .grid + .grid {
  margin-top:25px;
}

.layout.banners .grid-cell {
  text-align:center;
}

/*======================================================================

  .layout.sns-links (ソーシャルメディアリンクエリア)

======================================================================*/

.layout.sns-links {
  border-top:2px #ccc solid;
  border-bottom:2px #ccc solid;
  display:table;
  width:100%;
}

.layout.sns-links > div {
  display:table-cell;
  padding:20px 0;
  vertical-align:middle;
}

/*----------------------------------------------------------------------
  .follow (フォローリンク)
----------------------------------------------------------------------*/

.layout.sns-links .follow {
  padding-left:10px;
}

.layout.sns-links .follow .sns {
  color:#969696;
  display:table;
}

.layout.sns-links .follow .sns > dt,
.layout.sns-links .follow .sns > dd {
  display:table-cell;
  vertical-align:middle;
}

.layout.sns-links .follow .sns ul {
  list-style:none;
  overflow:hidden;
}

.layout.sns-links .follow .sns ul li {
  float:left;
  line-height:1;
}

.layout.sns-links .follow .sns ul li a {
  display:block;
  height:40px;
  margin:0 5px;
  width:40px;
}

/*----------------------------------------------------------------------
  .share (シェアリンク)
----------------------------------------------------------------------*/

.layout.sns-links .share {
  letter-spacing:-0.4em;
  padding-right:10px;
  text-align:right;
}

.layout.sns-links .share > div {
  display:inline-block;
  letter-spacing:0;
  line-height:1;
  margin:0 5px;
  vertical-align:top;
}

/*======================================================================

  .layout.related-solution (関連ソリューションエリア)

======================================================================*/

.layout.related-solution {
  text-align:center;
}

.layout.related-solution .slider:not(.swiper-container) {
  overflow:hidden;
  text-align:center;
}

.layout.related-solution .slider > div:not(.swiper-wrapper) {
  display:inline-block;
  margin:auto;
}

.layout.related-solution .slider > div > div:not(.swiper-slide) {
  float:left;
  margin:0 7px;
  width:219px;
}

.layout.related-solution .slider > div > div:not(.swiper-slide):nth-child(4n+1) {
  clear:left;
  margin-left:0;
}

.layout.related-solution .slider > div > div:not(.swiper-slide):nth-child(4n+4),
.layout.related-solution .slider > div > div:not(.swiper-slide):last-child {
  margin-right:0;
}

.layout.related-solution .slider-inner {
  max-width:none;
}

.layout.related-solution .box {
  color:#fff !important;
  display:block;
  text-decoration:none;
}

.layout.related-solution .box:hover {
  color:#fff;
}

.layout.related-solution .box .image {
  background-color:#fff;
}

.layout.related-solution .box .image img {
  width:100%;
}

.layout.related-solution .box .text {
  display:block;
  line-height:1.4;
  margin-top:10px;
  padding:0;
  padding-left:15px;
  position:relative;
}

.layout.related-solution .box .text:before {
  border-top:2px #ccc solid;
  border-right:2px #ccc solid;
  content:"";
  display:inline-block;
  height:8px;
  left:0;
  position:absolute;
  transform:rotate(45deg);
  top:6px;
  width:8px;
}