/*
Theme Name: HOWTANBIS
*/


/* Base */


body {
margin: 0 auto;
text-align: center;
padding:0px;
margin:0px;
word-wrap: break-word ; 
position: relative;	
font-size: 2.7vw;
line-height: 130%; 
  font-family: "Arial Narrow", Arial, "BIZ UDGothic", sans-serif;
  font-weight: 400;
font-style: normal;
color: #000;
background-color: #fff;
}

body#sponsor {
 background: #fff;
color: #000;
}

@media screen\0 {
body {
font-weight:400;
  }
}

@-moz-document url-prefix() {
body {
font-weight: 700;
  }
}

@media screen and (max-width: 834px) and (orientation: portrait) {
body {
font-size: 1.5rem;
padding-top:100px;
}
}

.pcbr,#panel2 br{
display: block;
}

.spbr {
display: none;
}


@media screen and (max-width: 834px) and (orientation: portrait) {
.pcbr,#panel2 br {
display: none;
}
.spbr {
display: block;
}
}


dl,dt,dd,ul,li {
	margin:0px;
	padding: 0px;
}

dl {
}
dt {
	padding-top: 10px;
}
dd {
  	padding-left: 10px;
}

img {
	border: 0px;
	vertical-align:bottom;
}


ol,ul{list-style:none;}

*:focus {
  outline: none;
}

a {
	text-decoration: none;
}


.clear {
	clear: both;
	font: 0pt/0pt sans-sans-serif;
}

table {
	text-align: left;
	border: 0px;
	border-collapse: separate;
	border-spacing: 0px;
	padding: 0px 0px 0px 0px;
}

td {
	text-align: left;
	margin:0px;
	vertical-align: top; 
		padding:15px 25px 15px 25px;
}

th {
			    	font-size: 120%;
	text-align: left;
	margin:0px;
	vertical-align: top; 
		padding:15px 25px 15px 0px;
	white-space: nowrap;
}

.just {
text-align: justify;
font-feature-settings: "palt";
}

.in {
-webkit-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out;
  transform: translate(-100%, 0);
      opacity: 0;
       -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.in.show {
transform: translate(0, 0) !important;
    opacity: 1;
     -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.inl {
-webkit-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out;
  transform: translate(0, 300px);
      opacity: 0;
       -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.inl.show {
transform: translate(0, 0) !important;
    opacity: 1;
     -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}


@keyframes SlideIn {
  0% { opacity: 0; transform: scale(0.1)  translate(-500px, 0);}
  100% { opacity: 1; transform: scale(1.0) translate(0,0);}
}


@keyframes UIn {
  0% { 
  opacity: 0; 
  transform: translate(0, 300px);
  -webkit-transform: -webkit-translate(0, 300px);
  }
  100% { 
  opacity: 1; 
  transform: translate(0,0);
  -webkit-transform: -webkit-translate(0, 0);
  }
}

@keyframes HeadIn {
  0% { 
  opacity: 0; 
  transform: scale(0.1) translate(0, -500px);
  -webkit-transform: -webkit-scale(0.1) -webkit-translate(0, -500px);
  }
  100% { 
  opacity: 1; 
  transform: scale(1.0) translate(0,0);
  -webkit-transform: -webkit-scale(1.0) -webkit-translate(0, 0);
  }
}

@keyframes rotation1{
  0%{ 
  opacity: 0; 
  transform: scale(0.1) rotate(0);
  -webkit-transform: -webkit-scale(0.1) -webkit-rotate(0);
  }
  100%{ 
  opacity: 1; 
  transform: scale(1.0) rotate(-360deg); 
  -webkit-transform: -webkit-scale(1.0) -webkit-rotate(-360deg);
  }
}


/* Menu */

.uin {
  animation:.45s ease-out rotation1;
}

.hin {
  animation: HeadIn .45s ease-out;
}

.rin {
  animation: SlideIn .3s ease-out;
}

header {
    position: fixed;
    top: 0px;
	width: 97%;
	height: 100px;
	padding: 0px 3% 0px 0px;
	    z-index: 10000;
	       font-size: 14px;
  line-height: 200%; 
  transition: .5s;
  isolation: isolate;
  mix-blend-mode: difference;
      background-color: transparent; 
  backdrop-filter: none;       
}

@media screen and (max-width: 834px) and (orientation: portrait) {
header {
	width: 100%;
	padding: 0;
      background-color: #fff;      
        mix-blend-mode: normal;
}
}

#home #luxbar {
	display: none;
  opacity: 0;
  transition: opacity 1s ease;
}
#home #luxbar.show {
	display:block;
  opacity: 1;
}
@media screen and (max-width: 834px) and (orientation: portrait) {
#home #luxbar {
	display:block;
  opacity: 1;
}
}

