@charset "utf-8";

/*
  File Name   : content.css
  Description : コンテンツエリア関係 他
*/

#particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: -1;
  background: #000;
}

.top-kv {
  /*width: 100%;*/
  max-width: 1366px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  height: 250px;
}

.top-kv .top-text {
  position: absolute;
  padding: 20px ;
  top: 0;
  max-width: 1000px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  color: #fff;

  font-size: 1.2em;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.top-kv .top-text h1{
  font-size: 3em;
  margin: 0;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}


.top-kv2 {
  /*width: 100%;*/
  max-width: 1366px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  height: 250px;
}

.top-kv2 .top-text {
  position: absolute;
  padding: 20px ;
  top: 0;
  max-width: 1000px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  color: #fff;
}
.top-kv2en {
  /*width: 100%;*/
  max-width: 1366px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  height: 250px;
}

.top-kv2en .top-text {
  position: absolute;
  padding: 20px ;
  top: 0;
  max-width: 1000px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  color: #fff;
}

.top-kv3 {
  /*width: 100%;*/
  max-width: 1366px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  height: 250px;
}

.top-kv3 .top-text {
  position: absolute;
  padding: 20px ;
  top: 0;
  max-width: 1000px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  color: #fff;
}
.top-kv3 {
  /*width: 100%;*/
  max-width: 1366px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  height: 250px;
}

.top-kv3 .top-text {
  position: absolute;
  padding: 20px ;
  top: 0;
  max-width: 1000px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  color: #fff;
}

.top-kv2 .top-text h1{
  font-size: 3em;
  margin: 0;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.top-kv-e {
  /*width: 100%;*/
  max-width: 1366px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
}
	
	
.top-kv-e img {	
  width:100%;
  max-width: 100%;
  height: auto;
}
.top-kv-e .pc { display: block !important; }	
	

/* パソコンで見たときは"pc"のclassがついた画像が表示される
.top-kv-e .pc { display: block !important; }
.top-kv-e .sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される 
@media only screen and (max-width: 600px) {
.top-kv-e .pc { display: none !important; }
.top-kv-e .sp { display: block !important;}
}
 */

@media only screen and (max-width: 600px) {
.top-kv-e img {  display: none}
}


/*--パンくず部分----------------------*/

.top-kv .top-text .bread h1 {
    font-size: 1.0em;
}



.top-kv-slick {
  /*position: absolute;
  top: 0;
  z-index: 1;
  display: block;*/
}

.bx-wrapper {
  /*position: absolute;
  top: 0;
  z-index: 8;*/
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  background: initial;
}

.bx-controls {
  display: none;
}

.section-girid {
	max-width: 1366px;
	margin: 0 auto 10px;
	padding: 0 15px;
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.section-girid-pt1 {
	width: 49.5%;
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.section-girid-pt2 {
	width: 100%;
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.top-girid-1 {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 49.5%;
	width: 49.5%;
  background: #fff;
}

.top-girid-2 {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 49.5%;
	width: 49.5%;
}

.top-girid-2 .item{
  flex: 0 0 49%;
	width: 49%;
  background: #fff;
}

.top-girid-2 .item.title,
.top-girid-3 .item.title,
.top-girid-4 .item.title{
  display: flex;
  background-color: initial;
}

.top-girid-2 .item.title a,
.top-girid-3 .item.title a,
.top-girid-4 .item.title a{
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: rgba( 0,128,203,.7);
}


.top-girid-4 .item.title p{
	text-align: center;
}


.top-girid-2 .item.large{
  flex: 0 0 100%;
	width: 100%;
	margin-top: 10px;
}

.top-girid-3 {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 100%;
	width: 100%;
}

.top-girid-3 .item{
  flex: 0 0 24.3%;
	width: 24.3%;
  background: #fff;
}

.top-girid-4 {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 49%;
	width: 49%;
}

.top-girid-4 .item{
  flex: 0 0 100%;
	width: 100%;
  background: #fff;
}

.top-girid-5 {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 49%;
	width: 49%;
}

.top-girid-5 .item{
  flex: 0 0 100%;
	width: 100%;
	margin-bottom: 0;
  background: #fff;
}

.top-girid-5 .item:last-child{
	margin-top: 10px;
}

.top-girid-6 {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 100%;
	width: 100%;
}

.top-girid-6 .item{
  flex: 0 0 49%;
  width: 49%;
  background: #fff;
}

.top-girid-6 .item:nth-child(3),
.top-girid-6 .item:nth-child(4){
	margin-top: 10px;
}

.top-girid-1 .item img,
.top-girid-2 .item img,
.top-girid-3 .item img,
.top-girid-4 .item img,
.top-girid-5 .item img,
.top-girid-6 .item img{
	width: 100%;
	height: auto;
  transition: all .3s ease-in-out;
}

.top-girid-1 .item a:hover img,
.top-girid-2 .item a:hover img,
.top-girid-3 .item a:hover img,
.top-girid-4 .item a:hover img,
.top-girid-5 .item a:hover img,
.top-girid-6 .item a:hover img {
  transform: scale(1.10);
}

.dark {
  position: relative;
}
.dark:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0,0,0,.5);
}


.top-girid-1 .item a,
.top-girid-2 .item a,
.top-girid-3 .item a,
.top-girid-4 .item a,
.top-girid-5 .item a,
.top-girid-6 .item a{
  display: block;
  position: relative;
  overflow: hidden;
}
.text-wrap {
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
  background-color: rgba( 255, 255, 255, .9);
  padding: 15px;
  box-sizing: border-box;
  z-index: 1;
}

.text-wrap dt,
.text-wrap dd{
  word-break: break-all;
  font-size: 1.4rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.text-wrap dt{
  font-weight: bold;
}

.text-title {
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
  background-color: rgba( 255, 255, 255, .9);
  padding: 15px;
  box-sizing: border-box;
  font-weight: bold;
  z-index: 1;
}
.text-title:before {
  content: "";
  position: absolute;
  display: block;
  top: 42%;
  right: 15px;
  width: .5em;
  height: .5em;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.text-white {
  position: absolute;
  font-weight: bold;
  top: 50%; 
  left: 25%;
  transform: translateY(-50%) translateX(-25%);
  
  color: #fff;
  text-decoration: underline;
  line-height: 2;
  z-index: 1;
}

a:hover .text-white {
  text-decoration: none;
}


/* sp
------------------------------------------------------------ */
@media screen and (max-width: 649px) {
  .top-kv{
    height: 300px;
  }
  .top-kv .top-text {
    height: 300px;
    font-size: 1.2em;
  }

  .top-kv .top-text h1{
    font-size: 2.2em;
    margin-bottom: .5em;
  }

  .top-kv2{
    max-width: 80%;
    margin-top: 0;
    padding: 0;
  }
  .top-kv2 .top-text {
    font-size: 1em;
    margin: 10px 0 10px 0;
    padding: 0;
  }

  .top-kv2.top-text h2{
    font-size: 2.2em;
    margin-bottom: .5em;
  }

  .top-kv2.top-text p{
    color: #fff;
  }

  .top-kv2en{
    max-width: 80%;
    margin-top: 130px;
    padding: 0 0 50px 0;
  }
  .top-kv2en .top-text {
    font-size: 1em;
    margin: 10px 0 10px 0;
    padding: 0;
  }

  .top-kv2en.top-text h2{
    font-size: 2.2em;
    margin-bottom: .5em;
  }

  .top-kv3{
    max-width: 100%;
    margin-top: 20px;
    padding: 0;
  }


  .section-girid {
    flex-direction:column;
  }
  .top-girid-1,
  .top-girid-2,
  .section-girid-pt1 {
    flex: 0 0 100%;
    width: 100%;
  }
  .top-girid-3 .item {
    flex: 0 0 49%;
    width: 49%;
  }
  .top-girid-1 .item.large,
  .top-girid-4 .item.large{
    margin-bottom: 10px;
  }
  .top-girid-3 .item:nth-child(1),
  .top-girid-3 .item:nth-child(2),
  .top-girid-5 .item:nth-child(2){
    margin-bottom: 10px;
  }
  .section-girid-pt2 .top-girid-1 .item:nth-child(1){
    margin-bottom: 10px;
  }
  .text-white {
    width: 90%;
    text-align: center;
  }
}



/* PopUP
-----------------------------------------------*/

.pop-display {
  position: relative;
  margin: 10px auto;
  max-width: 900px;
  background: #fff;
  padding: 0;
}

.pop-display-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pop-display-wrap .pop-display-img {
  flex: 0 0 45%;
  width: 45%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.pop-display-wrap .pop-display-img img{
  width: 100%;
  height: auto;
}

.pop-display-wrap .pop-display-text {
  flex: 0 0 55%;
  width: 55%;
  padding: 20px;
  box-sizing: border-box;
}

.pop-display-wrap .pop-display-text h3{
  font-size: 1.2em;
  margin-bottom: 1em;
  line-height: 1.6;
}

.pop-display-wrap .pop-display-text .pop-display-text-wrap {
  margin-bottom: 1em;
}

.pop-display-btn a{
  display: block;
  padding: 15px;
  text-align: center;
  background: #333;
  color: #fff;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.pop-display-btn a:hover{
  opacity: .7;
}

.pop-display-btn a i{
  display: inline-block;
  width:14px;
  height: 14px;
  margin-right: .5em;
  background:url(../img/common/icon_blank.png) 0 0 no-repeat;
  background-size: 14px 14px; 
}

#inline-wrap-01 .pop-display-img {
  background-image: url(../img/top/list_07.jpg);
}

#inline-wrap-02 .pop-display-img {
  background-image: url(../img/top/list_08.jpg);
}

#inline-wrap-03 .pop-display-img {
  background-image: url(../img/top/list_09.jpg);
}

#inline-wrap-04 .pop-display-img {
  background-image: url(../img/top/list_10.jpg);
}

#inline-wrap-05 .pop-display-img {
  background-image: url(../img/top/list_11.jpg);
}

#inline-wrap-06 .pop-display-img {
  background-image: url(../img/top/list_12.jpg);
}

#inline-wrap-07 .pop-display-img {
  background-image: url(../img/top/list_13.jpg);
}

#inline-wrap-08 .pop-display-img {
  background-image: url(../img/top/list_14.jpg);
}

#inline-wrap-09 .pop-display-img {
  background-image: url(../img/top/list_15.jpg);
}

#inline-wrap-10 .pop-display-img {
  background-image: url(../img/top/list_16.jpg);
}

#inline-wrap-11 .pop-display-img {
  background-image: url(../img/top/list_17.jpg);
}

#inline-wrap-12 .pop-display-img {
  background-image: url(../img/top/list_18.jpg);
}

#inline-wrap-13 .pop-display-img {
  background-image: url(../img/top/list_19.jpg);
}

#inline-wrap-14 .pop-display-img {
  background-image: url(../img/top/list_04.png);
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 896px) {
  .pop-display-img {
    padding: 185px 0;
  }

  .pop-display {
    max-width: 80%;
    background: #fff;
  }

  .pop-display-wrap {
    flex-direction:column;
  }
  .pop-display-wrap .pop-display-img,
  .pop-display-wrap .pop-display-text {
    flex: 0 0 100%;
    width: 100%;
  }
}