@charset "utf-8";

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
html {
  height: 100%;
  background: linear-gradient(0deg, #383d95, #130532) no-repeat #383d95;
  
}

body {
    color:#333;
  margin: 0;
  overflow: hidden;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  /* height: 100%; */
}

:root {
  --hue: 230;
  --sky-from: hsl(var(--hue) 35% 6%);
  --sky-to:   hsl(var(--hue) 55% 12%);
}

/* body {
  margin: 0;
  overflow: hidden;
} */

.sky {
  position: fixed;
  inset: 0;
  
  pointer-events: none;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 40%, rgba(255,255,255,0) 70%);
  opacity: var(--base-opacity, .65);
  animation: twinkle var(--twinkle, 2.2s) ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s) * -1);
}

@keyframes twinkle {
  0%, 100% { opacity: .6; transform: scale(1); }
  40%      { opacity: .2; }
  70%      { opacity: 1; transform: scale(1.1); }
}

body{
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-feature-settings: "palt";
    color: #333;
    /* background-color: rgb(0, 7, 56); */
}

#header{
    background-image:url("../images/header_star_back.gif");
    background-position: center;
    height: 250px;
   
    margin-bottom: 100px;
}
h1 img.hoshizora{
    width: 50%;
    display: block;
    padding:20px 0 30px 0;
    margin: auto;
} 

/* #header h1{
text-align: center;
color:aqua;
}
 */
.Wraper{
    width:100%;
    margin:auto;
   background-image: linear-gradient(0deg, #383d95, #130532);
   position: relative;
}

.main{
    width: 100%;
    margin: auto;
    max-width: 1000px;
}
.main-img{
    max-width: 1000px;
    display: block;
    margin:auto;
    padding-bottom: 10px;
    width: 100%;

}

.main-img img.mainView{
    width: 100%;
}
h2.Catch-copy{
    text-align: center;
    color:#fff;
    padding-top: 80px;
    font-size:3em;
    height: 261px;
    text-wrap: balance;
    margin-bottom: 50px;
background-image:url(../images/pleades.png); 
background-repeat:no-repeat;
background-position: center top;
}

/* 画像を並べるグリッドコンテナ */
    .gallery {
      width: 960px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px; /* 画像同士の間隔 */
      justify-content: center; /* 中央寄せ（お好みに合わせて） */
      margin: auto;
      margin-bottom:50px;
    }

    /* 各画像とタグを包む親要素 */
    .image-card {
      position: relative; /* タグの配置基準 */
      width: 100%;        /* スマホ時は画面幅いっぱいに */
      max-width: 350px;   /* PCなどの大画面での最大幅 */
      width: calc((100% - 16px * 5) / 3 );
      box-sizing: border-box;
      margin-bottom: 20px;
    }

    /* 画像自体のレスポンシブ対応 */
    .image-card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .image-card p{
        color:#fff;
        font-size: 1.4em;
        text-align: right;
    }
  .tate-ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.tate-ribbon {
  --f: .4em; /* control the folded part*/
  --r: .2em; /* control the ribbon shape */
  z-index: 1;
  position: absolute;
  left: 20px;
  /* top: calc(-1*var(--f)); */
  top:-11px;
  padding: .2em;
  background: #ff0;
  border-right: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 100%,calc(50% - var(--f)/2) calc(100% - var(--r)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) var(--f),100% var(--f)); 
}
.tate-ribbon.Gr {
background: #5fc36f;
}

.tate-ribbon.Pu {
background: #b333b3;
}

.tate-ribbon.Bu {
background: #519bce;
}

.tate-ribbon.Pi {
background: #ffa1dc;
}
.ichizu{
    position: relative; /* タグの配置基準 */
    margin-bottom: 100px;
}

.ichizu-ribon h3{
  padding: 10px 10px;
  color: #333333;
  background: #fffac8;
  border-left: 50px solid #ffef00;
  width: 10em;
  font-size: 30px;
  z-index: 5;
  position: absolute;
  top:-35px;
}
.ichizu img.map{
    width:100%;
    position: relative;
    border:1px solid #fff;
}