.hide{
    transform: translateY(-100px);
  -webkit-transform: -webkit-translateY(-100px);
}


h1{
    position: absolute;
	width: 214px;
	height: 50px;
	background: url(/wp/images/logo.png) no-repeat;
	background-size: 214px 50px;
	display:block;
	text-indent:-9999em;
	text-decoration:none;
	overflow:hidden;
		    z-index: 10;
 top: 5px;
    left: 10px;
    	padding:0;
	margin:0;
}

.luxbar-default {
  width: 100%;
  position: relative; }

.luxbar-static {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  .luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
    position: absolute; }

.luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
  display: block;
  height: 2px;
  width: 40px;
  transition: 0.6s ease; }

.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
  background-color: transparent; }
  .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
    margin-top: 0; }

.luxbar-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;}

.luxbar-menu-left .luxbar-navigation, .luxbar-menu-left .luxbar-header {
  justify-content: flex-start; }

.luxbar-menu-right .luxbar-hamburger {
			margin: 20px; }

.luxbar-brand {
  padding: 0px 24px 0px 24px; }

.luxbar-menu {
      background-color: transparent; 
  min-height: 58px;
  transition: 0.6s ease;
  width: 100%; }

.luxbar-navigation {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  margin: 0 0 0 0; 
  mix-blend-mode: difference;
      background-color: transparent; 
  }

@media screen and (max-width: 834px) and (orientation: portrait) {
.luxbar-navigation {
      background-color: #fff;      
        mix-blend-mode: normal;
}
}

.luxbar-item {
font-size: 30px;
line-height: 200%; 
    padding:15px 0;
    margin: 0; 
    display: block; 
		 color: #fff;
  text-decoration: none;
  mix-blend-mode: difference;
      background-color: transparent; 
    }

@media screen and (max-width: 834px) and (orientation: portrait) {
.luxbar-item {  
        mix-blend-mode: normal;
}
}

.luxbar-item:after {
    padding:0 5px;
    content: ''; }
                  
.luxbar-menu a,
.luxbar-item a {
		 color: #fff;
  text-decoration: none;
  mix-blend-mode: difference;
      background-color: transparent; }

@media screen and (max-width: 834px) and (orientation: portrait) {
.luxbar-menu a,
.luxbar-item a {
			 color: #000;
        mix-blend-mode: normal;
}
}
    
.luxbar-item a:hover{
    color: #ccc;
}

.luxbar-hamburger {
	 color: #000;
  padding: 24px 20px 18px 20px;
  margin-bottom:30px;
  position: relative;
  cursor: pointer; }
  .luxbar-hamburger span::before, .luxbar-hamburger span::after {
    content: '';
    position: absolute; }
  .luxbar-hamburger span::before {
    margin-top: -5px; 
    }
  .luxbar-hamburger span::after {
    margin-top: 5px; }

.luxbar-checkbox {
  display: none; }
  .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
    overflow: hidden;
    height: 53px; }
  .luxbar-checkbox:checked ~ .luxbar-menu {
  background-color: #fff;
    transition: height 0.6s ease;
    height: 100vh;
    overflow: auto; }

.dropdown {
  position: relative;
  height: auto;
  min-height: 53px; }
  .dropdown:hover > ul {
    position: relative;
    display: block;
    min-width: 100%; }
  .dropdown > a::after {
    position: absolute;
    content: '';
    right: 10px;
    top: 25px;
    border-width: 5px 5px 0;
    border-color: transparent;
    border-style: solid; }
  .dropdown > ul {
    display: block;
    overflow-x: hidden;
    list-style: none;
    padding: 0; }
    .dropdown > ul .luxbar-item {
      min-width: 100%;
      height: 19px;
      padding: 5px 10px 5px 40px; }
      .dropdown > ul .luxbar-item a {
        min-height: 29px;
        line-height: 29px;
        padding: 0; }

 
@media screen and (min-width: 835px) {    	        
  .luxbar-navigation {
    flex-flow: row;
    justify-content: flex-end; }

  .luxbar-hamburger {
    display: none; }

  .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
    overflow: visible; }
  .luxbar-checkbox:checked ~ .luxbar-menu {
    height: 58px; }
    
  .luxbar-menu .luxbar-item {
    border-top: 0; }

.luxbar-item {
font-size: 2.5vw;
 color: #fff;
line-height: 200%; 
    padding:5px 0;
    margin: 0; 
    display: block; 
  mix-blend-mode: difference;
      background-color: transparent;  
    }

@media screen and (max-width: 834px) and (orientation: portrait) {
.luxbar-item {
        mix-blend-mode: normal;
}
}
       
