@charset "utf-8";


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table.table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body {
color:#333;
font-size:16px;
font-family:"Century Gothic",arial, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
line-height:1.9;
-webkit-text-size-adjust: none;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #006;
}


/* リンク設定
------------------------------------------------------------*/
a{
color:#39F;
text-decoration:none;
}
a:hover{
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
a:active,
a:focus {outline:0;}


/* 全体
------------------------------------------------------------*/
*{
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;
}

#header,
#wrapper,
.inner{
max-width:960px;
padding:0;
margin: 0 auto;
}
#wrapper{
	margin-bottom: 50px;
}

i.fa{
	margin: 0 5px;
}

.bgc_006{
	background-color: #006;
}
.bgc_666{
	background-color: #666;
}


/**************************
/* ヘッダー
**************************/
.description{
	background-color: #006;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #DDD;
}
.description h1{
	font-size: 10px;
	color: #FFF;
	max-width:960px;
	padding: 5px 15px;
	margin:0 auto;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	font-weight: bold;
	line-height: 1.2;
}
#header .logo{
width: 250px;
margin: 20px 10px;
}

.logo a{
display: block;
line-height: 1;
}

.logo img{
width: 100%;
height: auto;
}




/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{
	margin: 0 auto 35px auto;
	padding:0;
	width:100%;
	position:relative;
	line-height:0;
	z-index: 200;
	text-align: center;
	background-color: #EEE;
}

#mainBanner img{
max-width:100%;
height:auto;
}


/*--- スマホのみ表示タブメニュー ---*/
#sp_tab_nav {
display: none;
}
/*--- スマホのみ表示タブメニューここまで ---*/




/**************************
/* グリッド
**************************/

.gridWrapper{
	width:960px;
    padding-bottom:40px;
    overflow: hidden;
}

.gridWrapper .grid{
	float:left;
	width:45%;
	margin: 0 0 0 2%;
}

.gridWrapper .grid2{
	float:left;
	width:48%;
	margin: 0 0 0 2%;
}

.gridWrapper .grid3{
	float:left;
	width:30%;
	margin: 0 0 0 2%;
}

.gridWrapper .grid4{
	float:left;
	width:40%;
	margin: 0 0 0 2%;
}

.gridWrapper .grid5{
	float:left;
	width:20%;
	margin: 0 0 0 0.3%;
}

.gridWrapper .grid6{
	float:left;
	width:300px;
	margin: 0 0 0 2%;
}


.gridWrapper .grid7{
	float:left;
	width:70%;
	margin: 0 0 0 2%;
}


.gridWrapper .grid img{
	float:left;
	width:100%;
    height:auto;

}	
	
.gridWrapper .grid2 img{
	float:left;
	width:100%;
    height:auto;

}		
	
.gridWrapper .grid3 img{
	float:left;
	width:100%;
    height:auto;

}	
	
.gridWrapper .grid4 img{
	float:left;
	width:100%;
    height:auto;

}	

.gridWrapper .grid5 img{
	float:left;
	width:100%;
    height:auto;

}

.gridWrapper .grid p{
	margin-bottom:5px;
}

.gridWrapper .box{
	padding: 15px;
	margin: 0 0 0 2%;
	border:1px solid #DDD;
	color: #333;
	border-radius:8px;
	overflow: hidden;
}

.gridWrapper .box img{
width:100%;
height:auto;
border:0px solid #DDD;
}

.gridWrapper .box p.readmore{
	float:right;
	font-size: 13px;
	margin: 15px 0 5px 0;
	color: #FFF;
	background-color:  #006;
	padding: 5px 8px;
	border-radius: 5px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #28D;
	display: inline;
}
.gridWrapper a .box:hover p.readmore{
	background-color: #FFF;
	color: #39F;
	border-bottom-color: #CCC;
}



/**************************
/* 吹き出し本体 三角アイコン - 左右の中心
**************************/
 
.balloon1{
  position: relative;
  padding: 20px;
  background-color: #006;
  text-align: center;
  font-size: 100%;
  color: #FFF;
}

.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #006;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}


.balloon2{
  position: relative;
  padding: 20px;
  background-color: #C63527;
  text-align: center;
  font-size: 100%;
  color: #FFF;
}

