@charset "utf-8";
@import url(common.css);



.toc-title:before {
    font-family: FontAwesome;
    content : "\f002"; /*←アイコン*/
    font-size: 1.2em;
    border-radius: 50%;
    color: #FFF; /*←アイコンの色*/
    background-color: rgba(231, 226, 101, 0.5); /*←アイコンの背景色*/
    padding: 0.5em;
    margin-right: 0.5em;
}

.toc-content ol li {
    padding: 1em 0 0 1em;
    border-bottom: dotted 1px rgb(238, 233, 87) ;
    list-style: none;
}
.toc a {
    color: #928484 ; /*←見出しの文字色*/
}

body{
    background-image: url(./img/huwahuwa.png);
}
#container {
	width:100%;
	height:300px;
	background-color : #FFF7D9;
	background-image:
		repeating-linear-gradient( 0deg, #FFF 0px 1px,	transparent 1px 18px),
		repeating-linear-gradient( 90deg, #ffffff 0px 1px,	transparent 1px 18px);
}
.ribon{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 40%;
}
.box {
    margin       : left;
    width        : 300px;
    height       : 400px;
    background   : linear-gradient(to bottom, #ffffff,#fff);
  }
  .profile {
  position: relative;/* position: absolute;とセット */
  width: 300px;/* 画像の幅 */
  margin: 30px auto;/* 上下の空きと左右の空き */
  max-width:90%;/* 最大幅 */
  background-color:rgb(255, 255, 255);/* 背景色 */
  border: 10px solid rgb(255, 255, 255);/* フチの設定 */
  border-bottom-width: 80px;/*下のフチ幅*/
  transform:rotate(-5deg);/* 角度 */
  box-shadow: 3px 3px 3px #777;/* 影の設定 */

}
.moji {
  position: absolute;/* width: 100%;を使うため */
  width: 100%;/* 文字の横位置の為 */
  text-align: center;/* 文字中央ぞろえ */
  bottom: -120px;/* 文字の縦位置 */
  line-height:1.3em;/* 行の高さ */
  left:0px;/* これが無いと変な位置になる */
  color: #756F61;/* 文字色 */
  font-size:3em;/* 文字サイズ */
  font-family: sans-serif;/* フォント指定 */
  font-family: 'Homemade Apple';
}
.profile:hover{
    animation: bounce 2s ease-in-out;
}
  @keyframes bounce {
    5%  { transform: scale(1.1, .8); }
    10% { transform: scale(.8, 1.1) translateY(-5px); }
    15% { transform: scale(1, 1); }
  }
  .image_link{
    display:block; 
    position:relative;
    text-decoration:none;
   }
   .image_link img{
     display:block;
     width:100%;
     transition:0.3s;
   }
   .image_link:before{
     content:"♡";
     display:block;
     color:#fff;
     line-height:48px;
     width:180px;
     border:solid 1px #fff;
     border-radius:5px;
     text-align:center;
     position:absolute;
     top:40%;
     left:50%;
     margin-top:-1em;
     margin-left:-90px;
     opacity:0;
     z-index:3;
     transition:0.3s;
     font-weight:bold;
     letter-spacing:0.2em;
   }
   .image_link:hover img{
     filter:blur(5px);
   }
   .image_link:hover:before{
     opacity:1;
     margin-top:-0.5em;
   }
   .rink {
      display: block; /* ブロックレベル表示に */
      width: 200px;
      height: 200px;
      margin: 0 auto;
      background: white; /* 背景色を白 */
      padding: 10px 10px 65px; /*上 左右 下のパディング */
      -moz-box-shadow: 0 4px 10px #333; /* 影を落とす */
      -webkit-box-shadow: 0 4px 10px #333;
      box-shadow: 0 4px 10px #333;
    }
    .flex{
      display: flex;
    }

h5 {
  text-align: center;
}
/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:1%;
right:50%;
  /*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
  /*描画位置*/
position: absolute;
left:-20px;
bottom:10px;
  /*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 23px;z
  background: #eee;
  transform: skewX(-31deg);
}

.scrolldown4:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
right:0;
  /*矢印の形状*/
width:1px;
height: 55px;
background:#eee;
}
/*スクロールダウン全体の場所*/
.scrolldown4{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:1%;
right:50%;
  /*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
  /*描画位置*/
position: absolute;
left:-20px;
bottom:10px;
  /*テキストの形状*/
color: #ffe285;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #ffe285;
  transform: skewX(-31deg);
}

.scrolldown4:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
right:0;
  /*矢印の形状*/
width:1px;
height: 50px;
background:#ffe285;
}

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

h1{
position: fixed;
top: 30%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
color:#675555;
text-shadow: 0 0 15px #666;
text-align: center;
}

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

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

#container{
position: relative;
z-index:1;
background:#ffe285;
padding:60px 0px;
text-align: center;
}

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

  #header,
  #header:before{
height: 500px;    
  }
  
}
/* .btn-container {
  text-align: center;
} */

/* button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
} */

/* button:hover {
 opacity: 0.7;
} */

.hidden {
  display: none;
}

#mask {
  background: #ffffffb3;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 100%;
  padding: 40px;
  border-radius: 4px;
  color: #ffe285;
  position: fixed;
  top: 30%;
  left: 10%;
  right: -30%;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}