@charset "UTF-8";

/*
======== table of content. ===============
summary:ページ要素（PC）
====================================
*/

.forpc,
.onlypc { display: block; }
.forsp { display: none; }

.intro { position: fixed; z-index: 1998!important; width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center; background: #000; }
    
.ie11 .intro { display: block; }

.intro img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation :slideshowintro 10.5s linear infinite;
}
@keyframes slideshowintro {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
.intro img:first-child{
  animation-delay: -1.5s;
}
.intro img:nth-child(2){
  animation-delay: 2s;
}

.intro img:last-child{
  animation-delay: 5.5s;
}

.intro.addanim {
  animation: hideop .2s linear 0s;
  animation-fill-mode: forwards;
  z-index: -1!important;
}
@keyframes hideop {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display:none;
  }
}

a { text-decoration: none; 
transition: opacity .7s cubic-bezier(0.230, 1.000, 0.320, 1.000),
transform .7s cubic-bezier(0.230, 1.000, 0.320, 1.000),
background .7s cubic-bezier(0.230, 1.000, 0.320, 1.000),
color .7s cubic-bezier(0.230, 1.000, 0.320, 1.000); }

html { font-size: 62.5%; }
body { max-width: 1440px; margin: auto; font-size: 1.2rem; font-family: 'Libre Baskerville', serif; }

img { width:100%; height: auto; }

#wrapper { padding-bottom: 3.9%; overflow-x: hidden; }
.pace-running #wrapper { opacity: 0; transition: opacity .5s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
.pace-running #wrapper.addanim { opacity: 1; }

/* ヘッダー */
#omekashi_header { padding: 8.4375% 0 12.3%; }
#omekashi_header h1 { margin: 0 35.8% 3%; }
#omekashi_header h2 { margin: 0 30.46%; }

    /*アニメーション*/
    #omekashi_header h1,
    #omekashi_header h2,
    .omekashi_logo,
    .omekashi_title { opacity: 0; }
    
    #omekashi_header h1,
    .omekashi_logo { transform: translateY(10%); 
    transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000),
    transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
    
    #omekashi_header h2,
    .omekashi_title { transform: translateY(30%); 
    transition: opacity 2s cubic-bezier(0.190, 1.000, 0.220, 1.000),
    transform 2s cubic-bezier(0.190, 1.000, 0.220, 1.000); }

        /*実行後*/
        #omekashi_header h1.addanim,
        #omekashi_header h2.addanim,
        .omekashi_logo.addanim,
        .omekashi_title.addanim { transform: translateY(0); opacity: 1; }
        
        #omekashi_header h2.addanim { transition-delay: .6s; }
        
    /*アニメーション*/

/* ロゴ */
.omekashi_logo { padding: 3.9% 35.8% 2.73%; }
.omekashi_title { padding: 0 30.46% 6.25%; }

/* コンテンツ */
#content {  }

.omekashi_section { }

/* スライド */
.slide {
  position: relative;
  width: 100%;
  overflow: hidden;
}

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  50%{
    opacity: 1
  }
  70%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

.slide.addanim img {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 10s linear infinite;
}
.slide img:first-child { animation-delay: -2s; }
.slide img:nth-child(2){ animation-delay: 3s; }


.slide_1 { min-height: 21.5vw; }
.slide_2,.slide_3,.slide_6 { min-height: 59.7vw; }
.slide_4 { min-height: 40.625vw; }
.slide_5 { min-height: 53.515vw; }


