@charset"utf8";
:root {  color-scheme: light dark; --lightdark-color:unset; }
html{width:100%;filter: sepia(12%);}
body{  padding:0;margin:0;font-family: "kiwi-maru", sans-serif;font-weight: 400;font-style: normal;  -webkit-text-size-adjust: 100%;  background-color: light-dark(white, black);color:light-dark(black, white);}


.glitter-canvas {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
pointer-events: none;
}

html:before,
body:before {content: ""; background: darkgray;background-size: 98.5% 1.5em; 
background-image: repeating-conic-gradient(from 0deg,LightGray  0deg 15deg, LightSlateGray 15deg 45deg, Silver 45deg 70deg, lightGray 70deg 85deg,Silver 85deg 87deg,  white 90deg 90deg);  backgroud-repeat: repeat;
filter:invert(var(--lightdark-color)) drop-shadow(0px 0px 5px rgb(0, 0, 0, 0.2));  position: fixed;  display: block;  z-index: 9995;}

html:after,
body:after {content: ""; background:Silver;background-size: 1em 100%;background-image: repeating-conic-gradient(from 0deg,LightGray  0deg 15deg, LightSlateGray 15deg 45deg, Silver 45deg 70deg, DimGray 70deg 85deg,Silver 85deg 87deg,  white 90deg 90deg);  background-repeat: repeat;
filter:invert(var(--lightdark-color)) drop-shadow(0px 0px 5px rgb(0, 0, 0, 0.3));  position: fixed;  display: block;  z-index: 9990;pointer-events: none;}

html:before {  height: 1%;   width: 100vw;  left: 0;  top: 0;}
html:after {  width: 1%;  height: 100vh;  right: 0;  top: 0;}
body:before {  height: 1.5em;  width: 100vw;  bottom: 0;  left: 0;}
body:after {  width: 1%;  height: 100vh;  top: 0;  left: 0;}

hgroup{text-align:center; margin-bottom:4em;}

main{ line-break: strict;overflow-x:hidden;}

title{}
.item {	 cursor: pointer; position: absolute;top: -10vw;left: calc(50% - 5vw);width: 10vw;height: 10vw; background: linear-gradient(to bottom, #fc5c7d 60%, #6a82fb);animation: come-down-anim 10s linear infinite;z-index: 0;border-radius: 50%;text-align:center; }


.item:before{
  position: absolute;  top: -2vw;  left: 51%;  content: "";  display: inline-block;  width: 5vw;  height: 2vw;  border-radius: 60% 0 100% 0 / 100% 0 100% 0;
  background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));  transform: rotate(-5deg);pointer-events: none;}


svg .axisX,svg .axisY {	stroke:lightgray;stroke-width: 1;}
svg .grid {stroke: ghostwhite;	stroke-width: 1;transform: translate(0.5px, 0.5px);}

.fox{width: 10%;    display: block;    margin: 0 auto; }

@keyframes come-down-anim {
	0% {	transform: translateY(-0%);	}
	50% {	transform: translateY(60vh);  opacity: 100;}
	100% {	transform: translateY(120vh);  opacity: 0;}
}

.scrolldown1{ position:absolute; left:50%; bottom:0px;  height:5vw;}

