body
 { background:url(hototogisu.png);color: black; position: absolute;
top: 0;
left: 0 ;
right: 0 ;
bottom: 0; 
margin: 0  auto;
width: 940px;
}





/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
 
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 300px;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/
.slider-item01 {
    background-image:url(slider/syakai20251016-1.jpg);
}

.slider-item02 {
   background-image:url(slider/syakai20251016-2.jpg);
}

.slider-item03 {
    background-image:url(slider/syakai20251016-3.jpg);
}
.slider-item04 {
    background-image:url(slider/topics20251017-1.png); 

}

.slider-item05 {
   background-image:url(slider/topics20251017-2.png);

background-size: contain;
width:280px; height:280px;
}

.slider-item06 {
    background-image:url(slider/topics20251017-3.png );
background-size: contain;
width:280px; height:280px;

}
.slider-item07 {
    background-image:url(slider/kousaku20251020-1.png);
}

.slider-item08 {
   background-image:url(slider/kousaku20251020-2.png);
}

.slider-item09 {
    background-image:url(slider/kousaku20251020-3.png);
}


.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100%;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
    text-align:center;
  margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*========= レイアウトのためのCSS ===============*/
ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #fff;
}

a:hover,
a:active{
  text-decoration: none;
}

h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.wrapper{
  position: relative;
}

.container{
  background:#555;
}

.container p{
  padding: 300px 0; 
  text-align: center;
  color: #fff;
}
.left-box-1{
float: left;
width: 300px;
height: 300px;
border: 0;
margin-left: 0px;
}
.left-box-2{
float: left;
width: 300px;
height: 300px;
border: 0;
margin-left: 0px;
}
.left-box-3{
float: left;
width: 300px;
height: 300px;
border: 0;
margin-left: 0px;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3; /* 点滅の透明度 */
  }
  100% {
    opacity: 1;
  }
}


.katsudou {

display: flex;
  justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
 font-weight:bold;
color: white;
position:absolute;
left:0px;top:510px;
  background-color:#FF9900;
  border-radius: 10px;
  box-shadow: 0 5px 0 #FFCC00;
}
.katsudou:hover {
  color: black	;
  opacity: 0.6;
}

.koukai {

display: flex;
  justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
 font-weight:bold;
position:absolute;
left:0px;top:570px;
  background-color: #FF9900;
  color:white;
  border-radius: 10px;

  box-shadow: 0 5px 0 #FFCC00		;
}
.koukai:hover {
  color: black	;
  opacity: 0.6;
}

.kiroku {

display: flex;
  justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:18px;
  color: white;
font-weight:bold;
position:absolute;
left:0px;top:630px;
  background-color: #FF9900;
   border-radius: 10px;

  box-shadow: 0 5px 0 #FFCC00		;
}
.kiroku:hover {
  color:black	;
  opacity: 0.6;
}

.corona {

display: flex;
  justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:18px;
  color: white;
font-weight:bold;
position:absolute;
left:0px;top:690px;
  background-color:#FF00FF;
   border-radius: 10px;

  box-shadow: 0 5px 0 #FFBBFF		;
}
.corona:hover {
  color: #00F	;
  opacity: 0.6;
}


.topics {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:190px;top:510px;
  background-color: #0000FF;

   border-radius: 10px;
  box-shadow: 0 5px 0 #66CCFF	;
opacity: 1; /* 初期透明度 */
  animation: blink 2s ease-in-out infinite; /* アニメーションを適用 */
 
}

.topics:hover {
  color:red;
  opacity: 0.5;
}

.kikan {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:190px;top:570px;
  background-color: #0000FF;
    border-radius: 10px;
  box-shadow: 0 5px 0 #66CCFF	;

}
.kikan:hover {
  color: red;
  opacity: 0.5;
}
.minoo {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:18px;
  color: white;
font-weight:bold;
position:absolute;
left:190px;top:630px;
  background-color: #0000FF;
   border-radius: 10px;
  box-shadow: 0 5px 0 #66CCFF	;
}
.minoo:hover {
  color: red;
  opacity: 0.6;
}
.tenki {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:190px;top:690px;
  background-color:brown;
  border-radius: 10px;
  box-shadow: 0 5px 0 burlywood	;
}
.tenki:hover {
  color: #00F	;
  opacity: 0.6;
}


.kansatsunome {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:380px;top:510px;

  background-color: #008000;
    border-radius: 10px;
  box-shadow: 0 5px 0 #00CC00;

}
.kansatsunome:hover {
  color:#00ECFF;
  opacity: 0.6;


}