.balloon3 {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 100%; /* 幅 */
  margin: 0 auto 20px; /* 上 左右 下のマージン */
  padding: 10px; /* ふきだし内の余白 */
  background: #C63527; /* 背景色 */
  text-align: center; /* テキストの揃え */
  color: #FFF;
  border-radius: 8px; /* <-追加 */
}
.balloon3::before { /* 三角の部分 */
  content: '';
  position: absolute; /* 位置固定 */
  bottom: -28px; /* 線幅の2倍 */
  left: 50%;
  margin-left: -14px; /* 線幅だけずらす */
  border: 14px solid transparent; /* 線幅の設定 */
  border-top-color: #C63527; /* 吹き出しの地と同じ色 */
}

.balloon4{
  position: relative;
  padding: 20px;
  background-color: #C63527;
  text-align: center;
  font-size: 100%;
  color: #FFF;
}

.balloon4::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #C63527;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}


/**************************
/* メイン コンテンツ
**************************/

section.content article,
section.contentgray article, 
section.contentaka article,
section.contentkiiro article,
section.contentgraph article {
	margin: 0 auto;
	max-width:960px;
	position:relative;
	background:#fff;
	padding-top:2%;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom:3%;
}

section.contentgray article2 {
	margin: 0 auto;
	max-width:960px;
	position:relative;
	background:#EEE;
	padding-top:2%;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom:3%;
}


* html section.content article{height:1%;}


section.contentgray {	
	margin: 0 auto;
	background:#EEE;
  padding-bottom:5%;
}

section.contentgray2{
  display: flex;
  justify-content: center;
  background:#EEE;
  flex-wrap: wrap;
  padding-top:2%;
  padding-bottom:5%;
}

.boxgray{
  padding: 15px;
  width:310px;
  height:auto;
  margin: 10px;
  background-color: #fff;
}

.boxgray2{
	margin: 0 auto;
	width:960px;
	position:relative;
	background:#fff;
	padding-top:2%;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom:3%;
}

section.contentaka {	
	margin: 0 auto;
	background:#C63527;
  padding-bottom:5%;
}

section.contentkiiro {	
	margin: 0 auto;
	background:#F1C400;
  padding-bottom:5%;	
}

