@charset "UTF-8";
html{font-size: 100%;}
a{text-decoration: none;}
img{max-width: 100%;}
/*レイアウト*/
.wrapper{max-width: 1020px;margin: auto;padding: 0 1.5rem;}
.align-center{text-align: center;}
/*ヘッダーとホーム*/
header{margin-bottom: 0;}
.page-header{padding-top: .5rem;}
.logo{width: 350px; border-style: outset;border-color: #b5b5b5; border-width: 5px;}
.logo:hover{opacity: 0.5;}
.lang-select{position: absolute;top: 15px;right: 20px; text-decoration: underline;font-size: xx-small;}
.main-nav{display: flex;justify-content:center;gap: 2.5rem;font-size: 0.9rem;list-style: none;padding-left: 0;}
.main-nav a{color: #000000;}
.main-nav a:hover{color: #0bd;}
.main-nav li{text-align: center;}
body{background-color: #c3f2ff;margin: 0;padding: 0;}
.backwhite{background-color: #fff; border-radius: 16px;opacity: 0.9;}
.news{height: 80px;background-color: #c3f2ff;
	overflow-y: scroll;border-style: double;}

/*文字*/
h2{font-size: 30px ;text-align:center;font-family: "Zen Maru Gothic", serif;font-weight: 500;font-style: normal;padding-top: 20px;padding-bottom: 20px;margin: 0;}
h3{border-bottom: 1px solid; margin: 30px 10px 0;font-family: "Zen Maru Gothic", serif;font-weight: 500;font-style: normal}
p,th,td{color: #000000;  font-family: "Zen Maru Gothic", sans-serif;font-style:normal;font-weight: 500;}
a{font-family: "Zen Maru Gothic", sans-serif;font-style:normal;font-weight: 500;}
p a:hover{opacity: 0.5;}
.niteiru{font-size: large;font-weight: bold;margin: 10px auto;}

/*ボタン*/
.email{padding: 1.5rem 2.5rem 2.5rem;}
.btn{display: inline-block;
    font-size: 1.2rem;
    background-color: rgb(70, 201, 224);
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn:hover{background-color: rgb(0, 139, 163);}
.btn2{display: inline-block;
    font-size: 1.2rem;
    background-color: #ff8000;
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn2:hover{background-color: #ff4400;}
.btn3{display: inline-block;
    font-size: 1.2rem;
    background-color: #0095ff;
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn3:hover{background-color: #002aff;}
.btn4{display: inline-block;
    font-size: 1.2rem;
    background-color: #ffffff;
    color: #000000;
    border:#000 1px solid;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn4:hover{background-color: rgb(163, 163, 163);}

/*写真*/
.picture{border-radius: 8px;}/*最初の6枚*/
.mihon{display: grid;grid-template-columns: repeat(2,1fr);gap: .2rem .2rem}/*最初の６枚の２枚ずつ指定*/
.top-img{border-radius: 10px;}
.niteiru-img1{border-radius: 10px;border: #0b5394 solid 10px;}
.niteiru-img2{border-radius: 10px;border: #bf9000 solid 10px;}
.niteiru-img3{border-radius: 10px;border: #660000 solid 10px;}

.img-gaiyo{width: 80%;}


/*概要の横並び*/
.box-yoko{display: flex;gap: 0;background-color: #0b5394;border-radius: 20px;}
.box-yoko02{display: flex;gap: 0;background-color: #bf9000;border-radius: 20px;}
.box-yoko03{display: flex;gap: 0;background-color: #660000;border-radius: 20px;}
.box-yoko1{margin: 40px auto 20px;}
.box-yoko2{margin: 40px auto 20px;}
.box{width: 50%;margin: 20px auto;}
.box1{text-align: center;}
.box3{margin-top: 30px;}

/*最初のスライドショー*/
.slide-back{padding-top: 30px;background-color: #002e3b;border-radius: 16px;}
/* ↓ スライドの外枠 */
.slide-wrapper {
  width: 92%;
  margin: auto;
  padding: 10px auto;
  height: auto;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
}
/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
  width: 600%;
  height: auto;
  display: flex;
  transition: all 1.3s;
}
.slide div { /* スライド */
  width: 20%;
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.slide img{
  width: auto;
  height: 100%;
}
.slide1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}
.slide2 { /* スライドさせるために必要なクラス */
  transform: translateX(-16.6667%);
}
.slide3 { /* スライドさせるために必要なクラス */
  transform: translateX(-33.3334%);
}
.slide4 { /* スライドさせるために必要なクラス */
  transform: translateX(-50.0001%);
}
.slide5 { /* スライドさせるために必要なクラス */
  transform: translateX(-66.6668%);
}
.slide6 { /* スライドさせるために必要なクラス */
  transform: translateX(-83.3335%);
}
/* ↓ 左右のボタン */
.next {
  position: absolute;
  width: 5px;
  height: 5px;
  right: 5px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}
.prev {
  position: absolute;
  width: 5px;
  height: 5px;
  left: 5px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}
/* ↓ インジケーター */
.indicator {
  padding-left: 0;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 5px;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  margin: auto;
}
.indicator li {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}
.indicator li:first-of-type {
  background-color: #000;
}

/*ギャラリー*/
.grid{display: grid;gap: 0.1rem 0.5rem;grid-template-columns: repeat(2,1fr);text-align: center;}
.grid1{display: grid;gap: 0.1rem 0.5rem;grid-template-columns: repeat(3,1fr);text-align: center;}
.grid-im img{aspect-ratio: 1/1;object-fit: cover;border-radius: 5px;border: 2px solid #000;}
.grid-im img:hover{transform:scale(1.03);margin: 0 auto;}
.grid-img img{aspect-ratio: 4/3;object-fit: cover;border-radius: 5px;border: 2px solid #000;}
.grid-img img:hover{transform:scale(1.03);margin: 0 auto;}
.grid2{display: grid;gap: 0.5rem 0.5rem;grid-template-columns: repeat(3,1fr);text-align: center;}
.grid3{display: grid;gap: 0.5rem 0.5rem;grid-template-columns: repeat(5,1fr);text-align: center;}


/*画像横スクロール*/
.gaiyo{width: 90%;
  margin: auto;
  display:flex;
  overflow-x:scroll;
}
.gaiyo-img{min-width: 140%;
  height: auto;
  margin-top: 8px;
  margin-bottom: 10px;
}
.gaiyo-image{
  object-fit: contain;
  overflow-x:scroll;
  gap: 0;
}

/*表*/
table{margin: auto; text-align: center;}
.table-scroll{overflow-y:auto;height: 200px;}
.table-scroll2{overflow-y:auto;height: 200px;}
.table-scroll3{overflow-x:auto; width: 650px;}
thead{position:sticky;top:0;left: 0;border-top: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;}
tbody{overflow-x: hidden;
    overflow-y: scroll;}
.table-scroll table{width: 100%;border-collapse:separate; }
.table-scroll2 table{width: 100%;border-collapse:separate; }
.table-scroll3 table{width: 650px;border-collapse: separate;}
table,th,td{border-style: solid; border-color: #000000; border-width: 1px;}
ul li{word-break: break-all;}

/*デスクトップ版*/
@media(min-width:820px){
    .slide-back{padding-top: 40px;margin: auto;padding-left:1.5rem;padding-right: 1.5rem;max-width: 1020px;}
    .slide-wrapper {width: 75%;}
    .page-header{display: flex;justify-content: space-between;padding-top: 1.5rem;}
    .lang-select{font-size:medium;}
    .main-nav{margin-top: 80px;}
    .honbun{width: 800px;margin: auto;}
    .next {width: 12px;height: 12px;right: 5px;}
    .prev {width: 12px;height: 12px;left: 12px;}
    .grid{gap: 0.1rem 0.5rem;grid-template-columns: repeat(6,1fr);text-align: center;}
    .grid1{gap: 0.5rem 0.5rem;grid-template-columns: repeat(8,1fr);text-align: center;}
    .grid2{gap: 0.5rem 0.5rem;grid-template-columns: repeat(4,1fr);text-align: center;}
    .grid3{gap: 0.5rem 0.5rem;grid-template-columns: repeat(6,1fr);text-align: center;}
    .news{width: 800px;margin: auto;}
    .scroll-content{max-width: 800px;}
    .scroll-content li {width: 28%;} 
    .scroll-content1 li {height: 60%;width: 15px;height: 15px;right: 10px;}
    .prevs {position: absolute;width: 15px;height: 15px;left: 25px;}
    .top-img{width: 80%;}
    .gaiyo{height: 430px;}
    .gaiyo-img{min-width: 90%;margin-top: 22px;}
    .gaiyo-image{width: fit-content;}
    .mihon{width: 70%;}
    .table-scroll{width: 70%;margin: auto;}
    .table-scroll table{width: 100%;margin: 0;}
    .table-yoko{display: flex;justify-content: space-around;}
    .table-scroll2{width: 100%;margin: auto;}
    .table-scroll2 table{width: 100%;margin: 0;}
    .box-yoko1{display: flex;gap:50px;}
    .box-yoko2{display: flex;gap:20px;}
    .box1{width: 50%;margin: 20px auto;}
    .box2{width: 41%;}
    .box3{width: 59%;margin: 0px;}
}