@charset "utf-8";
/* CSS Document */


/*Fonts
----------------------------------------------------------------------------------------------------------------------*/


/*Poppins　欧文ゴシック文字
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

/*font-family: 'Poppins', sans-serif;*/



/*Quicksand　欧文丸文字
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');

/*font-family: 'Quicksand', sans-serif;*/



/*Righteous　欧文文字
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

/*font-family: 'Righteous', cursive;*/



/*Noto Sans JP 和ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*font-family: 'Noto Sans JP', sans-serif;*/



/*Kosugi Maru 和丸文字
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/*font-family: 'Kosugi Maru', sans-serif;*/



/*Mochiy Pop One 和ゴカール
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Brygada+1918:ital@1&display=swap');

/*font-family: 'Alfa Slab One', cursive;*/



/*Nico Moji ニコモジ
-----------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet');*/

/*font-family: "Nico Moji";*/








/* Wrap,Contents-wrap,Contents
----------------------------------------------------------------------------------------------------------------------*/
.wrap{
	width: 100%;
	overflow: hidden;
}

.contents-wrap{
	width: 100%;
	padding: 125px 0 100px 0;
	position: relative;
}
/* 流体シェイプ指定
------------------------------------------------------------*/
.fluid {
  width: 30vh;/*25vh*/
  height: 25vh;/*30vh*/
  animation: fluidrotate 15s ease 0s infinite;/*アニメーションの設定 30s*/
  position: absolute;/*contents-wrapに対し*/
  top: 3.5%;
  left: 32.5%;/*37.5%*/
  z-index: 1;/*-----------z-index:1------------*/
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

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

.contents-wrap{
	padding: 125px 0 50px 0;
}

}

/* H2 back 流体シェイプカラー
------------------------------------------------------------*/
.yellow-fluid{
  background: #ffff66 ;
}
.pink-fluid{
	background: #ffccff ;
}
.blue-fluid{
	background: #99ffff;
}
.green-fluid{
	background: #ccff66;
}
.white-fluid{
	background: #fff;
}
.pastel-blue-fluid{
	background: #cbf7fb;
}
.pastel-green-fluid{
	background: #ddffd7;
}
.orange-fluid{
	background: #ffe4b5;
}




/* Contents
------------------------------------------------------------*/
.contents{
	position: relative;
    z-index: 5;/*-----------z-index:5------------*/
	margin: 0 auto;
	padding-top: 75px;
}

.contents100per{
	width: 100%;
}

.contents1600{
	width: 1600px;
}

.contents1400{
	width: 1400px;
}

.contents1200{
	width: 1200px;
}

.contents900{
	width: 900px;
}

.contents700{
	width: 700px;
}

.contents500{
	width: 500px;
}

.contents300{
	width: 300px;
}


@media screen and (max-width:1600px) {
	
.contents1600{
	width: 92%;
}
	
}

@media screen and (max-width:1400px) {
	
.contents1400{
	width: 92%;
}
	
}

@media screen and (max-width:1200px) {
	
.contents1200{
	width: 92%;
}
	
}

@media screen and (max-width:900px) {
	
.contents900{
	width: 92%;
}
	
}

@media screen and (max-width:700px) {
	
.contents700{
	width: 92%;
}

.contents{
	padding-top: 50px;
}
	
}

@media screen and (max-width:500px) {
	
.contents500{
	width: 92%;
}
	
}

@media screen and (max-width:300px) {
	
.contents300{
	width: 92%;
}
	
}





/* Pankuzu List
----------------------------------------------------------------------------------------------------------------------*/
.pankuzu{
	width: 100%;
	padding: 25px 3% 10px 3%;
	background: #eee;
	font-size: clamp(10px, 3vw, 14px);
	/*margin-bottom: 15px;*/
}
.pankuzu a:hover{
	opacity: 0.5;
}




/* H2,H3
----------------------------------------------------------------------------------------------------------------------*/
h2{
	text-align: center;
	position: relative;
    z-index: 5;/*-----------z-index:5------------*/
}

.icon-h2{
	font-size: clamp(30px, 3vw, 48px);
	font-family: 'Kosugi Maru', sans-serif;
	line-height: 1;
}
.eg-h2{
	font-size: clamp(48px, 3vw, 72px);
	font-family: 'Poppins', sans-serif;
	line-height: 1.15;
	background: -webkit-linear-gradient( 60deg,#95c056, #37addc,#edaf23, #d64b8c);/* 緑 ▶ 青 ▶ 黄 ▶ 桃 */
	background-size:400%;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textAnime 10s infinite;/*speed*/
}
.eg-h2 .fas,.eg-h2 .far,.eg-h2 .fab{
	font-size: clamp(48px, 3vw, 72px);
	line-height: 1.15;
	background: -webkit-linear-gradient( 60deg,#95c056, #37addc,#edaf23, #d64b8c);/* 緑 ▶ 青 ▶ 黄 ▶ 桃 */
	background-size:400%;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textAnime 10s infinite;/*speed*/
}
@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.jp-h2{
	font-size: clamp(20px, 3vw, 30px);
	/*font-family: 'Alfa Slab One', cursive;*/
	line-height: 1.25;
	font-weight: bold;
}





/* P text
----------------------------------------------------------------------------------------------------------------------*/
.xxxl-text{
	font-size: clamp(24px, 3vw, 30px);
}

.xxl-text{
	font-size: clamp(20px, 3vw, 24px);
}

.xl-text{
	font-size: clamp(18px, 3vw, 20px);
}

.l-text{
	font-size: clamp(16px, 3vw, 18px);
}

.m-text{
	font-size: clamp(14px, 3vw, 16px);
}

.s-text{
	font-size: clamp(12px, 3vw, 14px);
}




/* class Br
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px) {/*700pxでBr解除*/
	
.cancel-700{
	display: none;
}

}

.br-700{
	display: none;
}

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

.br-700{
	display: block;
}

}

