@charset "UTF-8"; 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}

#tokusyu ol,#tokusyu  ul,#tokusyu a {
	list-style: none;
	text-decoration: none;
	color: inherit;
  margin: 0 0 0 0;
  padding: 0;
}


#tokusyu img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

#tokusyu html {
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
}

#tokusyu {
  width:100%;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

#tokusyu ul li {
  margin: 0;
}


/* =======================================

	CommonElrements

======================================= */


#tokusyu {
  font-family: ivyora-display, sans-serif;
  font-weight: 300;
  font-style: normal;
	font-size : 1rem;
	line-height : 1.8;
	letter-spacing : 0.1rem;
	margin: 0;
	padding: 0;
}


/*========= 動画 ===============*/

.video_sp {
  display: block;
  width: 100%;
  margin: 0 auto;
}


.video_sp2 {
  display: block;
  width: 150%;
  margin: 0 auto;
  padding-bottom: 150px;
}

.video_pc, .video_pc2 {
  display: none;
}

.mv {
  width: 100%;
  height: 100%;
}

.video_pc2 {
  padding-bottom: 100px;
}

/*========= 画像 ===============*/

.img_sp {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.img_pc {
  display: none;
}

/*========= フォント ===============*/

#tokusyu .title {
  font-family: ivyora-display, sans-serif;
  font-weight: 400;
  font-style: italic;
  margin: 0 auto;
  text-align: center;
}

#tokusyu #tokusyu_header .title {
  color: #e5d401;
  padding: 2rem 0 4rem; 
}

#tokusyu #footer_area .title {
  color: #b2b9c2;
  padding: 0 0 6rem;
}
  

#tokusyu h1{
  font-size: 40px;
  line-height: 1;
  letter-spacing: .4rem;
}

#tokusyu h1 span {
  font-size: 26px;
  letter-spacing: .1rem;
}

#tokusyu h2 {
  font-size: 22px;
  line-height: 1;
  letter-spacing: .1rem;
}


#tokusyu .itemname {
  font-family: ivyora-display, sans-serif;
  font-weight: 300;
  font-style: normal;
  text-align: right;
  margin-top: 1rem;
  font-size: .8rem;
  letter-spacing: .1rem;
  line-height: 2;
  color: #272e36;
}

#tokusyu .itemname_yoko {
  padding-right: 1rem;
}

#tokusyu .number {
  font-size: 0.8rem;
}

#tokusyu .itemname a {
  text-decoration: underline;
  transition: 0.3s;
  text-underline-offset: 2px;
  text-decoration-color: #272e36;
}

#tokusyu a:hover {
  color: #df57aa;
}


#tokusyu .sec08 .itemname {
  color: #fff;
}

#tokusyu .sec08 .itemname a {
  text-decoration: underline;
  transition: 0.3s;
  text-underline-offset: 2px;
  text-decoration-color: #fff;
}

#tokusyu .linkList {
  font-family: ivyora-display, sans-serif;
  color: #fff;
}

/*スクロールダウン全体の場所*/
  .scrolldown1{
    display: block;
      /*描画位置※位置は適宜調整してください*/
    position:absolute;
    left:6%;
    top:60%;
      /*全体の高さ*/
    height:50px;
  }

  /*Scrollテキストの描写*/
  .scrolldown1 span{
    transform: rotate(-90deg);
      /*描画位置*/
    position: absolute;
    left:-32px;
    top: 10px;
      /*テキストの形状*/
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }

  /* 線の描写 */
  .scrolldown1::after{
    content: "";
      /*描画位置*/
    position: absolute;
    top: 0;
      /*線の形状*/
    width: 1px;
    height: 60px;
    background: #fff;
      /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity:0;
  }





  /*高さ・位置・透過が変化して線が上から下に動く*/
  @keyframes pathmove{
    0%{
      height:0;
      top:0;
      opacity: 0;
    }
    30%{
      height:30px;
      opacity: 1;
    }
    100%{
      height:0;
      top:50px;
      opacity: 0;
    }
  }


/* 各セクション */

.bg_ye {
  background: #ffffd0;
}

.bg_ppu {
  background: #d4cfe9;
}

.bg_bu {
  background: #d8e1eb;
}
    
.bg_dgy {
  background: #272e36;
}


.pht_li {
  padding-bottom: 6rem;
}

.img_sp {
  padding-bottom: 10rem;
}

#tokusyu ul.sec04 {
  padding: 150px 40px;
}

.sec04 .pht_li {
  padding: 0 ;
}