section.contentgraph {
  margin     : 0 auto;
  max-width  : 100%;
	padding-right: 2%;
	padding-left: 2%; 
  padding-bottom:5%;
                                            /* ドット（水玉）模様のCSS */
  background-color : #ffffff;
  background-image :

    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 12px,
       rgba(153, 153, 153, 0.20) 13px,  rgba(153, 153, 153, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(153, 153, 153, 0.20) 26px,  rgba(153, 153, 153, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(153, 153, 153, 0.20) 39px,  rgba(153, 153, 153, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(153, 153, 153, 0.20) 52px,  rgba(153, 153, 153, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(153, 153, 153, 0.20) 65px,  rgba(153, 153, 153, 0.20) 65px),

    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 12px,
       rgba(153, 153, 153, 0.20) 13px,  rgba(153, 153, 153, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(153, 153, 153, 0.20) 26px,  rgba(153, 153, 153, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(153, 153, 153, 0.20) 39px,  rgba(153, 153, 153, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(153, 153, 153, 0.20) 52px,  rgba(153, 153, 153, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(153, 153, 153, 0.20) 65px,  rgba(153, 153, 153, 0.20) 65px);
}

section.content p{margin-bottom:5px;}

section.content
section.contentgray article, 
section.contentaka article,
section.contentkiiro article,
section.contentgraph article img {
    height:auto;
}



  section.contPlusMassage {
    border: 5px solid #1a2b70;
	max-width:960px;
    padding: 30px;
    margin: 50px auto;
  }
  
  section.contPlusMassage h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
    transform: rotate(0.03deg) !important;
    font-size: 2.025rem !important;
    line-height: 4.375rem !important;
    font-weight: bold !important;
    font-feature-settings: "palt" !important;
    margin: 0 0 20px;
    font-weight: bold;
    padding: 0 20px 30px;
    color: #1a2b70;
    border-bottom: 4px double #1a2b70;
    position: relative;
  }
  

  
  section.contPlusMassage h3 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
    transform: rotate(0.03deg) !important;
    font-size: 1.500rem !important;
    line-height: 4.375rem !important;
    font-weight: bold !important;
    font-feature-settings: "palt" !important;
    margin: 0 0 20px;
    font-weight: bold;
    padding: 0 20px 30px;
    color: #1a2b70;
    border-bottom: 4px double #1a2b70;
    position: relative;
	text-align:center;
  }

.aligncenter{
display:block;
	margin: 3px auto 10px;
	max-width:100%;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}


/**************************
/* テーブル
**************************/

table.table ,
table.table_2{
border-collapse:collapse;
margin:5px auto 15px auto;
width: 100%;
}
table.table a ,
table.table_2 a{
	text-decoration: underline;
}

table.table{
border-collapse:collapse;
margin:5px auto 15px auto;
width: 100%;
}
table.table th{
background-color:#EEE;
text-align:left;
padding: 10px 15px;
white-space:nowrap;
color: #151515;
font-weight:normal;
letter-spacing:1px;
vertical-align: middle;
border-top-width: 1px;
border-right-width: 4px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #39F;
border-bottom-color: #DDD;
border-left-color: #DDD;
}
table.table td{
border-collapse:collapse;
text-align:left;
padding: 10px 15px;
border:1px solid #DDD;
line-height:1.5;
vertical-align: middle;
}

table.table2{
border-collapse:collapse;
margin:5px auto 15px auto;
width: 100%;
}
table.table2 th{
background-color:#EEE;
text-align:left;
padding: 10px 15px;
white-space:normal;
color: #151515;
font-weight:normal;
letter-spacing:1px;
vertical-align: middle;
border-top-width: 1px;
border-right-width: 4px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #39F;
border-bottom-color: #DDD;
border-left-color: #DDD;
}
table.table2 td{
border-collapse:collapse;
text-align:left;
padding: 10px 15px;
border:1px solid #DDD;
line-height:1.5;
vertical-align: middle;
}


table.table3{
border-collapse:collapse;
margin:5px auto 15px auto;
width: 100%;
}
table.table3 th{
background-color:#EEE;
text-align:left;
padding: 10px 15px;
overflow:hidden;
white-space:normal;
color: #151515;
font-weight:normal;
letter-spacing:1px;
vertical-align: middle;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 4px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #DDD;
border-bottom-color: #39F;
border-left-color: #DDD;
}
table.table3 td{
border-collapse:collapse;
text-align:left;
padding: 10px 15px;
border:1px solid #DDD;
line-height:1.5;
vertical-align: middle;
}


table.table_2 th{
	background-color: #EEE;
	text-align: center;
	padding: 10px;
	white-space: nowrap;
	color: #151515;
	font-weight: normal;
	letter-spacing: 1px;
	vertical-align: middle;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 4px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DDD;
	border-right-color: #DDD;
	border-bottom-color: #39F;
	border-left-color: #DDD;
}
table.table_2 td{
border-collapse:collapse;
text-align:left;
padding: 5px 10px;
border:1px solid #DDD;
line-height:1.5;
vertical-align: middle;
}
table.table_2 td span.imp{
	margin: 0px 0px 0px 3px;
	font-weight: bold;
	color: #F00;
	font-size: 70%;
}


/**************************
/* フォーム
**************************/

section.formarea{
	margin-bottom:40px;
	overflow:hidden;
}
.form_box{
	border-radius: 8px;
	text-align: center;
	padding:15px 10px;
	vertical-align: middle;
	color: #FFF;
	text-align: center;
}
.form_title{
	margin-bottom: 5px;
	font-size: 48px;
	font-weight: bold;
	line-height: 1;
}

.form_input{
	margin-bottom: 5px;
}
.form_input .f_text{
	padding:2px 5px;
	margin-right: 5px;
	width: 250px;
	color: #666;
}

.form_txt{
	line-height: 1.3;
}

.bg_fukuzawa{
	background-image: url(images/mail_fukuzawa.png);
	background-repeat: no-repeat;
	background-position: -15px 5px;
}



/**************************
/* googleドライブ
**************************/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/**************************
/* 吹き出し
**************************/


.balloon {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 100%; /* 幅 */
  margin: 0 auto 20px; /* 上 左右 下のマージン */
  padding: 10px; /* ふきだし内の余白 */
  background: #6C3; /* 背景色 */
  text-align: center; /* テキストの揃え */
  border-radius: 8px; /* <-追加 */
}
.balloon::before { /* 三角の部分 */
  content: '';
  position: absolute; /* 位置固定 */
  bottom: -28px; /* 線幅の2倍 */
  left: 50%;
  margin-left: -14px; /* 線幅だけずらす */
  border: 14px solid transparent; /* 線幅の設定 */
  border-top-color: #6C3; /* 吹き出しの地と同じ色 */
}


.balloon2 {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 100%; /* 幅 */
  margin: 0 auto 20px; /* 上 左右 下のマージン */
  padding: 10px; /* ふきだし内の余白 */
  background: #a22041; /* 背景色 */
  text-align: center; /* テキストの揃え */
  border-radius: 8px; /* <-追加 */
}
.balloon2::before { /* 三角の部分 */
  content: '';
  position: absolute; /* 位置固定 */
  bottom: -28px; /* 線幅の2倍 */
  left: 50%;
  margin-left: -14px; /* 線幅だけずらす */
  border: 14px solid transparent; /* 線幅の設定 */
  border-top-color: #a22041; /* 吹き出しの地と同じ色 */
}

.balloon3 {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 100%; /* 幅 */
  margin: 0 auto 20px; /* 上 左右 下のマージン */
  padding: 10px; /* ふきだし内の余白 */
  background: #f08300; /* 背景色 */
  text-align: center; /* テキストの揃え */
  border-radius: 8px; /* <-追加 */
}
.balloon3::before { /* 三角の部分 */
  content: '';
  position: absolute; /* 位置固定 */
  bottom: -28px; /* 線幅の2倍 */
  left: 50%;
  margin-left: -14px; /* 線幅だけずらす */
  border: 14px solid transparent; /* 線幅の設定 */
  border-top-color: #f08300; /* 吹き出しの地と同じ色 */
}



.balloon5 {
    position: relative;
    margin: 2em auto;
    padding: 1em 1em 1em;
	width: 90%; 
    border: solid 3px #C0C0C0;
}
.balloon5 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #C0C0C0;
    color:#000 ;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.balloon5 p {
    margin: 0; 
    padding: 0;
}



.balloon6 {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 100%; /* 幅 */
  margin: 0 auto 20px; /* 上 左右 下のマージン */
  padding: 10px; /* ふきだし内の余白 */
  background: #CCF; /* 背景色 */
  text-align: center; /* テキストの揃え */
  border-radius: 8px; /* <-追加 */
}
.balloon6::before { /* 三角の部分 */
  content: '';
  position: absolute; /* 位置固定 */
  bottom: -28px; /* 線幅の2倍 */
  left: 50%;
  margin-left: -14px; /* 線幅だけずらす */
  border: 14px solid transparent; /* 線幅の設定 */
  border-top-color: #CCF; /* 吹き出しの地と同じ色 */
}



.mybox{
 border: 1px solid #CCC;	/* 線の太さ・種類・色 */
 border-radius: 5px;
 padding: 45px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
 position: relative;
 z-index: 0;
}
.mybox:before{
 background-color:#CCC ;	/* タイトル部分背景色 */
 border-radius: 5px 5px 0px 0px;
 color: #000;	/* タイトル部分文字色 */
 content:'慶應合格者の書籍に対する感想';
 height: 25px;	/* タイトル部分高さ */
 padding: 5px 10px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
}
.mybox:after {
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #CCC transparent transparent transparent;	/* 吹き出し三角部分の色 */
 content: "";
 position: absolute;
 top: 35px;
 left: 10px;
 width: 0px;
 height: 0px;
 z-index: 1;
}















/**************************
//* スマート　囲み枠　1 *
**************************/


.kakomi-smart1 {
 position: relative;
 margin: 2em auto;
 padding: 1em 1em 1em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-color: #d0576b; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #f7f7f7; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 1px 1px 3px #ccc; /* 影 */
}

.title-smart1 {
 padding: 2px 2px;
 background-color: #f7f7f7; /* タイトル背景色 */
 color: #d0576b; /* タイトル色 */
font-size: 2.1em;
 font-weight: bold;
}



.kakomi-smart2 {
 position: relative;
 margin: 2em auto;
 padding: 1em 1em 1em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-color: #f08300; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #ffffff; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 1px 1px 3px #ccc; /* 影 */
}

.title-smart2 {
 padding: 2px 2px;
 background-color: #ffffff; /* タイトル背景色 */
 color: #f08300; /* タイトル色 */
font-size: 2.1em;
 font-weight: bold;
}


.kakomi-smart3 {
 position: relative;
 margin: 2em auto;
 padding: 1em 1em 1em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-color: #dcdddd; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #ffffff; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 1px 1px 3px #ccc; /* 影 */
}

.title-smart3 {
 padding: 2px 2px;
 background-color: #ffffff; /* タイトル背景色 */
 color: #006; /* タイトル色 */
font-size: 2.1em;
 font-weight: bold;
}








/**************************
///* 黒板風　2 *
**************************/


.kokuban-s {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #006633; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 8px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.kokuban-s::before,
.kokuban-s::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-s::before {
 width: 20px; 
 right: 10px;
 border: solid 3px #ffff00; /*チョーク（黄色）*/
 border-radius: 3px 2px 0 2px;
}
.kokuban-s::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}


.kokuban-s2 {
 position: relative;
 margin: 2em auto;
 padding: 1em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #000000; /* 文章色 */
 border: 5px solid #C0C0C0; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.kokuban-s2::before,
.kokuban-s2::after {
 position: absolute;
 content: '';
 bottom: 3px;
 width: 25px; 
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.kokuban-s2::before {
 right: 55px;
 border: solid 3px #ff0000; /*飾ペン赤 */
}
.kokuban-s2::after {
 right: 20px;
 border: solid 3px #333; /*飾ペン黒 */
 transform: rotate(8deg); /*飾ペン角度 */
}



/**************************
/* 黒板風　タイトル　5 *
**************************/


.kokuban-t5 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #006633; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 8px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.kokuban-t5::before,
.kokuban-t5::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-t5::before {
 width: 17px; 
 right: 20px;
 border: solid 3px #ffff00; /*チョーク黄 */
 border-radius: 3px 2px 0 2px;
}
.kokuban-t5::after {
 width: 13px; 
 right: 55px;
 border: solid 3px #ff7fbf; /*チョークピンク */
 border-radius: 15px 10px 2px 5px;
}
.title-t5 {
 position: absolute;
 top: .5em;
 right: 0;
 left: 0;
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}
.title-t6 {
 position: absolute;
 top: .5em;
 right: 0;
 left: 0;
 text-align: left;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}





























/**************************
/* 全文表示
**************************/

.readmore-button-box a {
	margin: 0;
	padding: 6px 9px;
	color: #FFF;
	background-color: #006;
	border-radius:5px;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #28D;
}

.readmore-button-box a:hover {
   background-color: #006F;     /* ボタンにマウスが乗ったら明るい赤色に変化 */
}

.readmore-button-box {
   text-align: center;
   background-image: linear-gradient( 180deg, rgba(255,255,255,0.3), white );   /* 上から下へ：[白色半透明]から[白色]へグラデーション */
   padding-top: 4.5em;   /* ボタンの上側でグラデーションを見せる距離(長さ) */
   margin-top: -6.5em;   /* ボックスを上側に重ねる距離(長さ) */
   position: relative;   /* ボックス全体を上に重ねるために必要 */
}

.readmore-area {
   display: none;   /* デフォルトでは非表示にしておく */
}



/**************************
/* アコーディオン
**************************/

.accordion-switch {
    display: block;
    padding: 10px;
	cursor: pointer;
}

.accordion-switch:hover {
	color:#E48E00;
    text-decoration: underline;
	filter:alpha(opacity=60);
    opacity:0.6;
}

.accordion-switch + input {
    display: none;
}

.accordion-body {
    display: none;
    padding: 30px 10px;
    border-bottom: #666 1px solid;
}
.accordion-switch + input:checked + .accordion-body {
    display: block;
}

.accordion-switch2 {
    display: block;
    padding: 10px;
	border-top-color: #DDD;
    border-bottom: #39F 4px solid;
    border-left-color: #DDD;
    color: #151515;
    background: #EEE;
}

.accordion-switch2:hover {
	filter:alpha(opacity=60);
    opacity:0.6;
}

.accordion-switch2 + input {
    display: none;
}

.accordion-body2 {
    display: none;
    padding: 30px 10px;
	border:1px solid #DDD;
}
.accordion-switch2 + input:checked + .accordion-body2 {
    display: block;
}

/**************************
/* ライン
**************************/

hr.line1{
  border: none;
  border-top: 1px dotted #999;
}

hr.line2{
  border: none;
  border-top: 1px dotted #999;
}

hr.line3{
  border:none;
  border-top: double 3px #999;
}








/**************************
/* サイドバー
**************************/

#sidebar{
	float:right;
	width:25%;
	padding:0 15px 0 0;
	overflow:hidden;
	margin-bottom: 50px;
}
#sidebar h3.heading{
font-weight:normal;
padding:10px 15px;
line-height:1.2;
color:#333;
background:#E3E3E3;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #39F;
border-radius: 5px 5px 0 0;
}
#sidebar article{
padding:0;
margin-bottom:20px;
overflow:hidden;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #E3E3E3;
border-bottom-color: #E3E3E3;
border-left-color: #E3E3E3;
}


#sidebar ul{
padding:0;
}

#sidebar li{
margin:0;
list-style:none;
padding: 0;
font-size: 14px;
line-height: 1.3;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #DDD;
}