.luxbar-item:after {
 color: #fff;
  text-decoration: none;
  mix-blend-mode: difference;
      background-color: transparent; 
    padding:0 5px;
    content: '/'; }

.luxbar-item.en:after {
    padding:0;
    content: ''; }
      
  .luxbar-menu-right .luxbar-header {
    margin-right: 0; }

  .dropdown {
    height: 58px; }
    .dropdown:hover > ul {
      position: absolute;
      left: 0;
      top: 58px;
      padding: 0; }
    .dropdown > ul {
      display: none; }
      .dropdown > ul .luxbar-item {
        padding: 5px 10px; }
        .dropdown > ul .luxbar-item a {
          white-space: nowrap; } }
.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::before {
  transform: rotate(225deg); }
.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::after {
  transform: rotate(-225deg); }

.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::before {
  transform: rotate(45deg); }
.luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::after {
  transform: rotate(-45deg); }

.luxbar-menu-light,
.luxbar-menu-light .dropdown ul {}

.luxbar-menu-light .active,
.luxbar-menu-light .luxbar-item:hover {}
.luxbar-menu-light .luxbar-hamburger span::before,
.luxbar-menu-light .luxbar-hamburger span::after {
  background-color: #000; }}

    
/* Fonts */


h3{
    font-size: 25px; 
    font-weight:bold;
  line-height: 170%;
    text-align:left;
       	padding: 5px 0px 5px 0px;
       	margin: 5px 0px 5px 0px;
}


.font-g-12px{
	font-size: 12px;
	line-height:140%;
	color: #333333;
	font-weight: bold;
}

.font-w-12px{
	font-size: 12px;
	line-height:140%;
	color: #ffffff;
}
.font-w-14px{
	font-size: 14px;
	line-height:140%;
	color: #ffffff;
}
.font-g-14px{
	font-size: 14px;
	line-height:140%;
	color: #333333;
}
.font-g-16px{
	font-size: 16px;
	line-height:140%;
	color:#333333;
	font-weight: bold;
}
.font-b-16px{
	font-size: 16px;
	line-height:140%;
	color:#00877D;
	font-weight: bold;
}


.yellow{
	color:#FFC000;
}

.green{
	color:#008E00;
}

.purple{
	color:#9537FF;
}

.brown{
	color: #B36300;

	}
.white{
	color: #fff;
	}
	
big{
	font-size: 150%;
	line-height:160%;
}

.button-box {
	  text-align: center;
	margin: 20px auto 20px auto;
}


.button {
  display: inline-block;
  min-width: 120px;
  text-align: center;
  text-decoration: none;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #924898;
  color: #924898;
	line-height:200%;
  overflow: hidden;
    border-radius: 20px;        /* CSS3草案 */  
    -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 20px;   /* Firefox用 */ 
}

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button:hover {
  color: #fff;
}
.button::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  background-color: #924898;
}

.triangle {
	padding: 0 0 0 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6.0px 0 6.0px 10.0px;
border-color: transparent transparent transparent #924898;
display: inline-block;
}

/* Top*/

.main-img{
    width: 100%;
    height: 100vh;
	overflow:hidden;  
  }

.main-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
.main-img{
    width: 100%;
    height: auto;
  }

.main-img img{
  width: 100%;
  height: auto;
}
}

@keyframes scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.scroll-list {
  animation: scroll-left 30s infinite linear 0.5s both;
}
.scroll-list img {
padding-top:100px;
  width: auto;
  height: 100%;
}

.top-video {
width:70%;
    height: 70%;
margin: auto;
text-align:center;
  margin: auto;
  padding: 5% 15% 15% 15%;
   position: relative;
   background-color:#fff;
}

.top-video div{
	 width: 100%;
	 margin: auto;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.top-video div iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
.top-video {
width:90%;
    height: auto;
  padding: 5% 5% 15% 5%;
}
}

.main-btn{
  margin: 0 auto 0 auto;
  padding: 0 10% 0 10%;
   position: relative;
   background-color:#fff;
   z-index:1;
   text-align:center;
   color:#000;
}

.main-btn img{
  width:auto;
  height: 60px;
}

.main-btn a{
  display: inline-block;
  padding: 0 3% 0 3%;
       vertical-align: middle;
}

.main-btn a:hover{
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
	text-decoration: none;
	    -moz-transition:0.2s ease-in-out;
-webkit-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
}

@media screen and (max-width: 834px) and (orientation: portrait) {
.main-btn img{
  width:auto;
  height: 23px;
}
.main-btn a{
  display: inline-block;
  padding: 0 1% 0 1%;
       vertical-align: middle;
}
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
.main-btn{
width:90%;
padding: 1px 5% 0 5%;
}
}


