@charset "utf-8";

/* ---------------------------------------------------------
font-face
----------------------------------------------------------*/
@font-face {
    font-family: UniqloProBold;
    src: url(/lifewearday/common19fw/fonts/190919-UniqloProBold.woff);
}

@font-face {
    font-family: UniqloProRegular;
    src: url(/lifewearday/common19fw/fonts/190919-UniqloProRegular.woff);
}

@font-face {
    font-family: UniqloProLight;
    src: url(/lifewearday/common19fw/fonts/190919-UniqloProLight.woff);
}

/* ---------------------------------------------------------
common
----------------------------------------------------------*/
img,
iframe {
    vertical-align: bottom;
}

body {
    color: #1b1b1b;
    font-family: UniqloProLight, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', meiryo, sans-serif;
}

#main .text--center {
    text-align: center;
}

#main .text--bold {
    font-weight: bold;
}

#main .text--uni--bold {
    font-family: UniqloProBold;
}

/* ---------------------------------------------------------
layout
----------------------------------------------------------*/
#content {
    overflow: hidden;
    font-size: 18px;
}

#main {
    position: relative;
    padding: 0;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
}

#main .section {
    width: 960px;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
    max-height: 100%;
    overflow: hidden;
}

#main a {
    color: #333333;
    display: inline-block;
    text-decoration: none;
}

#main .mg-t--10 {
    margin-top: 10px !important;
}

#main .mg-t--20 {
    margin-top: 20px !important;
}

#main .mg-t--60 {
    margin-top: 60px !important;
}

#main .mg-b--20 {
    margin-bottom: 20px !important;
}

#main .mg-b--60 {
    margin-bottom: 60px !important;
}

/* clearfix */
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

/* ---------------------------------------------------------
header
----------------------------------------------------------*/
#main .global_header {
    height: 70px;
    border-bottom: 1px solid #dadada;
}

#main .globalnav {
    width: 960px;
    margin: 0 auto;
    height: 70px;
    background-color: #fff;
}

#main .globalnav img {
    padding: 10px 0;
}

/*langage_nav*/

#main .global_header_langage {
    height: 70px;
    border-bottom: 1px solid #dadada;
    background-color: #fff;
}

#main .globalnav_langage_header {
    overflow: hidden;
    width: 960px;
    text-align: center;
    margin: auto;
}

#main .globalnav_langage {
    margin: 0 auto;
    height: 70px;
    float: left;
}

#main .globalnav_langage img {
    padding: 10px 0;
}

#main #language .language_nav{
  line-height:50px;
  text-align:center;
  float: right;
}
#main #language .language_nav li{
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
}
#main #language .language_nav li a{
  color:#000;
  padding: 10px 10px 5px 10px;
}
#main #language .language_nav li a span{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
#main #language .language_nav li a span::after{
  position: absolute;
  bottom: 15px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .2s;
}
#main #language .language_nav li .language_activ span::after{
  transform: scale(1, 1);
}
#main #language .language_nav li a span:hover::after{
  transform: scale(1, 1);
}
#main #language .language_nav li a span{
  position: relative;
  display: inline-block;
}

/* ---------------------------------------------------------
#cover
----------------------------------------------------------*/
#main #cover {
    width: 960px;
    height: 480px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#main .cover_lead {
    width: 480px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#main .cover_movie {
    width: 480px;
    position: relative;
}

#main .cover_movie video {
    width: 100%;
}

#main .cover_movie .player_btn {
    position: absolute;
    right: 3%;
    bottom: 3%;
    width: 10%;
}

#main .cover_movie .player_btn a {
    display: block;
}

#main .cover_movie .player_btn a img {
    width: 100%;
}


/* -----------------
.lead
------------------*/
#main .lead {
    display: table;
    margin: 0 auto;
    padding: 0 30px;
}

#main .lead_inner {
    display: table-cell;
    margin: 0 auto;
}

#main .lead h1 {
    font-family: UniqloProBold;
    font-size: 52px;
}

#main .lead .lead_text_01 {
    margin-top: 25px;
    font-family: UniqloProRegular;
    font-size: 34px;
}

#main .lead .lead_text_02 {
    margin-top: 25px;
    font-family: UniqloProRegular;
    font-size: 19px;
    line-height: 1.5;
}

#main .lead .lead_day {
    margin-top: 30px;
    font-family: UniqloProBold;
    font-size: 38px;
    text-align: center;
}

#main .lead img.lifewear_logo {
    display: table;
    margin: 25px auto 0 auto;
    width: 100%;
    max-width: 70px;
}

/* ---------------------------------------------------------
#sentence
----------------------------------------------------------*/
#main #sentence {
    margin-top: 60px;
    line-height: 1.5;
}

#main #sentence .sentence--half {
    margin-top: 20px;
}

#main #sentence .sentence_text_01 {
    padding: 0 30px;
    font-family: UniqloProRegular;
    font-size: 16px;
}

#main #sentence .sentence_text_01 span{
    margin-top: 10px;
}

#main #sentence .sentence_text_02 {
    margin-top: 10px;
    padding: 0 30px;
    font-size: 14px;
}

#main #sentence .sentence_text_03 {
    padding: 5px 30px 0;
    font-family: UniqloProLight;
    font-size: 11px;
    color: #7d7d7d;
}