#sidebar li:last-child{
border:0;
}

#sidebar li a{
display:block;
padding: 15px;
overflow:hidden;
}
#sidebar li a:hover{
background-color: #39F;
color: #FFF;
}

#sidebar ul.list li{
	margin:0;
	padding:0;
	line-height:1.35;
}
ul.list li img{
	float:left;
	margin-right:10px;
	width: 60px;
}
ul.list li p{
	overflow:hidden;
}

#sidebar .sidebanner{
	font-size: 0px;
}
#sidebar .sidebanner p{
	width: 100%;
	padding: 0px;
	margin-bottom: 10px;
}
#sidebar .sidebanner p img{
	width: 100%;
	margin: 0px;
	padding: 0px;
border:4px solid #DDD;
}

/**************************
/* フッター
**************************/
.ft_menu {
	position: fixed;
	bottom: 20px;
	z-index: 9999;
	left: 50%;
}
.page-top a{
	background-color: #000;
	background-color: rgba(0,0,0,0.4);
	padding: 7px 10px;
	border-radius:10px;
	text-decoration: none;
	color: #FFF;
	text-align: center;
	line-height: 1;
	font-size: 8px;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	margin: 0 0 0 500px;
}
.ft_menu span .fa{
	font-size: 24px;
	line-height: 1.5;
	display: block;
}

