@charset "UTF-8";



/*-------------------------------------------------------------



  基本設定



-------------------------------------------------------------*/



body {

  height: 100%;

  background: #fff;

  color: #333;

  /*font: normal 100% "Meiryo UI", 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', Arial, sans-serif;*/

  font-family: "ヒラギノ角ゴ Pro W3";

  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;

}

.bl {

  color: #03F;

}

.red {
	color: red;
}

.yl {
	color: #fff101;
}

.or {
	color: #ec6c01;

}

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: #0f2872;
}



.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:  #edf4ff;

}


.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: #ec6c01;

  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;

}



.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;

}


/*
 *		章立て
 */
.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:#ec6c01; 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;
}

/*
 *		事例
 */

.wrap_video {
	margin: 2.5em auto;
	width: 800px;
	max-width: 92vw;
	aspect-ratio: 16/9;
	box-shadow: 0 0 0 10px #ec6c01, 0 0 10px 10px rgba(0, 0, 0, 0.5);
}

.wrap_video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
}

@media print, screen and (max-width: 800px) {

  body {

    height: 100%;
  
    background: #fff;
  
    color: #333;
  
    /*font: normal 100% "Meiryo UI", 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', Arial, sans-serif;*/
  
    font-family: "ヒラギノ角ゴ Pro W3";
  
    font-size: 20px;
  
    line-height: 1.4;
  
    -webkit-text-size-adjust: none;
  
  }

.wrapper {

  width: 100%;

  border: none;

  background: #FFF;

  overflow: hidden;

}

.wrap_video {
  margin: 8vw auto;
}

.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;

}

.sec05 .wrap{width: 90%; margin: 0 auto;}
	.sec05 .toggle {display: none;}
	.sec05 .Label {padding: 15px; display: block; color: #fff; background:#ec6c01; 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%;
	}

}





/* --------------------------------------------------------



   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;

}

}