.scrolldown1::after{   content: "";   position: absolute;   top: -7em;   left: -1px;   width: 1px;   height: 5vw;   animation: pathmove 2s ease-in-out infinite;    opacity: 0;    background: linear-gradient(to bottom, #fff, #fff 6px, transparent 6px, transparent 1em) repeat-y left / 1px 1vw;}

@keyframes pathmove{
  0%{    height:0;    top:-15vw;    opacity: 0;  }
  30%{    height:5vw;    opacity: 1;  }
  100%{    height:0;    top:-5vw;    opacity: 0;  }
}

.scrolldown{ position:relative; width:100%; height:0em;}

.scrolldown::after{  content: "";  position: absolute; left:50%; width: 1px;  height: 7em; animation: pathmove2 2s ease-in-out infinite;  opacity:0; background: linear-gradient(to bottom, lightgray, lightgray 6px, transparent 6px, transparent 1em) repeat-y left  / 1px 1vw;}



@keyframes pathmove2{
  0%{    height:0;    top:0vw;    opacity: 0;  }
  30%{    height:7em;    opacity: 1;  }
  100%{    height:0;    top:7em;    opacity: 0;  }
}

h1{font-size:xx-large;font-family: rondo-mn, sans-serif;font-style: normal;font-weight: 400;color:light-dark(DimGray, lightGray);}
h2{font-size:xx-large;color:light-dark(DimGray, lightGray);}
ruby{ruby-position: under;}
h3{font-size:x-large;color:light-dark(DimGray, lightGray);}
small{font-family: rondo-mn, sans-serif;font-style: normal;font-weight: 100;text-align:center;color:light-dark(DarkSlateGrey, lightGray);display:block;}
rt{color:light-dark(DimGray, lightGray);  margin-top: 1.5em;margin-bottom: 1.5em;}
rp{color:light-dark(DimGray, lightGray);}
p{color:light-dark(DarkSlateGrey, lightGray);}

header{width:80%;height:100vh;background-color:lightgray;position:relative;margin:0 auto;margin-bottom:30vh; padding-top:1em;
background:repeating-conic-gradient(from 3deg at 60% 60%,lightgray 0deg 59.9deg,gray 6deg 110deg) 0 0/1px 1px ,linear-gradient(to bottom right,white,lightblue,gray); }


.logo{width:10vw;height:10vw;position:absolute;left:calc(50% - 5vw);top:calc(50% - 5vw);-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.1));     filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.1));z-index:9000;pointer-events: none;}

.title{width:10vw;height:10vw;position:absolute;left:calc(50% - 5vw);top:calc(50% + 2vw); filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);z-index:9000;pointer-events: none;}



header>p{position:absolute;left:calc(50% - 20vw);top:calc(50% + 5vw);width:40vw;text-align:center;font-weight:bold;font-size:0.7em;color:white;}

#badge{width:100%;position:absolute;right:0;bottom:0;text-align:right;filter: invert(0%);}
#badge>a{text-decoration:none;}
#badge>a>img{max-height:12vh;}

.school a{padding: 1em 5em; background-color: gray; display: block;
    position: absolute; bottom: -4em; right: 0; color:white;}

