@charset "utf-8";
/* Copyright 2019 FSFIELD All Rights Reserved. */

@media screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	特集

	------------------------------------------------------------ */

	
	/* ページタイトル
	---------------------------------------------- */
	.pagettl{
		background: url("../features/img/pc/bg_pagettl01.jpg") no-repeat center;
		background-size: cover;
	}

  .features-intro p{
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: .025em;
  }

  /* 動画
	---------------------------------------------- */
  .sec-movie{
    padding: 60px 0 80px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .sec-movie .heading01{
    text-align: center;
  }
  .sec-movie .heading01::after{
    left: 50%;
    margin-left: -13px;
  }

  .list-feature01__inner{
    display: flex;
    flex-wrap: wrap;
    gap: 56px 48px;
  }
  .list-feature01__item{
    width: calc((100%/3) - 32px);
  }

  .list-feature01__item .thumbnail{
    box-shadow: 2px 4px 16px rgba(0,0,0,0.05),8px 16px 40px rgba(0,0,0,0.05);
  }
  .list-feature01__item .thumbnail__inner{
    padding-top: calc(100%/16*9);
    position: relative;
    overflow: hidden;
  }
  .list-feature01__item .thumbnail__inner .ico{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
  }
  .list-feature01__item .thumbnail__inner .ico::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,black,transparent);
    opacity: .25;
  }

  .list-feature01__item .thumbnail__inner .ico-video img{
    width: 79px;
    height: 34px;
    position: absolute;
    left: 10px;
    top: calc(100% - 44px);
  }
  .list-feature01__item .thumbnail__inner .ico-youtube img{
    width: 90px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: calc(100% - 37px);
  }

  .list-feature01__item .thumbnail img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform .3s;
    transform: scale(1.001);
  }
  .list-feature01__item a:hover .thumbnail img{
    transform: scale(1.1);
  }
  .list-feature01__item a:hover .thumbnail .ico img{
    transform: scale(1);
  }
  .list-feature01__item .title{
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 0.025em;
    color: #333;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    padding-top: 15px;
  }
  .list-feature01__item .title .arrow{
    padding-top: 5px;
    transition: transform .3s;
  }
  .list-feature01__item a:hover .title .arrow{
    transform: translate3d(10px,0,0);
  }
  .list-feature01__item .lead{
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    color: #333;
    line-height: 1.5;
    padding-top: 6px;
  }

  .wrap-video-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    justify-content: center;
    align-items: center;
    display: none;
  }
  .wrap-video-modal .overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .wrap-video-modal .close{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -4px;
    right: -46px;
  }
  .wrap-video-modal .close::before,
  .wrap-video-modal .close::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
  }
  .wrap-video-modal .close::before{
    transform: rotate(45deg);
  }
  .wrap-video-modal .close::after{
    transform: rotate(-45deg);
  }
  .video-modal{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-modal__inner{
    max-width: 820px;
    position: relative;
  }
  .video-modal video{
    width: 100%;
    position: relative;
  }

  /* NIMS公式コンテンツ
	---------------------------------------------- */
  .sec-official-contents{
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #E7E7E7;
    padding: 80px 0 120px;
  }
  .sec-official-contents .heading01{
    text-align: center;
  }
  .sec-official-contents .heading01::after{
    left: 50%;
    margin-left: -13px;
  }
}/*--@media--*/


@media screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	特集

	------------------------------------------------------------ */

	
	/* ページタイトル
	---------------------------------------------- */
	.pagettl{background: url("../features/img/sp/bg_pagettl01.jpg") no-repeat center;}

  .features-intro p{
    font-size: 1.4rem;
    padding: 0 25px;
    line-height: 2;
  }

	  /* 動画
	---------------------------------------------- */
  .sec-movie{
    padding: 40px calc(100vw/375*50) 60px;
  }
  .sec-movie .heading01{
    text-align: center;
  }
  .sec-movie .heading01::after{
    left: 50%;
    margin-left: -13px;
  }

  .list-feature01__item{
    padding-bottom: calc(100vw/375*50);
  }
  .list-feature01__item:last-of-type{
    padding-bottom: 0;
  }
  .list-feature01__item .thumbnail{
    box-shadow: 2px 4px 16px rgba(0,0,0,0.05),8px 16px 40px rgba(0,0,0,0.05);
  }
  .list-feature01__item .thumbnail__inner{
    padding-top: calc(100%/16*9);
    position: relative;
    overflow: hidden;
  }

  .list-feature01__item .thumbnail__inner .ico{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
  }
  .list-feature01__item .thumbnail__inner .ico::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,black,transparent);
    opacity: .25;
  }

  .list-feature01__item .thumbnail__inner .ico-video img{
    width: 71px;
    position: absolute;
    left: 8px;
    top: calc(100% - 42px);
  }
  .list-feature01__item .thumbnail__inner .ico-youtube img{
    width: 81px;
    position: absolute;
    left: 8px;
    top: calc(100% - 26px);
  }

  .list-feature01__item .thumbnail img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }

  .list-feature01__item .title{
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.025em;
    color: #333;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    padding-right: 5px;
    padding-top: 8px;
  }
  .list-feature01__item .title .arrow{
    padding-top: 5px;
    transition: transform .3s;
    font-size: 0;
  }
  .list-feature01__item a:hover .title .arrow{
    transform: translate3d(10px,0,0);
  }
  .list-feature01__item .lead{
    font-size: 1.4rem;
    color: #333;
    line-height: 1.5;
    text-align: justify;
    padding-top: 5px;
  }

  .wrap-video-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    justify-content: center;
    align-items: center;
    display: none;
  }
  .wrap-video-modal .overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .wrap-video-modal .close{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -44px;
    right: -4px;
  }
  .wrap-video-modal .close::before,
  .wrap-video-modal .close::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
  }
  .wrap-video-modal .close::before{
    transform: rotate(45deg);
  }
  .wrap-video-modal .close::after{
    transform: rotate(-45deg);
  }
  .video-modal{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
  }
  .video-modal__inner{
    max-width: 820px;
    position: relative;
  }
  .video-modal video{
    width: 100%;
    position: relative;
  }

  /* NIMS公式コンテンツ
	---------------------------------------------- */
  .sec-official-contents{
    border-top: 1px solid #E7E7E7;
    padding: 40px calc(100vw/375*50) 60px;
  }
  .sec-official-contents .heading01{
    text-align: center;
  }
  .sec-official-contents .heading01::after{
    left: 50%;
    margin-left: -13px;
  }

}/*--@media--*/