@charset 'UTF-8';

/* CSS Document */

/* Yahoo! CSS Reset (YUI 3)
 
http://developer.yahoo.com/yui/license.html
 
version: 3.2.0
*/
html{
    color:#000;
    background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {
    border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style:normal;
    font-weight:normal;
}
li {
    list-style:none;
}
caption, th {
    text-align:left;
}
h1, h2, h3, h4, h5, h6 {
    font-size:100%;
    font-weight:normal;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border:0;
    font-variant:normal;
}
sup {
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}
input, textarea, select {
    *font-size:100%;
}
legend {
    color:#000;
}








/*----------ここからレイアウト記述----------*/

html{
	border: 1px solid #000;
	background-image: linear-gradient(
	-45deg,
	#FBFBF6 25%,
	#E6E6E6 25%, #E6E6E6 50%,
	#FBFBF6 50%, #FBFBF6 75%,
	#E6E6E6 75%, #E6E6E6
  );
  /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 8px 8px;
}

body{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size:15px;
}


#wrap{
	width:978px;
	height:auto;
	margin:auto;
	background-color:#FBFBF6;
	color:#000B00;
	border:solid 1px #E6E6E6;
}


#header{
	width:978px;
	height:61px;
	background-image:url(../img/paper.jpg);
	padding:0px 10px;
	font-size:43px;
	font-weight:medium;
}

#nav{
	width:958px;
	height:43px;
	display:inline;
	margin-right:100px;
	text-align: center;		
	padding:20px 0;
	font-size:22px;
	font-weight:medium;
}




#nav ul{
    padding: 0px; 	
    margin: 0px;
} 


#nav ul li {
    display: inline; 	
    margin-right: 1em;
} 






#pan{
	width:846px;
	height:31px;
	vertical-align:center;
}


#con{
	width:978px;
	height:347px;
	background-color:#c1e4e9;
}


#main{
	width:978px;
	padding:61px;
	height:auto;
	background-image:url(../img/paper.jpg);

}



#foo{
	width:978px;
	height:61px;
	vertical-align:middle;
	text-align: center;
	font-size:11px;
	clear:both;
	background-color:#ccc;
}




/*------クラス------*/


.h1{
	font-size:30px;
	border-bottom:solid 3px #CC4A14;
	margin:0 15px 0 0;
}

.h2{
	font-size:22px;
	border-bottom:solid 1.5px #CC4A14;
	margin-top:123px;
}

.h3{
	border-bottom:dotted 1px #CC4A14;
}

.h4{
	margin: 0; /* 見出しのマージン */
	padding: 5px 10px; /* 見出しのパディング（上下、左右） */
	font-size:22px;
	border-bottom: 1px #c0c0c0 solid; 
}



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

.mgnt{
	margin-top:30px;
}

.acce{
	margin:0 0 0 20px;
	text-align: center;
}

.cen{
	text-align: center;
}


.cation{
	border:solid 1px #F12B00;
	padding:10px;
}

.news{
	width:200px;
	height:190px;
	background-color:#FBFBF6;

}

.flo{
	float:left;
}

.ex{
	text-align: center;
	font-size:8px;
	font-weight:bolder;
}

.ex2{
	font-size:8px;
	font-weight:bolder;
}


.dis{
	display:block;
}

.dis2{
	display: block;
 	margin-left: auto;
	margin-right: auto;
	float:left;
}

.dis3{
 	display: block;
	clear:both;
}

.cl{
	clear:both;
}


.sample2 {
	margin-top:22px;
	width:404px;
	height:404px;
	font-size:15px;

}






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

table.type11 { 
    border-collapse: separate; 
    border-spacing: 1px;  
    line-height: 1.5;
    margin-top:50px;
 
} 

table.type11 th { 
    width: 150px; 
    padding: 10px;
    border-bottom: 1px solid #ccc; 
    font-weight: bold; 
    vertical-align: top;
    color:#fff;  
    background: #181B39; 
} 

table.type11 td { 
    width: 350px; 
    padding: 10px; 
    vertical-align: top; 
    border-bottom: 1px solid #ccc; 
    background: #eee;  
} 





table.type12 { 
    border-collapse: separate; 
    line-height: 1.5;
    margin-top:30px;
 
} 

table.type12 th { 
    width: 151px; 
    padding: 10px;
    color:#fff;  
    font-weight: bold; 
    vertical-align: top;  
    background: #181B39; 
} 
 
table.type12 td { 
    width: 350px; 
    padding: 10px; 
    border-spacing: 1px; 
    vertical-align: top; 
    border-bottom: 1px solid #ccc; 
    background: #eee;  
} 








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


.sample {
	margin:61px 0;
	font-size:22px;
	color:#fff;
	background-color:#FF9340;
	border-radius:5px;
	position:relative;
	padding:25px;

}

.sample:after {
	border:10px solid transparent;
	border-top-color:#FF9340;
	border-bottom-width:0;
	bottom:-10px;
	content:"";
	display:block;
	left:430px;
	position:absolute;
	width:0;
}






/*---ポラロイド写真風---*/

.polaroid {
  position: relative;
  width: 420px;
}
 
.polaroid img {
  border: 10px solid #e6e6fa;
  border-bottom: 45px solid #e6e6fa;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
 
.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  color: #756F61;
  line-height:3.5;
}




/*---メモ風---*/

.memo{
	width:262px;
	height:auto;
	margin:10px;
	padding:10px;
	background-color:#fff;

}



/*---付箋風---*/

.fusen{
      background: #fcbec1;
      padding: 5px 5px 5px 10px;
	box-shadow: 5px 5px 5px 0px lightgray;
	margin-right:20px;

}



/*---ボタン---*/

.button a {
  width: 280px;
  background-color: #181B39;
  border-radius: 3px;
  box-shadow: 0 3px 0 rgba(136,136,136,1);
  color: #ffffff;
  display: block;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  margin: 10px auto;
  padding: 10px 0;
}


.button a:hover {
  box-shadow: 0 1px 0 rgba(136,136,136,1);
  margin: 12px auto 8px;
}




/*---ログ用スクロールボックス---*/

/* --- 見出し --- */


div.log{
	width:848px;

	background-color: #fff; /* ボックスの背景色 */
	border: 1px #c0c0c0 solid; /* ボックスの境界線 */

}


/* --- 本文領域 --- */
div.log div.textArea {
	height:173px; /* 本文領域の高さ */
	overflow: auto;
}

/* --- 本文領域内の段落 --- */
div.log div.textArea p {
margin: 1em 10px; /* 段落のマージン（上下、左右） */
}




/*-----ここからリンク動き-----*/

.opacity{
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}


a{
	transition-property: color ;
	transition-duration: 0.4s ;
	color:#3D4699;

}

a:hover {
	color:#FF9340;
}







/* Slider */


.slick-loading .slick-list
{

    background: #fff url('./ajax-loader.gif') center center no-repeat;

}



/* Icons */

@font-face
{

    font-family: 'slick';

    font-weight: normal;

    font-style: normal;


    src: url('./fonts/slick.eot');

    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}


/* Arrows */

.slick-prev,
.slick-next
{

    font-size: 0;

    line-height: 0;


    position: absolute;

    top: 50%;


    display: block;


    width: 20px;

    height: 20px;

    padding: 0;

    -webkit-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%);


    cursor: pointer;


    color: transparent;

    border: none;

    outline: none;

    background: transparent;

}


.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{

    color: transparent;

    outline: none;

    background: transparent;

}


.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{

    opacity: 1;

}


.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}