.index_logo {
    position:absolute;
    top:0;
    width:100%;
    height:100dvh;
}
.index_logo img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:55%;
    max-width:360px;
    height:auto;
}

/* **************************************************

  		　　　　　　 オープニング

************************************************** */


/* 白背景に青い「岩」のロゴが点滅 */
.loader {
    position:fixed;
    width:100%;
    height:100dvh;
    background-color:#fff;
    z-index:999;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
/* 点滅 */
.blink {
	animation: blinking 0.8s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime {
  0% {
    opacity: 0;
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 1;
  }
}
/* ペイントで塗るアニメーション */
.paint {
    position:absolute;
    background:url('../img/index/paint.png') no-repeat;
    background-size:100%;
    width:240vh;
    height:240vh;
    transform: rotate(45deg) translateX(0%) translateY(100%);  
}
.paint_on {
    animation-name:fadeInAnime2;
    animation-duration:1s;
    animation-fill-mode:forwards;
}

@keyframes fadeInAnime2 {
    0% {
        transform: rotate(45deg) translateX(0%) translateY(100%);  
    }
    100% {
        opacity: 1;
        transform: rotate(45deg) translateX(0%) translateY(0%);
  }
}

/* **************************************************

  		　　　　　　  Movie

************************************************** */
.sp-video {
    display: block;
}
.pc-video {
    display: block;
}

section#movie {
    min-height:100vh;

}

/* ラッパー（外側の要素） */
.video-wrapper {
    top:0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
    position:fixed;
    z-index:-1;
    height:100dvh;  
}
 
/* ドットフィルター */
.video-wrapper::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100dvh;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
    z-index:10;

}
 
/* video 要素 */
.video-wrapper video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    min-height: 100%;
    min-width: 100%;
}
 
.video-content {
    position:absolute;
    z-index:20;
	width:100%;
    height:calc(100dvh - (var(--header-height)));
	display:flex;
    justify-content:center;
    align-items:center;
    margin-top:var(--header-height);
    text-align:center;

}
#h1_mb {
    display:none;
}

/* 技術の左官で、宮崎を築く */
.video-content h1 {
    position:relative;
    width:100%;
    height:100%;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    border:3px solid red;
}
.video-content h1 img {
    /* filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 1)); */
    width:80%;
    max-width:640px;
    height:auto;
    opacity:1; 
}

/* 有限会社 岩佐工業 */
.video-content span {
    position:absolute;
    top:64%;
    z-index:30;
    color:#fff;
    letter-spacing:1rem;
}

/* 動画上のテキストをフェードインで表示 */
#h1_pc h1 img ,
#h1_pc span {
    /* opacity:0; */
}
.video_on_txt_pc1 {
    animation:fadeInAnime3 2.5s ease-out forwards;
    animation-delay:2s;
}
.video_on_txt_pc2 {
    animation:fadeInAnime3 2.5s ease-out forwards;
    animation-delay:3s;
}
@keyframes fadeInAnime3{
  0% {
    opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* **************************************************

  		　　　　　　    ABOUT

************************************************** */
section#about {
    /* background-image:url('../img/index/about_bg.jpg');
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: darken; */
    padding:5rem 0 3rem;
}
.about_bg_jpg {
    background:url('../img/index/about_img.jpg') right top no-repeat;
    background-size:77% auto;
}
.about_bg_clearbox {
    width:100%;
    margin:0 0 0 0;
    padding-top:calc(1092/1686*77%);
    position:relative;
    opacity:0;
}
.about_bg_clearbox h2 {
    position:absolute;
    top:-19vw;
    left:10vw;
    margin:calc(1092/1686*77%)  0 0;
    padding:0;
}
.about_bg_clearbox h2::before {
    content:"";
    display:block;
    width:100%;
    height:70%;
    color:#fff;
    background:
    position:absolute;
    bottom:0;
    padding:0 0.5rem;
}
.about_bg_clearbox h2 img {
    width:64vw;
    height:auto;
    display:block;
    z-index:10;
    position:relative;
}
.about_bg_clearbox_text {
    width:90%;
    margin:14vw auto 0;
    padding:0rem 0 0rem;
}
.about_bg_clearbox p {
    line-height:1.6em;
    font-size:1rem;
    color:#fff;
    margin-bottom:1rem;
    text-align:left;
}
.about_bg_clearbox p:last-child {
    margin-bottom:0;
}

/* -----------------------------------------------------
　　　　　　　　　縦書きテキスト（ABOUT）
----------------------------------------------------- */
.vertical_text {
    position:absolute;
    left:0;
    top:0;
}
.vertical_border {
    position:relative;
    width:9vw;
    height:auto;
}
.vertical_border::after {
    border-left:1px solid #fff;
    width:1rem;
    height:6rem;
    display:block;
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    margin:auto;
}
.vertical_text h2 {
    color:#fff;
    writing-mode:vertical-rl;
    text-orientation:sideways;
    font-size:6vw;
    line-height:1em;
    font-weight:bold;
}

/* ABOUTのライン位置調整 */
section#about .vertical_border {
    padding-top:7.5rem;
    margin-top:-7rem;
}
section#about .vertical_text {
    left:0;
    right:auto;
}

