@charset "utf-8";
html{
    font-size: 16px;
}

/**{*/
/*outline:1px solid red;*/
/*}*/

body{
    color:black;
	font:'Noto Sans JP';
    /*font-family: sans-serif;*/
    letter-spacing: 2px;
    margin:0;
    min-width: 1024px;
  /*height:100vh;*/
}

/************************** Base style. 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
****************************************/

h1{
    /*margin-right:30px;*/
	color:teal;
    margin: 0px 0px 0px 0px;
}
h2{
    font-size: 30px;
    font-family:Arial,sans-serif;
    color:#2F5D50;
	position: relative;
	z-index:3;		/*toukasasenai*/

}
h3{
    font-weight: normal;
    border-top: 1px solid #a2be67;
    border-bottom: 5px double $a2be67;
    padding: 5px;
    margin-bottom: 30px;
	position: relative;
	z-index:3;		/*toukasasenai*/
}

strong{
    font-size: 180%;
	height:30px;
    color:#ff6900;			/*orange-#ff6900-pink-#ff1fdc*/
	margin-top:0px;
}

p{
    line-height: 1.5;
	position: relative;
	z-index:3;			/*toukasasenai*/
}

header{
    border-bottom: 0px dotted #33ff99;
    padding:0px 0;
	height:106px;
    background-size:cover;
    background-color:#ffffff;
    /*background-color:#eef6f4;*/
    margin: 0 auto;                <!--割と大事なみたい-->
}

.header_box{
    display:flex;
    width:100vw;
    justify-content:flex-start;
    align-items: flex-start;
    padding-left: 10px
}

footer{
    /*background-color: #ffcccc;*/
    background-size:cover;
    padding:0;
    margin:0;
	height:60px;
}
.box-foot{
	display:block;
  	text-align:center;
  	height:43px;
  	width:360px;
    padding:0px 0px 0px 48px;
  	background-color:#ffffff;
}

.transform-bg {
  position: absolute;
	/*position: relative;*/
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /*width: 60%;*/
  width: 100%;
  height: 56%;		/*73%*/
  z-index: 0;
  background-color:#204f39;		/*#4c9b9d-#184b64-#003f8e-#273BE2-#9896f0*/
  /*background:#f1f2ed;*/
  transform: skewY(2.3deg);
  transform-origin: top left;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  /*position: absolute;*/
  z-index: 1;
  text-align:left;			/*Daiji*/
}


ul li.returnhm a:visited{
    color: #000000;
	font-size:14px;							padding: :10px;
}
ul li.returnhm a:hover{
    color:#5e00ff;
	font-size:14px;
    padding: 10px;
    background-color: #CAC873;
        border-radius:30px;
 }
ul li.returnhm a{
	font-size:14px;
    transition-duration: 0.5s;
}

/***********************************************************************/
main{
	position: relative;
  		/*height:80vh;*/
	height:560px;
    padding:0;
}

.bg{
  position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:550px;
background-image:url('https://x10s-eyeski.tokyo/xs/images/hyotan.jpg');		<!--★★★-->
/*background-size:80% auto;*/
background-size:cover;
					/*background-repeat:no-repeat;*/
background-repeat:repeat;
	z-index:1;
}
.bg::after{						/*半透明*/
	content:"";
  position: absolute;
	z-index:2;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:white;
	opacity:0.6;
}

/********************************************************/
@media screen and (max-width:768px){
	.mob{
		width:100%;
	}
	.mob > div.bg{
		height:115%;				/*chousei*/
	}
}
/********************************************************/

.main_box{
	width:100vw;
}

td,th{
    border:1px solid #486b0b;
    padding:5px 30px;
}
th{
    color:#486b0b;
}
table{
    border-collapse: collapse;
    margin-bottom: 30px;
}

div.item{
	width: 73%;
	height:200px;
	padding:0px 5px 0px 23px;
	margin-bottom: 50px;
}

.item_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	height:30%;
}

section{
	position: absolute;
	top:0%;
	left:15%;
}

/********************************************************/
@media screen and (max-width:768px){
.sumaho{
	width:100%;
	}
.sumaho > section{
	position: absolute;
	top:0%;
	left:3%;
	}
.sumaho > section > div.item_box{
	height:45%;	
	}
.sumaho > section > div.item_box > div.item{
	width:80%;				/*50%*/
	height:100%;
	}
.sumaho > section > div.basho{
	position: absolute;
	top:98%;
	/*left:2%;*/
	padding:10px 10px 10px 12%;	
	}
.sumaho > section > div.basho2{
	position: absolute;
	top:118%;
	/*left:5%;*/
	padding:10px 10px 10px 23%;	
	}
}
/********************************************************/
.item img{
    border-radius: 10%;
}

.basho{
    display:inline-block;
	padding:10px 10px 10px 59%;			/*38*/
}
.basho2{
    display:inline-block;
	padding:10px 10px 10px 136%;			/*115*/
}

/* 星のスタイル */
.star {
 	position: relative;
	z-index:3;				/*toukasasenai*/
	width: 0px;
	height: 0px;
	border-bottom: 50px solid #579e3a;
	border-right: 75px solid transparent;		/*#6efd30_75*/
	border-left: 75px solid transparent;		/*75*/
	transform: rotate(-37deg);
  animation: twinkle 3s infinite;		/*5s*/	
}