.main-btn-n{
  margin: 0 auto 0 auto;
  padding: 0 10% 0 10%;
   position: relative;
   background-color:#fff;
   z-index:1;
   text-align:center;
   color:#000;
}

.main-btn-n img{
  width:auto;
  height: 60px;
}

.main-btn-n a{
  display: inline-block;
  padding: 0 1% 0 1%;
       vertical-align: middle;
}

.main-btn-n a:hover{
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
	text-decoration: none;
	    -moz-transition:0.2s ease-in-out;
-webkit-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
}

@media screen and (max-width: 834px) and (orientation: portrait) {
.main-btn-n img{
  width:auto;
  height: 24px;
}
.main-btn-n a{
  display: inline-block;
  padding: 0 0 0 0;
       vertical-align: middle;
}
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
.main-btn-n{
width:90%;
padding: 1px 5% 0 5%;
}
}

.top-contents01 {
  margin: auto;
   position: relative;
min-height: 100vh;
  height: auto;
  color: #fff;
    background: #000;
    font-size: 3.5vw;
  }

.top-contents01 h2{
    font-size: 2.5vw;
    font-weight:400;
    text-align:center;
       	padding: 15px 0px 15px 0px;
  }

.top-contents01 .box {
  padding-top: 120px;
  padding-bottom: 100px;
}