/* STUDIOのライン位置調整 */
section#studio .vertical_border {
    padding-top:7.5rem;
    margin-top:-2.0rem;
}
section#studio .vertical_text {
    left:auto;
    right:0rem;
}



/* **************************************************
              
                　      TV

************************************************** */
section#tv {
    /*background-color:#373030;
    position:relative;
    border-top:1px solid #433E3E;
    border-bottom:1px solid #433E3E; */

}
.tv_inner {
    width:100%;
    max-width:840px;
    position:relative;
    margin:auto;
    padding:1.5rem 0;
}
section#tv .inner {
    text-align:center;

}
.tv_inner h2 {

}

/* 下向き吹き出し */
.tv_inner h2 {
    position:relative;
    display:block;
    background:#EFEFEF;
    font-size:1rem;
    margin-bottom:2rem;
    font-size:0.8rem;
    padding:0.5rem 0;
}
.tv_inner h2:before {
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:calc(0.5rem * -1);
	border:0.5rem solid transparent;
	border-top:0.5rem solid #EFEFEF;
}

.custom_youtube {
    position:relative;
    margin:0rem 0;
}
.custom_youtube iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    aspect-ratio: 670 / 377;
    margin:0 auto;
}
#youtube_id01 img {
    aspect-ratio: 670 / 377;
}
a#youtube_id01:hover img {
    opacity:1;
}

/* **************************************************
              
                　    CLASS

************************************************** */
section#class {
    background:#000;
    padding:2rem 0 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
section#class ul {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    width:100%;
    margin:3rem auto 0;
    overflow:hidden;
}
section#class ul li {
    flex-basis:100%;
    position:relative;
    margin-bottom:3rem;
}
section#class ul li:nth-child(1) {
    background:#548ECD;
}
section#class ul li:nth-child(2) {
      background:#246047;
}
section#class ul li:nth-child(3) {
    background:#ff0020;

}
section#class ul li:nth-child(4) {
    background:#c6c201;
}
section#class ul li img {
    width:100%;
    height:auto;
    aspect-ratio: 550 / 255;
    object-fit:cover;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 4rem), calc(100% - 6rem) 100%, 0 100%);
}
section#class ul li img:hover {

}
section#class ul li:last-child {
    margin-bottom:0;
}
section#class ul li span {
    position:absolute;
    color:#fff;
    font-weight:bold;
    bottom:0%;
    right:0%;
    transform:translate(0%, 0%);
    /* background:#000; */
    font-size:1.2rem;
    padding:0 1rem 0 0;
    height:2em;
    line-height:2em;
    letter-spacing:0.2rem;
}

/* アニメーション用 */
#class_hiphop ,
#class_kpop ,
#class_jazz ,
#class_pop {
    opacity:0;
}

/* VEW ALL */
div.view_all {
    text-align:center;
    margin-top:3rem;
}
div.view_all a {
    border:1px solid #7D7D7D;
    border-radius:2rem;
    color:#7D7D7D;
    padding:0.5rem 0rem 0.5rem 1.5rem;
    font-size:0.8rem;
    font-weight:bold;
    margin:0 auto;
    width:10rem;
    display:inline-block;
    position:relative;
    text-align:left;
}
div.view_all a::after {
    content:">";
    position:absolute;
    right:1rem;
}
div.view_all a:hover {
    background:#C1151B;
    color:#fff;
    border:1px solid #C1151B;
    text-decoration:none;
}

/* **************************************************
              
                　   INSTRUCTOR

************************************************** */
section#instructor {
    background:#000;
    padding:5rem 0 5rem;
}

/* -----------------------------------------------------
　　　　　　　　　スライドショー
----------------------------------------------------- */
.slideshow {
    overflow-x:hidden;
    display:flex;
    align-items:center;
    height:100%;
    margin:3rem 0 0;
}

