@charset "UTF-8";



/*-------------------------------------------------------------



  基本設定



-------------------------------------------------------------*/



body {

  height: 100%;

  background: #fff;

  color: #333;

  /*font: normal 100% "Meiryo UI", 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', Arial, sans-serif;*/

  font-family: "Noto Serif Japanese";

  font-size: 20px;

  line-height: 1.4;

  -webkit-text-size-adjust: none;

}



a:link, a:visited, a:active {

  text-decoration: none;

}



a:link {

  color: #03F;

}

.red {
	color: red;
}

.yl {
	color: #fff101;
}

a:visited {

  color: #03F;

}



a:hover {

  color: #0033FF;

  text-decoration: underline;

}



a:active {

  color: #03F;

}



.clearfix:after {

  content: ".";

  display: block;

  clear: both;

  height: 0;

  visibility: hidden;

}



.clearfix {

  min-height: 1px;

  text-align: center;

}



* html .clearfix {

  height: 1px;

  /*\*/

  /*/

  height: auto;

  overflow: hidden;

  /**/

}





/*-------------------------------------------------------------



  header



-------------------------------------------------------------*/



header {

  box-sizing: border-box;

  margin: auto;

  padding: 0;

  width: 100%;

}



.hdr_banner { 
  margin-bottom: 0px;
  background: #ff0000;
}



.hdr_banner img {

  display: block;

  width: 90%;

  margin: auto;

}



header .banner { width: 100%;}



.banner img {

  width: 100%;

  margin: auto;

  vertical-align: bottom;

}

.img {

  width: 95%;

  margin: auto;

  vertical-align: bottom;

}

@media print, screen and (max-width: 800px) {

header {

  width: 100%;

  height: auto;

  padding: 0;

}



.hdr_banner {

  margin-bottom: 0px;

}

}





/*-------------------------------------------------------------



  contents



-------------------------------------------------------------*/

.jirei {
	padding: 1em 0;
	background:  #eff1fd fixed;

}

.wrapper {

  box-sizing: border-box;

  width: 850px;

  margin: auto;

  /*background: #f2f1f1;*/

  position: relative;

  background: #fff;

  box-shadow: 0 0 2px #999;

}



.contents {

  margin: auto;

  clear: both;

}



article {

  width: 100%;

  background: #fff;

}



section {

  padding: 40px 25px 25px;

  overflow: hidden;

}



section p {

  margin-bottom: 20px;

}



h2 {

	font-weight: 600;

  margin-bottom: 20px;

  text-align: center;

  line-height: 1.7;

  font-size: 200%;
}



h2 span {

	color: #1e2e57;

  font-weight: bold;

}



h2 .ttl {

  font-size: 130%;

  font-weight: bold;

  color: #0d3245;

  line-height: 1.5;

}