.chousa {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
position:absolute;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
left:380px;top:570px;
  background-color: #008000;

    border-radius: 10px;
  box-shadow: 0 5px 0 #00CC00;

}
.chousa:hover {
  color:#00ECFF;
  opacity: 0.6;
}
.shakai {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:380px;top:630px;
  background-color: #008000;
   border-radius: 10px;
  box-shadow: 0 5px 0 #00CC00;
opacity: 1; /* 初期透明度 */
  animation: blink 2s ease-in-out infinite; /* アニメーションを適用 */
}
.shakai:hover {
  color: #00ECFF;
  opacity: 0.6;
}
.necchuu {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
position:absolute;
font-family: serif;
font-size:18px;
  color: white;
font-weight:bold;
position:absolute;
left:380px;top:690px;
  background-color: #F00;
    border-radius: 10px;
  box-shadow: 0 5px 0 #C0C0C0	;
}
.necchuu:hover {
  color: #00F	;
  opacity: 0.6;
}

.kousaku {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:570px;top:510px;
  background-color: #800080;

    border-radius: 10px;

  box-shadow: 0 5px 0 #CC00FF;
 opacity: 1; /* 初期透明度 */
  animation: blink 2s ease-in-out infinite; /* アニメーションを適用 */
 
}
.kousaku:hover {
  color: yellow;
  opacity: 0.6;
}
.hiroba {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:570px;top:570px;
  background-color: #800080;

  border-radius: 10px;
  box-shadow: 0 5px 0 #CC00FF;

}
.hiroba:hover {
  color: yellow;
  opacity: 0.6;
}
.kitei {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:570px;top:630px;
  background-color: #800080;

  border-radius: 10px;
  box-shadow: 0 5px 0 #CC00FF;
}
.kitei:hover {
  color:yellow;
  opacity: 0.6;
}
.norikae {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:570px;top:690px;
  background-color: brown;
  border-radius: 10px;
  box-shadow: 0 5px 0 burlywood;
}
.norikae:hover {
  color: blue;
  opacity: 0.6;
}

.keiji {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:760px;top:630px;
  background-color: #808000;
  border-radius: 10px;
  box-shadow: 0 5px 0 #000000;
}
.keiji:hover {
  color:#FFF;
  opacity: 0.6;
}
.kensaku {
display: flex;
justify-content: center;
  align-items: center;
  width:150px;
 height:50px;
font-family: serif;
font-size:24px;
  color: white;
font-weight:bold;
position:absolute;
left:760px;top:690px;
  background-color: #00FF00;
  border-radius: 10px;
  box-shadow: 0 5px 0 #996666	;
}
.kensaku:hover {
  color: black	;
  opacity: 0.6;
}




.katsudou-sp {

display: flex;
  justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
 font-weight:bold;
color: white;

  background-color:#FF9900;
  border-radius: 10px;
  box-shadow: 0 5px 0 #FFCC00;
position:absolute;
left:0px;top:530px;
}
.katsudou-sp:hover {
  color: black	;
  opacity: 0.6;
}
.topics-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:305px;top:530px;
  background-color: #0000FF;


   border-radius: 10px;
  box-shadow: 0 5px 0 #66CCFF	;
opacity: 1; /* 初期透明度 */
  animation: blink 2s ease-in-out infinite; /* アニメーションを適用 */

}

.topics-sp:hover {
  color:red;
  opacity: 0.5;
}


.kansatsunome-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:610px;top:530px;

  background-color: #008000;
    border-radius: 10px;
  box-shadow: 0 5px 0 #00CC00;


}
.kansatsunome-sp:hover {
  color:#00ECFF;
  opacity: 0.6;
}
.chousa-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
position:absolute;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
left:0px;top:650px;
  background-color: #008000;

    border-radius: 10px;
  box-shadow: 0 5px 0 #00CC00;

}
.chousa-sp:hover {
  color:#00ECFF;
  opacity: 0.6;
}
.shakai-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:305px;top:650px;
  background-color: #008000;
   border-radius: 10px;
  box-shadow: 0 5px 0 #00CC00;
opacity: 1; /* 初期透明度 */
  animation: blink 2s ease-in-out infinite; /* アニメーションを適用 */
}
.shakai-sp:hover {
  color: #00ECFF;
  opacity: 0.6;
}

.kousaku-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:610px;top:650px;
  background-color: #800080;
    border-radius: 10px;
  box-shadow: 0 5px 0 #CC00FF;
opacity: 1; /* 初期透明度 */
  animation: blink 2s ease-in-out infinite; /* アニメーションを適用 */
 
}
.kousaku-sp:hover {
  color: yellow;
  opacity: 0.6;

}

.koukai-sp {

display: flex;
  justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
position:absolute;
left:0px;top:770px;
 font-weight:bold;
  background-color: #FF9900;
  color:white;
  border-radius: 10px;

  box-shadow: 0 5px 0 #FFCC00		;
}
.koukai-sp:hover {
  color: black	;
  opacity: 0.6;
}

