body {
  text-align: center;
  margin: 0 auto;
  background-color:bisque;
  color: darkred;
  font-family: serif;
  font-size: 3vw;
 padding:0 10px;
 height: 100%;
}
.blink{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

header {
  background-color: #b47c86;
    /* background-image :url(kabe/8-15niji.png); */
    /* background-image :url(kabe/yuuhi2.png); */
    background-image: url(), url(kabe/sakura.png);
     background-repeat: no-repeat;
     background-size: 80%; 
     background-position:left 15% top 15%,  center;
     
     border-radius:15px;
  margin-top: 10px;   
  margin: auto;
  border: solid 8px  #C99C33;
  font-size: 2vw;
  color: darkred;
  height: 45vw;
  padding: 0px 1px 10px 1px;
  
  
}
header h1{ 
 padding: 5px;
  
  font-size: 4.4vw;
   -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #C99C33;
   font-weight: 900;
   background-color: bisque;
  opacity: 0.7;
  border-radius: 15px;
  width: 40%;
 margin: 15px auto 0px auto;
}
header h2{ 
  margin-top: 2px;
  background-color: bisque;
  opacity: 0.7;
  border-radius: 15px;
  width: 40%;
 margin: 0px auto;
  
}

header table {
  width :96%;
  text-align :left;
  margin: 0px auto 0px auto;
 background-color: bisque;
  opacity: 0.7;
  border-radius: 15px;
  color: darkred; 
}


.sotu {
  margin: auto; 
  color: darkred; 
  width:96%;
  background-color:white;
  border-radius:15px;
  padding: 2px;
}
.sotu p{
  padding:0px 20px;
}
.sotu-kabe{width:100%;border-radius: 15px;}


/* header h1 {
  -webkit-text-stroke-width:1.5px; -webkit-text-stroke-color:#C99C33;
}
header h2 {
  -webkit-text-stroke-width:1px; -webkit-text-stroke-color:#C99C33;
}
header td {
  -webkit-text-stroke-width:1px; -webkit-text-stroke-color:#C99C33;
}
header th {
  -webkit-text-stroke-width:1px; -webkit-text-stroke-color:#C99C33;
} */

.order header{padding :5px 1px; 
  margin-top: 10px;
  height: 45vw;
}
.corsage header{padding: 15px 1px;}
.sponge header{padding: 25px 1px;}
.kaki header {padding: 35px 1px;margin-top: 10px;}
.graduation header{padding: 30px 1px;margin-top: 10px;}
.balloon header{padding: 30px 1px;margin-top: 10px;}


.sponge .sponge-setumei{margin: 5px;text-align: left;}
.buriki-frame {width: 70%;margin:auto;text-align: left;}

/* 簡単コサージュ */
.corsage figure .img-1 { width: 70%;}

/* 画像全部 main saido */
.img-1{width:85%;}
.img-1{border-radius: 5px;} /*main*/
.img-2{border-radius: 5px;} /*saido*/
.horizon .img-1{border-radius: 5px; width:80%;}



/* チェックボックス本体は隠す */
#menu-btn-check {
    display: none;
}

/* ハンバーガーアイコンの見た目（三本線の中心） */
.menu-btn {
    position: fixed;
    top: 140px;
    left: 10px;
    display: flex;
    height: 35px;
    width: 35px;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: black;
    cursor: pointer;
}
.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;
    transition: all 0.5s; /* アニメーション速度 */
}
.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-content {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 100%; /* 画面の外へ */
    z-index: 80;
    
    transition: all 0.5s;
}

/* チェックが入ったら、メニューを左へスライドして表示 */
#menu-btn-check:checked ~ .menu-content {
    left: 0;
}

/* リストのスタイル調整 */
.menu-content ul {
    padding: 160px 10px 0;
    height: 100%;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 20px;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    padding: 15px;
    height: 100%;
}


.main {
  display: flex;
  
}
/* .main-saido {width:30%; margin: 0px 5px;height: 470vw;} */
/* .main-saido {width:30%; margin: 0px 5px;height: 600vw;} */
.main-saido {display: none;}
/* .main-saido {margin-left:-23%; margin-right:4%;} */
/* .main-box {width: 70%; margin:0px auto; height: 100%;} */

.graduation .main-box ul{ display: flex;}/*卒業式*/

/* 問い合わせ */
.toiawase{
  background-color:rgb(79, 79, 5);
  text-align:center;
  width:50%;
  margin:auto;
  border-radius:15px ;
  padding:1px 3px;
 
}
.toiawase span{color:white;}
.order{ color:darkred;}
.order-Invoice{font-size: 2.4vw;}
.order-line{font-size: 3.5vw; margin-top: 5vw;text-align: left;}
.order .main-box{width:90%;}
.order hr {width: 90%; border-color:red;}
.order-tizu{height: 50vw;}
.order-delivery{
  font-size: 2.4vw;
  background-color: rgb(225, 177, 19);
  width: 90%;
  padding: 3vw;
  margin-top: 5vw;
}
.kuro{width: 20%;}/*クロネコヤマト*/

