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

    Toppage
    2026.4.15-

===========================================================*/
:root {
  --mainv-width:680px;
}

body.scrolltop #header nav#gnavi {
  background: linear-gradient(rgb(230, 200, 210) 10%, rgba(230, 200, 210, 0) 95%);
}

#container {
  padding-top: 0;
  overflow-x: hidden;
  overflow-y: visible;
}
#container .section + .section {
  margin-top: 50px;
}

/* ------------------------- 
#mainv
------------------------- */
/*
#mainvbg {
  position:absolute;
  top:0; left:0;
  width:100%;
  //max-height:1050px;
  height:60vw;
  //height:calc(60vw + 300px);
  background:url(/images/mainv2026/top_bg.png) center top repeat-x;
  background-size:contain;
}
*/
#mainv {
  position: relative;
  text-align: center;
  margin: 0 auto;
  background: url(/images/mainv2026/mainv_bg.webp) center top no-repeat;
  background-size: min(1401px, 206.0294117647vw) auto;
  width: min(100vw, 1401px);
  height: min(140vw, 1010px);
}
@media screen and (max-width: 759px) {
  #mainv {
    margin-top: -8vw;
  }
}

body .hero, body .section {
  opacity: 0;
  transition: ease-out 0.2s opacity;
}
body.show .hero, body.show .section {
  opacity: 1;
}

.flowitem {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  opacity: 0;
  width: initial;
  height: auto;
}
.flowitem span {
  opacity: 0;
}

.heroMain {
  opacity: 0;
  width: min(100vw, var(--mainv-width));
  height: min(120vw, 800px);
}

.heroTxt {
  opacity: 0;
}

.show .heroMain {
  animation: fadeIn 2s ease 0s forwards;
}
.show .flowitem {
  animation: fadeIn 2s ease-out 0s forwards;
}
.show .heroBubble {
  animation: fadeIn 1.5s ease-in 0.1s forwards;
}
.show .heroAwatan {
  animation: fadeInAwatan 1.4s cubic-bezier(0.5, 0.3, 0, 1) 0.2s forwards;
}
.show .heroItem1 {
  animation-delay: 1.4s;
}
.show .heroItem2 {
  animation-delay: 1.8s;
}
.show .heroItem3 {
  animation-delay: 2.2s;
}
.show .heroItem4 {
  animation-delay: 2.6s;
}
.show .heroItem5 {
  animation-delay: 3s;
}
.show .heroMain h1 {
  animation: fadeIn 1s ease-out 3.5s forwards;
}
.show .heroTxt {
  animation: fadeIn 0.5s ease-out 3.8s forwards;
}
.show .heroMain.start .flowitem {
  opacity: 1;
}
.show .heroMain.start .heroBubble {
  animation: fwfw3 9s linear 0s infinite;
}
.show .heroMain.start .heroAwatan {
  animation: awatan 8s linear 0s infinite;
}
.show .heroMain.start .heroItem1 {
  animation: awatan 9s linear 0s infinite;
}
.show .heroMain.start .heroItem2 {
  animation: awatan 7s linear 3s infinite;
}
.show .heroMain.start .heroItem3 {
  animation: awatan 9s linear 1s infinite;
}
.show .heroMain.start .heroItem4 {
  animation: awatan 7s linear 4s infinite;
}
.show .heroMain.start .heroItem5 {
  animation: awatan 9s linear 2s infinite;
}

