@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:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}



/*--------------------------------------
  リンク
--------------------------------------*/
a {
	color: #353535;
	text-decoration:none;
}


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


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

基本設定

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


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;
}


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

見出し 

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


.midashi {
width: 100%;
max-width: 1000px;
margin: 0 auto;
  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%);
}

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

 サブページ共通
	
	.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: 400px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 1000px;
  /*width: 100%;
  height: 100vh;*/
  font-size:3.5em;
  letter-spacing:0.2em;
  font-weight: bold;
		transform: skewX(-8deg);
}

.pan_list {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding: 1% 0 ;
	text-align:center;
	background-color: rgba(0,0,0,0.02);
	letter-spacing:0.05em;
	}

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



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

サブページ共通下部ボタン　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;

	}
}


.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);
}


@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);
}
}