/* all sec_01 形象 */
:root{
  --visual-adjust: 0vw;
  --sec_01_title: 3.5rem;
  --sec_01-shadow-opacity: 0.5;
  --sec_01_shadow-color: rgba(0, 0, 0, var(--sec_01-shadow-opacity));
  --filter-shadow:
  drop-shadow(0 0 5px rgba(0, 0, 0, .35))
  drop-shadow(1px 1px 4px var(--sec_01_shadow-color)) 
  drop-shadow(-1px -1px 4px var(--sec_01_shadow-color));
}

.sec_01{
  width: 100%; min-height: 100vh; position:relative; z-index:1;
} 

/* .sec_01 .block_content{ border-bottom: 0;} */


#main_visual{width:100%; max-width: 100%; height:100vh; position: absolute; left: 0; right: 0; top: 0; z-index:0; overflow: hidden;}

#main_visual::before{
  content:""; width:100%; height:100%; display: block; position: absolute; left: 0; top: 0; z-index:9;
  opacity: 0;
  backdrop-filter: blur(5px);
  transition: opacity .75s;
}

#main_visual::after{
  content:""; width:100%; height:100%; display: block; position: absolute; left: 0; top: 0; z-index:9;
  background: rgb(0, 0, 0);
  opacity: .3; pointer-events: none;
  backdrop-filter: blur(10px);
}

#main_visual.scrolled::before{opacity: 1;}
#main_visual.scrolled::after{opacity: var(--header-overlay-opacity);}
 
.bg_wrapper.mobile{  
  width: 100%; height: 100vh;
  position: relative;
  overflow: hidden;
}

.bg_wrapper.mobile picture{
  width: 100%; height: 100%;
  display: block;
}

.bg_wrapper.mobile picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.main_contain{
  width:100%; position: absolute; left:0; transform: translateY(15%);/* top:50%; transform: translateY(-50%) */;
}

.sec_01 .title_name{
  width:fit-content; text-align: center; margin:0 auto; color: #fff;   
  transition-duration:1s!important;
}

.sec_01 .title_name h1{ font-weight: 800;}

.main_title{width: fit-content; font-size:var(--sec_01_title);
  line-height: calc(var(--sec_01_title) * 1.2);
  letter-spacing:calc(var(--sec_01_title) * 0.2);
  text-indent:calc(var(--sec_01_title) * 0.06);
  transform:scaleX(.95) translateX(0.2rem); 
}

 
.sec_01 span.num{ font-size: calc(var(--sec_01_title) * 1.2); left:-.5%; top:calc(var(--sec_01_title) * .07);}

.main_title, .sub_title{
  filter: var(--filter-shadow);
}

.sub_title{
  width:100%; font-size:calc(var(--sec_01_title) * .4);
  margin-top: calc(var(--sec_01_title) * .25);
  transform:scaleX(.95);
  font-weight: 400;
  letter-spacing:calc(var(--sec_01_title) * 0.4);
  text-indent:calc(var(--sec_01_title) * 0.4);
  display: flex; justify-content:stretch; align-items: center; flex-wrap: wrap;
}

.sub_title::before, .sub_title::after{
  content:""; width:auto; height: clamp(2px, .05vw, 3px); background-color:rgba(255, 255, 255, 1); flex-grow:1; flex-shrink:1;
  /* offset-x | offset-y | blur-radius | spread-radius | color */   
}

.sub_title::before{clip-path: polygon(0 0, 100% 0%, 100% 100%, 5% 100%);}

.sub_title::after{clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);}


.sub_title h3{transform: translateY(calc( -1 * var(--sec_01_title) * .05))}


#main_visual .moving_item_bg,
#main_visual .moving_item_chocobo_01,
#main_visual .moving_item_chocobo_02,
#main_visual .moving_item_chocobo_03,
#main_visual .moving_item_chocobo_04,
#main_visual .moving_item_grass{ 
  background-repeat: no-repeat; 
  -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto;
  -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s;
  position: absolute; left:0; top:0;
}

#main_visual .moving_item_bg {
  --moving_item_bg-posY: 30%;
  width: 100%; height: 100%; margin:0 0 0 0;
  background: url(../images/sec_01/bg.webp) center var(--moving_item_bg-posY) / 100% auto;
}

#main_visual .moving_item_chocobo_01 {
  --margin-top-var:calc(-1 * (-36% + (1680px - 100vw) * -.16));
  width:10.5%; min-width: 240px; /* height: 116.66%; */
  margin: calc(var(--margin-top-var) + var(--visual-adjust)) 32.93% 0% 52.06%; aspect-ratio: 240 / 280;
  margin-left: calc(-1 * (-48% + (1680px - 100vw) * .26));
  background-image: url(../images/sec_01/cha_01.png);
}

#main_visual .moving_item_chocobo_02 {
  width: 20.125%; min-width: 460px; /*  height: 49.2%; */
  margin: calc(13% + var(--visual-adjust)) 35.93% 0% 35.31%; aspect-ratio: 460 / 620;
  margin-left: calc(-1 * (-32% + (1680px - 110vw) * .26));
  background-image: url(../images/sec_01/cha_02.png);
}

#main_visual .moving_item_chocobo_03 {
  width: 27%; min-width: 630px; /* height: 66.66%; */
  margin: calc(15% + var(--visual-adjust)) 0 0% 67%; aspect-ratio: 660 / 840;
  background-image: url(../images/sec_01/cha_03.png);
}

#main_visual .moving_item_chocobo_04 {
  width:45.5%; min-width: 1040px; /* height: 80.95%; */
  margin: calc(7.75% + var(--visual-adjust)) 47.5% 0% -12.5%; aspect-ratio: 1040 / 1120;
  margin-left: calc(-1 * (22% + (1680px - 100vw) * .6));
  background-image: url(../images/sec_01/cha_04.png);
}
#main_visual .moving_item_grass {
  width: 120%; /* height: 55.55%; */
  margin: calc(26.62% + var(--visual-adjust)) 10% 0% 10%; aspect-ratio: 1920 / 700;
  /* background-image: url(../images/sec_01/grass.png); */
}

@media (max-width:1750px){
  #main_visual .moving_item_chocobo_03{ margin-left: calc(-1 * (-65% + (1680px - 100vw) * .25));}
}
@media (max-width:1450px){
  :root {
    --visual-adjust: calc(50px + (100% - 100vw));
  }
}

@media (max-width:1450px){
  #main_visual .moving_item_bg{ --moving_item_bg-posY:100%; background-size: cover;}  
}

@media (min-width:1450px){
  #main_visual{ padding-top: 30%;}
}

@media (max-width:1200px){
  .sec_01 .pc{display:none;}
  .sec_01 .mobile{display:block;}
}

@media (max-width:767px){
  :root {
      --sec_01_title:7.4vw;
  }

  .main_contain{
    height: 90vh;
    padding: 5vh 0;
    top: initial;
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .sub_title {
    font-size: calc(var(--sec_01_title) * .5);
  }
}