@charset "UTF-8";

header {
    background: #fff;
}
main {
    padding-top: 0px;
}
.content_wrapper .block_header_6{
    padding: 0 5rem;
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    display: inline-flex!important;
    flex-direction: initial!important;
}
.content_wrapper .block_header_6:before {
    content: '';
    position: absolute;
    top: 0!important;
    left: calc(-52vw + 550px)!important;
    z-index: -1;
    background: linear-gradient(90deg, rgb(240, 168, 81) 0%, rgb(233, 85, 50) 100%);
    width: calc(100% + 2vw + (50vw - 550px))!important;
    height: 80%!important;
    transition: transform .5s cubic-bezier(0.8, 0, 0.2, 1) 0.3s;
    transform: scale(0, 1);
    transform-origin: right top;
}
.content_wrapper .block_header_6.h_active:before {
    transform-origin:left top;
    transform:scale(1, 1);
}
.content_wrapper .block_header_6 h2 {
    opacity: 0.0;
    transform: translate(0,100px);
    -webkit-transform: translate(0,100px);
    font-family: 'Josefin Sans', sans-serif!important;
    font-size: 7rem !important;
    font-weight: 300;
}
.content_wrapper .block_header_6.h_active h2 {
    opacity: 1;
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    transition-delay: 0.5s;
    transition-duration: 0.5s;
}
.inner_item_txt {
    opacity: 1;
    transform: translate(0px,0px);
    -webkit-transform: translate(0px,0px);
    transition-delay: 0.6s;
    transition-duration: 0.4s;
}
@media screen and (max-width: 1100px) {
.content_wrapper .block_header_6:before {
    left: -2vw!important;
    width: calc(100% + 2vw)!important;
}
}
@media screen and (max-width: 900px) {
.content_wrapper .block_header_6{
    padding: 0 2rem;
}
.content_wrapper .block_header_6 h2 {
    font-size: 4.5rem !important;
}
}

#map_iframe + .contents_box01 .content_wrapper {
    max-width: 100%!important;
    padding: 0!important;
}

/*背景色変更*/
#bg1 + .delay3 {
   background-color: #fff!important;
}
#bg2 + .contents_box01 {
   background-color: #fff!important;
}
#bg2 + .contents_box01 .inner_item_img {
    opacity: 0;
    pointer-events: none;
}
#bg2 + .contents_box01 .inner_item_txt p {
    font-size: 1.55rem;
    line-height: 2.4;
}
#bg3 + .delay3 {
   background-color: #fff!important;
}
#bg4 + .widget_gallery01 {
   background-color: #fff!important;
   font-family: 'Josefin Sans', sans-serif!important;
}
#bg4 + .widget_gallery01 .content_wrapper {
   opacity: 0;
   transform: translate(0,100px)!important;
   -webkit-transform: translate(0,100px)!important;
}
#bg4 + .widget_gallery01 .content_wrapper.is_active {
   opacity: 1;
   transform: translate(0,0px)!important;
   -webkit-transform: translate(0,0px)!important;
   transition-delay: 0.5s;
   transition-duration: 0.4s;
}
#bg4 + .widget_gallery01.add_design5 .inner_item .heading>p{
    opacity: 0;
    color: #fff;
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:hover ~ .heading>p{
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 1;
    padding: 0 1vw;
    opacity: 1!important;
    transition: all .4s ease-in-out;
    transition-delay: 0.8s;
    pointer-events: none;
}
#bg4 + .widget_gallery01.add_design5 .inner_item .heading>div {
    opacity: 0;
    color: #fff;
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:hover ~ .heading>div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    padding: 0 1vw;
    opacity: 1!important;
    transition: all .4s ease-in-out;
    transition-delay: 0.8s;
    pointer-events: none;
}


#bg5 + .contents_box01{
   background-color: #fff!important;
}
#bg6 + .widget_shop01{
   background-color: #fff!important;
}
#bg6 + .widget_shop01 .heading.block_header_4 .h {
   color: #000;
}
#bg7 + .widget_map{
   background-color: #fff!important;
}
#bg8 + .contents_btn01{
   background-color: #fff!important;
}


#access_dd2 a {
    pointer-events: none;
    text-decoration: none !important;
}
@media screen and (max-width: 800px) {
#access_dd2 a {
    pointer-events: auto;
}
}

@media screen and (max-width: 900px) {
#bg2 + .contents_box01 .inner_item_img {
    display: none;
}
}

