@charset "utf-8";
/*=================================
全頁共通レイアウト
===================================*/
/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 0;/*高さを全画面にあわせる*/
} 

/*==================================================
read more
===================================*/
.button{
width: 100%;
display: flex;
margin-top: 20px;

}
.b-c{
justify-content: center;
}
.b-l{
justify-content: flex-start;
}
.b-r{
justify-content: flex-end;
}
.button a{
    background: #265CFF;
    border-radius: 1px;
    position: relative;
    display: flex;
    align-items: center;
	text-align: left;
    width: 100px;
	padding: 0px 5px 3px 8px;
	font-size: 13px;
    font-family: "Klee One", cursive;
font-weight: 400;
    color: #fff;
	line-height: 1.5;
    text-decoration: none;
	letter-spacing: 0.07em;
    transition: 0.3s ease-in-out;
}
.button a:hover{
    background:rgba(255, 255, 77, 0.8);
    color: #265CFF;
}
.button a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg) ;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 87px;
    border-radius: 1px;
	margin: auto;
    transition: 0.3s ease-in-out;
}
.button a:hover::after{
    border-color: #265CFF;
}
/*==================================================
特別ボタン
===================================*/
.button2{
width: 100%;
display: flex;
justify-content: center;
}

.button2 a{
    background-color: teal;
    border-radius: 1px;
    align-items: center;
	text-align:center;
	padding: 10px 10px 10px 10px;
	font-size: 14px;
    font-family: "Klee One", cursive;
font-weight: 400;
    color: #fff;
	line-height: 1;
    text-decoration: none;
	letter-spacing: 0.05em;
    transition: 0.3s ease-in-out;
}
.button2 a:hover{
    background:rgba(255, 255, 77, 0.8);
    color: teal;
}

/*==================================================
じわっ
===================================*/

.blur{
	animation-name:blurAnime;
	animation-duration:3s;
animation-fill-mode:forwards;
}
.delay-time1{animation-delay: 1s; }
.delay-time2{animation-delay: 2s; }
.delay-time3{animation-delay: 3s; }

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}
.fadeInUpTrigger{
    opacity: 0;
}
.fadeInUpTriggerOnce{
    opacity: 0;
}
.fadeInDownTrigger{
    opacity: 0;
}

/* ########### 530px 以下 ########### */
@media (max-width:530px){
/*==================================================
特別ボタン
===================================*/
.button2{
margin-top: 50px;
}
.button2 a{
width: 83%;
}
}
/* ########### 531px 以上 ########### */
@media (min-width:531px){
/*==================================================
特別ボタン
===================================*/
.button2{
margin-top: 50px;
}
.button2 a{
width: 50%;
}
}
/* ########### 768px 以下 ########### */
@media (max-width:768px){
 #container{
width: 100%;
height: auto;
z-index: 0;
margin-left: auto;
margin-right: auto;
}
/* main-area左 */
#main-area-top{
}
/* sub-area右 */
#sub-area{
}
}
/* ########### 769px 以上 ########### */
@media (min-width:769px){
/* main-area左 */
#main-area-top{
width: 82%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
z-index: 0;
}
/* sub-area右 */
#sub-area{
width: 13%;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
z-index: 0;
}
}
/* ########### 768pxから960pxまで ########### */
@media screen and (min-width: 769px) and (max-width: 960px) {
 #container{
display: flex;
width: 100%;
height: auto;
z-index: 0;
margin-left: auto;
margin-right: auto;
padding-right:20px;
padding-left:20px;
}
}
/* ########### 961px 以上 ########### */
@media (min-width:961px){
 #container{
display: flex;
max-width: 1130px;
height: auto;
z-index: 0;
margin-left: auto;
margin-right: auto;
padding-right:15px;
padding-left:15px;

}
}