@keyframes fadeInAwatan {
  0% {
    opacity: 0;
    transform: translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fadeInDolphin {
  0% {
    opacity: 0;
    transform: translate(20px, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.hero {
  position: relative;
  width: 100%;
  height: 74%;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hero .heroMain {
  position: relative;
  margin: 0 auto;
}
.hero .heroMain h1 {
  position: absolute;
  top: 74%;
  /*width:38%; top:58%; left:0; right:0; margin: auto; */
}
.hero .heroMain h1 img {
  width: initial;
  max-width: 70vw;
}

.heroAwatan {
  max-width: 42.6470588235vw;
  bottom: 10%;
  left: 2%;
}

.heroItem1 {
  max-width: 13.0882352941vw;
  bottom: 53%;
  right: 3%;
}

.heroItem2 {
  max-width: 21.7647058824vw;
  bottom: 23%;
  left: 47%;
}

.heroItem3 {
  max-width: 28.8235294118vw;
  top: 34%;
  left: 1%;
}

.heroItem4 {
  max-width: 20.7352941176vw;
  top: 10%;
  right: 53%;
}

.heroItem5 {
  max-width: 25vw;
  bottom: 35%;
  right: 43%;
}

.heroBubble {
  max-width: 99.1176470588vw;
  bottom: 1%;
  right: 1%;
}

.heroTxt {
  margin: 0 auto;
  margin-top: 135px;
}
@media screen and (max-width: 759px) {
  .heroTxt {
    margin-top: 32vw;
  }
}
.heroTxt p.p {
  line-height: 2.1;
  text-shadow: 0 0 5px white;
}
@media screen and (max-width: 679px) {
  .heroTxt p.p {
    line-height: 1.8;
    font-size: 0.9em;
  }
}
.heroTxt p.p em {
  font-size: 1.2em;
  font-style: normal;
}

/* ------------------------- 

#section_diary
------------------------- */
@media screen and (min-width: 760px) {
  #section_diary {
    margin-top: 120px;
    padding-top: 0;
  }
}
@media screen and (max-width: 759px) {
  #section_diary {
    margin-top: min(140px, 40vw);
  }
}
#section_diary .slideSingle {
  width: 580px;
}
#section_diary .slideSingle a.diary {
  display: block;
}
#section_diary .slideSingle a.diary .diaryImg {
  max-width: 400px;
}
#section_diary .slideSingle a.diary p {
  font-size: 1.6rem;
  line-height: 1.8;
}
#section_diary .slideSingle a.diary .diaryDate {
  font-size: 1.6rem;
}
#section_diary .slideSingle a.diary .diaryBody {
  margin-top: 20px;
}
#section_diary .slideSingle a.diary .diaryFooter {
  margin-top: 20px;
}
#section_diary .slideSingle .btn_prevdiary {
  position: absolute;
  top: 230px;
  right: -130px;
}
#section_diary .slideSingle .btn_prevdiary img {
  width: 95px;
  height: auto;
  transition: transform 0.2s;
}
@media screen and (max-width: 679px) {
  #section_diary .slideSingle .btn_prevdiary {
    top: 200px;
    right: -45px;
  }
  #section_diary .slideSingle .btn_prevdiary img {
    width: 80px;
  }
}
#section_diary .slideSingle .btn_prevdiary:hover img {
  transform: translateX(2px);
}

/* ------------------------- 

#section_news
------------------------- */
.slideCols {
  max-width: 85vw;
}
@media screen and (max-width: 679px) {
  .slideCols .slick-slide {
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slideCols .slick-slide.slick-current {
    opacity: 1;
  }
  .slideCols .slick-prev {
    left: -5px;
  }
  .slideCols .slick-next {
    right: -5px;
  }
}

/* ------------------------- 

#section_channel
------------------------- */
#section_channel .sectionHead .bgimg.bgimg2 {
  right: 2%;
  max-width: 22%;
}
#section_channel .sectionHead p.p {
  max-width: 55vw;
}

/* ------------------------- 

#section_cafe
------------------------- */
#section_cafe .bgimg {
  position: absolute;
  bottom: 100px;
  right: -100px;
  right: -15%;
  width: 160px;
  max-width: 25vw;
  animation: fwfw3 9s linear 0s infinite;
}

/* ------------------------- 

#section_greeting
------------------------- */
#section_greeting {
  width: 800px;
}
#section_greeting .sectionHead .img {
  margin-top: 10px;
  display: inline-block;
}
#section_greeting .sectionHead .img img {
  display: block;
  width: initial;
  animation: fwfw2 9s linear 0s infinite;
}
#section_greeting .sectionBody .box {
  padding: 40px 60px 20px;
  margin-top: 0px;
}
@media screen and (max-width: 679px) {
  #section_greeting .sectionBody .box {
    padding: 40px 20px 20px;
  }
}

/* ------------------------- 

#section_goods
------------------------- */
#section_goods .slideSingleCircle {
  max-width: 70vw;
}
#section_goods .slideSingleCircle .e a .img {
  max-width: 70vw;
  max-height: 70vw;
}
@media only screen and (max-width: 679px) {
  #section_goods .slick-prev {
    width: 40px;
    height: 40px;
    left: -35px;
  }
  #section_goods .slick-next {
    width: 40px;
    height: 40px;
    right: -35px;
  }
}