@media screen and (max-width: 834px) {
.top-contents01 {
min-height: auto;
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .top-contents01 .box {
  padding-top: 60px;
  padding-bottom: 60px;
}
.top-contents01 h2{
line-height: 120%; 
  }
}
        
.top-contents02 {
  margin: auto;
   position: relative;
    height: 100vh;
  color: #fff;
    font-size: 6.5vw;
    background-color: #000;
     background-position:center;
background-size: auto 100%;
background-repeat: no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  }

.top-contents02 a{
  color: #fff;
  }
  
/* 横ストライプ（4色の横線） */
.colorbar{
  width:100%;
  height:24px; /* バーの太さ：調整可 */
  display:flex;
  flex-direction:column; /* 縦に積む */
  position: absolute;
  bottom:0;
}

@media screen and (max-width: 834px) and (orientation: portrait) {
  .top-contents02{
    position: relative;
    height: 56.25vw;        /* 16:9 を幅から計算（9/16=0.5625） */
    padding-bottom: 0;      /* ← ここ重要：padding方式をやめる */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
  }

  .top-contents02 > p{
    margin: 0;              /* ← pのデフォルト余白がズレ原因になりがち */
    z-index: 10;
  }
.colorbar{
  bottom:-24px;
}
}

@media screen and (max-width: 767px) {
  .top-contents02{
  	font-size: 1.5rem;
}
}
 	
.colorbar div{
  flex:1; /* 均等高さ */
  width:100%;
}

/* 上から順に4色 */
.colorbar div:nth-child(1){ background:#9426FF; }
.colorbar div:nth-child(2){ background:#FFB300; } 
.colorbar div:nth-child(3){ background:#8D5D00; }
.colorbar div:nth-child(4){ background:#609E00; } 

.video_wrapper{
  width: 100%;
    height: auto;
     z-index: 1;
     position: relative; 
}

.video_wrapper video{
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.top-contents03 {
  width: 100%;
  margin: auto;
   position: relative;
 background: #000;
   color: #fff;
  overflow:hidden;
  }

.top-contents03-txt {
  width: 90%;
  margin:0 auto 0 auto;
             text-align:left;
               font-size: 1.7vw;
               line-height: 120%; 
}

.top-contents03-txt h2{
               font-size: 120%;
               line-height: 120%; 
}

.just{
text-align: justify;
font-feature-settings: "palt";
}

@media screen and (max-width: 834px) and (orientation: portrait) {
.top-contents03-txt {
  width: 95%;
                 font-size: 3.3vw;
}
}


.top-contents04 {
  width: 100%;
    height: 100vh;
  margin: auto;
   position: relative;
  overflow:hidden;
  }

@media screen and (max-width: 834px) and (orientation: portrait) {
.top-contents04 {
  width: 100%;
    height: auto;
    }
}

/* 背景側の要素（画像/動画など）が .shop-btn よりも前に描画されていることが前提 */
.shop-btn{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index:10000;
  /*mix-blend-mode: difference; */
  font-size: 200%;
}

.shop-btn a{
  display:inline-block;
  color:#fff;                  /* difference の基準色 */
  padding:16px 40px 16px 24px; /* 右に矢印ぶんの余白 */
  position:relative;
  text-decoration:none;
}

/* 矢印を少し大きめに */
.shop-btn a::after{
  content:'';
  position:absolute;
  top:50%;
  right:12px;
  width:18px;                  /* ←大きさ */
  height:18px;                 /* ←大きさ */
  transform:translateY(-50%) rotate(-45deg);
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transition: transform .25s;
}

/* ちょいスライドのアニメ */
.shop-btn a:hover::after{
  transform:translate(6px, -50%) rotate(-45deg);
}

.slide-img{
 background-position:center;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (max-width: 834px) and (orientation: portrait) {
.slide-img{
background-size: contain;
}
}

.slide-img{
animation:hanten 1000ms infinite;
}

@keyframes hanten {
0% {
filter: invert(0%);
}
80% {
filter: invert(0%);
}
100% {
filter: invert(100%);
}
}

.slick-counter {
left: 75px !important;
bottom: 130px !important;
font-size: 200% !important;
color:#fff !important;
}

.slick-dots {
	width: 100%;
  margin: auto !important;
             text-align:center !important;
bottom: 50px !important;
}

.slick-dots li button:before {
color: #eee !important;
}

.slick-dots li.slick-active button:before{
color:#000 !important;
}

a.slide-link{
color:#000 !important;
	text-decoration: none !important;
}

a.slide-link:hover{
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
	text-decoration: none;
	padding:0;
	margin:0;
	    -moz-transition:0.2s ease-in-out;
-webkit-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
}

@media screen and (max-width: 834px) and (orientation: portrait) {
.slider {
    width: 100%;
    height: auto;
    min-height: 400px;
}

.slider div {
min-height: 400px;
}

a.slide-link{
font-size: 90%;
letter-spacing: -1px;
}
.slick-dots {
  bottom:100px !important;
}
}
.top-contents05 {
  width: 100%;
   height: 100vh;
  margin: auto;
   position: relative;
 background: url(/wp/images/artist.jpg) no-repeat right top #000;
 background-size: auto 100%;
  overflow:hidden;
  }

@media screen and (max-width: 834px) and (orientation: portrait) {
.top-contents05 {
    height: auto;
 background-size: 100% auto;
  }
}

.top-contents05 h2{
    position: absolute;
top: 30%;
left: 2%;
   color: #fff;
  font-size: 17vw;
    font-weight:400;
    mix-blend-mode: exclusion;
  padding:0;
  margin:0;
  }

@media screen and (max-width: 834px) and (orientation: portrait) {
.top-contents05 h2{
    position: relative;
top: 0;
left: 0;
 margin-bottom:30px;
}
}

.top-contents05 h3{
  font-size: 120%;
  padding:0;
  margin:0;
  line-height: 100%; 
      font-weight:400;
  }
  
.top-contents05-txt {
  width: 36%;
  margin:3.5% auto 0 5%;
       color: #fff;
             text-align:left;
               font-size: 1.7vw;
               line-height: 120%; 
}

.top-contents05-txt p.just{
text-align: justify;
font-feature-settings: "palt";
}

@media screen and (max-width: 834px) and (orientation: portrait) {
.top-contents05-txt {
  width: 95%;
  margin:100% auto 0 auto;
                 font-size: 3.3vw;
}
}

.space-contents {
  width: 100%;
 height: 150px;
  background: #000;
  }

@media screen and (max-width: 834px) and (orientation: portrait) {
.space-contents {
display: none;
  }
}


.news-contents {
  width: 100%;
   min-height: 90vh;
  color: #000;
    padding:10vh auto 0 auto;
    background: #fff;
    font-size: 2.5vw;
  }




.news-contents a {
  color: #000;
  border-bottom: 2px solid #000;
	text-decoration: none;
}

.news-contents a:hover {
  color: #ccc;
    border-bottom: 2px solid #ccc;
}


.news-contents h2{
    font-size: 120%;
    font-weight:400;
    text-align:left;
       	padding: 15px 0px 15px 0px;
  }
  

  .more {
	padding: 30px 0px 0px 0px ;
}

.shake{
opacity : 0;
}

.shake.act{
  opacity : 1;
  animation: shake 2s ease-in-out;
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-7px, 0, 0);
    transform: translate3d(-7px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(7px, 0, 0);
    transform: translate3d(7px, 0, 0);
  }
}

/* Content */

#gallery-1 {
				margin: auto;
				border: 0px !important;
			}
			#gallery-1 .gallery-item {
				float: left;
				padding-top: 10px;
				text-align: center !important;
				width: 25% !important;
				border: 0px !important;
			}
			#gallery-1 img {
				width: 98% !important;
				height:auto !important;
				border: 0px !important;
			}
			#gallery-1 .gallery-caption {
				margin-left: 0 !important;
			}
			#gallery-1 dt {
	font-weight: bold;
	white-space: nowrap;
	padding-bottom: 0px;
	border-bottom:0px;
}




.sen {
	width: 100%;
	margin: 30px 0px 30px 0px;
	border-top: 1px dotted #333;
}

.square{
	clear:left;
	border-top: 1px dotted #999999;
	border-right: 1px dotted #999999;
	border-bottom: 1px dotted #999999;
	border-left: 1px dotted #999999;
	padding: 5px;
	}



.img-left{

	float:left;

	margin-right: 10px;

	}

.img-right{

	float:right;

	margin-left: 10px;

	}
	

.time {

	color: #D52558;
    font-size: 12px;
}


.subtitle{
	margin: 0px;
	padding: 0px 0px 0px 20px;
	background: url(/images/icons.gif) left top no-repeat;
	color: #555555;
	font-size: 12px;
	line-height: 150%; 
	font-weight: bold;
}

.alignright {
	float: right;
	padding: 0px 0px 20px 20px;
	}

.alignleft {
	float: left;
	padding: 0px 20px 20px 0px;
	}

.box {
width: 95%;
text-align: left;
padding: 20px 0 20px 0px;
margin: auto;
}

.box50{
width:50% !important;
margin:auto !important;  
text-align: left;
}

.box60 {
width: 60%;
text-align: left;
padding: 20px 0 20px 0px;
margin: auto;
}


@media screen and (max-width: 834px){
.box {
width: 95%;
text-align: left;
padding: 20px 0 20px 0px;
margin: auto;
}

.box50{
width:90% !important;
margin:auto !important;  
padding: 20px 0 20px 0px;
text-align: left;
}

.box60 {
width: 90%;
text-align: left;
padding: 20px 0 20px 0px;
margin: auto;
}
}

.contents-left {
width: 48%;
text-align:left;
background: #fff;
padding: 10px 0px 0px 0px;
margin: 0px 1% 0px 0px;
float:left;
}

.contents-right {
width: 48%;
text-align: right;
background: #fff;
padding: 10px 0px 0px 0px;
margin: 0px 0 0px 1%;
float:right;
}

.top-contents01 .contents-right {
padding: 30px 0;
text-align: center;
}

.top-contents01 .contents-right img{
width: 40%;
height:auto;
max-width: 300px;
}

@media screen and (max-width: 834px){
.contents {
width: 100%;
margin: 40px auto 0px auto
}

.contents-left,.contents-right {
width: 100%;
margin: 0;
float:none;
text-align:center;
}
}

.contents-bottom {
clear: both;
width: 100%;
padding: 10px 0px 0px 0px;
position: relative;
text-align: center;
}

.contents-bottom:before,.contents-top:after,.contents-bottom:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}