.osirase{border-radius: 15px;}

.menu-box{
  background-color: rgb(201, 159, 239);
  padding: 2px 9px;
  text-align: center;
  border-radius: 10px;
  
}
.menu-box a{color:darkred;}
/* .osirase-menu a {margin:0px 1px;font-size: 2.3vw;} */
/* .osirase-menu a {
  margin: auto; 
  font-size: 2.6vw;
  text-decoration: none;
  color: darkred; 
  background-color: rgb(201, 159, 239);
  border-radius: 10px;   
} */
button { background-color: rgb(201, 159, 239);}
button a{text-decoration: none;color: darkred;}
a:hover{ color:rgb(57, 60, 245); text-decoration: underline;}
button{font-size: 2.5vw; margin-top: 10px;border-radius: 15px;border: none;}


ul { padding-left:0;}
li { list-style:none;}

.menu-bagar{ width:80%; margin-left: -40px;}

iframe{
  width: 100%;
  height: 100%;
 border: solid 2px;
  border-radius: 15px;
  
}



.box{display: flex; font-size:3vw; gap: 5px;}/*indexのbox*/

.box li {
   border: solid 4px  #C99C33;
  width:50%; 
 
  padding:5px; 
 
  background-color:#b47c86;
  border-radius: 15px;
 
}/*indexのbox li*/

/* .box-toiawase{
  background-color: olive;
    width: 70%;
    border-radius: 15px;
    border: solid 2px;
   
    margin: auto;
} */

.box-puro{
  display: flex;
}
.box-puro li {
  border: solid 4px  #C99C33;
  width:50%; 
 height: 45vw; 
  padding:5px; 
 margin: 0px 5px;
  background-color:rgb(79, 79, 5);
  border-radius: 15px;
}


.balloon .box li{height: 50%;}
.horizon .box li{height: 50%;}


.name{ font-size: 2.5vw; margin-top: 0px;}
.TOP-link{color:#000000;}
.top{font-size: 2.7vw;}

footer{font-size:3vw;padding: 0px 5px;}


/* サイドバー */
.menu {
  background-color: bisque;
  font-size:10vw;
 padding: 0px 10px;
}
.menu a{color:darkred;font-size: 7vw;}
.saido-box {
  margin-bottom:10vw;
  background-color:beige;
  padding: 10px 3px;
  border-radius: 15px;
}
.menu .img-2{width:50%;}


/* ここから問い合わせ */


.line-img{width:13%;}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {


  header {
  
     background-size: 75%; 
     
}

  .menu-btn {
    display: none;
}

  .main {
  display: flex;
  
}
.main-saido {display: block; width:40%;}
  iframe{
  height: 95.5%;
}
ul { padding-left:10px;}
.box-toiawase{display: none;}
.TOP-link{display: none;}

 .main-saido{height: 500vw; margin-top: 25px;}
.kaki header {padding: 40px 1px;}
.osirase-menu ul { text-align: center;width: 90%; margin: auto; }
.osirase-menu ul li a{ font-size: 1.6vw;margin-right: 50px;}
.top{font-size: 1.7vw;}

.order-line{font-size: 3vw;}

footer ul{ display: flex;}
footer li{ margin:auto; font-size:2.5vw;}


/* サイドバー */
div.saido{ 
  margin-bottom: 10px;
  padding: 5px 1px;    
}

  
}

/* パソコン */

@media screen and (min-width: 1024px) {

  header {
  
     background-size: 70%; 
     
}

  .menu-btn {
    display: none;
}
   
  .main {
  display: flex;
  
}
.TOP-link{display: none;}

ul { padding-left:10px;}
.main-saido {display: block;}
 .main-saido {height: 420vw; margin-top: 40px; width:35%;}
 .box-toiawase{display: none;}

.order .main .main-saido iframe{height: 100%;}
.order-line{font-size: 2.5vw;}
.corsage header{padding: 25px 1px;}
.kaki header {padding: 45px 1px;}
.osirase-menu ul { text-align: center;width: 90%;margin: auto; }
.osirase-menu ul li a{ font-size: 1.6vw;margin-right: 70px;}
.top{font-size: 2vw;}
footer ul{ display: flex;}
footer li{ margin:auto; font-size:2.5vw;}

/* サイドバー */
div.saido{ 
  margin-bottom: 50vw;    
  
}


  
}/*# sourceMappingURL=style.css.map */