nav{width:100%;height:1.5em;display:flex;position:fixed;bottom:0em;transform-origin: bottom;z-index:9999;pointer-events: none;}
.name{width:100%;height:1em;bottom:1.5em;}
.name>img{height:1.5em;display: block;  margin: 0 auto;padding:0 1em;    background: linear-gradient(45deg, #c4c4c4 0%, #d6d6d6 45%, #E8E8E8 70%, #c4c4c4 85%, #dadada 90% 100%);     border-radius: 25% 25% 0 0;  filter:drop-shadow(1px 5px 5px rgba(0, 0, 1, 0.5));}


#business{width:80%;display:block;margin:0 auto;position:relative;margin-bottom:30vh;}
#business>ruby{display:block;text-align:center;}

#box_a{width:80%;display:block;margin:0 auto;margin-top:5vh;padding-top: 1em;position:relative;word-break: auto-phrase;}

.box_b{position:absolute;width:auto;height:80%; max-height: 500px; aspect-ratio: 1 / 1;z-index:0;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;
 background-image: url(../img/b_001.jpg), url(../img/b_002.jpg), url(../img/b_003.jpg), url(../img/b_004.jpg), url(../img/b_005.jpg) ;
  animation: image_anime 40s ease;   animation-fill-mode: forwards; animation-iteration-count:infinite;
background-color:rgba(255,255,255,0.9);background-blend-mode:lighten;  background-size:cover;    border-radius:50%;}

.l_box{width:70%;text-align:left;z-index:100;position: relative;}
.r_box{width:70%;text-align:right;    margin: 0 0 0 auto;position: relative;}
.l_box>p{ text-indent: 1em;}
.r_box>p{ text-indent: 1em;}
#box_a span {     border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 5px 5px rgba(255, 255, 255, 0.3));}



@keyframes image_anime {
  0% {    background-image: url(../img/b_001.jpg);   }
  20% {    background-image: url(../img/b_002.jpg);   }
  40% {    background-image: url(../img/b_003.jpg);   }
  60% {    background-image: url(../img/b_004.jpg);   }
  80% {    background-image: url(../img/b_005.jpg);   }
  100% {    background-image: url(../img/b_001.jpg);   }
}

#map{width:80%;display:block;margin:0 auto;position:relative;}
#map>ruby{display:block;text-align:center;}


#new{width:70%;display:block;margin:0 auto;margin-bottom:20vh;}
.news_list {  margin: 0 5%;}

.news_list_item {
  padding: 2.5em 0;
  border-bottom: 1px solid #E6E6E6;
  list-style:none;
}

.news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}
.news_list_item a {
 position: relative;
 display: inline;
 /*padding-right: 2.5em;*/
}

.news_p {padding-left:2em;}

.news_list_date {  display: flex;  align-items: center;}

.news_item {
  background: lightblue;
  border-radius: 14px;
  width: 6em;
  /* 親要素の文字サイズを基準 */
  text-align: center;
  margin-left: 2em;
}




#japan{transform-origin: center;position:relative;pointer-events: none;}

#GROUND{ stroke: none; animation: fill 3s linear infinite;}
@keyframes fill {
  0% {    fill: lightskyblue;  }
  50% {    fill: lightblue;  }
  100% {     fill: lightskyblue;  }
}

#MAP_JAPAN{
display:block;border-radius: 50%;position: relative; aspect-ratio: 1 / 1;  width: 100%;  height: auto;max-width:500px;margin:0 auto;  box-shadow: -3em -3em 50em whitesmoke inset;pointer-events: none;}



.ripples,.ripples:before,.ripples:after {pointer-events: none;
  content: "";aspect-ratio: 1 / 1;  display: block;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  margin: auto;  width:100%; max-width:600px;  height: auto;  border: 1em  dotted lightblue;  border-radius: 50%;  box-sizing: border-box;  animation: pulsate 5s ease-in-out infinite;}

.ripples:before,.ripples:after { content: "";}
.ripples:before,.ripples:after{ animation-delay: 0s;}

@keyframes pulsate {
  0% {    transform: scale(0);    opacity: 1;  }
  100% {    transform: scale(1);    opacity: 0;  }
}