.contents-left img,.contents-right img,.contents-bottom img{
max-width: 100%;
height:auto;
}


/* Footer */


.footer {
	color: #000;
  padding:2.5%;
  margin: auto;
       z-index: 10000;
       font-size: 70%;
       position:relative;
}

.footer a{
	color: #000;
}

.footer01{
 width:35%;
display:inline-block;
    vertical-align:left;
    text-align: left;
}

.footer01 img{
 width:100px;
height: auto;
}

.footer02{
 width:64%;
display:inline-block;
    vertical-align: center;
    font-size: 75%;
text-align: right;
}

@media screen and (max-width: 834px) and (orientation: portrait) {
.footer {
  padding:25px;
}
.footer01, .footer02{
 width:100%;
display:block;
    vertical-align: center;
    text-align: center;
    font-size: 1.0rem;
}
.footer01 img{
 display: none;
}
.footer02 span#contact{
 display: inline-block;
}
.footer02 span{
 display: block;
     font-size: 1.0rem;
}
}

.marquee {
  padding:27% 0 0 100%;
  margin: 0;
  width: fit-content;
  white-space: nowrap;
  animation: scroll-left 360s infinite linear 0.5s both;
  font-size: 50vw;
    font-weight:400;
    opacity:0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
}

.marquee-box {
    position: absolute;
    top: 0;
    left: 0;
  width: 100%;
    height: 100vh;
  margin-inline: auto;
  overflow: clip;
}
@media screen and (max-width: 834px) and (orientation: portrait) {
.marquee-box {
    top: 60%;
    height: 100%;}
}

