@charset "utf-8";

body {
  font-family: "Shippori Mincho B1", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #FFFFFF;
}

h2{
  font-size: 90%;  
}


p{
margin-bottom:1em;
font-size: 90%;
}

img{
width:49%;
height: auto;
margin-left: auto;
margin-right: 0;
margin-top: 1%;
/*
margin-bottom: 0;
*/
}

.bigboxhead{

margin-top:0px;
padding:0%;
width:auto;
height: auto;
border:0px solid #000000;
/*border-width:0px 0px 0px 0px;*/
overflow: hidden;
position: relative;
}

.bigbox{
margin:0%;
margin-top:1%;
padding:0%;
width:auto;
height: auto;
border:0px solid #000000;
/*border-width:0px 0px 0px 0px;*/
overflow: hidden;
position: relative;
}

.bigbox::after {
    content: "";
    display: block;
    clear: both;
}

.leftbox{
margin-top:1%;
margin-left:1%;
padding:0%;
width:10% ;
height:auto;
border:0px solid #000000;
float: left;
}

.nobox{
margin:0%;
width:100% ;
height:auto;
border:1px solid #000000;
border-width:1px 0px 1px 0px;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}

.titlebox{
margin:0%;
padding-top:10%;
width:100% ;
height:auto;
writing-mode: vertical-rl;
text-orientation: upright;
border:1px solid #000000;
border-width:0px 0px 0px 0px;
display: flex;
align-items: center;
box-sizing: border-box;
}

.rightbox{
margin-top:1%;
margin-left:1%;
padding:0%;
padding-bottom:1px;
width:80% ;
height:auto;
border:1px solid #000000;
border-width:1px 0px 0px 0px;
float: left;
box-sizing: border-box;
}

.rightbox::after {
    content: "";
    display: block;
    clear: both;
}

.yyyymmddbox{
  /*
writing-mode: vertical-rl;
text-orientation: upright;
*/
margin-top:1%;
padding:0%;
width:50% ;
height:auto;
border:1px solid #000000;
border-width:0px 0px 0px 0px;
box-sizing: border-box;
float: left;
}

.buttonarea{
position: absolute; /* 親を基準に絶対配置 */
bottom: 0; 
padding:0%;
width:80% ;
height:100px;
border:1px solid #FF0000;
box-sizing: border-box;
justify-content: center;
align-items: center;
}

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

a.button{
font-size: 90%;
float: right;
color: #000000;
aspect-ratio: 1/1;
display:flex;
justify-content: center;
align-items: center;
width:98%;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:1px dashed;
border-color:#000000;
background:#FFFFFF;
border-radius: 50%;
text-decoration: none;
writing-mode: vertical-rl;
text-orientation: upright;
left: auto;
right: 0;
z-index: 0;
animation: rotateAnimation2 45s linear infinite;
}

a.button:hover{
background:#FFFFFF;
color:#000000;
border:1px solid;
border-color:#000000;
background-image: url('01yamada.gif');
background-color: #FFFFFF;
background-size: 100%;
}

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

.buttoncircle{
font-size: 90%;
float: right;
color: #000000;
aspect-ratio: 1/1;
display:flex;
justify-content: center;
align-items: center;
width:50%;
text-align:center;
border:1px dashed;
border-color:#000000;
background:none;
border-radius: 50%;
text-decoration: none;
writing-mode: vertical-rl;
text-orientation: upright;
left: auto;
right: 0;
margin-top:1%;
bottom:1%;
animation: rotateAnimation 45s linear infinite;
}

.indexsph{
  display: none;
}


/* コメント、ここからスマホ*/

@media screen and (max-width:899px) {

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #3F8A2A;
}

.bigboxhead{
margin:auto;
margin-top:1%;
padding:0%;
width:96vw;
aspect-ratio: 1/1.1;
border:2px solid #FAE04B;
/*border-width:0px 0px 0px 0px;*/
overflow: hidden;
position: relative;
background-color: #FAE04B;
/*background-color: #FFFFFF;*/
border-radius: 1%;
}

.bigbox{
margin:auto;
margin-top:2%;
padding:0%;
width:96vw;
aspect-ratio: 1/1.1;
border:2px solid #FAE04B;
/*border-width:0px 0px 0px 0px;*/
overflow: hidden;
position: relative;
background-color: #FFFFFF;
background-color: #FAE04B;
border-radius: 1%;
}