#footer{
clear:both;
overflow:hidden;
padding: 10px;
background:#EEE;
}

* html #footer{height:1%;}

#footer .grid{
padding:10px 0 5px;
margin:0;
background:transparent;
}

#footer #info .logo{
	float: left;
	width: 200px;
	margin: 20px 0 0 0;
}
#footer #info .info{
float: right;
padding:15px 0 0 0;
text-align:right;
font-weight: bold;
line-height: 1.4;
}
#footer #info .info .tel{
font-size:26px;
}
#footer #info .info .tel .fa{
	font-size:22px;
	color: #F36;
}
#footer #info .info .open{
font-size:12px;
}

ul.footnav{
font-size:0;
clear:both;
padding: 20px 0 10px 0;
}

ul.footnav li{
margin: 2px;
padding:0;
font-size:11px;
line-height: 1.1;
display: inline-block;
}
ul.footnav li a{
	margin: 0;
	padding: 6px 9px;
	color: #FFF;
	background-color: #39F;
	border-radius:5px;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #28D;
}

address{
clear:both;
padding:10px;
text-align:center;
font-style:normal;
font-size:10px;
color:#333;
background:#DDD;
}




/* タブレット用・PC用（横幅：641px～）
------------------------------------------------------------*/
@media only screen and (min-width: 641px){

#wrapper{
	margin: 0 auto;
	width:98%;
	position:relative;
	background:#fff;
	padding-right: 1%;
	padding-left: 1%;
}