.p01 {
 top: 10%;
 left: 10%;
}
.p02 {
 top: 20%;
 left: 20%;
}
.p03 {
 top: 30%;
 left: 30%;
}
.p04 {
 top: 40%;
 left: 40%;
}
.p05 {
 top: 3%;
 left: 52%;
}
.p06 {
 top: 7%;
 left: 40%;
}
.p07 {
 top: 70%;
 left: 70%;
}
.p08 {
 top: 5%;
 left: 80%;
}
.p09 {
 top: 90%;
 left: 90%;
}
.p10 {
 top: 12%;
 left: 8%;
}
.p11 {
 top: 49%;
 left: 15%;
}
.p12 {
 top: 75%;
 left: 25%;
}
.p13 {
 top: 63%;
 left: 94%;
}
.p14 {
 top: 35%;
 left: 85%;
}
.p15 {
 top: 45%;
 left: 55%;
}
.p16 {
 top: 55%;
 left: 65%;
}
.p17 {
 top: 65%;
 left: 75%;
}
.p18 {
 top: 75%;
 left: 85%;
}
.p19 {
 top: 85%;
 left: 45%;
}
.p20 {
 top: 52%;
 left: 84%;
}
.p21 {
 top: 13%;
 left: 47%;
}
.p22 {
 top: 93%;
 left: 17%;
}
.p23 {
 top: 33%;
 left: 27%;
}
.p24 {
 top: 27%;
 left: 59%;
}
.p25 {
 top: 53%;
 left: 47%;
}
.p26 {
 top: 63%;
 left: 57%;
}
.p27 {
 top: 9%;
 left: 67%;
}
.p28 {
 top: 83%;
 left: 77%;
}
.p29 {
 top: 75%;
 left: 67%;
}
.p30 {
 top: 37%;
 left: 13%;
}
.p31 {
 top: 90%;
 left: 10%;
}
.p32 {
 top: 80%;
 left: 20%;
}
.p33 {
 top: 95%;
 left: 58%;
}
.p34 {
 top: 60%;
 left: 40%;
}
.p35 {
 top: 75%;
 left: 35%;
}
.p36 {
 top: 40%;
 left: 60%;
}
.p37 {
 top: 30%;
 left: 7%;
}
.p38 {
 top: 20%;
 left: 80%;
}
.p39 {
 top: 10%;
 left: 90%;
}
.p40 {
 top: 52%;
 left: 48%;
}
.p41 {
 top: 66%;
 left: 20%;
}
.p42 {
 top: 52%;
 left: 76%;
}
.p43 {
 top: 77%;
 left: 45%;
}
.p44 {
 top: 69%;
 left: 12%;
}
.p45 {
 top: 55%;
 left: 5%;
}
.p46 {
 top: 22%;
 left: 44%;
}
.p47 {
 top: 17%;
 left: 79%;
}
.p48 {
 top: 33%;
 left: 68%;
}
.p49 {
 top: 47%;
 left: 78%;
}
.p50 {
 top: 4%;
 left: 26%;
}
.b01 {
animation:disappear 3.1s ease-out 1s infinite;
}

.b02 {
animation:disappear 3.2s ease-out 2s infinite;
}

.b03 {
animation:disappear 3.3s ease-out 3s infinite;
}

.b04 {
animation:disappear 3.4s ease-out 4s infinite;
}

.b05 {
animation:disappear 3.5s ease-out 5s infinite;
}

.b06 {
animation:disappear 4.1s ease-out 1.5s infinite;
}

.b07 {
animation:disappear 4.2s ease-out 2.5s infinite;
}

.b08 {
animation:disappear 4.3s ease-out 3.5s infinite;
}

.b09 {
animation:disappear 4.4s ease-out 4.5s infinite;
}

.b10 {
animation:disappear 4.5s ease-out 5.5s infinite;
}

