@charset "utf-8";

img{
  max-width: 100%;
}




body{
  background:#f3f3f3;
  
    padding:20px;
}


a{
  color: #333;
  text-decoration: none;
}

.lead{
  margin:20px 0 0 0;
}

.btn-block{
  width:200px;  
  padding: 30px;
}
.box25{
  position: relative;
  background: #fff0cd;
  box-shadow: 0px 0px 0px 5px #fff0cd;
  border: dashed 2px white;
  padding: 35px 35px;
  color: #454545;
  vertical-align:middle;

}
.box25:after{
  position: absolute;
  content: '';
  right: -7px;
  top: -7px;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: #ffdb88 #fff #ffdb88;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
  margin: 0; 
  padding: 0;
}
.box25-Profile{
  position: relative;
  background: #fff0cd;
  box-shadow: 0px 0px 0px 5px #fff0cd;
  border: dashed 2px white;
  padding: 35px 35px;
  color: #454545;
  vertical-align:middle;
  /* width: 795px; */
}
.box25-Profile p{
margin-top: 80px;
}

header{
  text-align: center;
  
}
.eachTextAnime {
  font-family: 'Sawarabi Mincho', serif; 
  
}
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
/* 角丸四角枠 */
.box2 {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #232323;/*文字色*/
  background:#eee;
  border: solid 3px #00CC99;/*線*/
  border-radius: 20px;/*角の丸み*/
  font-family: 'Zen Maru Gothic', sans-serif;
  position: relative;
}
.matome{
  margin: 5% 0;
}
.box2 .gazou{
  width: 640px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 20%;
  left: -8%;
}
.midasi{
  font-size: 35px;
  margin: 20px 0 0 20px;
  font-family: 'Sawarabi Mincho', serif;
}
.box2 .textt{
  margin: 20px 0 0 20px;
  padding: 0;
}
.br-sp{
  display: none;
}
@media screen and (max-width: 600px){
  .box2 .gazou{
    width: 30%;
    top: -50px;
    left: -15px;
  }
  .br-sp{
    display: block;
  }
  .midasi,.box2 .textt{
    margin-left: 0;
  }
  .br-pc{
    display: none;
    text-align: left;
  }
}


/* ボタン */
button {
  /* Variables */
 --button_radius: 0.75em;
 --button_color: #e8e8e8;
 --button_outline_color: #000000;
 font-size: 17px;
 font-weight: bold;
 border: none;
 border-radius: var(--button_radius);
 background: var(--button_outline_color);
 /* margin: 10px 0 0 900px; */
}

.button_top {
 display: block;
 box-sizing: border-box;
 border: 2px solid var(--button_outline_color);
 border-radius: var(--button_radius);
 padding: 0.75em 1.5em;
 background: var(--button_color);
 color: var(--button_outline_color);
 transform: translateY(-0.2em);
 transition: transform 0.1s ease;
}

button:hover .button_top {
  /* Pull the button upwards when hovered */
 transform: translateY(-0.33em);
}

button:active .button_top {
  /* Push the button downwards when pressed */
 transform: translateY(0);
}










/*========= 1文字ずつ出現させるためのCSS ===============*/


.bun{
  font-family: 'Zen Maru Gothic', sans-serif;
}

.box8 {
  padding: 0.5em 1em;
  margin: 1em 0;
  color: #232323;
  background: #fff8e8;
  border-left: solid 10px #ffc06e;
}

.box8 p {
  margin: 0;
  padding: 0;
}

.img1 {
  display: flex;
  margin-left: 100px;
  margin-bottom: 130px;
  margin-right: 70px;
}


.img2 {
  display: flex;
  margin-left: 100px;
  margin-right: 70px;

}