/**************************
/* メニュー
**************************/
nav#mainNav{
clear:both;
overflow:hidden;
position:relative;
background:#EEE;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #39F;
}

nav#mainNav .inner{
width:100%;
padding:0 15px;
font-size:0;
}

nav#mainNav ul li{
	display: inline-block;
	position: relative;
	line-height: 1.2;
	width:16.666%;
}
nav#mainNav ul li a{
display: block;
text-align: center;
font-size:13px;
padding-top:15px;
color:#333;
width:100%;
padding-bottom: 15px;
}
nav#mainNav ul li a span{
color:#BBB;
font-size:10px;
display:block;
}

nav div.panel{
	display:block !important;
	}

a#menu{display:none;}

nav#mainNav li.active a,
nav#mainNav li a:hover{
color:#FFF;
background:#39F;
border-radius: 5px 5px 0 0;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
nav#mainNav li.active a span,
nav#mainNav li a:hover span{
	color:#9CF;
	text-shadow: none;
}

}

@media screen and (max-width: 1200px) {
/* ---------------------------------------------------
1200px以下用　フッター
----------------------------------------------------- */
.ft_menu {
	left: inherit;
	right: 20px;
}
.page-top a{
	margin: 0;
}
	
}



/* タブレット用（横幅：641px～959px）
------------------------------------------------------------*/
@media only screen and (max-width:959px){


/**************************
/* メニュー　959px以下
**************************/
nav#mainNav ul li a{
font-size:11px;
}
nav#mainNav ul li a span{
font-size:9px;
}