.kikan-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:305px;top:770px;
  background-color: #0000FF;
    border-radius: 10px;
  box-shadow: 0 5px 0 #66CCFF	;

}
.kikan-sp:hover {
  color: red;
  opacity: 0.5;
}
.minoo-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60p;
  color: white;
font-weight:bold;
position:absolute;
left:610px;top:770px;
  background-color: #0000FF;
   border-radius: 10px;
  box-shadow: 0 5px 0 #66CCFF	;
}
.minoo-sp:hover {
  color: red;
  opacity: 0.6;
}

.hiroba-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:0px;top:890px;
  background-color: #800080;

  border-radius: 10px;
  box-shadow: 0 5px 0 #CC00FF;

}
.hiroba-sp:hover {
  color: yellow;
  opacity: 0.6;
}

.kitei-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:305px;top:890px;
  background-color: #800080;
  border-radius: 10px;
  box-shadow: 0 5px 0 #CC00FF;
}
.kitei-sp:hover {
  color:yellow;
  opacity: 0.6;
}

.kiroku-sp {

display: flex;
  justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:40px;
  color: white;
font-weight:bold;
position:absolute;
left:610px;top:890px;
  background-color: #FF9900;
   border-radius: 10px;

  box-shadow: 0 5px 0 #FFCC00		;
}
.kiroku-sp:hover {
  color:black	;
  opacity: 0.6;
}

.tenki-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:0px;top:1010px;
  background-color:brown;
  border-radius: 10px;
  box-shadow: 0 5px 0 burlywood	;
}
.tenki-sp:hover {
  color: #00F	;
  opacity: 0.6;
}

.necchuu-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
position:absolute;
font-family: serif;
font-size:40px;
  color: white;
font-weight:bold;
position:absolute;
left:305px;top:1010px;
  background-color: #F00;
    border-radius: 10px;
  box-shadow: 0 5px 0 #C0C0C0	;
}
.necchuu-sp:hover {
  color: #00F	;
  opacity: 0.6;
}

.keiji-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:610px;top:1010px;
  background-color: #808000;
  border-radius: 10px;
  box-shadow: 0 5px 0 #000000;
}
.keiji-sp:hover {
  color:#FFF;
  opacity: 0.6;
}

.norikae-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:0px;top:1130px;
  background-color: brown;
  border-radius: 10px;
  box-shadow: 0 5px 0 burlywood;
}
.norikae-sp:hover {
  color: blue;
  opacity: 0.6;
}

.corona-sp {

display: flex;
  justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:40px;
  color: white;
font-weight:bold;
position:absolute;
left:305px;top:1130px;
  background-color:#FF00FF;
   border-radius: 10px;

  box-shadow: 0 5px 0 #FFBBFF		;
}
.corona-sp:hover {
  color: #00F	;
  opacity: 0.6;
}

.kensaku-sp {
display: flex;
justify-content: center;
  align-items: center;
  width:300px;
 height:100px;
font-family: serif;
font-size:60px;
  color: white;
font-weight:bold;
position:absolute;
left:610px;top:1130px;
  background-color: #00FF00;
  border-radius: 10px;
  box-shadow: 0 5px 0 #996666	;
}
.kensaku-sp:hover {
  color: black	;
  opacity: 0.6;
}



a {
  text-decoration: none;
}


span.welcome17{ position: absolute; top: 435px; left:0px; font-size:x-large;width:280px;}
span.welcome22{ position: absolute; top: 35px; left:0px; font-size:large;width:280px;}
span.welcome19{ position: absolute; top: 435px; left:300px; font-size:x-large;width:280px;}
span.welcome20{ position: absolute; top: 35px; left:0px; font-size:large;width:280px;}
span.welcome21{ position: absolute; top: 435px; left:600px; font-size:x-large;width:280px;}
span.welcome22{ position: absolute; top: 35px; left:0px; font-size:large;width:280px;}


.relative{position:relative;width:150px;}
.absolute{position:absolute;left:40px;top:30px:}

.pc-only {
  display: block;          /* 通常時は表示 */
}

/* スマホでのみ表示（PCでは非表示） */
.sp-only {
  display: none;           /* 通常時は非表示 */
}

/* スマホサイズ（768px未満）の設定 */
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .pc-only {
    display: none;        /* スマホサイズでは非表示 */
  }
  
  .sp-only {
    display: block;       /* スマホサイズでは表示 */
  }
}

.pc-only2 {
  display: block;          /* 通常時は表示 */
}

/* スマホでのみ表示（PCでは非表示） */
.sp-only2 {
  display: none;           /* 通常時は非表示 */
}
/* スマホサイズ（768px未満）の設定 */
@media only screen and (min-width: 375px) and (max-width: 768px) {
  .pc-only2 {
    font size: 7;        /* スマホサイズでは非表示 */
  }
  
  .sp-only2 {
    font size: xx-large;       /* スマホサイズでは表示 */
  }
}