@charset "UTF-8";
/* CSS Document */

/******************************
* Exhibition Layout
 1-1. Wrap
 1-2. Btn Pagetop
******************************/
/* 1-1. Wrap ----------*/


/*TEXT ---------------*/

.sec2 h2 {
  color: #FFFFFF;
}
.sec2 h2:after {
  content:"";
  display: block;
  margin-bottom: 1rem;
  width: 100%;
  height: 1px;
  background-image: -webkit-gradient(
	linear, left, right,
  color-stop(0, #1BC4D2),
  color-stop(0.33, #4D4398),
  color-stop(0.66, #66318E),
  color-stop(1, #CC7EB1)
  );
  background-image: -webkit-linear-gradient(right, #1BC4D2 0%, #4D4398 33%, #66318E 66%, #CC7EB1 100%);
  background-image: -moz-linear-gradient(right, #1BC4D2 0%, #4D4398 33%, #66318E 66%, #CC7EB1 100%);
  background-image: -ms-linear-gradient(right, #1BC4D2 0%, #4D4398 33%, #66318E 66%, #CC7EB1 100%);
  background-image: -o-linear-gradient(right, #1BC4D2 0%, #4D4398 33%, #66318E 66%, #CC7EB1 100%);
  background-image: linear-gradient(to right, #1BC4D2 0%, #4D4398 33%, #66318E 66%, #CC7EB1 100%);
}
.sec2 .inr_box .column_jp , .sec2 .inr_box .column_en {
  color: #FFFFFF;
  line-height: 20px;
}
.sec3 h2 {
  text-align: center;
}
.sec3 h4 {
  font-size: 1.4rem;
  font-weight: bolder;
  padding-bottom: 0.2rem
}
.sec4 h2 {
  text-align: center;
}
.sec4 .column {
  text-align: left;
}
.sec4 .column_title_jp {
  font-size: 17px;
}
.sec4 .column_title_en {
  font-size: 12px;
  font-weight: bold;
}
.sec4 aside {
  font-size: 12px
}

/*LAYOUT ---------------*/


.sec2 {
  position: relative;
  width: 100%;
  min-height: 700px;
  background-image: url(../img/main_back.jpg);
  background-size: cover;
  background-position: 65% 20%;
}
.sec2 .title {
  position: absolute;
  bottom: 20px;
}
.sec2 .box1 {
  float: right;
  height: 100%;
  min-height: 700px;
  padding: 8rem 5rem 8rem;
  max-width: 40%;
  background-color: #000000;
  filter: alpha (opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  -ms-opacity: 0.8;
  -o-opacity: 0.8;
  opacity: 0.8;
}
.sec2 .inr_box .column_jp {
  margin-bottom: 30px;
}
.sec2 .inr_box .column_en p {
  margin-bottom: 20px;
}
.sec3 {
  position: relative;
  width: 100%;
  height: auto;
}
.sec3 .inr_box {
  margin: 0 auto;
  padding: 40px 2%;
}
.sec3 h2:after {
  content:"";
  display: block;
  margin: 0 auto 1em;
  width: 130px;
  height: 1px;
  border-bottom: solid 1px #000000;
}
.sec3 .column {
  width: 1000px;
  margin: 0 auto 2rem;
  padding: 0.5rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  border-radius: 1rem;
}
.sec3 .column_jp, .sec3 .column_en {
  float: left;
  max-width: 45%;
  width: 45%;
  padding: 1rem 1rem 1rem 3rem;
}
.sec4 {
  position: relative;
  background-color: #F2F2F2;
}
.sec4:before {
  content:"";
  display: block;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -20px;
  background-color: #F2F2F2;
  width: 40px;
  height :40px;
  -webkit-transform: rotate( 45deg);
  -moz-transform: rotate( 45deg);
  -ms-transform: rotate( 45deg)
  -o-transform: rotate( 45deg);
  transform: rotate( 45deg);
}
.sec4 {
  margin: 0 auto;
  padding: 40px 0;
  width: 100%;
}
.sec4 h2:after {
  content:"";
  display: block;
  margin: 0 auto 2em;
  width: 130px;
  height: 1px;
  border-bottom: solid 1px #000000;
}
.sec4 .cols {
  margin: 0 auto;
  width: 1000px;
  height: 2400px;
  -webkit-column-width: 476px;
  -moz-column-width: 476px;
  -ms-column-width: 476px;
  -o-column-width: 476px;
  column-width: 476px;
  -webkit-colomn-gap: 10px;
  -moz-column-gap: 10px;
  -ms-column-gap: 10px;
  -o-column-gap: 10px;
  colomn-gap: 10px;
}
.sec4 .photos {
  display: inline-block;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  column-break-inside: avoid;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #FFFFFF;  
}
.sec4 .column {
  width: 476px;
}

/* 1-2. Btn Pagetop ----------*/
.btn_pagetop {
  position: relative;
  margin: 0 auto 3rem;
  width: 100%;
  max-width: 1000px;
  height: 50px;
}
.btn_pagetop a {
  position: absolute;
  top: 70%;
  right: 2%;
}

/******************************
* Media Queries
******************************/
/* 1. PC  (1025px-1280px) ----------*/
@media screen and (max-width:1280px) {
  .sec4 .photos {
    width: 476px;
  }
}

/* 2. Tablet  (769px-1024px) ----------*/
@media screen and (max-width:1024px) {
  .sec3 .column {
    width: 100%;
  }
  .sec3 .column_jp, .sec3 .column_en {
    float: left;
    max-width: 42%;
    width: 42%;
    padding: 1rem 1rem 1rem 3rem;
  }
  .sec4 img {
    width: 350px;
  }
  .sec4 .cols {
    margin: 0 auto;
    width: 750px;
    height: 2000px;
    -webkit-column-width: 350px;
    -moz-column-width: 350px;
    -ms-column-width: 350px;
    -o-column-width: 350px;
    column-width: 350px;
    -webkit-colomn-gap: 10px;
    -moz-column-gap: 10px;
    -ms-column-gap: 10px;
    -o-column-gap: 10px;
    colomn-gap: 10px;
  }
  .sec4 .photos {
    width: 350px;
    display: inline-block;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #FFFFFF;  
  }
  .sec4 .column {
    width: 350px;
}
}

/* 3. Tablet & Smart Phone (569px-768px) ----------*/
@media screen and (max-width:768px) {
  .sec2 {
    position: relative;
    width: 100%;
    min-height: 700px;
    background-image: url(../img/main_back.jpg);
    background-size: 100%;
    background-position: 0 0;
  }
  .sec2 .box1 {
    float: none;
    margin-top: 35rem;
    height: 100%;
    min-height: 100px;
    padding: 5rem 5rem 5rem;
    max-width: 100%;
    background-color: #000000;
    filter: alpha (opacity=70);
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    -ms-opacity: 0.8;
    -o-opacity: 0.8;
    opacity: 0.8;
  }
  .sec2 figure {
    display: none;
  }
  .sec3 .column {
    width: 500px;
    margin: 0 auto;
  }
  .sec3 .column_jp, .sec3 .column_en {
    float: none;
    max-width: 95%;
    width: 95%;
    padding: 1rem 1rem 1rem 1rem;
  }
  .sec3 .column_jp {
    margin-bottom: 20px;
  }
  .sec4 img {
    width: 476px;
  }
  .sec4 .cols {
    margin: 0 auto;
    width: 500px;
    height: auto;
    -webkit-column-width: 476px;
    -moz-column-width: 476px;
    -ms-column-width: 476px;
    -o-column-width: 476px;
    column-width: 476px;
    -webkit-colomn-gap: 10px;
    -moz-column-gap: 10px;
    -ms-column-gap: 10px;
    -o-column-gap: 10px;
    colomn-gap: 10px;
  }
  .sec4 .photos {
    width: 476px;
    display: inline-block;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #FFFFFF;  
  }
  .sec4 .column {
    width: 476px;
}

/* 4. Smart Phone (319px-568px) ----------*/
@media screen and (max-width:568px) {
  .sec2 {
    position: relative;
    width: 100%;
    min-height: auto;
    background-image: url(../img/main_back.jpg);
    background-size: 200%;
    background-position: left 0px bottom -110px;
  }
  .sec2 .box1 {
    float: none;
    margin-top: 25rem;
    height: 100%;
    padding: 4rem 3rem 4rem;
    max-width: 100%;
    background-color: #000000;
    filter: alpha (opacity=80);
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    -ms-opacity: 0.8;
    -o-opacity: 0.8;
    opacity: 0.8;
  }
  .sec3 .column {
    width: 100%;
    margin: 0 auto;
  }
  .sec4 img {
    width: 280px;
  }
  .sec4 .cols {
    margin: 0 auto;
    width: 300px;
    height: auto;
    -webkit-column-width: 280px;
    -moz-column-width: 280px;
    -ms-column-width: 280px;
    -o-column-width: 280px;
    column-width: 280px;
    -webkit-colomn-gap: 10px;
    -moz-column-gap: 10px;
    -ms-column-gap: 10px;
    -o-column-gap: 10px;
    colomn-gap: 10px;
  }
  .sec4 .photos {
    width: 280px;
    display: inline-block;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #FFFFFF;  
  }
  .sec4 .column {
    width: 280px;
}
}


/* 5. Smart Phone (1px-320px) ----------*/
@media screen and (max-width:320px) {
  .sec2 {
    position: relative;
    width: 100%;
    min-height: auto;
    background-image: url(../img/main_back.jpg);
    background-size: 220%;
    background-position: left -10px bottom -75px;
  }
  .sec2 .box1 {
    float: none;
    margin-top: 25rem;
    height: 100%;
    padding: 2rem;
    max-width: 100%;
    background-color: #000000;
    filter: alpha (opacity=80);
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    -ms-opacity: 0.8;
    -o-opacity: 0.8;
    opacity: 0.8;
  }
  .sec3 .column_jp, .sec3 .column_en {
    float: none;
    max-width: 95%;
    width: 95%;
    padding: 1rem 1rem 1rem 1rem;
  }
  .sec3 .column_jp {
    margin-bottom: 20px;
  }
}