.container {

  margin: 10px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.normal_box {

  border: solid 1px #eee;

  padding: 10px 20px;

  margin: auto;

}



.normal_box p {

  margin: 0;

}

.pconly {
	display: block;
}

.present_txt {

  font-weight: 600;

  font-size: 120%;

}

img {
	display: block;	/*	ブロック要素としてふるまう：中揃えで表示	*/
	margin: 0 auto;
	max-width: 100%;
}

.text_box {

  /*width: calc(100% - 200px);*/

  padding: 0 70px;

  font-size: 120%;

  line-height: 1.8;

  text-align: left;

}



.text_box2 {

  width: 100%;

  padding-top: 20px;

  padding-bottom: 10px;

	text-align: center;

}



.book {

  display: block;

  width: 180px;

  float: right;

  margin: 0 0 30px 20px;

  border: solid 1px #ddd;

}


/*
 *		form
 */

.form {
	margin: 0 auto;
	padding: 2.5em 0;
	background: url(../image/bg_form.jpg);
}

.form + section h2 {
	margin-top: 0;
}

.form h2 {
	margin: 0 auto;
	padding: 0 auto;
	width: 850px;
	max-width: 100%;
	background: none;
	box-shadow: none;
}


.form h2::before,
.form h2::after {
	content: none;
}

.submit {
	margin: 0 auto;
	padding: 0 0 2em;
	width: 850px;
	max-width: 98%;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	background: #fff;
}

.submit .btn {
	display: block;
	margin: 25px auto 0;
	max-width: 96%;
	aspect-ratio: 854 / 206;
}

.deco {
	display: block;
	margin: 1em auto 1em;
	padding: 6px 6px 4px;
	width: 800px;
	max-width: 90%;
	aspect-ratio: 840 / 108;
	border: 4px solid #333;
	background: #fff;
	color: #1698c7;
	font-size: 70%;
	font-weight: bold;
	text-align: center;
}

.deco::placeholder {
	color: #AAA;
}

.att01{
	margin: 0 auto;
	padding: 0 auto;
	width: 860px;
	max-width: 96%;
	border: 3px solid #f8f8f8;
	background: #fff;
	font-size: 71%;
}

.att01 h3{margin: 1em auto 0; padding: 0!important; background: none!important; text-align: center; font-size: larger;}

.att01 p{
	margin: 0 auto!important;
    padding: 10px!important;
    width: 800px!important;
	max-width: 96%;
    background: #fff!important;
	line-height: 1.7!important;
	font-size: 105%;
	font-weight: normal;
	box-shadow: none;
}



.btn {
	animation-name: btn-animation;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

.btn:hover {
	animation-duration: 0.8s;
}



@keyframes btn-animation {
	0% {
		transform: translateY(-1em);
	}

	50% {
		transform: translateY(0em);
	}

	100% {
		transform: translateY(-1em);
	}
}

.terms {
  margin: 0 auto!important;
	overflow:auto;
	width:90%; height:100px;
	padding:20px;
	border:3px solid #D4D4D4;
	background-color:#fff;
	line-height:1.5em;
	font-size: 80%;
}


/*
 *		章立て
 */
.sec05{margin: 0 auto;
	width: 100%;
	max-width: 94vw;}
.sec05 .wrap{
	width: 800px; 
	margin: 0 auto;
}

.sec05 .toggle {display: none;}
.sec05 .Label {padding: 20px; display: block; color: #fff; background:#2F448F; margin: 50px 0 0 0; text-align: center; font-weight: bold; border-radius: 10px 10px 0 0;}
.sec05 .Label::before{ content:""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 20px; transform: rotate(135deg);}
.sec05 .Label, .content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.sec05 .content { height: 0; margin-bottom:10px; padding:0 20px; overflow: hidden; background: #fff; border-radius: 0 0 10px 10px;}
.sec05 .toggle:checked + .Label + .content { height: auto; padding:20px ; transition: all .3s;}
.sec05 .toggle:checked + .Label::before { transform: rotate(-45deg) !important;}



/*
 *		profile
 */	


/* .profile h2 {
	margin: 0em auto 1.5em; 
	background: url(../images/bg_hdprofile.jpg) center top no-repeat;
	font-size: 1em;
	text-align: left;
 } */

.shd_profile {
	display: inline;
	margin-top: 1em;
}

.tt_profile {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	max-width: 100%;
}

.tt_profile img {
	flex-shrink: 0;
}

.shd_profile {
	max-width: 68%;
}

.pic_prof {
	max-width: 30%;
}

.con_profile {
	margin:0 auto;
	padding-top: 2.5em;
	max-width: 100vw;
	box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 100px rgba(0, 0, 0, 0.05) inset;
	background: url("../image/bg_profile.jpg");
}

.con_profile p {
	padding: 0 2.5em;
}

.shd_keireki,
.shd_books {
	margin-left: 0;
	max-width: 25%;
}

.shd_books {
	margin-bottom: 1.7em;
}


.books {
	margin: 2.5em auto;
	margin-left: 2.5em;
	padding-bottom: 2.5em;
	width: 780px;
	max-width: 100vw;
}

.books h3 {
	margin-bottom: 1.5em;
	padding-left: 0;
}


.con_books {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	justify-content: space-between;
	margin:  0 auto;
}

.con_books img {
	margin: 0;
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
}


.delight {
	width: 200px;
	max-width: 100%;
}

.sign {
	padding-top: 1em;
	text-align: right;
}

.sign img {
	display: inline;
}


/***	常時表示ボタン設定	***/

.flbtn {
	opacity: 1;
	position: fixed;
	right: 1em;
	bottom: 0.5em;
	z-index: -9999px;
}

.flbtn a {
	display: block;
	width: 360px;
	aspect-ratio: 814 / 206;
	background: url(../image/button.png) no-repeat;
	background-size: 100%;
	text-indent: 9999px;

	animation-name: btn-animation;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-delay: 0.6s;

	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}



@keyframes btn-animation {
	0% {
		transform: translateY(0.5em);
	}

	50% {
		transform: translateY(-0.5em);
	}

	100% {
		transform: translateY(0.5em);
	}
}



@media print, screen and (max-width: 800px) {

.wrapper {

  width: 100%;

  border: none;

  background: #FFF;

  overflow: hidden;

}



.contents {

  padding: 0;

  margin-bottom: 10px;

}



.banner img {

  display: block;

  width: 100%;

}



article {

  float: none;

  width: 100% !important;

}



section { padding: 20px 4%;}



.book { display: none;}



.normal_box {

  box-sizing: border-box;

  padding: 10px;

}



.text_box {

  width: 100% !important;

  margin-bottom: 0;

  font-size: 100%;

  padding: 0;

}



.text_box p { text-align: left !important;}

.text_box p br { display: none;}

.text_box2 {

	padding: 0;

	width: 100% !important;

}

body {

  height: 100%;

  background: #fff;

  color: #333;

  /*font: normal 100% "Meiryo UI", 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', Arial, sans-serif;*/

  font-family: "Noto Serif Japanese";

  font-size: 20px;

  line-height: 1.4;

  -webkit-text-size-adjust: none;

}

/*
	 *		form
	 */

	.form {
		padding: 1.5vw 0;
	}

	.form h2 {
		margin-bottom: 4vw;
	}

	.form h2 img {
		max-width: 98%;
	}

	.submit {
		padding: 0;
	}

  .terms {
    margin: 0 auto;
    overflow:auto;
    width:90%; height:100px;
    padding:5px;
    border:3px solid #D4D4D4;
    background-color:#fff;
    line-height:1.5em;
    font-size: 80%;
  }

.sec05 .wrap{width: 90%; margin: 0 auto;}
	.sec05 .toggle {display: none;}
	.sec05 .Label {padding: 15px; display: block; color: #fff; background:#2F448F; margin: 20px 0 0 0; text-align: center; font-weight: bold; border-radius: 10px 10px 0 0;}
	.sec05 .Label::before{ content:""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 20px; transform: rotate(135deg);}
	.sec05 .Label, .content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
	.sec05 .content { height: 0; margin-bottom:10px; padding:0 10px; overflow: hidden; background: #fff; border-radius: 0 0 10px 10px;}
	.sec05 .toggle:checked + .Label + .content { height: auto; padding:10px ; transition: all .3s;}
	.sec05 .toggle:checked + .Label::before { transform: rotate(-45deg) !important;}
	.sec05 img{width: 100%;}


	.tt_profile {
		flex-direction: column;
	}

	.con_profile {
		padding-top: 4vw;
	}

	.con_profile p {
		padding: 0 4vw;
	}

	.pic_prof {
		max-width: 50%;
	} 

	.shd_profile {
		max-width: 90%;
	}

	.flbtn {
		left: calc( 50vw - 40vw );
	}

	.flbtn a {
		width: 80vw;
	}

}





/* --------------------------------------------------------



   footer



-------------------------------------------------------- */



footer {

  box-sizing: border-box;

  clear: both;

  height: auto;

  margin: 0 auto;

  padding: 20px;

  font-size: 90%;

  color: #333;

  text-align: left;

  overflow: hidden;

}



.ftr_link {

  font-size: 80%;

  float:  center;;

  line-height: 1;

  margin-bottom: 10px;

}



.ftr_link a, .ftr_link a:active, .ftr_link a:visited {

  color: #333;

  text-decoration: underline;

}



.ftr_link a:hover {

  color: #f00;

  text-decoration: none;

}



.ftr_cpybox {

  float: center;

  font-size: 85%;

}



.ftr_company {

  font-size: 130% !important;

  font-weight: 600;

  margin-bottom: 10px !important;
  
  
}



footer br {

  display: none;

}



.bdr_top {

  border-top: solid 1px #ccc;

}



@media print, screen and (max-width: 800px) {

footer {

  padding: 2%;

  background: #fff;

}



footer br {

  display: block;

}



.ftr_link {

  clear: both;

  float: none;

  text-align: center;

  font-size: 80%;

}



.ftr_cpybox {

  float: none;

  font-size: 80%;

  text-align: center;

}



.ftr_company {

  font-size: 120% !important;

  margin-top: 15px;

}



.ftr_cpybox p {

  margin-bottom: 5px;

}



.bdr_top {

  border-top: solid 1px #f2f1f1;

  padding-top: 20px;

}

.form {
  padding: 2vw 0;
}

}