#tokusyu ul.sec06 .sec06_1 {
  max-width: 80%;
  text-align:center; 
  padding: 5rem 1rem;
  margin: 0 auto;
}

.flex_L {
  padding: 2rem 2rem 5rem;
}





/* footer_area
------------------------- */
#footer_area {
    position: relative;
}

#footer_area::before {
    content: "";
    position: absolute;
    top: 0px;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    bottom: -50px;
    z-index: -1; 
}

#footer_area .pht_li {
  padding: 0;
}

#footer_area .closingPht li.img_sp {
  padding: 0 10vh 120px;
}

#footer_area .closingPht li.img_sp img {
  border: solid 14px #fff;
}









/* linkList
------------------------- */
#tokusyu .linkList {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}


#tokusyu .linkList {   
  margin: 10px auto 50px;
  font-size: 1.2rem;
  font-family: ivyora-display, sans-serif;
  color: #fff;
  line-height: 2;
}

#tokusyu .linkList a {
  text-decoration: underline;
  transition: 0.5s;
  text-underline-offset: 2px;
  text-decoration-color: #fff;
  letter-spacing: .1rem;
}




/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(20px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}
/*--じわっここまで--*/


/* アニメーション自体が変化する時間を決めるCSS*/

.delay-time02{  
	animation-delay: .2s;
}

.delay-time05{  
	animation-delay: .5s;
}

.delay-time07{  
	animation-delay: .7s;
}

.delay-time1{  
	animation-delay: 1s;
}
/*--ここまで--*/



  





/* =======================================
	768px以上PC
======================================= */
@media (min-width: 768px){

  .ttl_area .pht img {
    width: 50%;
  }
  
  .main_area {
    margin: 0 auto;
  }
  
  
  #footer_area .closingPht li.img_pc {
  padding: 0 30vh 120px;
  }

  #footer_area .closingPht li.img_pc img {
    border: solid 14px #fff;
  }
  
  
  /*========= 動画 ===============*/
  
  .video_sp, .video_sp2 {
    display: none;
  }

  .video_pc, .video_pc2 {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  
  .video_pc2 {
    padding-bottom: 14rem;
  }
  
  /*========= 画像 ===============*/

  .img_pc {
    display: block;
    width: 100%;
    margin: 0 auto;
  }

  .img_sp {
    display: none;
  }
  
  
  #tokusyu .title {
    padding: 3rem 0 10rem;
  }
  #tokusyu h1{
    font-size: min(6vw, 60pt);  
  }

  #tokusyu h1 span {
    font-size: min(3.6vw, 36pt);
  }

  #tokusyu h2 {
    font-size: min(3vw, 30pt);
  }

  

  #tokusyu ul.sec02, #tokusyu ul.sec04, #tokusyu ul.sec08 {
    display: flex;
    justify-content: space-between;
  }
  
  #tokusyu .flex_L {
    max-width: 50%;
  }
  
  #tokusyu ul.sec03,#tokusyu ul.sec05 {
    display: flex;
    flex-direction: row-reverse;
  }

  #tokusyu ul.flex_no {
    margin: 0 auto;
  }
  
  
  .pht_li {
    padding-bottom: 10rem;
  }
  .flex_L {
    padding: 5rem;
  }

  #tokusyu ul.sec02 .flex_L img, #tokusyu ul.sec05 .flex_L img {
    margin: 0 auto;
    padding: 0;
  }
  #tokusyu ul.sec01 .flex_R, #tokusyu ul.sec04 .flex_L {
    padding: 0;
  }
  
  #tokusyu ul.sec06 .sec06_1 {
    max-width: 60%;
    padding: 10rem 3rem;
  }


  .itemname {
      text-align: left;
  }
  
  .pht_li {
    padding-bottom: 14rem;
  }
  
  
  /*スクロールダウン全体の場所*/
  .scrolldown1{
    display: block;
      /*描画位置※位置は適宜調整してください*/
    position:absolute;
    left:26px;
    top:200px;
      /*全体の高さ*/
    height:50px;
  }

  /*Scrollテキストの描写*/
  .scrolldown1 span{
    transform: rotate(-90deg);
      /*描画位置*/
    position: absolute;
    left:-32px;
    top: 10px;
      /*テキストの形状*/
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }

  /* 線の描写 */
  .scrolldown1::after{
    content: "";
      /*描画位置*/
    position: absolute;
    top: 0;
      /*線の形状*/
    width: 1px;
    height: 60px;
    background: #fff;
      /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity:0;
  }
  
  

  
  
  
}