h2{
  font-size: 80%;
  text-shadow: 
      0 0 1px rgba(154, 151, 151, 1.0), 
      0 0 10px rgba(255, 255, 255, 0.3),
      1px 1px 2px rgba(0, 0, 0, 0.2);
}

p{
margin-bottom:1em;
font-size: 80%;
}

img{
width:100%;
height: auto;
margin-left: auto;
margin-right: 0;
margin-top: 1%;
/*
margin-bottom: 0;
*/
}

.leftbox{
margin-top:0%;
margin-left:0%;
padding:0%;
width:10vw;
height:100%;
border:1px solid #000000;
/*border-width:2px 2px 2px 2px;*/
background-color: #3F8A2A;
background-color: #FFFFFF;
float: left;
border-radius: 1%;
}

.nobox{
margin:auto;
margin-top:3%;
color: #FFFFFF;
font-weight: 800;
width:94% ;
height:auto;
border:2px solid #000000;
border-width:0px 0px 0px 0px;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: #FFFFFF;
background-color: #3F8A2A;
border-radius: 1%;
}

.titlebox{
margin:0%;
color: #000000;
font-weight: 800;
padding-top:10%;
width:100% ;
height:auto;
writing-mode: vertical-rl;
text-orientation: upright;
border:1px solid #000000;
border-width:0px 0px 0px 0px;
display: flex;
align-items: center;
box-sizing: border-box;
background-color: #3F8A2A;
background-color: #FFFFFF;
border-radius: 1%;
}

.rightbox{
margin-top:0%;
margin-left:2vw;
width:81vw ;
height:50vh;
border:0px solid #000000;
/*border-width:0px 0px 0px 0px;*/
float: left;
box-sizing: border-box;
border-radius: 0%;
position: relative; /* 子要素（ボタン）の基準点として必須 */
}


.yyyymmddbox{
  /*
writing-mode: vertical-rl;
text-orientation: upright;
*/
margin-top:0%;
padding:0%;
width:100% ;
height:auto;
border:0px solid #000000;
/*border-width:0px 0px 0px 0px;*/
box-sizing: border-box;
font-weight: 700;
letter-spacing: -0.02em;
float: left;
}

a.button{
font-size: 80%;
color: transparent;
aspect-ratio: 1/1;
display:block;
justify-content: center;
align-items: center;
width:100%;
text-align:center;
border:0px solid;
border-color:#000000;
background-image: url('indexpicto8-021.png');
background-color:transparent;
/*background-color: #FAE04B;*/
background-size: 100%;
border-radius: 0%;
text-decoration: none;
writing-mode: vertical-rl;
text-orientation: upright;
animation: none !important;
margin-right: 0;
right: 0;
}
/*
a.button{
font-size: 80%;
color: #000000;
aspect-ratio: 1/1;
display:flex;
justify-content: center;
align-items: center;
width:50%;
text-align:center;
border:1px solid;
border-color:#000000;
background:#FFFFFF;
border-radius: 50%;
text-decoration: none;
writing-mode: vertical-rl;
text-orientation: upright;
bottom:1px;
}
*/
a.button:hover{
font-size: 80%;
color: transparent;
aspect-ratio: 1/1;
display:block;
justify-content: center;
align-items: center;
width:100%;
text-align:center;
border:0px solid;
border-color:#000000;
background-image: url('indexpicto8-021.png');
background-color:transparent;
/*background-color: #FAE04B;*/
background-size: 100%;
border-radius: 0%;
text-decoration: none;
writing-mode: vertical-rl;
text-orientation: upright;
bottom:1px;
}


.buttoncircle{
font-size: 90%;
float: right;
color: #000000;
display:hidden;
justify-content: none !important;
align-items: none !important;
width:50%;
height: auto;
border:0px solid;
border-color:#000000;
background-color:transparent;
background-color: #FAE04B;
border-radius: 0%;
text-decoration: none;
left: auto;
right: 0;
bottom: 0;
/*margin-top:1%;*/
animation: none !important;
position: absolute;
}

.kujirika3p2 {
filter: brightness(0) saturate(0%); 
/*opacity: 0.5;*/
}

.indexsph{
  display: block;
}

}