#main #sentence .sentence_text_04 {
    padding: 0 30px;
    font-family: UniqloProRegular;
    font-size: 20px;
}

/* ---------------------------------------------------------
#map
----------------------------------------------------------*/
#main #map {
    margin-top: 80px;
}

#main #map h2 {
    margin-bottom: 20px;
    font-family: UniqloProRegular;
    font-size: 26px;
    text-align: center;
}

#main #map .iframe_wrapper {
    text-align: center;
}

#main #map .iframe_wrapper iframe {
    width: 635px;
    height: 330px;
}

/* ---------------------------------------------------------
#relatedSection
----------------------------------------------------------*/
#main > #relatedSection {
    margin-top: 100px;
}

#main > #relatedSection .line {
    width: 300px;
    float: left;
    margin-right: 30px;
    margin-bottom: 52px;
    overflow: hidden;
}

#main > #relatedSection .list {
    overflow: hidden;
}

#main > #relatedSection .list div:nth-child(3n) {
    margin-right: 0px;
}

#main > #relatedSection h3 {
    font-size: 26px;
    line-height: 36.4px;
    border-top: solid 1px #dadada;
    border-bottom: solid 1px #dadada;
    padding: 10px 0;
    margin-bottom: 28px;
    font-weight: bold;
}

#main > #relatedSection .title {
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    margin-bottom: 18px;
}

#main > #relatedSection .description {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 18px;
}

#main > #relatedSection .textlink {
    font-size: 13px;
    font-family: UniqloProRegular;
    line-height: 16px;
    float: right;
    text-decoration: underline;
}

#main > #relatedSection a {
    text-decoration: none;
    color: #1b1b1b;
    display: block;
}

#main > #relatedSection .line a:hover {
    opacity: 0.7;
}

/* ---------------------------------------------------------
footer
----------------------------------------------------------*/
#main .footer {
    margin: 40px auto 20px;
    text-align: center;
    width: 960px;
}

#main .footer > a > img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

#main .footer > a > p {
    font-size: 16px;
    color: #cccccc;
    text-decoration: underline;
}

/* color of underline */
#main .footer > a > p > span {
    color: #333333;
}

#main .footer > p {
    font-size: 12px;
    margin-top: 40px;
    text-align: center;
}

/* ---------------------------------------------------------
back-top
----------------------------------------------------------*/
#main .pagetop {
    position: fixed;
    right: 30px;
    bottom: 30px;
}

#main .pagetop img {
    width: 48px;
    height: 48px;
}

#main .exhibition-container {
    width: 530px;
    margin: 60px auto 0;
}

/* ---------------------------------------------------------
back-top
----------------------------------------------------------*/

#main .galleryarea{
    overflow: hidden;
    padding: 0 30px;
    margin-top: 60px;
}

#main .galleryarea .line{
    height: 306px;
}

#main .galleryarea .col3{
    float: left;
    width: 280px;
    margin-right: 30px;
    margin-bottom: 28px;
    position: relative;
}

#main .galleryarea .col3:last-child{
    margin-right: 0 !important;
}

#main .galleryarea .col3 p{
    position: absolute;
    width: 85%;
    left: 0%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    text-align: center; 
    margin:0;
    padding:0;
    font-size: 22px;
    line-height: 1.5em;
    letter-spacing: 0.07em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0px 0px 6px #000;
}

#main .galleryarea .col3 img{
    width: 100%;
}





#main .dl01 {}

#main .dl01--exhibition {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 25px;
    font-weight: bold;

}


#main .dl01__dt::after {
    content: ":";
    display: inline-block;
    padding-left: 5px;
}

#main .dl01--exhibition .dl01__dt {
    width: 90px;
    float: left;
    clear: both;
}

#main .dl01--exhibition .dl01__dd {
    padding-left: 90px;
}

#main .heading {
    font-family: UniqloProRegular;
    font-weight: normal;
}

#main .heading--1 {
    font-size: 26px;
}

#main .heading--center-pc {
}

#main .pc-hidden {
    display: none !important
}

#main .sp-hidden {
    display: block !important
}


/*visiter-comments*/

#main .visiter-comments{
    overflow: hidden;
    padding: 0 30px;
    margin-top: 60px;
}

#main .visiter-comments h2.heading{
  letter-spacing: 0.05em;
}

#main .visiter-comments .col2{
    float: left;
    width: 435px;
    margin-right: 30px;
    margin-bottom: 28px;
    position: relative;
}

#main .visiter-comments .col2:nth-of-type(2n){
    margin-right: 0 !important;
}


#main .visiter-comments .col2 img{
    width: 100%;
}

#main .visiter-comments .col3{
    float: left;
    width: 280px;
    margin-right: 30px;
    margin-bottom: 28px;
    position: relative;
}

#main .visiter-comments .col3:last-child{
    margin-right: 0 !important;
}


#main .visiter-comments .col3 img{
    width: 100%;
}

#main .visiter{
    margin-top: 60px !important;
}

#main .visiter h2{
    padding: 0 30px;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

#main .visiter p{
    padding: 20px;
    font-size: 24px;
    text-align: center;
    background: #dadada;
    margin: 0 30px;
}