.star::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75px;					/*-75*/
	border-bottom: 50px solid #579e3a;
	border-right: 75px solid transparent;		/*75*/
	border-left: 75px solid transparent;		/*75*/
	transform: rotate(-71.5deg);			/*-71.5*/
}

.star::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75px;
	border-bottom: 50px solid #579e3a;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(71.5deg);			/*71.5*/
}

/* 星のスタイル2 */
.star2 {
 	position: relative;
	z-index:3;
	width: 0px;
	height: 0px;
	border-bottom: 50px solid #b028de;
	/*border-bottom: 50px solid #ba55d3;*/
	border-right: 75px solid transparent;		/*#ef00ff_75*/
	border-left: 75px solid transparent;		/*75*/
	transform: rotate(-37deg);
  animation: twinkle 5s infinite;		/*5s*/	
}

.star2::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75px;					/*-75*/
	border-bottom: 50px solid #b028de;
	/*border-bottom: 50px solid #ba55d3;*/
	border-right: 75px solid transparent;		/*75*/
	border-left: 75px solid transparent;		/*75*/
	transform: rotate(-71.5deg);			/*-71.5*/
}

.star2::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75px;
	border-bottom: 50px solid #b028de;
	/*border-bottom: 50px solid #ba55d3;*/
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(71.5deg);			/*71.5*/
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}
/**********************************************************/
ul{
    font-size: 16px;

    list-style-type: none;
    padding: 0;
    display:flex;
    /*width:1000px;*/
    justify-content: space-between;
}
ul, ol {
  margin-bottom: 1em;
  padding-left: 22px;
}

ul ul, ul ol, ol ul, ol ol {
    margin-bottom: 0;
}

ul li {
  list-style: disc outside none;
    list-style: none;
}

ul li li {
    list-style: circle outside none;
}

ol li {
  list-style: decimal outside none;
}

ul.unstyled, ol.unstyled {
  margin: 0;
  padding: 0;
}
ul.unstyled li, ol.unstyled li {
    margin: 0;
    padding: 0;
    list-style: none;
}

<!--li{-->
	<!--color:#ffffff;-->
<!--}-->
ul a:link{
    color:#000000;
    text-decoration: none;
    padding: 10px;
}

/*******************************************************************/
ul li a.col1:visited{
    color: #ffffff;
    padding: :10px;
}
ul li a.col1:hover{
    color:#000000;
    padding: 10px;
    background-color:#ff9933;
    border-radius:20px;
}
ul li a.col1{
	transition-duration:30ms;
	color:#ffffff;
    padding: 10px;
    background-color:#0066ff;
    border-radius: 20px;
}
/********************************************************/
ul li a.col2:visited{
    color: #ffffff;
    padding: :10px;
}
ul li a.col2:hover{
    color:#000000;
    padding: 10px;
    background-color: #ff99cc;
    border-radius:20px;
}
ul li a.col2{
	transition-duration:30ms;
	color:#ffffff;
    padding: 10px;
    background-color:#0066ff;
    border-radius: 20px;
}
/***********************************************************/
ul li a.col3:visited{
    color: #ffffff;
    padding: :10px;
}
ul li a.col3:hover{
    color:#000000;
    padding: 10px;
    background-color: #00ff00;
    border-radius:20px;
}
ul li a.col3{
	transition-duration:30ms;
	color:#ffffff;
    padding: 10px;
    background-color:#0066ff;
    border-radius: 20px;
}
/********************************************************/
ul li a.col4:visited{
    color: #ffffff;
    padding: :10px;
}
ul li a.col4:hover{
    color:#000000;
    padding: 10px;
    background-color:#ffff00;
    border-radius:20px;
}
ul li a.col4{
	transition-duration:30ms;
 	color:#ffffff;
    padding: 10px;
    background-color:#0066ff;
    border-radius: 20px;
}
/**********************************************************/
<!--ul a{-->
    <!--transition-duration: 0.5s;-->
<!--}-->

.left_box{
    align-items: flex-start;
    justify-content: flex-start;
                                        <!--align-content: flex-start;アイテムでもコンテントでも同じの様子-->
}
.center_box{
    display: flex;
    justify-content:flex-start;
    align-items: flex-start;
    <!--margin-left: 30px;-->
    }
.right_box{
    justify-content:flex-end;
    align-items:flex-start ;
    margin-left: 30px;
}
.item2_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.data{
    width:800px;
}

/**************************************************************************/
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 7% { opacity:1; }
 19% { opacity:1; }
 31% { opacity:0; }
 43% { opacity:0; }
text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 7% { opacity:1; }
 19% { opacity:1; }
 31% { opacity:0; }
 43% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 7% { opacity:1; }
 19% { opacity:1; }
 31% { opacity:0; }
 43% { opacity:0; }
}
h4{
   font:明朝フォント;
    font-size:20px;
    color:black;
}
.item3_box{
    display:flex;
}
.item3{
    display:block;
    width:400px;
}
.item4{
    flex-wrap:wrap;
    justify-content: flex-start;

}
.PictureRotate2{
    transform: rotate(360deg);
    transition: 1s;
}

/*******************************************************************/
.confetti {
  position: relative;
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);
  border-radius: 6px;
  <!--background: #000;-->
    background: #ffffff;
  width: 200px;
  height: 200px;
}

.confetti > span {
  display: block;
  position: absolute;
  opacity: 0;
}

.confetti > span > span {
  display: block;
  width: 100%;
  height: 100%; }

.confetti > span > span > span {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}