/**************************
/* メイン コンテンツ
**************************/
#main{
	float:none;
	width:auto;
	padding:0;
}
#gallery .grid{
	width:23%;
}

/**************************
/* サイドバー　959px以下
**************************/
#sidebar{
	float:none;
	width:auto;
	padding:0;
	overflow:visible;
}

#sidebar article{
padding:0;
margin-bottom:20px;}

ul.list li img{
	width: 70px;
}

#sidebar .sidebanner p{
	width:23%;
	margin:10px 1% 2px 1%;
	display: inline-block;
}


/**************************
/* フッター　959px以下
**************************/
#footer .grid,
#footer ul.footnav{
width:100%;
text-align:center;
}

#footer .grid img{float:none;}
#footer .grid p{display:block;}


}



/* タブレット＆スマホ(横：ランドスケープ)用（横幅：481px～640px）
------------------------------------------------------------*/
@media only screen and (max-width:640px){


#wrapper{
	width:96%;
	padding-right: 2%;
	padding-left: 2%;
}

/**************************
/* ヘッダー　640px以下
**************************/
.description{
}
#header{
height:auto;
}

/**************************
/* メニュー　640px以下
**************************/

#header .logo{
width: 200px;
margin: 13px 10px;
}

nav#mainNav{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
	position: relative;
}
nav#mainNav .inner{
	font-size: 16px;
}
nav#mainNav a.menu{
	color: #FFF;
	width:70px;
	display:block;
	line-height:1;
	font-weight: bold;
	text-align:center;
	background-color: #39F;
	font-size: 10px;
	padding: 15px 0;
	position: absolute;
	z-index: 100;
	right: 0px;
	top: -62px;
}
nav#mainNav a#menu span{
	font-size: 24px;
	margin: 0px;
	padding: 0px;
}
nav#mainNav a.menu span:after {
	content: "▼";
}
nav#mainNav a.menuOpen span:after {
	content: "▲";
}
nav#mainNav a.menu span:after ,
nav#mainNav a.menuOpen span:after {
	font-size: 10px;
	display: block;
	color: #006;
	vertical-align: top;
}
nav#mainNav a#menu:hover{
	cursor:pointer;
	opacity:1;
	filter: none;
	-ms-filter: none;
}

nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
}

nav#mainNav ul li{
	background-color: #39F;
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

nav#mainNav ul li a,
nav#mainNav ul li.current-menu-item li a{
	color: #FFF;
	display: block;
	padding:15px 10px;
	text-align:left;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #6BF;
	font-size: 14px;
}

nav#mainNav ul li a span{
	padding-left:10px;
	color: #006;
	text-shadow: none;
}


/**************************
/* グリッド　640px以下
**************************/

.gridWrapper{
	width:100%;
    padding-bottom:40px;
    overflow: hidden;
}


.gridWrapper .grid,
.gridWrapper .grid2,
.gridWrapper .grid3,
.gridWrapper .grid4,
.gridWrapper .grid5,
.gridWrapper .grid6 img{
	width:98%;
}

.gridWrapper .grid7{
	width:100%;
}



.gridWrapper .grid p{
	margin-bottom:5px;
}