/* ムービー */
.omekashi_movie_outer { margin: 0 21.01% 15.46%; border:4px solid #000; background: #000; }
.omekashi_movie { position: relative; width: 100%; padding-top: 56.24%; }
.omekashi_movie iframe,
.omekashi_movie video,
.omekashi_movie img { position: absolute; top: 0; right: 0; width: 100.1%; height: 100.1%; }

    /*アニメーション*/
    .omekashi_movie_outer { transform: translateY(10%); opacity: 0; transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
        /*実行後*/
        .omekashi_movie_outer.addanim { transform: translateY(0); opacity: 1; }
    /*アニメーション*/

/* メイン幅 */
.sec_main { margin-left: 13.75%; margin-right: 13.75%; }
/* 下の余白 */
.col_wide,
.col_narrow.col_nocredit,
.col_full { margin-bottom: 3.125vw; }

/* 1カラム */
.col_wide {  }
/* 1カラム狭 */
.col_narrow,
.sec_credit.narrow { margin-left: 17%; margin-right: 17%; }

/* 1:1 */
.sec_half_half,
.sec_main_sub,
.sec_three,
.sec_talk { display: flex; justify-content: space-between; }

.col_half { width:48.924%; }

.col_half.col_half_wide { width:60%; }

/* 左大右小 */
.sec_main_sub { }
.col_main { width:65.91%; }
.col_sub { width:32%; }
.col_sub_first { margin-bottom: 1.7vmax; }
.ie11 .col_sub_first { margin-bottom: 1.7vw; }

/* 3つ並び */
.sec_three { }
.col_three { width:32.1%; }

    /*アニメーション*/
    .col_wide, .col_narrow, .col_half, .col_full, .sec_full, .col_main, .col_sub_first, .col_sub_second, .col_three, .sec_credit.narrow { opacity: 0; }
    
    .col_wide, .col_narrow { transform: translateY(10%); 
    transition: opacity 1.5s cubic-bezier(0.190, 1.000, 0.220, 1.000),
    transform 1.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
    
    .col_half,
    .col_three { transition: opacity .5s cubic-bezier(0.390, 0.575, 0.565, 1.000),
    transform .5s cubic-bezier(0.390, 0.575, 0.565, 1.000); }
    
    .col_half:first-child,
    #chapter_2 .col_three:first-child { transform: translateX(-5%); }
    
    .col_half:nth-child(2) { transform: translateX(5%); transition-delay: .3s; } 
    
    #chapter_2 .col_three:nth-child(2) { transform: translateY(-5%); transition-delay: .3s;  }
    #chapter_2 .col_three:last-child { transform: translateX(5%); transition-delay: .6s; } 
     
    
    .col_full, .sec_full { filter: grayscale(100%); transition: opacity 1s cubic-bezier(0.390, 0.575, 0.565, 1.000),
    filter 1s cubic-bezier(0.390, 0.575, 0.565, 1.000); }
    
    .col_main,
    .sec_credit.narrow { transform: translateX(-10%); transition: opacity 1.5s cubic-bezier(0.190, 1.000, 0.220, 1.000),
    transform 1.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
    
    .col_sub_first, .col_sub_second { transition: opacity .5s cubic-bezier(0.390, 0.575, 0.565, 1.000),
    transform .5s cubic-bezier(0.390, 0.575, 0.565, 1.000); }
    .col_sub_first { transform: translateY(-10%); transition-delay: .4s; }
    
    .col_sub_second { transform: translateY(10%); }
    
    
    
        /*実行後*/
        .col_wide.addanim,
        .col_narrow.addanim,
        .col_half.addanim,
        .col_full.addanim,
        .sec_full.addanim,
        .col_main.addanim,
        .col_sub_first.addanim,
        .col_sub_second.addanim,
        .col_three.addanim,
        .sec_credit.narrow.addanim,
        #chapter_2 .col_three.addanim { opacity: 1; transform: translate(0,0); }

        .col_full.addanim,
        .sec_full.addanim { filter: grayscale(0); }
    
    
    /*アニメーション*/

/* クレジット */
.sec_credit { margin: 1.56vw 0 11.718vw; }
.look .sec_credit { margin-bottom: 7.1vw; padding-left: 1em; padding-right: 1em; text-align: center; }

.sec_credit p { display: inline-block; margin: 0 0.75em .4em 0; font-size: 1rem; line-height: 135%; letter-spacing: .05em; }
.ie11 .sec_credit p { font-weight: 700; }

.sec_credit span { white-space: nowrap; }
.sec_credit .onlypc { white-space: normal; }

.category { padding-right: .1em; }


.price::before { content: '￥'; }
.price.sample::before { display: none; }
.brand { padding-left: .5em; }
.brand::before { content: '('; }
.brand::after { content: ')'; }

.sec_credit a { position: relative; display: block; cursor: pointer; }
.sec_credit .nolink { cursor: default; }
.sec_credit a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #666;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.sec_credit a:not(.nolink):hover { opacity: .6; }
.sec_credit a:not(.nolink):hover::after {
  transform: scale(1, 1);
}

.look { margin-bottom: 3vw; }

/* talk session */
.txt_talk,
.sec_talk { font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
     "Helvetica Neue",
    Arial,
    sans-serif; }
#sec_talk_session { margin-bottom: 7.1vw; }

.sec_talk_photo { display: flex; flex-direction: column; }
.ie11 .sec_talk_photo { display: block; }

#sec_talk_session hgroup { margin-bottom: 3.5vw; text-align: center; }
#sec_talk_session h2 { margin-bottom: 1.875vw; font-size: 2rem; }
#sec_talk_session h3 { font-size: 2.6rem; }
.img_by { display: inline-block; width:40px; margin: 0 .6em 0 0.3em; }

.txt_talk_session { margin: 0 15% 3.5vw; line-height: 200%; text-align: center; }

.talk_photo { margin: 0 11.5% 3.5vw; }
.sec_talk { }
.col_talk { width:47%; }

.col_block { margin-bottom: 3em; }
.col_block p { margin-bottom: .4em; line-height: 200%; text-align: justify; }
.sec_talk h4 { margin-bottom: 1em; line-height: 200%; }
.talk_name { font-weight: 700; }

.col_block a { text-decoration: underline; }

/*アニメーション*/
#sec_talk_session hgroup, .txt_talk_session, .talk_photo, .col_talk { opacity: 0; transition: opacity .5s cubic-bezier(0.390, 0.575, 0.565, 1.000),
    transform .5s cubic-bezier(0.390, 0.575, 0.565, 1.000); }
    #sec_talk_session hgroup, .txt_talk_session, .talk_photo, .col_talk { transform: translateY(10%); }
    #sec_talk_session hgroup, .txt_talk_session, .talk_photo, .col_talk { transform: translateY(2%); }
    
    .col_talk:nth-child(2) { transition-delay: .4s; }
    /*実行後*/    
    #sec_talk_session hgroup.addanim, .txt_talk_session.addanim, .talk_photo.addanim, .col_talk.addanim { opacity: 1; transform: translateY(0); }



/*アニメーション*/


/* フッター */
#omekashi_footer { letter-spacing: .03em; text-align: center; }
.staff_credit { margin-bottom: 2.34vw; }
.staff_credit h5 { margin-bottom: 1em; font-size: 1.4rem; }

.staff_credit p,
.txt_excludes,
.txt_copyright { margin-bottom: .3em; font-size: 1rem; }

.txt_excludes { margin-bottom: 3.9vw; }

.txt_excludes,
.txt_copyright { font-weight: 700; }

.list_btn { display: flex; justify-content: space-between; align-items: center; width:5em; margin: 0 auto 2.3vw; }
.list_btn li { font-size: 2.4rem; }
.list_btn li:first-child { margin-top: .12em; font-size: 2.6rem; }
.list_btn li a i { transition: transform .7s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
.list_btn li a:hover { opacity: .7; }
.list_btn li a:hover i { transform: scale(1.08); }

@media screen and (min-width: 768px) {
}