*{margin:0;padding:0;box-sizing: border-box;     font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;}
html{overflow-x:hidden;hidden;}
body{text-align: center;color:#fff;font-size: 16px;overflow-x:hidden;}
ul{list-style: none;}
li{list-style: none;}
img{vertical-align: baseline;max-width:100%;max-height:100%;}
a{color: #fff;text-decoration: none;display: inline-block;transition:all .2s;}
a:hover{transform: translate(2px,2px);}
#loaded {max-width: 1000px;margin: auto;position: relative;overflow:hidden;}
figure figcaption {font-size: 0.8rem;text-align: left;color:#FFF;}
.wrap{max-width: 1000px;margin: 0 auto;}

#header{width: 100%;background-color:#FFF;position:relative;}
#header img{width: 100%;height:auto;z-index:1;position:relative;}

.loader {
  width: 20px;aspect-ratio: 1;border-radius: 50%;background: #999;box-shadow: 0 0 0 0 #0004;animation: docun 1s infinite;opacity:1;transition:.5s;
  /* width: 30px;aspect-ratio: 1;border-radius: 50%;background: #b7b6b6;-webkit-mask: radial-gradient(circle closest-side at 50% 40%,#0000 94%, #000);transform-origin: 50% 40%;animation: l25 1s infinite linear; */
  position: absolute;z-index: 0;top:calc(50% - 15px);left: calc(50% - 15px);
}
/* @keyframes l25 {
  100% {transform: rotate(1turn)}
} */
@keyframes docun {
  100% {box-shadow: 0 0 0 30px #0000}
}

h3{margin-top:5rem;margin-bottom:6rem;}

nav{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;background:url(../img-hm/bg-rice.webp) no-repeat center top;background-size:100%;}
nav h1{padding-left:2rem;display:flex;align-items:center;}
nav .menu{display:flex;padding-right:2rem;}
nav .menu li:not(:first-child){border-left:2px solid #000;}

.menu-news, .menu-work, .menu-profile {color:#898989; }
.menu-news-style,
.menu-work-style,
.menu-profile-style {text-align:center;color:#898989; }
.menu-news path, .menu-work path, .menu-profile  path  {fill:#898989;transition: fill 0.3s ease-out;}
.menu-news a:hover path,.menu-work a:hover path,.menu-profile a:hover path{
  fill:#231815;}
  @media screen and (max-width: 640px) {
    nav h1{padding-left:1rem;flex-basis:40%}
    nav ul.menu{padding-right:0.5rem;flex-basis:calc(60% - 1.5rem);}
  }

/* #works{background-color:#000;} */
/* プロフィール */
#profile ul{display:flex;}
@media screen and (min-width: 641px) {
  #profile figcaption{font-size:1.2rem;}
  #profile ul{gap:2rem;margin-top:2rem;}
}
@media screen and (max-width: 640px) {
  #profile figure{margin-bottom:2rem;}
  #profile figcaption{padding:0 1rem;font-size:0.9rem;}
  #profile ul{padding:0 1rem;gap:1rem;margin-top:1rem;}
}

/* ==========白米友好========== */
body{background-color:#000;}
nav,
header,
.hakumai-wrap{max-width:1000px;margin-left:auto;margin-right:auto;}
/* background */
.hakumai-wrap{background:url(../img-hm/bg-rice.webp) repeat-y center;background-size: 100%;}

.hakumai-content:not(.aa):not(.unagyu){margin-bottom:4rem;}
@media screen and (max-width: 640px) {
  .hakumai-content:not(.aa){margin-bottom:2rem;}
}

/* Movie */
.movie-box {aspect-ratio: 16 / 9;margin-left:auto;margin-right:auto;}
.movie-box iframe {width: 100%;height: 100%;}
@media screen and (min-width: 981px) {
  .movie-box {width:70%;}
}
@media screen and (max-width: 980px) {
  .movie-box {width:90%;}
}
@media screen and (max-width: 640px) {
  .hakumai-content.intro img{width:120%;max-width:120%;transform:translateX(-10%);}
}
/* NEWS */
#news{padding:0;margin:0;width:100%;position:relative;}
#news .news-closed{position:absolute;top:50%;left:50%;transform:translateX(-50%);}
#news .news-closed img{transform:scale(1.5);}

/* 鰻／和牛 */
.unagyu-column{margin-top:3rem;margin-left:auto;margin-right:auto;}
.unagyu-column picture,
.unagyu-column picture img
{width: 100%;}
.una02,.gyu04{display:flex;}
@media screen and (min-width: 981px) {
  .unagyu-column {width:70%;
    display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(3, 1fr);grid-column-gap: 2rem;}
  .una01 { grid-area: 1 / 1 / 3 / 2;}
  .una02 { grid-area: 1 / 2 / 2 / 3;}
  .gyu03 { grid-area: 2 / 2 / 4 / 3;}
  .gyu04 { grid-area: 3 / 1 / 4 / 2;}
  .gyu04 picture{display:flex;align-items:flex-end;}
}
@media screen and (max-width: 980px) {
.unagyu-column{display:flex;flex-direction:column;gap:1rem;max-width:90%;margin-left:auto;margin-right:auto;}
.una01{order:2;}
.una02{order:1;}
.gyu03{order:4;}
.gyu04{order:3;}
  .una01 img,.gyu03 img{width:100%;}
}

/* 選択 */
.hakumai-selects{display:flex;background:url(../img-hm/unagyu-bg.webp) no-repeat bottom;background-size:100%;}
.hakumai-selects > div.hakumai-select{flex-basis:50%;}

.hakumai-select.gyu{mask-image: url('../img-hm/unagyu-gyu-mask.webp');}
.hakumai-select.una{mask-image: url('../img-hm/unagyu-una-mask.webp');}
.hakumai-select.gyu,
.hakumai-select.una{mask-repeat: no-repeat;mask-position: center;mask-size: 100%;}
.hakumai-select.gyu a:hover,
.hakumai-select.una a:hover{transform:none;animation: bounce 0.8s ease-out;}

.kanoyeah-city.top{margin:0;padding:0;transform:translateY(-0.8rem);}

@keyframes bounce {
    0% {transform: translateY(0);}
    25% {transform: translateY(-20px);animation-timing-function: ease-in;}
    50% {transform: translateY(0);}
    75% {transform: translateY(-5px);animation-timing-function: ease-out;}
    100% {transform: translateY(0);}
}

@media screen and (max-width:640px){
  .hakumai-friendly{width:120%;max-width:120%;transform:translateX(-7%);}
  .kanoyeah-city.top{margin:0;padding:0;transform:translateY(-0.5rem);}
  .hakumai-content.aa img{width:120%;max-width:120%;max-height:120%;transform:translateX(-7%);}
  .hakumai-selects{width:130%;transform:translateX(-10%);}
}
/* ========== END 白米友好 ========== */

.continue{text-align:center;font-family: "Noto Serif JP", serif;font-size: 1.25rem;color:#FFF;}

.otodoke-wrap{position:relative;padding-top:5rem;padding-bottom:5rem;}
.otodoke-wrap:after{content:"";position:absolute;display:block;top:0;left:0;width:100%;height:100%;background:url(../img-hm/kanoyeah-city.svg) no-repeat center top 20%;background-size:100%;opacity:0.2;}
.otodoke-box{position:relative;}
.otodoke-box .otodoke-box-caracter{position:relative;z-index:1;}
.choice-button{max-width:890px;margin:auto;display:flex;gap:4rem;z-index: 2;position: absolute;bottom: -13px;left: 0;right: 0;}
/* .choice-button a img{filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));transition:.3s;} */
/* .choice-button a:hover img{filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));} */
.otodoke-copy{text-align:center;color:#000;margin-top:3rem;}
.otodoke-copy span{border-bottom:2px solid #000;padding-top:0.5rem;font-family:"Noto Serif JP", serif;font-size: 1.5rem;font-weight:600;}

.modaal-gallery-item-wrap {overflow: hidden;width: 100% !important;background-color:#000;}

@media screen and (min-width: 1280px) {
  #wagyu {margin:7rem auto -4rem;}
}
#wagyu p{padding: 2rem;font-size: 1.5rem;font-weight: bold;}
#wagyu a{background-color: #fff;border-radius:.5rem;color: #666;padding: 0.5rem 2rem;margin-bottom:1.5rem;font-weight: bold;}

.gallery-list{display: flex;flex-wrap:wrap;gap:1rem;margin-bottom:4rem;}
.gallery-list.news-block{margin-bottom:0;}
.txt-gm {height: 16px;}
.gallery-list li.citysong-dl {}

.citysong-dl{position:relative;}
.citysong-dl .btn-gm-btn{position:absolute;left:0;right:0;bottom:2rem;margin:auto;display:flex;flex-direction:column;gap:1rem;}
.citysong-dl .btn-gm-btn .image-song #playbtn:hover{cursor:pointer;transform: translate(2px,2px);}
.citysong-dl .btn-gm-btn .image-song audio{opacity:0;transition: all 1s;width: 100%;height: 40px;}
.citysong-dl .btn-gm-btn .image-song audio.oncontrole{opacity:1;}

@media screen and (max-width:640px){
  .citysong-dl .btn-gm-btn{gap:0.5rem;}
}
#footer{ padding-bottom:2rem ;}
#footer #recipe,
#footer #sns,
#footer #banner,
#footer #logo{margin-bottom:4rem;}

#sns ul{width: 80vw;max-width: 200px;display:flex;flex-wrap: wrap;justify-content: space-between;margin: 1vh auto 0;}
#sns ul li{width:27%;}
#sns ul li img{width: 100%;}

#banner ul{margin:2rem 0;}
#banner ul li{text-align:center;}
#banner ul li a{display:inline-block;width:100%;}
#banner ul li a img{width:100%;height:auto;}

#logo img{width: 90vw;max-width: 460px;}
.h-move{width: 400px;}
.h-music{width: 400px;}
.h-othersworks{width:400px;}
.h-sns{width:162px;}

#banner ul{max-width: 1600px;display:flex;margin: 0 auto;gap:1rem;}

#works .wrap{padding:2rem 0;}
#works h2 img{vertical-align:top;}
.swiper {width: 100%;margin: 0 0 4rem;padding: 45px 0;}
.swiper-slide {opacity: 0.4;overflow: hidden;transition: .7s;}
.swiper-slide img {width: 100%;}
.swiper-slide.swiper-slide-active {opacity: 1;z-index: 1;transform: scale(1.4);}
.swiper-slide.slideone{opacity:1}
.otherworks{margin-top:1rem;}

#kanoyeahcity{position:relative;}
#kanoyeahcity .ab{position:relative;height:auto;left: 0;right: 0;margin: auto;}
#kanoyeahcity .ab .ab-portal-wrap{
  position:relative;background-image:url(../img-hm/btn-portal.png);background-repeat: no-repeat;background-position:center top;background-size:100%;display:flex;justify-content:space-around;flex-wrap:wrap;background-color:#000;
}
#kanoyeahcity .ab .ab-portal-wrap a{margin:0 1rem 0.5rem;width:calc(100% / 4 - 2rem);}
#kanoyeahcity .ab .ab-portal-wrap a img{border-radius:6px;}

.otodoke-link{background:url(../img-hm/otodoke-link-bg.png) no-repeat center bottom;background-size:100%;}

.swiper-button-next.slideNone,
.swiper-button-prev.slideNone{display:none;}
.public-all {
  margin-bottom: 3rem;
}

#footer #recipe a:first-of-type{margin-bottom:4rem;}


@media screen and (min-width:521px){
  main section .wrap{padding:0 1rem;}
  /* nav li:not(:first-child){border-left: solid 2px #898989;} */
    /* #banner ul{width: 90vw;} */

    .gallery-list li{ flex-basis:calc((100% - 20px) / 3);max-width:calc((100% - 20px) / 3);margin-bottom: 20px;}
    header#header nav{width:40%;}
    header#header nav li{padding:0;}
    header#header nav li a svg{width:70%;}

    #kanoyeahcity{margin-top:2rem;}
    #kanoyeahcity .ab.portal{padding-left:1rem;padding-right:1rem;}
    #kanoyeahcity .ab.ijyuu{top:72%;}
    #kanoyeahcity .ab .ab-portal-wrap{padding: 30% 0 0;}
    .otodoke-link{padding-bottom:80px;}
    .citysong-dl .btn-gm-btn{width:80%;}
    .citysong-dl .btn-gm-btn div {}
    #footer{padding-top:4rem;}
}

@media screen and (min-width: 960px) {
    main section .wrap{padding:0;}
    .wrap{margin-top: 2rem;margin-bottom: 2rem;}
    header#header nav{width:30%;}
    header#header nav li{padding: 0 1rem;}
    header#header nav li a svg{width:100%;}
    #kanoyeahcity .ab.portal{width:980px;padding-left:0;padding-right:0;margin:0;}
    #loaded-wrap{background-color:#000;}
    .exhibition-content-days span{margin-top:3rem;font-size: 2rem;}
    .txt-profile{margin-bottom: 50px;}
    #recipe{margin-bottom: 50px;}
    .txt-recipe{width: 1026px;}
    #sns{margin-bottom: 50px;}
    .gallery-list li{ flex-basis:calc(100% / 3 - 0.7rem);}
    .gallery-list.kochirakara{justify-content:space-between;}
    .gallery-list.news-block{margin-bottom:50px;}
    #banner{margin-bottom: 50px;max-width:1200px;margin-left:auto;margin-right:auto;}
    #banner ul li{flex:1;}
    /* .modaal-container{height:310px;overflow:hidden;} */
    /* .modaal-container .modaal-gallery-prev-inner{margin-right:-40px} */
    /* .modaal-container .modaal-gallery-next-inner{margin-left:-40px} */
    /* #kanoyeahcity .ab.portal{top:34%;} */
    #kanoyeahcity{margin-bottom:4rem;}
    #kanoyeahcity .ab.ijyuu{top:77%;}
    #logo{margin-bottom: 50px;}
    #footer{padding-top:0;}
    #footer #recipe{width:1000px;}
    .swiper-slide.slideone .video + img{width:70%;}
    .spObj{display:none;}
}
/* Min 960px */

@media screen and (min-width: 1280px) {
    .wrap{margin-top: 4rem;}
    .wrap.news-block{margin-bottom:0;}
    .txt-profile{margin-bottom: 50px;}
    #recipe{margin-bottom: 50px;}
    .txt-recipe{width: 1026px;}
    #sns{margin-bottom: 50px;}
    #banner{margin-bottom: 50px;}
    #logo{margin-bottom: 50px;}
}

@media screen and (max-width: 959px) {
  .exhibition-wrap{padding-left:1rem;padding-right:1rem;}
  .exhibition-gallery{width:100vw;margin:0 calc(50% - 50vw);}
  .exhibition-gallery-wrap{padding-bottom:2rem;overflow:hidden;}
  .exhibition-gallery-content{padding-bottom:0;}

  .exhibition-content-days span{margin-top:1rem;font-size: 1.5rem;padding:0.5rem;}
  .swiper-slide.slideone .video + img{width:80%;}
  .gallery-list li{flex-basis: calc(100% / 3 - 0.7rem);}
  .otodoke-wrap{padding-top:3rem;padding-bottom:3rem;width:100vw;margin:0 calc(50% - 50vw);}
  .otodoke-box{padding:0 1rem;}
  .otodoke-link{padding-bottom:100px;}
  .choice-button{padding-left:1rem;padding-right:1rem;}

  .public-all {padding-left:2rem;padding-right:2rem;}

  /* #loaded-wrap{background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 98%, rgba(255, 255, 255, 1));} */
  #loaded{padding-top:0;}
  #works h2{margin-bottom:4rem;}
  .gallery-list,
  .otherworks{padding-left:1rem;padding-right:1rem;}
  footer#footer{padding-left:1rem;padding-right:1rem;}
  .pcObj{display:none;}
}

@media screen and (max-width:520px){
  main section .wrap{padding:0 1rem;}
  nav li:not(:first-child){border-left: solid 1px #898989;}
  header#header h1{width: 100px;margin-left:10px;margin-top: -8px;}
  header#header nav{width:40%;}
  header#header nav li{padding:0;}
  header#header nav li a svg{width:70%;}

  #works .wrap{padding:0;}

  h3.movie{margin-bottom:4rem;}
  h3.graph-music{margin:4rem 1rem 5rem;}
  .swiper-slide.slideone .video + img{width:100%;}
  .swiper.alone{margin-bottom:0;padding-bottom:0;}
  .otherworks{margin-bottom: 2rem;}
  #wagyu p{padding: 2rem .5rem 1rem;font-size: 1rem;}

  #news .news-movie .news-movie-wrap iframe{max-width:100%;}
  .exhibition-content p.exhibition-copy{font-size:1rem;line-height:1.8rem;}
  .news-copy{margin: 0 calc(50% - 50vw);}
  #banner ul{flex-wrap: wrap;}
  #banner ul li{flex-basis:calc(50% - 0.5rem);}

    .citysong-dl .btn-gm-btn{width:90%;bottom: 2.5rem;;}
    .citysong-dl .btn-gm-btn div {margin: 0 0.5rem;}
    .exhibition-mainheader{margin-bottom:1rem;}
    .exhibition-profile .exhibition-profile-copy img:first-of-type{margin-bottom:1rem;}
    .exhibition-profile .exhibition-profile-photo{margin-left:0;}
    .exhibition-content p.exhibition-content-days{padding:2rem 0;}

    .exhibition-gallery-title img{width:100vw;}
    p.exhibition-gallery-title{margin-left:-1px;margin-right:-1px;}
    .choice-button{bottom:-5px;}
    .otherworks h3{margin: 0 -0.5rem 2rem;}

    #kanoyeahcity .ab.portal{padding-left:1rem;padding-right:1rem;}
    #kanoyeahcity .ab.ijyuu{top:75%;}
    #kanoyeahcity .ab .ab-portal-wrap{padding: 26% 0.2rem 0.2rem;row-gap:0.8rem;}
    #kanoyeahcity .ab .ab-portal-wrap a {margin:0.1rem 0.2rem;width:calc(100% / 2 - 1rem)}
    #footer{padding-top:2rem;}

    #footer #recipe a:first-of-type{margin-bottom:2rem;}
    .otodoke-wrap{padding-top:2rem;padding-bottom:2rem;}
    .otodoke-link .gallery-list + p{padding:1rem }
    .otodoke-copy{margin-top:2rem;}
    .otodoke-copy span{font-size:1.2rem;}

    .gallery-list li{flex-basis: calc(50% - 0.5rem);}
    .gallery-list.kochirakara{margin-left:1rem;margin-right:1rem;}
    .gallery-list li.center-cube{order:1;}
    .gallery-list li:not(.center-cube){order:2;}

    .modaal-gallery-next{right:0!important;bottom:-60px!important;}
    .modaal-gallery-prev{left:0!important;bottom:-60px!important;}
}

.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}