.photo {
    position: relative;
    display: inline-block;
}

.photo img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    z-index:2;
    margin-bottom: 20px;
}

.ribbon-detail {
    position: absolute;
    top: 40px;
    left: 0;
    display:flex;
    flex-direction: column;
}

.ribbon1-detail{
    position: relative;
    z-index:4;
    margin:-15px;
    background-color: #ff0;
    padding: 10px 40px 10px 10px;  
    font-size: 4rem;
    box-sizing: border-box;
  box-shadow: 0 2px 2px rgba(0, 255, 0, 1.25);
    clip-path: polygon(
        0 0,
        100% 0,
        95% 50%,
        100% 100%,
        0 100%
    );
}
.ribbon1-detail.Gr{
    background-color: #5fc36f;
     z-index:4;
}

.ribbon1-detail.Pu{
    background-color: #b333b3 ;
     z-index:4;
}

.ribbon1-detail.Bu{
    background-color: #519bce ;
     z-index:4;
}

.ribbon1-detail.Pi{
    background-color: #ffa1dc ;
     z-index:4;
}

.ribbon1-detail span,
.address h4 span{
    font-size: 70%;
}

.triangle {/*地区の装飾三角*/
    position: relative;
    z-index:3;
    width: 15px;
    height: 15px;
    background:orange;
    left:-15px;
    top:15px;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%
    );
}
/*影*/
.triangle.Gr{
    background-color: #40854c;
     z-index:3;
}

.triangle.Pu{
    background-color: #852685 ;
     z-index:3;
}

.triangle.Bu{
    background-color: #397094 ;
     z-index:3;
}

.triangle.Pi{
    background-color: #935c7f ;
     z-index:3;
}
/*影*/
.place{
    display: flex;
    flex-direction: row;
    margin: auto;
    flex-wrap: wrap;
    justify-content: space-between ;
    margin-bottom: 100px;
}
.place ul{
    margin:0; padding:0;
    text-align: left;
    list-style: none;
}
.place h4{
    font-size:4.8rem;
    font-weight: 900;
    color:#fff;
    width: 10em;
    text-align: left;
    line-height: 1em;
    padding-bottom: 20px;
}

.place .address {
  /* 隙間(12px)を考慮して半分にする計算 */
  width: 63%; 
  box-sizing: border-box;
  font-size: 2.4rem;
  line-height: 1.3;
  color:#fff;
    /* background-color: blanchedalmond; */
}

.address h4 span{
    font-size:2.5rem;
}
.place .address li:nth-child(2){
    font-size:1.5em;
}

.place .placeInfor {
   border-left: 2px solid #fff;
  padding-left: 20px;
  /* width: 40%; */
  /* background-color: aqua; */
  font-size: 2.3rem;
  color:#fff;
}

.wave{
    width: 10%;
}
.placeInfor li img{
    display: inline-block;
    align-items: center;

    padding-bottom: 8px;
}

.placeInfor li.att{
    font-size:13px;
    line-height: 1.3;
    text-indent: -1em;
    padding-left:1em;
}

.downLink{
    margin-bottom: 50px;
}
.downLink a,
.image-card a {
display:block;
}

.downLink a:hover,
.image-card a:hover {opacity:.6;}

#footer{
    display:block;
    margin:auto;
    color:#fff;
    background-color: rgb(0, 89, 255);
    padding:10px 0;
    font-size:1.3rem;
}

.ori{
    display: block;
}
/******************************************
*******************************************
*******************************************
*******************************************
*******************************************
*******************************************
******************************************* */





@media screen and (max-width: 480px) {
    .Wraper{
        width: 100%;
    }
#header{
    background-image:url("../images/header_star_back.gif");
    background-position: top;
    height: auto;
   aspect-ratio: 2000/260;
    margin-bottom:30px;
    background-size:cover;
}

h1 img.hoshizora{
    width: 70%;
    display: block;
    padding:10px 0 10px 0;
    margin: auto;
} 