/*ギャラリーパーツ調整*/
#bg4 + .widget_gallery01.add_design5 .inner_item a {
    padding-top: 60%;
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s ease-in-out;
    z-index: 1;
    background-color: rgba(0,0,0,.6);
    color: #ffffff;
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:before {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .4s ease-in-out;
    transition-delay: 0.4s;
    z-index: 1;
    color: #ffffff;
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:hover:before {
    transform: translateY(-100%);
    opacity: 1;
}
#bg4 + .widget_gallery01.add_design5 .inner_item .heading h4 + div {
    width: calc(100% - 2vw);
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    box-sizing: border-box;
    padding: 0 2rem;
    color: #ffffff;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1);
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:hover ~ .heading h4 + div {
    opacity: 1;
    z-index: 5;
}
#bg4 + .widget_gallery01.add_design5 .inner_item .heading h4:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(240, 168, 81) 0%, rgb(233, 85, 50) 100%);
    width: 100%;
    height: 30px;
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}
#bg4 + .widget_gallery01.add_design5 .inner_item a:hover ~ .heading h4:before {
  transform-origin:left top;
  transform:scale(1, 1);
}
#bg4 + .widget_gallery01 .slick-arrow {
    width: 40px;
}
#bg4 + .widget_gallery01 .slick-arrow:before {
    border-top: 2px solid var(--i_btn_color);
    border-left: 2px solid var(--i_btn_color);
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
}
@media screen and (max-width: 768px) {
#bg4 + .widget_gallery01 .slick-arrow {
    display: none;
}
}
#bg4 +  .widget_gallery01.add_design5 .inner_item {
    padding: 0px 0vw;
}
.delay1 {
    background-color: #fff!important;
}
#works_page ~ main#main .gallery_archive.add_design2 .inner_item:hover .heading.block_header_2 .h p {
    font-family: 'Josefin Sans M';
    font-family: josefin-sans, sans-serif;
    letter-spacing: 10px!important;
}
.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p {
    font-family: 'Josefin Sans', sans-serif!important;
}

/*TOPページリンクボタン調整*/
.contents_box01[class*="block_image_text_"] .inner_item_txt .contents_btn01 .content_wrapper {
    /*text-align: center;*/
}

/*WORKSページ調整*/
.heading.block_header_1, .heading.block_header_6 {
    margin-bottom: 0;
}
.contents_box01 .wrapper_item {
    padding: 30px 0 60px;
}
inner_item_txt {
    margin: 0 auto;
}



/*MVスクロール*/
.scrolldown2{
  position:absolute;
  bottom: 0px;
  right: 20px;
  padding: 10px;
}

.scrolldown2 span{
  position: absolute;
  animation-delay: 2s;
  left: 2px;
  bottom: 155px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 4px;
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
   font-family: josefin-sans, sans-serif;
   font-weight: 600;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  position: absolute;
  top: -130px;
  left: 50%;
  width: 1px;
  height: 30px;
  background:#fff;
  animation:
    circlemove 2s ease-in-out infinite,
    cirlemovehide 2s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{top: -130px;}
     100%{top: 30px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0.3}
  100%{opacity:1;}
 }

.scrolldown2:after{
  content:"";
  position: absolute;
  bottom:0;
  left: 50%;
  width: 1px;
  height: 150px;
  background: rgba(255, 255, 255, .4);
}


/*上から下にかけて丸が透過→不透明→透過する*/


.widget_gallery01 .textarea_move a span {
    transform: translateY(2px);
}


#mv_outer {
position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

#mo {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 600px) {
  .scrolldown2 {
    display: none;
  }
}

/*-------------------20230124記述--------------------*/

/*---------ギャラリー---------*/

#bg4+.widget_gallery01.add_design5 .inner_item,
#bg4+.widget_gallery01 .inner_item > a img{
	aspect-ratio: 16 / 9;
	height: auto !important;
}
#bg4+.widget_gallery01.add_design5 .inner_item .heading{
/*	position: relative;*/
}
#bg4+.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h{
	bottom: 0;
}
#bg4+.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h{
	transform: translate(-100%, 0%);
}
#bg4+.widget_gallery01.add_design5 .inner_item:hover .heading.block_header_2 .h{
	transform: translate(0%, -100%);
	transform: none;
}

/*テキスト幅の変更*/
#bg2 + section .inner_item_txt{
    flex-basis: 80%;
    max-width: 80%;
}
@media (width > 1280px){
#bg2 + section .inner_item_txt{
    min-width: 710px;
}
}

/*-----------TOPのオレンジバー上のタイトル調整-------------*/
/*
#bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h{
    transform: translate(0%, -100%)!important;
    transform: none!important;
}
#bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p {
    transform: translate(0, 0)!important;
}
*/

#bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p{
  transition-delay: 0.3s; 
}


#bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p br{
  display:none;
}

@media screen and (max-width:375px){
  #bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p{
    padding-right: 5px;
    padding-left: 5px;
  }
}

@media screen and (max-width:767px){
  #bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p{
    font-size: max(1.0rem, 2vw)!important;
    letter-spacing: 0!important;
  }
}

@media screen and (min-width:768px){
  #bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p{
    font-size: clamp(1.0rem, 1.2vw , 18px)!important;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media screen and (min-width:768px) and (max-width:850px){
  #bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p {
    letter-spacing: -0.02em!important;
  }
  .slick-slide.slick-current + div.slick-slide .heading.block_header_2 .h p {
    padding-right: 4.3vw!important;
    padding-left: 0!important;
  }
}

@media screen and (min-width:851px){
  #bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p {
    letter-spacing: 0!important;
  }

  .slick-slide.slick-current + div.slick-slide .heading.block_header_2 .h p {
    padding-right: 4.5vw!important;
    padding-left: 0!important;
  }
} 

@media screen and (min-width:1100px){
  #bg4 + div.widget_gallery01.add_design5 .inner_item .heading.block_header_2 .h p{
    padding-right: 20px;
    padding-left: 20px;
  }
}



/*-----------header遅延無し-------------*/
header .wraper,
header nav{
 opacity: inherit;
}

header .wraper.active,
header nav.active{
  animation: none;
  animation-fill-mode: none;
}