/* content4つをまとめたスライドブロック */
.slideshow ul {
  display: flex;
  animation: loop-slide 12s infinite linear 1s both;
  position:relative;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* フォトギャラリー */
.slideshow ul li {
    width:16rem;
    height:auto;
    margin-right:0rem;
    position:relative;
}
.slideshow ul li span {
    content:'';
    position:absolute;
    bottom:0.2rem;
    right:0.7rem;
    color:#fff;
    filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}

/* **************************************************

  		　　 STUDIO

************************************************** */
section#studio {
    background:url('../img/index/studio_bg2.png') #000;
    background-size:cover;
    padding:0rem 0 3rem;
}
section#studio img {
    width:73%;
    margin:5rem 0 2rem;
}
section#studio p {
    width:100%;
    line-height:1.8em;
    font-size:1rem;
    color:#fff;
    margin-bottom:1rem;
}

/* **************************************************
              
                　    PLACE

************************************************** */
section#place {
    background:#fff;
    padding:4rem 0 0rem;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}
section#place .inner ,
section#place .outer {
    /* width:100%; */
}
.place_bg {
    margin-top:5rem;
}

section#place ul {
    margin-top:3rem;
    padding-top:0rem;
}
section#place ul li {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    width:100%;
    margin:0 auto;
    padding-bottom:3rem;
    border-bottom:1px solid #eee;
}
section#place ul li:last-child {
    padding-bottom:5rem;
    border:none;
}

/* アニメーション用 */
section#place ul li#place_miyazaki ,
section#place ul li#place_shintomi ,
section#place ul li#place_nobeoka {
    opacity:0;
}


.place_list_left {
    flex-basis:100%;
}
.place_list_right {
    flex-basis:90%;
    text-align:center;
    margin:0 auto;
}

.place_list_right_inner {
    width:100%;
    margin:1.5rem auto 0;
    display:flex;
    flex-direction:column;
    /* justify-content:space-between; */
    height:100%;
    line-height:1.8em;
    font-size:1.4rem;
}

/* 下向き吹き出し */
.place_list b {
    position:relative;
    display:block;
    background:#EFEFEF;
    font-size:1rem;
    margin-bottom:2rem;
    font-weight:bold;
}
.place_list b:before {
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:calc(0.5rem * -1);
	border:0.5rem solid transparent;
	border-top:0.5rem solid #EFEFEF;
}

span.place_address {
    font-size:1rem;
    line-height:1.6rem;
    display:block;
    margin-bottom:1rem;
}
.place_tel {
}
.place_tel div {
    display:inline-flex;
    font-size:1rem;
    line-height:1.6em;
}
.place_tel dt {
    width:4rem;
}
.place_tel dt::after {
    content:"：";

}
.place_tel dd {
    text-align:left;
}
.place_tel dd span {
    display:block;
    font-size:0.8rem;
    line-height:1.4em;
}
.place_detail {
    border:1px solid #000;
    border-radius:2rem;
    font-size:0.9rem;
    line-height:2.6em;
    margin:2rem auto 0;
    padding:0 2rem;
}

/* **************************************************
              
                　    ENTRY

************************************************** */
section#entry {
    background:#fff;
    padding:0rem 0 0rem;
    text-align:center;
    border-top:1px solid #fff;
}
section#entry .outer ,
section#entry .inner {
    width:100%;
}
section#entry a.entry_banner {
    width:100%;
    height:100%;
    display:block;
    background:#9F070D;
    padding:2.5rem 0 2rem;
}

section#entry img {
    width:90%;
    margin:0 auto;
}



/* **************************************************
              
                　    NEWS

************************************************** */
section#news {
    background:#000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:3rem 0 4rem;
}

.news_bg {
    margin:3rem auto 0;
}

/* 記事一覧 */
.wp-block-latest-posts {
    margin:0 auto;
    padding:0;
    width:100%;
    max-width:640px;
}
.wp-block-latest-posts > li {
    border-bottom:1px solid #000;
    display:grid;
    grid-template-columns: 50% 50%; /* 横 縦 */
    background:#3E3E3E;
}
.wp-block-latest-posts > li:last-child  {
    border-bottom:1px solid #000;
}
.wp-block-latest-posts > li > div {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width:100%;
    padding:2rem 2rem 2rem 2rem;
}
.wp-block-latest-posts > li > div a {
    display:block;
    width:100%;
}
.wp-block-latest-posts > li > div a img {
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    margin-left:auto;
}
.wp-block-latest-posts > li time {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self:start;
    align-self:end;
    display:block;
    color:#fff;
    text-align:left;
    font-size:0.8rem;
    line-height:1em;
    margin:0 1rem 0.5rem 0;
}
.wp-block-latest-posts > li a {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self:start;
    align-self:start;
    display:block;
    color:#fff;
    font-size:1.1rem;
    line-height:1.2em;
    font-weight:bold;
    text-align:left;
    margin:0 1rem 0 0;
}