@keyframes disappear {
0% {
transform:scale(0);
opacity:100;
filter: alpha(opacity=100);
-ms-filter: "alpha( opacity=100)";
}
33% {
transform:scale(0);
opacity:100;
filter: alpha(opacity=100);
-ms-filter: "alpha( opacity=100)";
}
100% {
transform:scale(5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "alpha( opacity=0 )";
}
}

#topcontrol { z-index: 1000; }

/* Tab */
.tab_wrap{
  width:100%;
  margin:auto;
  position:relative;
  display:flex;                   /* ← フレックス化 */
  flex-direction:column;
  padding-top: var(--safe-top, 0px);  
}
input[type="radio"]{display:none;}
.tab_area{
  width:100%;
  text-align:center;
  padding:0;
  margin:auto 0 0 0;
  font-size: 70.0%;
  pointer-events:none;}
.tab_area label{  margin:0 5px; display:inline-block; text-align:center; pointer-events:auto;cursor:pointer; transition:ease 0.2s opacity;color:#ccc;}
.tab_area label:hover{opacity:0.5;}
.tab_panel{width:100%; opacity:0; padding: 0; display:none;}

#tab1:checked ~ .tab_area .tab1_label,#tab2:checked ~ .tab_area .tab2_label,#tab3:checked ~ .tab_area .tab3_label,#tab4:checked ~ .tab_area .tab4_label{color:#999;}
#tab1:checked ~ .panel_area #panel1,#tab2:checked ~ .panel_area #panel2,#tab3:checked ~ .panel_area #panel3,#tab4:checked ~ .panel_area #panel4{display:block; animation:fadeIn ease 0.6s forwards; -ms-animation:fadeIn ease 0.6s forwards;}
#panel1,#panel2 {text-align: center;}
#panel1 div,
#panel2 div{
  width: min(32em, 83vw);  /* テキストボックスの横幅を共通に */
  margin: 0 auto;
  text-align: left;
}

#panel2{font-size: 98.0%;line-height: 102%; }
#panel4{font-size: 105.4%;line-height: 99%; }
.panel_area{min-height: 360px; }
.top-contents03 .panel_area{min-height: 250px; }

@media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
.top-contents03 .panel_area{min-height: 330px; }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
.tab_wrap{
    padding-top:20px;
  }
.top-contents03 .tab_wrap{
    padding-top:0px; 
    align-items:flex-start;
  }
.panel_area{min-height: 180px; }
.top-contents03 .panel_area{min-height: 220px; }
#panel1{line-height: 120%; }	
#panel2{font-size: 100%;line-height: 120%; }
#panel1 div,
#panel2 div{
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
#panel4{font-size: 100.4%;line-height: 100%; }
}

  /* 軌道エリア */
  .stage {
    width: 150px;           /* 円軌道の直径 */
    height: 150px;
    position: absolute;
    right: 10%;
    top: 50%;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }

  .stage a {
  display: block;
  width: 100%;
  height: 100%;
}


  /* 回転する要素（等速で回転） */
  .rotor {
    position: absolute;
    inset: 0;
    animation: spin 2s linear infinite; /* 3秒で1周・等速・ループ */
  }

  /* 衛星（画像やアイコン） */
  .satellite {
    width: 25px;            /* アイコンサイズ */
    height: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(100px - 12.5px), -50%);
    /* 100px = 半径, 12.5px = アイコンの半分 */
  }

.satellite img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  border-radius: 50%;
}

  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ホバーで一時停止（任意） */
  .stage:hover .rotor {
    animation-play-state: paused;
  }
  
  
/* 初期は非表示 */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
  	background:#fff;
}

/* #anim が :target になったときだけ表示 */
#anim:target {
  display: grid;
}

/* 中のボックス */
.main-img{
    width: 100%;
    height: 100vh;
	overflow:hidden;  
	background:#fff;
  }

.main-img img{
	display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
.overlay {
padding-top:100px;
    align-items:flex-start; /* 中身を上に寄せる（grid/flex 共通で効く） */
    justify-content:center; /* 横方向だけ中央 */
  }
  
.main-img{
    width: 100%;
    height: auto;
  }

.main-img img{
  width: 100%;
  height: auto;
}
}

/* 閉じるボタン */
.overlay-close {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2本の線を生成 */
.overlay-close::before,
.overlay-close::after {
  content: "";
  position: absolute;
  width: 30px;       /* クロスの長さ */
  height: 2px;       /* 線の太さ */
  background: #ccc;  /* 線の色 */
  border-radius: 1px;
  transition: background 0.3s, transform 0.3s;
}

/* 45°と -45° に傾けてクロス形に */
.overlay-close::before {
  transform: rotate(45deg);
}
.overlay-close::after {
  transform: rotate(-45deg);
}

/* hover時：少し太く or 色変化 */
.overlay-close:hover::before,
.overlay-close:hover::after {
  background: #999;
  height: 1px;
}

.gpt-btn{
  appearance:none;
  border:0;
  color:#fff;              /* ← dotの色もここに追随 */
  cursor:pointer;
  position:absolute;
  right:10%;
  bottom:30%;
  text-decoration:none;
  text-align: center;
  font-size: 70%;
}

.gpt-btn a{
  color:#999;        
}

.gpt-btn p{
padding:0px;
margin:0px;     
}

/* dot（通常） */
.gpt-dot{
  display:inline-block;        /* ← これ必須！ */
  width:15px;
  height:15px;
  border-radius:50%;
  background:#fff;
  opacity:.45;
  animation:gptdot 1.2s ease-in-out infinite;
}

/* hover：速い／すこし強めに“膨らむ” */
.gpt-btn:hover .gpt-dot{
  animation:gptdot-hover .6s ease-in-out infinite;
  opacity:.6;
}

/* 呼吸っぽくちょっとだけ膨らむ */
@keyframes gptdot{
  0%,100%{ opacity:.45; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.3); }
}

/* hoverはスピードも強さも上げる */
@keyframes gptdot-hover{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%    { opacity:1;  transform:scale(1.45); }
}