@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700&display=swap');

	
/* ******************************

768pxまではSP 1024pxまでがPC

****************************** */


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

/* ******************************

PCとSPで表示・非表示を切り替える

****************************** */

.pc{
	display: block !important;
}
.sp{
	display: none !important;
}
@media screen and (max-width: 768px){
.pc{
	display: none !important;
}
.sp{
	display: block !important;
}
}

/* ******************************

スマホ表示以外で電話番号のリンクを無効化

****************************** */

@media (min-width: 769px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/* ******************************

リセット系

****************************** */


* {
	margin: 0;
	padding: 0;
	font-size: 100%;
}



ul, ol {
	list-style: none;
}

img {
	vertical-align: middle;
	border: 0;
}

button {
	font-size: 100%;
}

.clear {
	clear: both;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

textarea {
	width: 100%;
}

input {
	max-width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

dd,
dt {
  padding: 0;
  margin: 0;
}



/* ******************************

クリアフィックス

****************************** */	

.clearfix:after {
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
}

* html .clearfix {
	zoom: 1;
}

*:first-child+html .clearfix {
	zoom: 1;
}


/* ******************************

リンク

****************************** */	

a {
	color: #353535;
	text-decoration:none;
}


a:hover {
	color: #2588ff;
	text-decoration:none;
	transition-duration:0.1s;
}

img { -ms-interpolation-mode: bicubic; }

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

/* ******************************

基本設定

****************************** */	


body{
overflow-x: hidden;
background:#ffffff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.9em;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.7;
color: #353535;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; 
word-wrap: break-word;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}



/* ******************************

 サブページ共通 pc
	
	.subpage_topは各ページで背景選択が必要

****************************** */	


.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
  background-size: 3px 3px;
  z-index: 2;
}
	

.subpage_title {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 300px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 1000px;
  /*width: 100%;
  height: 100vh;*/
  font-size:4.5em;
  letter-spacing:0.2em;
  font-weight: 700;
		transform: skewX(-8deg);
}

.subpage_title2 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 520px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 1000px;
  /*width: 100%;
  height: 100vh;*/
  font-size:1.8em;
  letter-spacing:0.2em;
  font-weight: 700;
		transform: skewX(-8deg);
}



.pan_list {
	width:100%;
	height:auto;
	margin:0 0 5% 0;
	padding: 1% 0;
	text-align:center;
	/*background-color: rgba(0,0,0,0.9);*/
	color:#353535;
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
	overflow: hidden;
	}

.pan_list a {
	color:#009bdb;
	text-decoration:none;
	}
	
.pan_list a:hover {
	text-decoration:underline;
	color:#88c8e2;
	}
	
	
/* ******************************

 サブページ共通 sp

****************************** */	

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

	
	

.subpage_title {
  text-align: center;
  color:rgba(255,255,255,.8);
		/*-webkit-text-stroke: 1px #353535;*/
  text-stroke: 1px #353535;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  width: 100%;
  height: auto;
  font-size:3.2em;
  letter-spacing:0.2em;
  font-weight: 700;
		transform: skewX(-8deg);
}

.subpage_title2 {
  text-align: center;
  color:rgba(255,255,255,.9);
		/*-webkit-text-stroke: 0.02em #353535;*/
  text-stroke: 1px #353535;
  position: absolute;
  top: 57%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  width: 100%;
  height: auto;
  font-size:1.3em;
  letter-spacing:0.2em;
  font-weight: 700;
		transform: skewX(-8deg);
}


.pan_list {
	width:100%;
	height:auto;
	margin:0 0 3% 0;
	padding: 1% 0 ;
	text-align:center;
	background-color: rgba(0,0,0,0.02);
	letter-spacing:0.05em;
	font-weight: 600;
	color:#353535;
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
	overflow: hidden;
	}

.pan_list a {
	color:#009bdb;
	text-decoration:none;
	}
	
.pan_list a:hover {
	text-decoration:underline;
	color:#88c8e2;
	}
}


/* ******************************

見出し 

****************************** */	