.br-500{
	display: none;
}

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

.br-500{
	display: block;
}

}

.br-400{
	display: none;
}

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

.br-400{
	display: block;
}

.cancel-400{
	display: none;
}

}

.br-350{
	display: none;
}

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

.br-350{
	display: block;
}

}



/* アニメーションスライドBtn
----------------------------------------------------------------------------------------------------------------------*/
/*== ボタン共通設定 */
.btn-area{
	width: 300px;
	margin: 25px auto 0 auto;
}
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
    padding: 15px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	border-radius: 0.25em;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	color: #fff;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	font-size: 18px;
}
.btn:hover span{
	color: #fff;
}

.btn .fa-chevron-circle-right{
	font-size: 18px;
	color: #fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background: #666;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin: left top;
	transform:scale(1, 1);
}


/* Btn background-color
------------------------------------------------------------*/
.btn-pink{
	background: #d64b8c;
}
.btn-blue{
	background: #37addc;
}

@media screen and (max-width:700px) {
	
.btn{
	width: 100%;
}

.btn span {
	font-size: 14px;
}

.btn .fa-chevron-circle-right{
	font-size: 14px;
}

}



/* Footer
----------------------------------------------------------------------------------------------------------------------*/
footer{
	width: 100%;
	padding-top: 25px;
}

.foot-logo img{
	width: 350px;
	height: auto;
	margin: 0 auto;
}

.foot-bule-area{
	width: 100%;
	padding: 50px 0 25px 0;
	background: #37addc;
	border-top: 10px dotted #fff;
}

.foot-contents{
	width: 900px;
	margin: 0 auto;
}

.foot-contents .tel-contact{
	width: 100%;
	text-align: center;
}
.foot-contents .tel-contact dt{
	color: #fff;
	font-size: clamp(18px, 3vw, 24px);
	font-weight: bold;
}
.foot-contents .tel-contact dd a{
	color: #fff;
	font-size: clamp(30px, 3vw, 48px);
	font-family: 'Poppins', sans-serif;
}
.foot-contents .tel-contact dd a .fas{
	color: #fff;
}


.foot-contents .foot-nav{
	width: 276px;
	margin: 25px auto 0 auto;
}

.foot-contents .foot-nav ul{
	width: 100%;
}

.foot-contents .foot-nav ul li{
	/*float: left;*/
	/*margin-right: 5.5%;*/
	text-align: center;
}

.foot-contents .foot-nav ul li.foot-nav-last{
	/*float: right;*/
	margin-right: 0;
}

.foot-contents .foot-nav ul li a{
	font-size: 16px;
	color: #fff;
}
.foot-contents .foot-nav ul li a .fas{
	color: #fff;
}
.foot-contents .foot-nav ul li a:hover{
	opacity: 0.75;
}

	
.foot-contents .copy{
	text-align: center;
	font-size: clamp(10px, 3vw, 14px);
	font-family: 'Poppins', sans-serif;
	color: #fff;
	margin-top: 75px;
}

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

.foot-contents{
	width: 92%;
}

}

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

.foot-logo img{
	width: 50%;
}

}




/* Page-Top
----------------------------------------------------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    right: -80px;
    bottom: 50px;
	z-index: 40;
}

#page-top a{
    display: flex;
    justify-content: center;
    background: #95c056;
    transition: opacity .6s ease;
    align-items: center;
    text-decoration: none;
    border-radius: 50px;
	padding: 25px;
}
#page-top a:hover {
    opacity: 0.75;
}

#page-top .fa-arrow-up{
	line-height: 1;
	font-size: clamp(20px, 3vw, 30px);
}
#page-top a .fa-arrow-up{
	color: #fff;
}






#instagram {
	display: flex;
	justify-content: center;
	margin: 0 auto 50px;
}

#instagram img {
	width: 75px;
}

#app {
	display: flex;
	justify-content: space-around;
	width: 100%;
	max-width: 700px;
	margin: 50px auto 0;
}

#app img {
	width: 150px;
}

@media screen and (min-width:750px) {
	#app img {
		width: 216px;
	}
}