/* ------  min-width: 769px   -----------------------------------------　*/

@media screen and (min-width: 769px) {
     /* 　　 BirderShop Fujinoアニメーション 　　 */
     #anime_top {
        animation: animation_top 4s;     /* ----scale_moveは任意に付けたアニメーションの名前と時間。----*/
        animation-timing-function: liner;
        position:absolute;
        font-size:3vw;
        top:3vw;
        left:10vw;
        z-index: 100;
    }
    
    @keyframes animation_top {
    0% {
        font-size:2vw;
        margin-top:0;
        }
    80% {
        font-size:7vw;
        margin-top:22%;
        opacity:1;
        padding:10px 0px 10px 15px;
        }
    100% {
        font-size:7vw;
        margin-top:22%;
        opacity:0;
        padding:10px 15px 10px 15px;
        }
    }
   
   #anime_top p {
       font-family:"MV Boli","Segoe Print",sans-serif;
       font-style:italic;
       color:#ffffff;
       margin:0;
       padding:0;
   }


.slider {
    width: 100%;
    height: 100%;
}

/*-------------------------トップメニュー*/ 

.topmenu {
    background-color:#dc9ae6;
    width:100%;
      }
ul.topmenu li{
padding:5px 10px 5px;
}

ul.topmenu a{
color:#ffffff;
text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}

ul.topmenu li:hover{
    color:#000000;
     background-color: #8C3E88;
}

/*-------------------------トップメニュー*/ 


/* ------------ ページ大見出し　角丸 ボーダー　------------- */
.page_midasi_b {
  border: 5px solid #FFD700;
  border-radius:3pt;
  font-size:300%;
  line-height: 0.9em;
  font-family:ＭＳ ゴシック;
  color:#FFFFFF;
  text-align:center;
  text-shadow:-2px -2px #555;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:20px;
  margin-bottom: 30px;
}


/*-------------------------パンくずリスト*/ 

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  font-size:90%;
    
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #0080ff;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #737373;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/*---------------ハンバーガーメニュー----------*/
.menu-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  height: 80px;
  width: 80px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color:#000000;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 4px;
  width: 50px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 15px;
}
.menu-btn span:after {
  top: 15px;
}


#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none;
}


.menu-content {
  width:250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #ffffff;
  transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
  padding: 100px 10px 0;
display:  flex;
  flex-direction:column;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#400040;
  text-decoration: none;
  padding: 5px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}


#menu-btn-check:checked ~ .menu-content {
  left: 0;/*メニューを画面内へ*/
}
/*---------------ハンバーガーメニュー----------*/


/*---Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消用 20220905現在必要*/ 
html {  
  overflow-y:scroll;  
} 

/*-------------------------bodyの指定*/ 
body{
  margin: 0;
  padding: 0;
  font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 18px;
  color:#333;
  text-align:center;
  background: #ffffff;
  word-break: break-all;
  line-height: 1.2em;
  transform: rotate(0.001deg);/*-----------エッジを滑らかに　クローム用--------------*/ 
  
}

/*--メニュー見出しボックス分--*/
.hr_s {
  display:none;
      }
  
/* ------   h1, h2, h3, h4, h5  基本  ----- */
h1, h2, h3, h4, h5 { 
  margin: 0;
  padding: 0; 
  font-size:100%;
}

/* ------   ul　flex  基本  ----- */
ul {
  display:   flex;
  flex-flow: row;
  flex-wrap: wrap;
  width:100%;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0px;   /* ------  0にしないと中央にこない    ----- */
}

li {
list-style: none;
margin: 0;
padding: 0;
}

/* ------   a  基本  ----- */
a{
text-decoration:none;
  color:#0000ff;
}

/* ------   img  基本  ----- */
img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------- pスタイル */
p {
  width: 100%;
  font-size:100%;
  color:#555555;
}

/* photo style */
/* ---------     medium*/
.photo-2,.photo-3,.photo-4,.photo-5,.photo-7 {
  display: flex;
flex-wrap: wrap;
padding-top: 10px;
width: 100%;
  height:100%;
  justify-content: center;
}

/* ---------　５列表示*/
.photo-5 div {
 width: 19%;
 margin: 0.4%;
 border: 0.2% solid #808080;
 box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

/* ------  hoverでimg拡大   ----　*/
.photo div img:hover,.photo-3 div img:hover,.photo-4 div img:hover, .photo-5 div img:hover, .photo-6 div img:hover, .photo-7 div img:hover{ 
 box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: scale(1.15);
  transition: 0.1s;
}





/*--------------table ライン---------*/

.table_line{
  width:100%;
  max-width:1200px;
  border:0px solid #000000;
  border-collapse: collapse;
  margin-left:auto;margin-right:auto;
}

.table_line td{
  border:1px solid #000000;
  border-collapse: collapse;
  font-size:90%;
  width:10%;
  padding:0
}

.table_color tr:nth-child(1) {
  color:#ffffff;
  background-color:#447791;
}

.table_color td:nth-child(1) {
  color:#ffffff;
  background-color:#c0c0c0;
}

 /* 　　Flex ボックスではない　　 */
 footer {
  display: block;
  margin: 0px;
  padding-top:40px;
  padding-bottom:10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-top: 3px solid #cccccc;
  border-radius: 0pt;
  background: #ffffff;
  }


}