#PREFECTURE2,#PREFECTURE3,#PREFECTURE4,#PREFECTURE10,#PREFECTURE11,#PREFECTURE12,
#PREFECTURE13,#PREFECTURE14,#PREFECTURE42,#PREFECTURE46,#PREFECTURE23,#PREFECTURE26 {fill: #0f6;}
.tohoku, .kanto, .kyushu, .tokai, .kinki{fill: #f90;}

#concept{width:80%;display:block;margin:0 auto;margin-bottom:30vh;}
#concept>ruby{display:block;text-align:center;}
#concept>h3{text-align:center; }
#concept>p{text-align:center; font-size:medium;}
#concept>hr{color:gray;}
.left{animation: slideleft 5s infinite;transform-origin:left;}
.right{animation: slideright 5s infinite;transform-origin:right}
@keyframes slideleft {
	0% {	transform: scale(0.8, 1) translateX(-10vw);}
	50% {	transform: scale(1, 1);  }
	100% {	transform: scale(0.8, 1) translateX(-10vw);}
}
@keyframes slideright {
	0% {	transform: scale(0.8, 1) translateX(10vw);}
	50% {	transform: scale(1, 1);}
	100% {	transform: scale(0.8, 1) translateX(10vw);}
}


text { stroke: white; fill: white;}


.work{width:80%;display:block;margin:0 auto;margin-bottom:40vh;}
.work>h3{text-align:center; font-size:large;}
.work>hr{color:gray;}
.work>p{ text-indent: -4em;  padding-left: 4em; font-size:0.8em;}

.work>a{display:block; margin:0 auto; width: 100%;}
.work>a>img{ max-width: 20%; }
.note{display:block; margin:0 auto; margin-top:2em;}


#history{width:70%;display:block;margin:0 auto;margin-bottom:30vh;position:relative;}
#history>ruby{display:block;text-align:center;}
aside{font-size:0.85em;text-indent: -4em;  padding-left: 4em;}

.boxart{position:absolute;height:50%;width:0.2em;left:50%;transform-origin: center 0;animation: swing ease-in-out 5s infinite;background: linear-gradient(white, pink);pointer-events: none;}

.boxart:before{position:absolute;content:"";width:5em;height:5em;border-radius:50%; bottom:1em;left:-2.5em;
 background: conic-gradient(from 45deg, lightpink, ghostwhite 50%, yellow 85%, lightblue);pointer-events: none;}

@keyframes swing {
    0% { transform: rotate(20deg);  }
    50% { transform: rotate(-20deg); }
    100% { transform: rotate(20deg);  }
}


.timeline {position: relative;margin: 3em auto;padding-bottom: 2em;}
.timeline:before {position: absolute;top: 0px;left: 45px;width: 3px;height: 100%;content: '';background:light-dark(lightgray, white);}
.timeline .timeline_item {margin: 0px 0px 5em 5em;}
.timeline .timeline_item .time_date .time {font-family: serif;font-size: 500%;    max-height: 12vh;font-weight: bold;position: relative;margin: 0;letter-spacing: 3px;color:light-dark(rgba(233,30,99,0.1), rgba(233,30,99,0.3));}
.timeline .timeline_item .time_date .time:before {position: absolute;z-index: 0;top: 50%;left: -42px;width: 10px;height: 10px;content: '';-webkit-transform: rotate(45deg);transform: rotate(45deg);border: 3px solid lightgray;background: #fff;}
.timeline .timeline_item .time_date .flag {font-size: 1em;font-weight: bold;	margin: 0;margin-top: -60px;color:light-dark(#880e4f, lightGray); position: absolute;}

.ch01{background-image:url(../img/ch01.jpg);background-repeat: no-repeat; background-position: right;background-size:contain;}
.ch02{background-image:url(../img/ch02.jpg);background-repeat: no-repeat; background-position: right;background-size:contain;}
.ch03{background-image:url(../img/ch03.jpg);background-repeat: no-repeat; background-position: right;background-size:contain;}

.timeline .timeline_item .desc {line-height: 20px;margin-top: 10px;padding-left: 20px;border-left: 1px solid #880e4f;width:95%;position: relative; z-index: 1;}

.desc>p{font-size:0.8em;}

aside{font-size:0.6em;}


#stage{transition: all 0.5s 0s ease-in-out;
margin: 0 auto;  width: 100%;  perspective: 50vw;
margin-bottom:40vh; transform-origin: 50% 20%; 
}
#stage:hover{  transform: scale(1.1, 1.1);}
#stage::after{}



.rb { position: relative;top:0; left:calc(50% - 7.5vw);
  width: 15vw;   height: 15vw;   transform-style: preserve-3d;
  animation: mixedRotation 15s linear infinite;
  transition: 2s; z-index:9000;
}

.panel { transform-origin: center; transition:    width 2s,    height 2s,    rotate 0.1s; border-radius: 2s ,opacity:2s;
 opacity:0.8;  position: absolute;  top: 0;  left: 0;  width: 15vw;  height: 15vw;  box-sizing: border-box;  font-family: Impact;  color: #fff;  text-align: center;
  }


.rb1 { transform: translateZ(7.5vw);  
  background-image:url("../img/th001.jpg"); background-size: cover;
  transition: 2s; 
}
.rb1:hover {  transform: perspective(500px) translateZ(10vw) scale(1.2); border-radius: 0%;opacity:1; }

.rb2 { transform: translateZ(-7.5vw) rotateX(180deg); 
  background-image:url("../img/th002.jpg"); background-size: cover;
  transition: 2s; 
}
.rb2:hover {  transform: perspective(500px) translateZ(-30vw) rotateX(180deg) scale(1.2); border-radius: 0%;opacity:1; }


.rb3 {
  left: -7.5vw;  transform:rotateY(-90deg);    transition: 2s; 
  background-image:url("../img/th003.jpg"); background-size: cover;
}
.rb3:hover {  transform: perspective(500px) translateX(-10vw) rotateY(-90deg) scale(1.2); border-radius: 0%;opacity:1; }

.rb4 {  
  left: auto;  right: -7.5vw;  transform:rotateY(90deg);  transition: 2s; 
  background-image:url("../img/th004.jpg"); background-size: cover;
}
.rb4:hover {  transform: perspective(500px) translateX(10vw) rotateY(90deg) scale(1.2); border-radius: 0%;opacity:1; }

.rb5 {  top: -7.5vw;  transform:rotateX(90deg);    transition: 2s; 
  background-image:url("../img/th005.jpg"); background-size: cover;
}
.rb5:hover {  transform: perspective(500px) translateY(-10vw) rotateX(90deg) scale(1.2); border-radius: 0%;opacity:1; }

.rb6 {  top: auto;  bottom: -7.5vw;  transform:rotateX(-90deg);   transition: 2s; 
  background-image:url("../img/th006.jpg"); background-size: cover;
}
.rb6:hover {  transform: perspective(500px) translateY(10vw) rotateX(-90deg) scale(1.2); border-radius: 0%;opacity:1; }

.apple {p content: ""; width:10vw;height:10vw;      background: linear-gradient(to bottom, #fc5c7d 60%, #6a82fb);
  border-radius: 100%;    display: block;    position: absolute;    top: 3vw;left:calc(50% - 5vw);  animation:mixed 15s linear infinite;
}

.apple:before{
  position: absolute;  top: -1.5vw;  left: 51%;  content: "";  display: inline-block;  width: 4vw;  height: 1.5vw;  border-radius: 60% 0 100% 0 / 100% 0 100% 0;
  background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));  transform: rotate(-5deg);pointer-events: none;}

@keyframes mixedRotation {
0% {    transform:  rotate3d(0,0,0,0); }
100% {    transform:  rotate3d(1,5,3,360deg);  }
}


@keyframes mixed {
0% {    transform:  rotate3d(1,5,3,360deg); }
100% {   transform:  rotate3d(0,0,0,0);  }
}


#contact{width:95%;display:block;margin:0 auto;margin-top:3vh;padding-bottom:15em; background:repeating-radial-gradient(circle at 30% 72%, WhiteSmoke,GhostWhite,Cornsilk,lightyellow,PaleTurquoise ,Lavender );background-size: 200% 200%; 	animation: bggradient 20s ease infinite;position:relative;overflow: hidden;z-index:9000;}

#contact>ruby{display:block;text-align:center;z-index:9999;}
#contact>p{text-align:center;z-index:9999;}
@keyframes bggradient{
	0% {	background-position: 0% 50%;	}
	50% {	background-position: 100% 50%;	}
	100% {	background-position: 0% 50%;	}
 }
.form{width:100%; position:relative;margin-top:5em;z-index:9999;}
.form>a{display:flex;margin:0 auto;  text-decoration: none;}


.drop {  position: absolute;transform-origin:top;  width: 2em;  height: 2em;  top: 0;left:calc(50% - 1em);  background: purple;animation:drip 3s ease-in infinite;  -moz-border-radius: 50%;  -webkit-border-radius: 50%;  border-radius: 50%;pointer-events: none;}

@keyframes drip {
    0% {  top: 0; opacity: 0.2; transform: scale(1, 0.1);filter: blur(0); }
   90% {  top: 0; opacity: 0.7; transform:  scale(0.7,1);filter: blur(0);  }
   95% { top:90%; opacity: 0.1; transform:  scale(1,1);filter: blur(0); }
   100% { top:90%; opacity: 0; transform:  scale(5,-0.8);filter: blur(2em);}
}



.wave {	position: absolute; bottom:calc(-5vw * 8); overflow: hidden;aspect-ratio: 1 / 1;right:0%; width: 100%; height:auto;  z-index:-10;pointer-events: none;}

.wave::before {	position: absolute;	bottom: -150%;	left: -50%; border-radius: 50% 40% / 50% 70%; width: 200%;	height: 200%;	content: "";	background-image: linear-gradient(80deg,  purple 0%, MediumVioletRed 50%, paleVioletRed  100%); animation: wave-anime linear 15s  infinite; z-index:-10;}


.wave2 {position: absolute; bottom:calc(-5vw * 8); overflow: hidden;aspect-ratio: 1 / 1;right:0%; width: 100%; height:auto;  z-index:-10;pointer-events: none;filter: blur(0.1em);}

.wave2::before {position: absolute;	bottom: -150%;	left: -50%; border-radius: 50% 70% / 50% 30%; width: 200%;	height: 200%;	content: "";	background-image: linear-gradient(80deg, lightgreen 0%, purple  50%, lightblue  100%); animation: wave-anime linear 20s  infinite; z-index:-10;}

@keyframes wave-anime {
	0% {	transform: scale(1.3, 1) rotate(0); opacity:0.3;filter: blur(0.1em);}
	25% {	transform:  scale(2.5, 0.9) rotate(180deg); opacity:0.3;filter: blur(0);}
	50% {	transform:  scale(2, 1) rotate(360deg); opacity:0.3;filter: blur(0);}
	100% {	transform:  scale(1.3, 1) rotate(720deg); opacity:0.3;filter: blur(0.1em);}
}

a {color: inherit;}
button {  padding: 0;  font-family: inherit;  appearance: none;  cursor: pointe;  background-color: transparent;  border: none; z-index:9999;}

.buttonIconText {display: flex; gap: 8px;align-items: center;width: 100%; max-width: 50%; height: 64px; padding: 8px 40px 8px 8px;  font-family: sans-serif;  font-size: 16px;  color: black;  text-align: center;  overflow-wrap: anywhere;  background-color:white;  border-radius: 32px; filter: drop-shadow(5px 5px 4px lightgray);}

.buttonIconText__reverse {  flex-direction: row-reverse;  padding: 8px 8px 8px 40px;}

.buttonIconText_icon {  display: flex;  flex-shrink: 0;  align-items: center;  justify-content: center;  width: 48px;  aspect-ratio: 1;  padding: 4px;  overflow: hidden;  background-color: ghostwhite;  border-radius: 50%;}

.buttonIconText_text { flex-shrink: 1; width: 100%;}

footer{margin-top:1em; margin-bottom:2.5em;}




/* 作品ページ*/
#item{ margin: 0 auto;margin-top:3vh; }

#item_page{
display:block;
text-align:center;
padding:3em 0;}


  .image-grid {
    margin: 0 auto;
    width: 90%;   user-drag: none;  -webkit-user-drag: none;
  }

.thumbnail {
    width: 150px;  /* 固定幅 */
    margin-bottom: 20px;
    cursor: pointer; user-drag: none;  -webkit-user-drag: none;
    transition: transform 0.3s;
    display: block;
  }

  .thumbnail:hover {
    transform: scale(1.05);
  }

  /* モーダルのスタイル */
  .modal {
      display: none; /* 初期状態は非表示 */
      position: fixed; /* スクロールしても位置が固定 */
      z-index: 9999; /* 他の要素の上に表示 */
      left: 0;
      top: 0;
      width: 100%; /* 幅は全体 */
      height: 100%; /* 高さも全体 */
      overflow: auto; /* コンテンツが多い場合はスクロール */
      background-color: rgba(0, 0, 0, 0.7); /* 背景の透明度 */
  }

  .modal-content {
      margin: 15% auto; /* 中央寄せ */
      display: block; /* ブロック要素 */
      width: 80%; /* 幅は80% */
      max-width: 700px; /* 最大幅を設定 */  user-drag: none;  -webkit-user-drag: none;
  }

  .close {
      position: absolute; /* 絶対位置に配置 */
      top: 10px; /* 上から10pxの位置 */
      right: 25px; /* 右から25pxの位置 */
      color: white; /* 色を白に */
      font-size: 35px; /* フォントサイズを35pxに */
      font-weight: bold; /* 太字 */
      cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
  }

/* ここまで */

@media (any-hover: hover) {
  .buttonIconText { transition: background-color 0.2s;}
  .buttonIconText_icon_item { transition: background-color 0.2s;}
  .buttonIconText:hover { background-color: black; color:white;}
}

.iconArrowTop { rotate: 270deg;}
.iconArrowBottom { rotate: 90deg;}
.iconArrowLeft { rotate: 180deg;}

@media only screen and (max-width: 767px) {
.cp_timeline04:before {	left: 15px;}
.cp_timeline04 .timeline_item .time_date .time:before {	left: -32px;}
.cp_timeline04 .timeline_item {	margin: 0px 0px 0px 40px;}
.cp_timeline04 .timeline_item .desc {padding-left: 0px;border-top: 1px solid #880e4f;border-left: none;}
}


@media (max-width: 1200px) {
.glitter-canvas{display:none;}
.box_b{width: 100%;   height:auto;}
.l_box{width:90%;text-align:left;}
.r_box{width:90%;text-align:right; margin: 0 0 0 auto;}
#new{width:90%;}
.news_p{padding-left:0;}
.news_list_date { display: inline-block;font-size:small;}
.news_item{ margin-left: 0em;}
.logo{  width: 30vw;    height: 30vw;    position: absolute;    left: calc(50% - 15vw);    top: calc(50% - 25vw);}
.title{width:30vw;height:30vw;position:absolute;left:calc(50% - 15vw);top:calc(50% - 0vw); filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);}
h1 { font-size: x-large;}
#badge>a>img { max-width: 8vh;}
.timeline:before { position: absolute; top: 0px; left: 0px; width: 0px; height: 100%; content: ''; background: lightgray;}
.timeline .timeline_item { margin: 0;}
#stage{  transform: scale(1.5, 1.5);}
#stage:hover{  transform: scale(2, 2);}
.work{width:95%;}
#history{width:85%;}
.wave {	bottom:calc(-5vw * 5);}
.wave2 {bottom:calc(-5vw * 5);}
.item {width: 20vw;height: 20vw;left: calc(50% - 10vw);}
.item:before{ width: 8vw;  height: 4vw; top: -4vw;  }
.scrolldown1{ height: 25vw;}
.scrolldown1::after{  top: 0em; }
.grid, .axisX, .axisY{display:none;}

/* グリッドスタイル */
  .image-grid {
    margin: 0 auto;
    width: 90%; 
  display: grid;
  grid-template-columns: repeat(auto-fit, 80px);
  gap: 10px 20px;
  justify-content: center;
  }
  .thumbnail {    width: 48%; /* 画面幅が480px以下（iPhone SE含む）では2列 */  }
.news_list{font-size:small;}
}



@media (prefers-color-scheme: dark) {
header{background: repeating-conic-gradient(from 3deg at 60% 60%, black 0deg 80deg, DarkRed  6deg 110deg) 0 0 / 1px 1px, linear-gradient(to bottom right, white, lightblue, gray);}
.left, .right, .note, .item, .apple, body:before, html:before, body:after, html:after, nav, .boxart, #MAP_JAPAN, .box_b{filter: invert(100%);}
 #badge{filter: invert(100%);}
svg .axisX,svg .axisY {	stroke:darkgray;stroke-width: 1;}
svg .grid {stroke:maroon ;	stroke-width: 1;transform: translate(0.5px, 0.5px);}
#contact{ background:repeating-radial-gradient(circle at 30% 72%,black,black,black,black,MidnightBlue,Purple );
background-size: 200% 200%; 	animation: bggradient 100s ease infinite;position:relative;overflow: hidden;z-index:9000;}

}