/**************************
/* メイン コンテンツ　640px以下
**************************/

#gallery .grid{
	width: 31.3%;
}

/*--- スマホのみ表示タブメニュー ---*/

#sp_tab_nav {
	display: block;
	width: 100%;
	-webkit-transition: all none ease 0;
	-moz-transition: all none ease 0;
	-ms-transition: all none ease 0;
	-o-transition: all none ease 0;
	transition: all none ease 0;
	margin-bottom: 10px;
	background-color: #333;
	padding-top: 5px;
}
#sp_tab_nav > ul {
display: table;
table-layout: fixed;
width: 100%;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #39F;
}
#sp_tab_nav > ul > li {
	display: table-cell;
	text-align: center;
	background-color: #333;
	cursor: pointer;
	font-size: 13px;
	border-radius: 5px 5px 0 0;
	vertical-align: middle;
}
#sp_tab_nav > ul > li > a {
	display: inline-block;
	width: 100%;
	line-height: 1.2;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	padding: 18px 5px;
}
#sp_tab_nav1,
#sp_tab_nav2,
#sp_tab_nav3 {
width:100%;
height:auto;
background-color: #fff;
}
#sp_tab_nav_field > div > ul {
width: 99%;
font-size: 0px;
margin: 0 0.5%;
}


#sp_tab_nav_field > div > ul > li {
display: inline-block;
width: 50%;
line-height: 40px;
font-size: 12px;
text-align: center;
}

#sp_tab_nav_field > div > ul > li:first-child {
width: 100%;
color: #F36;
font-weight: bold;
line-height: 1.3;
font-size: 14px;
padding: 15px;
border: none;
}

#sp_tab_nav_field > div > ul > li > a {
	display: inline-block;
	width: 98%;
	padding: 5px;
	color: #FFF;
	background-color: #39F;
	margin: 1%;
	border-radius: 5px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #28D;
}
/*--- スマホのみ表示タブメニューここまで ---*/




section.content article,
section.contentgray article, 
section.contentaka article,
section.contentkiiro article,
section.contentgraph article {
	padding-right: 2%;
	padding-left: 2%; 
}

section.content article2,
section.contentkiiro article2,{
	margin: 0 auto;
	max-width:100%;
}

section.contentgray,
section.contentaka,
section.contentkiiro {	
	padding-right: 2%;
  	padding-left: 2%; 
    padding-bottom:5%;
}



img {
	max-width:100%;
	height: auto;
}

.alignleft,.alignright{
float:none;
display:block;
margin:0 auto 10px;
}

.boxgray{
  width:100%;
  height:auto;
}

.boxgray2{
	margin: 0 auto;
	width:100%px;
}



/**************************
/* フォーム　640px以下
**************************/

.form_title{
	font-size: 25px;
}
.form_input .f_text{
	font-size: 12px;
	width: 150px;
}
.form_txt{
	font-size: 12px;
}
.bg_fukuzawa{
	background-size: 130px auto;
}


/**************************
/* サイドバー　640px以下
**************************/
#sidebar .sidebanner p{
	width: 31.3%;
}


/**************************
/* フッター　640px以下
**************************/

#footer #info .logo{
	float:none;
	margin-right: auto;
	margin-left: auto;
}
#footer #info .info{
text-align:center;
float:none;
}

}



/* スマホ(縦)用（横幅：0～400px）
------------------------------------------------------------*/
@media only screen and (max-width:400px){
body {
font-size:85%;
}

/**************************
/* メイン コンテンツ　400px以下
**************************/
#gallery .grid{
	width:48%;
}


/**************************
/* グリッド　400px以下
**************************/

.box img{
	float:none;
	margin-right:5px;
	max-width:100%;
}


/**************************
/* サイドバー　400px以下
**************************/
#sidebar .sidebanner p{
	width: 48%;
}

/**************************
/* フォーム　400px以下
**************************/
.form_title{
	font-size: 20px;
}
.bg_fukuzawa{
	background-position: -25px 5px;
}

}


/**************************
/* 問い合わせと資料請求
**************************/


/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}


/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを濃藍に*/
#sp-fixed-menu li:first-child{
   background: #0f2350;
}

/*左側メニューを茜色に*/
#sp-fixed-menu li:last-child{
   background: #b7282e;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}