.midashi {
width: 100%;
max-width: 1000px;
margin: 0 auto;
letter-spacing: 0.2em;
  padding: 1rem 3rem;
  -webkit-transform: skew(-8deg);
  transform: skew(-8deg);
  color: #fff;
		font-size: 2.0em;
		font-weight: bold;
		/*background-color: #009bdb;*/
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

@media screen and (max-width: 640px) {
.midashi {
width:90%;
margin: 0 auto;
letter-spacing: 0.2em;
padding: 0.7rem 3rem;
-webkit-transform: skew(-8deg);
transform: skew(-8deg);
color: #fff;
font-size: 1.8em;
font-weight: bold;
/*background-color: #009bdb;*/
background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}
}

/* ******************************

サブページ共通ボックス

****************************** */	

/*モバイルファースト*/
.card-container{
background: #fff;
color: #353535;
display: flex;
margin: 20px auto;
width: 90%;
/*box-shadow: 0 12px 10px -6px rgba(0,0,0,.25);*/
}

.card-text{
width:100%;
margin: 10px 0 10px 13px;
}
.card-text h3{
padding-top: 10px;
font-size: 1.1em;
margin: 0 0 7px 0;
}
.card-text p{
font-size: 1.0em;
letter-spacing: 0.1em;
}
.card-img{
width: 100%;
}

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


/*PCサイズ*/
@media screen and (min-width:650px) {
.card-container{
max-width: 900px;
height: 500px;
}

.card-text h3{
font-size: 1.4em;
letter-spacing: 0.15em;
}

.card-text p{
font-size: 1.1em;
letter-spacing: 0.1em;
font-weight: 500;
}
}


/* ******************************

サブページ共通下部ボタン　sp

****************************** */	


.btn_radius_wrap {
	position:relative;
	width:100%;
	height:auto;
	margin:10% 0%;
	}

.btn_radius a {
font-size:1.1em;
font-weight: 600;
letter-spacing: 0.3em;
background-color:#009bdb;
color:#fff;
border:3px solid #009bdb;
text-align:center;
border-radius:50px;
transform: skewX(-8deg);
padding:1.7% 0%;
text-decoration: none;
display: block;
position: absolute;
bottom: 33%;
left: 0;
right:0;
margin: auto;
/*background-color:#e6e4dd;*/
width:60%;
height: auto;
z-index: 3;
/*animation: flash 1.0s linear infinite;
animation-duration: 6.0s;*/
	}
	
	
.btn_radius a:hover {
color:#009bdb;
border:3px solid #009bdb;
background-color:#fff;

	}
	


@media screen and (min-width:650px) {


.btn_radius_wrap {
	position:relative;
	width:100%;
	height:auto;
	margin:10% 0% 15% 0%;
	}

.btn_radius a {
font-size:1.1em;
font-weight: 600;
letter-spacing: 0.3em;
background-color:#009bdb;
color:#fff;
border:3px solid #009bdb;
text-align:center;
/*border-radius:50px;*/
transform: skewX(-8deg);
padding:1.7% 0%;
text-decoration: none;
display: block;
position: absolute;
bottom: 33%;
left: 0;
right:0;
margin: auto;
/*background-color:#e6e4dd;*/
width:40%;
height: auto;
z-index: 3;
/*animation: flash 1.0s linear infinite;
animation-duration: 6.0s;*/
	}
	
	
.btn_radius a:hover {
color:#009bdb;
border:3px solid #009bdb;
background-color:#fff;

	}
}



/* ******************************

fadeUpTrigger

****************************** */	


/* 4-3 くるっ（Z 軸（右へ）） */
.rotateRightZ{
	animation-name: rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		}
	to{
		transform: rotateZ(360deg);
		}
}

/* 4-1 ふわっ（その場で） */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 4-2 ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 4-2 パタッ（左上へ） */
.flipLeftTop{
animation-name: flipLeftTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 4-2 パタッ（右上へ） */
.flipRightTop{
animation-name: flipRightTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* 4-4 ボンッ（拡大） */
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.zoomInTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger{
    opacity: 0;
}



/************************************

可視範囲にスクロールした時のアニメーション

************************************/

	
/* 画面外にいる状態 */
.fadein1 {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 800ms;
    }
 
/* 画面内に入った状態 */
.fadein1.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	/*transition-delay:0.1s;*/
    }

/* 画面外にいる状態 */
.fadein2 {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 2000ms;
    }
 
/* 画面内に入った状態 */
.fadein2.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	/*transition-delay:0.1s;*/
    }

/* 画面外にいる状態 */
.fadein3 {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 3000ms;
    }
 
/* 画面内に入った状態 */
.fadein3.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	/*transition-delay:0.1s;*/
    }
/* 画面外にいる状態 */
.fadein4 {
    opacity : 0;
    transform : translate(0, 70px);
    transition : all 500ms;
    }
 
/* 画面内に入った状態 */
.fadein4.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	/*transition-delay:0.1s;*/
    }


/************************************

電話番号リンクをスマホのみ有効

************************************/


@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}