@charset "utf-8";
@media (prefers-reduced-motion: no-preference) { 
  html:focus-within {
    scroll-behavior: smooth;
  }
  /*<div id="point_01" tabindex="-1"></div>*/
}
:root {
  --main-color: #246DE5;/*青*/
  --font-color: #333333;/*黒*/
  --gray: #E4EBF9;/*グレー*/
  
  --Regular: 400;
  --Medium: 500;
  --SemiBold: 600;
  --Bold: 700;
  --ExtraBold: 800;
  --Black: 900;
  
  --font-size14: clamp(1.2rem,1.3vw,1.4rem);
  --font-size16: clamp(1.4rem,1.5vw,1.6rem);
  --font-size18: clamp(1.4rem,1.6vw,1.8rem);
  --font-size19: clamp(1.5rem,1.7vw,1.9rem);
  --font-size20: clamp(1.6rem,1.8vw,2.0rem);
  --font-size24: clamp(1.6rem,2.0vw,2.4rem);
  --font-size28: clamp(1.7rem,2.2vw,2.8rem);
  --font-size32: clamp(1.7rem,2.4vw,3.2rem);
  --font-size36: clamp(1.8rem,2.8vw,3.6rem); 
  --font-size44: clamp(2.2rem,3vw,4.4rem);
  --font-size60: clamp(2.6rem,3.5vw,6.0rem);
  
  --px10: clamp(5px,1.0vw,10px);
  --px20: clamp(10px,1.5vw,20px);
  --px30: clamp(15px,2vw,30px);
  --px35: clamp(17px,2.3vw,35px);
  --px40: clamp(20px,3vw,40px);  
  --px50: clamp(25px,4vw,50px);
  --px60: clamp(30px,5vw,60px);
  --px70: clamp(35px,6vw,70px);
  --px80: clamp(40px,7vw,80px);
  --px85: clamp(43px,7.5vw,85px);
  --px90: clamp(45px,8vw,90px);
  --px100: clamp(50px,9vw,100px);
  --px120: clamp(60px,11vw,120px);
  --px140: clamp(70px,13vw,140px);
  --px170: clamp(80px,16vw,170px);
}
.color_blue{
	color: #246DE5;
}
.color_green{
	color: #2BAEA3;
}
.color_orange{
	color: #E59E24;
}
.bg_blue{
	background-color: #246DE5;
}
.bg_green{
	background-color: #2BAEA3;
}
.bg_orange{
	background-color: #E59E24;
}
/***********共通 sp ***********/
html{
	/* ルートのフォントサイズを10pxに設定*/
	font-size: 62.5%;
	height:100%;
	-webkit-overflow-scrolling: touch;
	 /*iphoneで勝手に文字サイズ大きくしない*/
	-webkit-text-size-adjust: 100%;
}
body{
    /* ルートのフォントサイズを1.4em（14pxと同等のサイズ）に設定 */
    font-size: 1.4em;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: var(--Regular);
    overflow-x: hidden;
    line-height: 1.6;
	color: #333333;
}

/*----- Googl Fonts -----*/
/*Noto Sans JP ゴシック/100/Extra Light 200/Light 300/Regular 400/Medium 500/SemiBold 600/Bold 700/Extra Bold 800/Black 900*/
.noto_sans {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
  }
  /*Noto Serif JP 明朝 /Extra Light 200/Light 300/Regular 400/Medium 500/SemiBold 600/Bold 700/Extra Bold 800/Black 900*/
  .noto_serif {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
  }
/*----- Adobe Fonts -----*/
/*Century Gothic Pro Bold*/
.century{
	font-family: "century-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.clear::after{
	content: '';
	display: block;
	height:0;
	font-size:0;
	clear:both;
	visibility:hidden;
}
img{
	width:100%;
	vertical-align: top;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
a{
	text-decoration: none;
	color: #333333;
	transition: .3s;
}
a:hover{
	opacity: 0.7;
	transition: .3s;
}
:target {
    outline: none;
    border: none;
}
h1,h2,h3,h4,h5,p,div,ul,li{
	margin:0;
	padding: 0;
	font-weight: var(--Regular);
}
li{
	list-style-type: none;
}
.sp{
	display: block;
}
.tab{
	display: none;
}
.sptab{
	display: block;
}
.pc{
	display: none;
}
.tabpc{
	display: none;
}
/*iphoneのボタン勝手にまるくしない*/
input[type="button"], 
input[type="submit"], 
input[type="reset"] {
    -webkit-appearance: none;
    appearance: none; /* 標準の `appearance` も指定 */
}


@media (min-width:768px){
/***********共通 tab ***********/
	body {
		/* ルートのフォントサイズを1.5em（15pxと同等のサイズ）に設定 */
		font-size: 1.5em;
	}
	/*タブレットPCでは電話かけない*/
	a[href^="tel:"]{
		pointer-events: none;
	}
	.sp{
			display: none;
		}
	.tab{
		display: block;
	}
	.sptab{
		display: block;
	}
	.pc{
			display: none;
		}

	.tabpc{
		display: block;
	}

}

@media (min-width:1024px){
/***********共通 pc ***********/
	body {
		/* ルートのフォントサイズを1.6em（16pxと同等のサイズ）に設定 */
		font-size: 1.6em;
	}
	.sp{
			display: none;
		}
	.pc{
			display: block;
		}
	.tab{
		display: none;
	}
	.tabpc{
		display: block;
	}
	.sptab{
		display: none;
	}
}
