@charset "utf-8";
/* レイアウトのためのCSS */
body{
    background:#e2a2b1;
    font-family: 'Noto Serif JP', serif;
	color: #555;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    letter-spacing: 0.2em;
}

body.appear{
    background:#f8f9fa;
}


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

a{
	color: #555;
	text-decoration: none;
    outline: none;
}

img{
    width:100%;
    height: auto;
    vertical-align: bottom;
}

*{
    box-sizing: border-box
}

/* font-family */

h1,
#menu h2{
    font-family:'Parisienne', cursive;
}

/* heading */
#menu h2
{
    font-size: 4rem;
    text-align: center;
    margin: 0 0 50px 0;
    font-weight: normal;
    color: #e2a2b1;
}

@media screen and (max-width:768px) {
#menu h2{
    font-size: 3rem;
    }
    
}

/* area */

#container{
    overflow-x: hidden;
}

.inner{
    width:100%;
    margin:0 auto;
    padding:70px;
}

@media screen and (max-width:940px) {
.inner{
    padding:30px;
}
}


/* menu */

#menu{
    padding: 70px 0;
}

#menu section{
    background: #fff;
    margin: 0 0 10px 0;
}

#menu section h3{
    font-size: 0.9rem;
    margin: 0 0 10px 0;
}

#menu section p{
    font-size: 0.8rem;
}

#menu .menu-area{
    padding: 20px;
    box-shadow: 5px 0 10px #ccc;
}

#menu .menu-btn{
    text-align: center;
    margin: 50px 0 0 0;
}


.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
     margin:0 auto;
 }
 
 .slider img {
     width:100%;/*スライダー内の画像を横幅100%に*/
     height:auto;
 }
 
 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 
 .slider .slick-slide {
     margin:0 10px;
 }
 
 /*矢印の設定*/
 
 /*戻る、次へ矢印の位置*/
 .slick-prev, 
 .slick-next {
     position: absolute;/*絶対配置にする*/
     top: 42%;
     cursor: pointer;/*マウスカーソルを指マークに*/
     outline: none;/*クリックをしたら出てくる枠線を消す*/
     border-top: 2px solid #999;/*矢印の色*/
     border-right: 2px solid #999;/*矢印の色*/
     height: 15px;
     width: 15px;
 }
 
 .slick-prev {/*戻る矢印の位置と形状*/
     left: -1.5%;
     transform: rotate(-135deg);
 }
 
 .slick-next {/*次へ矢印の位置と形状*/
     right: -1.5%;
     transform: rotate(45deg);
 }
 
 /*ドットナビゲーションの設定*/
 
 .slick-dots {
     text-align:center;
     margin:20px 0 0 0;
 }
 
 .slick-dots li {
     display:inline-block;
     margin:0 5px;
 }
 
 .slick-dots button {
     color: transparent;
     outline: none;
     width:8px;/*ドットボタンのサイズ*/
     height:8px;/*ドットボタンのサイズ*/
     display:block;
     border-radius:50%;
     background:#ccc;/*ドットボタンの色*/
 }
 
 .slick-dots .slick-active button{
     background:#e2a2b1;/*ドットボタンの現在地表示の色*/
 }
 
 
 .fadeIn{
 animation-name: fadeInAnime;
 animation-duration:2s;/*ゆっくり出現するため数値変更*/
 animation-fill-mode:forwards;
 opacity:0;
 }
 
 @keyframes fadeInAnime{
   from {
     opacity: 0;
   }
 
   to {
     opacity: 1;
   }
 }
 
 
 .zoomOut{
     animation-name: zoomOutAnime;
     animation-duration:0.5s;
     animation-fill-mode:forwards;
 }
 
 @keyframes zoomOutAnime{
   from {
     transform: scale(1.2);
     opacity: 0;
   }
 
   to {
     transform:scale(1);
     opacity: 1;
   }
 }
 
 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  
 .zoomOutTrigger{
     opacity: 0;
 }
 
 /*========= 8-2 テキストが流れるように出現（左から右） ===============*/
 
 /*全共通*/
 
 .slide-in {
     overflow: hidden;
     display: inline-block;
     padding: 0 10px;/*英語がはみ出るので見えるように余白追記*/
 }
 
 .slide-in_inner {
     display: inline-block;
 
 }
 
 /*左右のアニメーション*/
 .leftAnime,
 .rightAnime{
     opacity: 0;/*事前に透過0にして消しておく*/
 }
 
 .slideAnimeLeftRight {
     animation-name: slideText-100;
     animation-duration:0.8s;
     animation-fill-mode:forwards;
     opacity: 0;
 }
 
 @keyframes slideText-100 {
   from {
     transform: translateX(-100%); /*要素を左の枠外に移動*/
         opacity: 0;
   }
 
   to {
     transform: translateX(0);/*要素を元の位置に移動*/
     opacity: 1;
   }
 }
 
 .slideAnimeRightLeft {
     animation-name: slideText100;
     animation-duration:0.8s;
     animation-fill-mode:forwards;
     opacity: 0;
 }
 
 
 @keyframes slideText100 {
   from {
     transform: translateX(100%);/*要素を右の枠外に移動*/
     opacity: 0;
   }
 
   to {
     transform: translateX(0);/*要素を元の位置に移動*/
     opacity: 1;
   }
 }
 
 
 /*==================================================
    7 画像リンクの動き
 ===================================*/
 
 span.mask{
     display: block;/*画像をくくるspanタグをブロック要素にする*/
     overflow: hidden;/*はみ出ているものを隠す*/
 }
 
 /*　7-9 波紋　*/
 
 .circle span.mask{
     position: relative;/*波紋の基点となる位置を定義*/
 }
 
 .circle span.mask::before {
     position: absolute;
     content: '';
     transform: scale(0);/*円の大きさ初期値は0*/
     opacity: 0;/*透過0*/
     width:100%;/*円のサイズ指定*/
     height:100%;/*円のサイズ指定*/
     border-radius:50%;/*円の角丸指定*/
     background: rgba(255,255,255,0.2);/*円の背景色*/
 }
 
 .circle span.mask:hover::before {/*hoverした時の変化*/
     animation: circle 0.75s;/*アニメーションの名前と速度を定義*/
 }
 
 @keyframes circle {
   0% {
   transform: scale(0);
   opacity: 1;/*透過なし*/
   }
   30% {
     opacity: 1;
   }
   100% {
   transform: scale(2);/*アニメーションで大きくなった2倍の円の指定*/
   }
 }
 
 
 
 #container{
     position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
     z-index: 3;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
     background: #f8f9fa;
 
 }
 

.instagram h2{
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.instagram p{
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}