@charset "UTF-8";

/*初期設定*/

*{
margin: 0;
padding: 0;
font-family: serif;
}

img{
max-width: 100%;
height: auto;
vertical-align: middle;/*画像の下のアキの処理*/
/*vertical-align: top;
vertical-align: bottom;*/
/*top,middle,bottom*/
/*初期値はbaseline*/
/*インライン要素やテーブルセル内の要素の縦方向の揃えを指定する
ブロックレベル要素などには効かない*/
}

iframe{
vertical-align: middle;
}







 body{
 min-width: 1180px;

 
}

.container{
width: 1080px;/*デザイン上の幅*/
margin: 0 auto;
}

header{
background-color: rgba(255,255,255,0.8);
width: 100%;
position: fixed;/*固定する*/
z-index: 9999;/*重なり順を指定するプロパティ*/

box-shadow: 0px 2px 5px 2px rgba(0,0,0,.1);
}

header .container{/*logoとnavの制御*/
display: flex;/*横並びにする*/
justify-content: space-between;/*両端揃え*/
align-items: center;/*上下センターに揃える*/
}



nav ul{
list-style-type: none;
display: flex;
}

nav a{
font-weight: bold;
color: #000;/*文字を黒くする*/
text-decoration: none;/*下線を消す*/
display: block;/*ブロックレベル要素*/
padding: 20px;/*四方の空きを20px*/


}
nav a:hover{
 background-color: rgba(0,0,0,.3);
 color: #fff;
 /*text-decoration: underline;*/
 text-shadow: 1px 2px 3px #000;
}

.main-visual{
background-color: #f1d37d;
background-image: url("../image/header_image.jpg");
/*height: calc(100vh - 64px);*//*ビューポートの下がぴったり次のものになる*/

/*height: 100vh;*/
/*viewport height*/

padding: 100px 0;
min-height: 540px;/*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/
/*display: flex;*//*フレックスコンテナとして表示。横並びになる*/
/*flex-direction: column;*//*縦並びにする*/
/*justify-content: center;*//*左右のセンター*/
/*align-items: center;*/ /*上下のセンター*/
}





.main-visual{
background-color: #f1d37d;
background-image: url("../image/header_image.jpg");
/*background-size: cover;*/
/*background-position: center;*/
/*background-repeat: no-repeat;*/

justify-content: center;

}


.main-visual h2{
color: #fff;
text-align: right;
  margin-right: 2vw;
padding-top: 10px;

}

.fluffy {
  animation: fuwari-animation 20s ease-in-out infinite alternate-reverse;
}

@keyframes fuwari-animation {
  0%   { transform: translate(0,  0)     rotate(0deg); }
      10%  { transform: translate(-3px, -8px) rotate(-1deg); }
      20%  { transform: translate(4px, -12px) rotate(2deg); }
      30%  { transform: translate(-5px, -6px) rotate(-2deg); }
      40%  { transform: translate(3px, -14px) rotate(1deg); }
      50%  { transform: translate(0,  -20px)  rotate(0deg); }
      60%  { transform: translate(4px, -12px) rotate(1deg); }
      70%  { transform: translate(-4px, -6px) rotate(-1deg); }
      80%  { transform: translate(2px, -10px) rotate(2deg); }
      90%  { transform: translate(-3px, -4px) rotate(-1deg); }
      100% { transform: translate(0,  0)     rotate(0deg); }
}


.fluffy_1{
position: relative; top:50px; right: -200px;
}

.fluffy_2{
position: relative; top:10px; right: 20px;
}



.logo{
text-align: right;
width: 450px;
max-width: 100%;
height: auto;
filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
margin-left: 60vw;
margin-bottom: -100px;
}



.sect1{
	background-image: url("../image/p1.jpg");
	padding: 80px 0px;
/*min-height: 540px;*//*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/
}

.box{
backdrop-filter: blur(8px);
  background-color: rgba(255,255,255,.3);
  padding: 3rem;
  margin: 40px auto 0;
  width: 50vw;
  border-radius:10px;
}

.sect1 h2{
color: #fff;
	font-size: 40px;
	text-align: center;
	margin-bottom: 30px;
	filter:drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
}

.sect1 h3{
	color: #FFF;
		font-size: 22px;
	text-align: center;
	filter:drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
}

.sect2{
	background-image: url("../image/p2.jpg");
min-height: 540px;/*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/

}


.guruten {
padding-top: 30px;
	/*position: relative; top:-180px; right: 0px;*/
	
}

.sect2 h2{
  padding-top: 150px; /*配置位置の基準となる指定*/
  padding-left: 20px;
}

.sect3{
	padding: 80px 0;
	font-size: 32px;
	text-align: center;
}

.sect3 h2{
	display: flex;
    align-items: center;
	padding-bottom: 20px;
}

.sect3 h2:before,
.sect3 h2:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    background-color: #666;
}

.sect3 h2:before {
    margin-right: 1rem;
}

.sect3 h2:after {
    margin-left: 1rem;
}
.sect3 ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
justify-content: space-between;
align-items: center;
	margin: 10px;
}

.sect3 li{
	padding-bottom: 50px;
}

/*.sect3 img:hover{
transition: transform .6s ease;
transform: scale(1.1);
 
}*/
footer{
	background-color: #FFE389;
	padding: 1px 0;
}
footer p{
font-size: 30px;
text-align: center;
margin: 20px 0;
}