.main{
    width: 98%;
    margin: auto;
}
    .main-img img{
        width:100%;
        max-width: 100%;
        height:auto;
    }

    h2.Catch-copy{
    text-align: center;
    color:#fff;
    padding-top: 40px;
    font-size:2em;
    height: 180px;
    background-size: contain;
    text-wrap: balance;
    margin-bottom: 50px;
background-image:url(../images/pleades.png); 
background-repeat:no-repeat;
background-position: center top;
}

    .gallery {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 8px; /* 画像同士の間隔 */
      justify-content: center; /* 中央寄せ（お好みに合わせて） */
      margin: auto;
      margin-bottom:50px;
    }

        .image-card {
      position: relative; /* タグの配置基準 */
      width: 100%;        /* スマホ時は画面幅いっぱいに */
      width: calc((100% - 32px * 5) / 2 );
      box-sizing: border-box;
      margin-bottom: 20px;
    }

  .tate-ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.tate-ribbon {
  --f: .4em; /* control the folded part*/
  --r: .1em; /* control the ribbon shape */
  z-index: 1;
  position: absolute;
  left: 10px;
  /* top: calc(-1*var(--f)); */
  top:-11px;
  padding: .1em;
  background: #ff0;
  border-right: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 100%,calc(50% - var(--f)/2) calc(100% - var(--r)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) var(--f),100% var(--f)); 
}

.ichizu img.map{
    width:90%;
}

.ichizu h3{
    font-size:20px;
    padding:5px 0;
    position: absolute;
    right: 130px;
    border-left: 20px solid #ffef00;
}

.area{
    width:100%;
}

.photo {
    width:95%;
    margin: auto;
    position: relative;
    display: block;
 
}

.photo img {
    display: block;
    position: relative;
    width: 98%;
    height: auto;
    z-index:2;
    margin-bottom: 20px;
    margin:0 auto;
   
}

.ribbon-detail {
    position: absolute;
    top: 30px;
    left: 15px;
    display:flex;
    flex-direction: column;
}

.ribbon1-detail{
    position: relative;
    z-index:4;
    margin:-24px;
    background-color: #ff0;
    padding: 10px 40px 10px 10px;  
    font-size: 1.6rem;
    box-sizing: border-box;
  box-shadow: 0 2px 2px rgba(0, 255, 0, 1.25);
    clip-path: polygon(
        0 0,
        100% 0,
        95% 50%,
        100% 100%,
        0 100%
    );
}

.ribbon1-detail.Gr{
    background-color: #5fc36f;
     z-index:4;
}

.ribbon1-detail.Pu{
    background-color: #b333b3 ;
     z-index:4;
}

.ribbon1-detail.Bu{
    background-color: #519bce ;
     z-index:4;
}

.ribbon1-detail.Pi{
    background-color: #ffa1dc ;
     z-index:4;
}
.ribbon1-detail span,
.address h4 span{
    font-size: 70%;
}

.triangle {/*地区の装飾三角*/
    position: relative;
    z-index:3;
    width: 14px;
    height: 14px;
    background:orange;
    left:-25.5px;
    top:23px;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%
    );
}



.place {
    width:90%;
    margin-bottom: 30px;
}
.place .address h4{
    font-size:2.3rem;
    line-height: 1.3;
    padding-bottom: 0;
}

.place .address li{
    font-size:1.5rem;
}

.place .address li:nth-child(2){
    font-size:1.5rem;
    margin-bottom: 1em;
}

.place .placeInfor {
   border-left: none;
  padding-left: 0;
  width: 100%;
  /* background-color: aqua; */
  font-size: 1.5rem;
  line-height: 1.3;
  color:#fff;
}
img.wave{
    display: block;
    width: 7%;
    margin-bottom: -5px;

}
.downLink img{
    width: 90%;
}

.fox img{
     width: 90%;
}

#footer p{
    padding:0 10px;
    overflow-wrap: anywhere;
    line-break: strict;
}
.ori{
    display: none;
}
}