/* ------  max-width: 768px   -----------------------------------------　*/
@media screen and (max-width: 768px) {

     /* 　　 BirderShop Fujinoアニメーション 　　 */
     #anime_top {
      animation: animation_top 4s;     /* ----scale_moveは任意に付けたアニメーションの名前と時間。----*/
      animation-timing-function: liner;
      position:absolute;
      font-size:3vw;
      top:2vw;
      left:15vw;
      z-index: 100;
  }
  
  @keyframes animation_top {
  0% {
      font-size:3vw;
      margin-top:0;
      }
  80% {
      font-size:6vw;
      margin-top:20%;
      opacity:1;
      padding:10px 0px 10px 15px;
      }
  100% {
      font-size:6vw;
      margin-top:20%;
      opacity:0;
      padding:10px 15px 10px 15px;
      }
  }
 
 #anime_top p {
     font-family:"MV Boli","Segoe Print",sans-serif;
     font-style:italic;
     color:#ffffff;
     margin:0;
     padding:0;
 }

 .slider {
  width: 100%;
  height: 100%;
}

/*-------------------------トップメニュー*/ 

.topmenu {
    background-color:#dc9ae6;
    width:100%;
      }
ul.topmenu li{
padding:5px 10px 5px;
}

ul.topmenu a{
color:#ffffff;
text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}

ul.topmenu li:hover{
    color:#000000;
     background-color: #8C3E88;
}

/*-------------------------トップメニュー*/ 


/*---------------ハンバーガーメニュー----------*/
.menu-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color:#000000;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none;
}

.menu-content {
  width:250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #ffffff;
  transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
  padding: 70px 10px 0;
display:  flex;
  flex-direction:column;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#400040;
  text-decoration: none;
  padding: 5px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}

#menu-btn-check:checked ~ .menu-content {
  left: 0;/*メニューを画面内へ*/
}
/*---------------ハンバーガーメニュー----------*/

/*---Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消用 20220905現在必要*/ 
html {  
  overflow-y:scroll;  
}
/*-------------------------bodyの指定*/ 
body{
  margin: 0;
  padding: 0;
  font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 100%;
  color:#333;
  text-align:center;
  background: #ffffff;
  word-break: break-all;
  line-height: 1.2em;
  transform: rotate(0.001deg);/*-----------エッジを滑らかに　クローム用--------------*/ 
}

/*-------------------------パンくずリスト*/ 

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  font-size:90%;
    
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #0080ff;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #737373;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/* ------   h1, h2, h3, h4, h5  基本  ----- */
h1, h2, h3, h4, h5 { 
  margin: 0;
  padding: 0; 
  font-size:100%;
}

/* ------   ul　flex  基本  ----- */
ul {
  display:   flex;
  flex-flow: row;
  flex-wrap: wrap;
  width:100%;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0px;   /* ------  0にしないと中央にこない    ----- */
}

li {
list-style: none;
margin: 0;
padding: 0;
}

/* ------   a  基本  ----- */
a{
text-decoration:none;
  color:#0000ff;
}

/* ------   img  基本  ----- */
img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------- pスタイル */
p {
  width: 100%;
  font-size:100%;
  color:#555555;
}


/*--メニュー見出しボックス分--*/
.hr_s {
  display:none;
      }

.page_midasi_b {
  border: 3px solid #FFD700;
  border-radius:3pt;
  font-size:150%;
  line-height: 0.9em;
  font-family:ＭＳ ゴシック;
  color:#FFFFFF;
  text-align:center;
  text-shadow:-2px -2px #555;
  padding-top:10px;
  padding-bottom:10px;
  margin-bottom: 20px;
}


/* ---------　photoボックス　任意枚数横横並び、divで一枚当たり%指定*/
.photo-box {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
}

.photo-box div {
  width: 100%;
  margin: 0px;
}

.photo-box div p {
  font-size:90%;
}

/* ---------　small*/

.photo-2,.photo-3,.photo-4,.photo-5,.photo-7 {
    display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
	width: 100%;
    height:100%;
    justify-content: center;
}

/* ---------　５列表示*/
.photo-5 div {
   width: 24.5%;
   margin: 0.2%;
   border: 0.2% solid #808080;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}


 /* 　　Flex ボックスではない　　 */
 footer {
  display: block;
  margin: 0px;
  padding-top:40px;
  padding-bottom:10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-top: 3px solid #cccccc;
  border-radius: 0pt;
  background: #ffffff;
  }





}