@charset "utf-8";
/* ----------------------------------------------
common
---------------------------------------------- */
html { scroll-behavior: smooth;}

section{
    width:100%;
}

.cf:after{
    content:"";
    display:block;
    clear:both;
}

.fl{
	float: left;
}

.fr{
	float:right;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
section {
	width: 100%;
}
.contentsW {
	margin:0 auto;
	padding: 60px 0;
	max-width: 1200px;
	width: 90%;
}
@media screen and (max-width: 768px) {
	.contentsW { padding: 10% 0; }
}
.center {
	text-align: center;
}

a {
    transition-property: all;
    transition: 0.3s linear;
}
a:hover {
    opacity:0.5;
}
img {
	width: 100%;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

@media screen and (max-width: 768px) {
	section{
		width:100%;
		margin:0 auto;
		overflow: hidden;
	}


	.contents_main{
		width:90%;
		margin:30px auto;
		border-radius: 10px;
		padding:10px 0 30px 0;
	}

	/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
	.pc { display: none !important; }
	.sp { display: block !important; }
}

/* ----------------------------------------------
Fonts
---------------------------------------------- */
@font-face {
	font-family: "NotoSans";/*要素に指定するときに使うフォント名*/
	src:url(../../shared/fonts/NotoSansJP-SemiBold.woff2) format('woff2'),
	src:url(../../shared/fonts/NotoSansJP-SemiBold.woff) format('woff');
	font-display: swap;
}
body{
	font-family: 'NotoSans', serif;
  	letter-spacing: normal;
	line-height: 1.4;
	color:#333;
	font-size: 1.1rem;
	font-weight: 500;
	position: relative;
  	z-index: 1;
	caret-color: transparent;
	background: #fff url(../../images/bg.jpg) repeat !important;
}
@media screen and (max-width: 768px) {
	body{
		background: #f0faff;
	}
}

/* HTMLタグに適用 */
::selection {
	color: #fff;
	background-color: #000;
}
h1 {
	line-height: 1.5;
	background:#fff57a;
	text-align: center;
	padding: 20px;
	border-radius: 10px;
	font-size: 24px;
	font-weight: normal;
}

@media screen and (max-width: 768px) {
	h1 { font-size: 1.0rem; line-height: 1.2; text-align: center !important; }
}

.f_giga { margin-left:0.1em; letter-spacing:0.1em !important; }
.f_ten { margin-left:-0.2em; letter-spacing:-0.3em !important; }

.f_black { color:#333; }
.f_red { color:#e01028; }
.f_orange { color:#ff8300; }

.f_large { font-size: 120%; }
.f_small { font-size: 50%; }
.f_notes { font-size: 10px !important; }


/* ----------------------------------------------
Title
---------------------------------------------- */
#KV {
	margin:0 auto;
}
#KV .contentsW {
	padding:0 0 40px;
}
#KV .t {
	padding: 10px 40px;
	font-size: 24px;
	color: #fff;
	background: #27688d;
}

#KV .about {
	margin-top:15px;
	padding: 30px;
	background:#eee;
	font-size: 16px !important;
	font-weight: 100 !important;
}
#KV .about p {
	float:left;
	width:65%;
}
#KV .about img {
	float:right;
	width:30%;
}
#KV #n2.about p {
	float:right;
	width:65%;
}
#KV #n2.about img {
	float:left;
	width:30%;
}


/* ----------------------------------------------
Header
---------------------------------------------- */
header {
	width: 100%;
	background: #c6eafa;
	padding:40px 0;
	text-align: center;
}
header p {
	font-size: 24px;
	line-height: 1.5;
}
header p span {
	background-color: #df53b2;
	color:#ffffff;
	margin-right:5px;
	padding: 10px;
	border-radius: 5px;
}

@media screen and (max-width: 768px) {
	header {
		padding:5% 0;
	}

	header p {
		font-size: 18px;
		line-height: 1.5;
	}
}

  
body{
	background:#fff;
	line-height: 2;
}


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

.lead{
	margin:20px 0 0 0;
}

.btn-block{
	width:200px;  
	padding: 30px;
}

/* ----------------------------------------------
EX
---------------------------------------------- */
img.logo {
	max-width: 200px;
	height: auto;
}
#ex {
	font-size: 16px;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	width: 90%;
}

#ex p {
	text-align: left;
	font-size: 16px;
	font-weight: 100;
}

#ex p.t {
	margin-top:40px;
	text-align: left;
	font-size: 18px;
	border-bottom:#27688d 3px solid;
	font-weight: normal;
}

#ex p.pro {
	padding:50px 0;
}

@media screen and (max-width: 768px) {
	#ex {
		width: 90%;
		font-size: 1.0rem;
	}
	#ex p {
		font-size: 1.0rem;
		line-height: 1.5;
		text-align: left;
	}
}

li {margin-bottom:20px;padding:0;line-height: 1;}

.circle li:before { content:"●"; }
.circle li { margin-top:1em !important; margin-left:1em; list-style:none; text-indent: -1em; }

.dotted li:before { content:"・"; }
.dotted li { margin-top:1em !important; margin-left:1em; list-style:none; text-indent: -1em; }

ul.circle,
ul.dotted {
	font-size: 16px;
	margin:20px 0;
	padding:20px 40px;
	background: #eee;
}
@media screen and (max-width: 768px) {
	ul.circle,
	ul.dotted {
		margin:5% 0;
		font-size: 1.0rem;
		line-height: 1.5;
	}
}

/* ----------------------------------------------
book
---------------------------------------------- */
#book img {
	float: left;
	width: 45%;
	padding:2.5%;
}
#book div.input {
	float: right;
	width: 50%;
	padding: 5%;
}
#book .t {
	margin-bottom:10px;
	padding: 10px 5px;
	background: #04398a;
	color:#fff;
	text-align: center;
	line-height: 1.2;
}
#book p.coming {
	padding:50px 0;
	text-align: center;
	width: 100%;
}

@media screen and (max-width: 768px) {
	#book img {
		float: none;
		margin:0 auto;
		width: 100%;
	}
	#book div.input {
		float: none;
		width: 100%;
		padding: 5%;
	}
	#book p.coming {
		padding:10% 0;
	}
}

/* ----------------------------------------------
入力フォーム
---------------------------------------------- */
.form-box {
	background-color: #ffffff;
	padding: 15px;
	border-radius: 8px;
	max-width: 100%;
	margin: 0 auto 25px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	font-size: 16px;
  }

  label {
	margin-bottom: 8px;
	font-weight: bold;
  }

  .input-row {
	align-items: center;
  }

  input[type="email"],
  input[type="num"]  {
	flex: 1;
	padding: 3px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	width:100%;
	margin-bottom: 10px;
	background-color: #eee;
	}

  button {
	margin: 0 25%;
	padding: 10px;
	background-color: #df53b2;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	width: 50%;
  }

  button:hover {
	background-color: #991e71;
  }