.polaroids, .polaroids2, .polaroids3  {
  display: block;
  /* ブロックレベル表示に */

  /* width: 400px; */

  /* height: 300px; */

  margin: 0 auto;

  background: white;
  /* 背景色を白 */

  padding: 10px 10px 30px;
  /*上 左右 下のパディング */

  -moz-box-shadow: 0 4px 10px #333;
  /* 影を落とす */

  -webkit-box-shadow: 0 4px 10px #333;

  box-shadow: 0 4px 10px #333;
  -webkit-transform: rotate(5deg);
  /* 回転 */

  -moz-transform: rotate(5deg);

  -ms-transform: rotate(52deg);

  transform: rotate(5deg);


}






  
.polaroids4, .polaroids5, .polaroids6{
  display: block;
  /* ブロックレベル表示に */

  /* width: 320px; */

  /* height: 230px; */

  margin: 0 auto;

  background: white;
  /* 背景色を白 */

  padding: 10px 10px 30px;
  /*上 左右 下のパディング */

  -moz-box-shadow: 0 4px 10px #333;
  /* 影を落とす */

  -webkit-box-shadow: 0 4px 10px #333;

  box-shadow: 0 4px 10px #333;
  -webkit-transform: rotate(5deg);
  /* 回転 */
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(52deg);
  transform: rotate(5deg);
}
.karenda{
  text-align: center;
  margin-top: 100px;
}
.plan{
  text-align: center;
}
.op{
  list-style:square;
  text-align: left;
  padding: 0 35%;
  display: flex;
  margin-left: -60px;

}
.op1{
  margin: 0px 0 0 45px;
}
.op2{
  list-style-type: none;
  text-align: left;
  padding: 0 35%;
  font-size: 20px;
}

.Profile{
  display: flex;
  justify-content: center;
}

.Profile2{
  font-family: 'Zen Maru Gothic', sans-serif;
  
  
}
.instagram{
  text-align: center;
}

.footer{
  text-align: center;
  margin-top: 15px;
  background-color: #fff0cd;
  
}
.foot{
  margin-right: 50px;
}







/*========= レイアウトのためのCSS ===============*/



#header {
  width: 100%;
  height: 100vh;
  position: relative;
}

#header:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  /*背景画像設定*/
  background: url("") no-repeat center;

}

#container {
  position: relative;
  z-index: 1;
  background: #eee;
  padding: 600px 0;
  text-align: center;
}
@media screen and (max-width: 1440px){
  .op1-p{
    white-space: nowrap;
    
  }
  .op2{
margin: 0 auto;
  }
  .button-dm{
    margin: 10px 0 0 900px;
  }
}

@media screen and (max-width: 1378px){
  .Profile1{
    width: 100%;
    margin-bottom: 20px;
  }
  .Profile{
    display: block;
  }
  .Profile1-img{
    object-fit: cover;
    width: 100%;
}
.op2,.op{
  padding: 0;
}

}
@media screen and (max-width: 1131px){
.button-dm{
  margin:10px 0 0 200px; 
}
}
@media screen and (max-width: 999px){

.gazou img{
  margin-right: 350px;
  width: 25%;
}
.Profile1{
  width: 100%;
  margin-bottom: 20px;
}
.Profile{
  display: block;
}
.Profile1-img{
  object-fit: cover;
  width: 100%;
}
.op2,.op{
  padding: 0;
}
}

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

  #header,
  #header:before {
    height: 90vh;
  }
}

@media screen and (max-width:648px){
  
  .op{
    display: block;
    
  }
}

@media screen and (max-width: 600px){
  .img1{
    flex-direction: column;
    margin-left: 0;
  }
  .img2{
    flex-direction: column;
    margin-left: 0;

  }
  .polaroids{
   
    width: 379px;
    height: 265px;
  }
  .Profile1{
    width: 100%;
    margin-bottom: 20px;
  }
  .Profile{
    display: block;
  }
  .Profile1-img{
    object-fit: cover;
    width: 100%;
  }
  .op2,.op{
    padding: 0;
  }
  .gazou img{
    width: 100%;
  }
  .button-dm{
    margin:10px 0 0 90px; 
  }
  

 }
 /* カレンダー */
 .karenda-sp{
  display: none;
 }
 
 @media screen and (max-width: 600px){
  .karenda-sp{
    display: block;
    margin: 12% 0;
   }
   .karenda{
    display: none;
   }
 }