/* ------------------------- 

#section_profile
------------------------- */
#section_profile .sectionHead {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 680px) {
  #section_profile .sectionHead {
    width: 650px;
    max-width: 90vw;
  }
}
#section_profile .sectionHead p.p {
  text-align: left;
  display: inline-block;
}
@media screen and (min-width: 680px) {
  #section_profile .sectionHead p.p {
    margin-top: 50px;
    padding-right: 30%;
  }
}
#section_profile .sectionHead .bgimg.bgimg2 {
  max-width: 40%;
  width: 190px;
  animation: fwfw3 9s linear 0s infinite;
}
@media screen and (min-width: 680px) {
  #section_profile .sectionHead .bgimg.bgimg2 {
    bottom: 0px;
    right: 0;
  }
}
@media screen and (max-width: 679px) {
  #section_profile .sectionHead .bgimg.bgimg2 {
    position: relative;
    display: block;
    margin: -20px auto 60px;
  }
}

/* ------------------------- 

#section_goto
------------------------- */
#section_goto {
  width: 800px;
  /*
  .sectionHead .img { width:initial; }
  */
}
#section_goto .sectionBody {
  margin-top: 10px;
}
#section_goto .sectionBody .box {
  margin-top: 60px;
  padding: 40px 60px;
  background-color: rgba(255, 255, 255, 0.6);
}
#section_goto .sectionBody .box .h_box {
  font-size: 2rem;
  margin: -2.5em 0 1.2em;
}
#section_goto .img_greeting {
  width: 87%;
  margin-left: 13%;
}
#section_goto .btn_greeting img {
  width: 280px;
  max-width: 75vw;
  height: auto;
  transition: transform 0.1s;
}
#section_goto .btn_greeting:hover img {
  transform: scale(1.03);
}

/* ------------------------- 

BG
------------------------- */
.section:before {
  content: "";
  display: block;
  position: absolute;
  background: url(/images/dummy.png) 0 0 no-repeat;
  background-size: contain;
}

#section_diary:before {
  background-image: url(/images/bg_animal001.png);
  width: 284px;
  height: 148px;
  max-width: 28.4vw;
  max-height: 14.8vw;
  top: -148px;
  right: -100px;
}
@media screen and (max-width: 679px) {
  #section_diary:before {
    top: -11vw;
    right: -10vw;
  }
}

#section_news:before {
  background-image: url(/images/bg_animal002.png);
  width: 276px;
  height: 178px;
  max-width: 20vw;
  max-height: 15vw;
  top: -40px;
  left: -100px;
}
@media screen and (max-width: 679px) {
  #section_news:before {
    top: -2vw;
    left: 0;
  }
}

#section_channel:before {
  background-image: url(/images/bg_animal003.png);
  width: 262px;
  height: 195px;
  max-width: 18vw;
  max-height: 13vw;
  top: -195px;
  right: -100px;
}
@media screen and (max-width: 679px) {
  #section_channel:before {
    top: -10vw;
    right: 0;
  }
}

#section_cafe:before {
  background-image: url(/images/bg_animal004.png);
  width: 246px;
  height: 113px;
  max-width: 12.3vw;
  max-height: 5.7vw;
  top: -113px;
  left: -100px;
}
@media screen and (max-width: 679px) {
  #section_cafe:before {
    top: -6vw;
    left: 0;
  }
}

#section_goods:before {
  background-image: url(/images/bg_animal005.png);
  width: 442px;
  height: 243px;
  max-width: 22.1vw;
  max-height: 12.2vw;
  top: -50px;
  right: -140px;
}
@media screen and (max-width: 679px) {
  #section_goods:before {
    top: -12vw;
    right: 0;
  }
}

#section_profile:before {
  background-image: url(/images/bg_animal006.png);
  width: 115px;
  height: 371px;
  max-width: 12vw;
  max-height: 30vw;
  top: -120px;
  left: -50px;
}
@media screen and (max-width: 679px) {
  #section_profile:before {
    top: -26vw;
    left: 0;
  }
}

#section_goto:before {
  background-image: url(/images/bg_animal007.png);
  width: 116px;
  height: 98px;
  max-width: 12.6vw;
  max-height: 10.8vw;
  top: -100px;
  left: -100px;
}
@media screen and (max-width: 679px) {
  #section_goto:before {
    top: -11vw;
    left: 0;
  }
}