html{
 scroll-behavior: smooth;
}

/* 全体設定 */
.css-carousel-slider4 {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}
.css-carousel-slider4 img {
    width: 100%;
    height: auto ;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider4 .slide-wrap {
    width: 400%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider4 {
    0% { transform: translateX(0); }

    20% { transform: translateX(calc(1 / 4 * -100%)); }
    25% { transform: translateX(calc(1 / 4 * -100%)); }

    45% { transform: translateX(calc(2 / 4 * -100%)); }
    50% { transform: translateX(calc(2 / 4 * -100%)); }

    70% { transform: translateX(calc(3 / 4 * -100%)); }
    75% { transform: translateX(calc(3 / 4 * -100%)); }

    95% { transform: translateX(calc(4 / 4 * -100%)); }
    100% { transform: translateX(calc(4 / 4 * -100%)); }
}

@keyframes css-carousel-slider-main4 {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}


header {
		height: 5px;
		background-color: #fffffc;
		display: grid;
		justify-content: center;
		align-content: center;
	}
	.return_top {
		background-color: #fbfaf5;
		color: #b44c97;
		text-decoration: none;
		position: fixed;
		right: 15px;
		bottom: 50px;
		width: 60px;
		height: 60px;
		border: none #d4acad;
		border-radius: 50%;
		display: grid;
		justify-content: center;
		align-content: center;
		
                /*
                transform: rotate(-90deg);
		*/
                
                transition: .4s;
		opacity: 0;
		visibility: hidden;
	}
	.return_top.active {
		opacity: 0.75;
		visibility: visible;
	}



.main_button{
 background: #b44c97; 
 color: #ffffff; 
 border-radius: 0.25em; 
 padding: 1em 1.1em 0.8em; 
 line-height:1; display: inline-block; 
 margin: 10px 1px 1px 1px; 
 text-decoration: none; 
}
/*
.main_button:hover {
 color: #ffffff;
 opacity: 0.8;
}
*/
.haidan_button{
 background: #4169e1;
 color:#ffffff; 
 border-radius: 2.5em; 
 padding: 1em 1.5em 0.8em; 
 line-height:1; 
 display: inline-block; 
 margin: 10px 1px 1px 1px; 
 text-decoration: none;
}
/*
.haidan_button:hover {
 color: #ffffff;
 opacity: 0.8;
}
*/
.jidou_button{
 background: #f8b500;
 color: #ffffff;
 border-radius: 2.5em 0.3em;
 padding: 1em 2em 0.8em;
 line-height:1;
 display: inline-block;
 margin: 10px 1px 1px 1px;
 text-decoration: none;
}
/*
.jidou_button:hover {
 color: #ffffff;
 opacity: 0.8;
}
*/
.info_button{
  background: #fbfaf5; 
  color: #000000;
  border-radius: 1.5em;
  padding: 1em 2em 0.8em;
  line-height:1;
  display: inline-block;
  margin: 10px 1px 1px 1px;
  text-decoration: none;
}

.link_button{
  background: #fbfaf5;
  color: #000000;
  border-radius: 0.25em;
  padding: 0.7em 1em 0.5em;
  line-height:1;
  display: inline-block; 
  margin: 5px 1px 1px 1px;
  text-decoration: none;
}

.linkage{
  background: #bc64a4; 
  color: #ffffff;
  border-radius: 0.25em;
  padding: 0.7em 1em 0.5em;
  line-height:1;
  display: inline-block; 
  margin: 5px 1px 1px 1px;
  text-decoration: none;
}

.top_button{
 background: #b44c97; 
 color: #ffffff; 
 border-radius: 3em 3em 0em 0em;
 padding: 1.5em 1em 0.8em; 
 line-height:0.5em; 
 display: inline-block; 
 margin: 0.5em 0.5em 0 0; 
 text-decoration: none;" 
}






/*
@media screen and (min-width:1024px){
 .main_button{ 
   background-color: #ccc; 
} 
@media (any-hover: hover) {
 .main_button:hover {
  background-color: #f0f0f0; 
} 
*/


@media screen and (min-width:1024px){
 .main_button{ 
   background-color: #b44c97; 
} 
@media (any-hover: hover) {
 .main_button:hover {
  color: #ffffff;
  opacity: 0.8; 
} 

@media screen and (min-width:1024px){
 .haidan_button{ 
   background-color: #4169e1; 
} 
@media (any-hover: hover) {
 .haidan_button:hover {
  color: #ffffff;
  opacity: 0.8; 
}

@media screen and (min-width:1024px){
 .jidou_button{ 
   background-color: #f8b500; 
} 
@media (any-hover: hover) {
 .jidou_button:hover {
  color: #ffffff;
  opacity: 0.8;
}

@media screen and (min-width:1024px){
 .info_button{ 
   background-color: #fafbf5; 
} 
@media (any-hover: hover) {
 .info_button:hover {
  color: #ffffff;
  background: #eae5e3;
}

@media screen and (min-width:1024px){
 .link_button{ 
   background-color: #fbfaf5; 
}
@media (any-hover: hover) {
 .link_button:hover {
  color: #000000;
  background: #eae5e3;
}

@media screen and (min-width:1024px){
 .linkage{ 
   background-color: #bc64a4; 
}
@media (any-hover: hover) {
 .linkage:hover {
  color: #ffffff;
  background: #e5abbe;
}

@media screen and (min-width:960px){
 .return_top{ 
   background-color: #fbfaf5; 
} 
@media (any-hover: hover) {
 .return_top:hover {
   background-color: #b44c97; 
   color: #ffffff;
   opacity: 0.75; 
/*
}
table{
    border-collapse: collapse;
}
th,td{
    border:1px solid #000000;
}
*/