@charset "utf-8"; /*文字コード指定*/

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	border: 0; /*境界線指定*/
}

body {
	overflow-x: hidden;
        line-height: 2;	/*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; /*フォントの種類指定(左から優先順位)*/
	font-size:18px; /* フォントサイズ指定(%はブラウザに設定した標準文字サイズ(通常16px)に対する値)*/
	color: #333333; /*文字色指定*/
   background-image:url("../images/floral_bg.jpg");
}

ol, ul {
	list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}

a { /*リンクの文字設定(マウスをのせる前)*/
	font-size:18px;
	color: #0000FF; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
   
}

a:hover { /*リンクの文字設定(マウスをのせた時)*/
	color: #C74B15; /*文字色指定*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
}

.color1 {
	color: #FF0033; /*文字色指定*/
}

/* ----- ヘッダー(ページの一番上の部分) ----- */

#header {
	display: flex;
        justify-content:space-around;
        position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
        background-image: url(../images/top/indextop.jpg); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	background-size: auto auto;
        background-attachment: fixed;
        height: 700px; /*領域の高さ指定*/
	width: 100%; /*幅指定(autoは初期値に戻す)*/
        color: #fff; /*文字色指定*/
        text-shadow    : 
        1px  1px 3px #00008b,
      -1px  1px 3px #00008b,
       1px -1px 3px #00008b,
      -1px -1px 3px #00008b,
       1px  0px 3px #00008b,
       0px  1px 3px #00008b,
      -1px  0px 3px #00008b,
       0px -1px 3px #00008b;        /* 文字の影 */
}

#header_inner {
	position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	width: 1000px; /*幅指定*/
     
}

#header h1 {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
   font-family:Georgia,"MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif;
	left: 10px; /*左からの距離(positionで指定している場合に適用)*/
	top: 10px; /*上からの距離(positionで指定している場合に適用)*/
	font-size: 28px; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #ffffff; /*文字色指定*/
	filter: dropshadow(color=black, offX=0, offY=-1) dropshadow(color=black, offX=1, offY=0) dropshadow(color=black, offX=0, offY=1) dropshadow(color=black, offX=-1, offY=0); /*テキスト縁取り(ie)*/
	text-shadow: 0px -2px black, 2px 0px black, 0px 2px black, -2px 0px black; /*テキスト縁取り*/
	z-index: 3; /*ボックスの重なりの順序を指定*/
}

#logo {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	left: 20px; /*左からの距離(positionで指定している場合に適用)*/
	top: 60px; /*上からの距離(positionで指定している場合に適用)*/
	z-index: 2; /*ボックスの重なりの順序を指定*/
}
.swiper-container {
    margin:0 auto;
    width: 1000px;
    height:400px;
    z-index: 10;
    
}
.swiper-swiper-wrapper {
    margin:0 auto;
    width: 1000px;
    height:400px;
}
#slideshow > div {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	top: 0px; /*上からの距離(positionで指定している場合に適用)*/
	left: 0px; /*左からの距離(positionで指定している場合に適用)*/
	right: 0px; /*右からの距離(positionで指定している場合に適用)*/
	bottom: 0px; /*下からの距離(positionで指定している場合に適用)*/
	z-index: 1; /*ボックスの重なりの順序を指定*/
}
.header-change{
    background: #191970;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    position: fixed;
    top: 0px;
    transition: .5s;
    width: 100%;
    z-index: 100;
}
.header-change.show{
    top: 0;
}
.header-change .gnav__menu__item a{
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
}
.header-change .gnav__menu__item a:hover{
    color: #C74B15;
    text-decoration: none;
    font-size: 16px;
}
/* ----- レイアウト ----- */

#container { /*container(入れ物、容器)の中に各要素(ボックス)を配置*/
	width: 100%; /*幅指定*/
	margin: 0 auto; /*ボックス外側の余白(autoはボックス幅や隣接する他ボックス幅による自動余白割り当て)*/
	background-color:#ffffff; /*背景色指定*/
}

#container a:hover img { /*画像にマウスをのせた時半透明にする*/
	filter: Alpha(opacity=70); /*視覚効果(IE独自) Alphaは透過表示 opacityは開始透明度*/
	opacity: 1; /*要素の透明度*/
}

#main {
	width: 1000px; /*幅指定*/
	background: #f5f5f5;/*背景色*/
        background-image: url(../images/top/panf.jpg); /*背景画像指定　url(画像ファイルを指定)*/
        background-repeat: no-repeat;
}

#main2 {
	width: 100%; /*幅指定*/
        display: flex;
        justify-content: center;
        align-items: center;
        background-color:#bdb76b;
        
}

#main3 {
        width: 100%x; /*幅指定*/
	float: none; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
        background-repeat: repeat;
        background-attachment: fixed;
}

#main4 {
        @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
        font-family: 'Droid Serif', serif;
        font-size: 16px;
        background: #54CDAC;
        color: #fff;
        font-style: normal;
        width: 100%x; /*幅指定*/
	float: none; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
        display: none;
              
}

#main5 {
	width: 100%; /*幅指定*/
	background: #f5f5f5;/*背景色*/
        background-image: url(../images/top/panf.jpg); /*背景画像指定　url(画像ファイルを指定)*/
        background-repeat: no-repeat;
        display: none;
}



#main6 {
	width: 100%; /*幅指定*/
	display: none;
     
}
#content {
	text-align: center;
        width: 1000px; /*幅指定*/
	float: none; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}

#content2 {
	text-align: center;
        width: 100%; /*幅指定*/
	float: none; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 0 auto; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
        background-image: url(../images/top/aozora.jpg); /*背景画像指定　url(画像ファイルを指定)*/
        background-repeat: repeat;
        

}

#leftside {
	width: 200px; /*幅指定*/
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}

#rightside {
	width: 200px; /*幅指定*/
	float: right; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}

#rightside2 {
	width: 200px; /*幅指定*/
	float: right; /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/

}
 
/* ----- フッター(ページの一番下の部分) ----- */

#footer {
	clear: both; /*floatの回り込みを解除*/
	height: 455px; /*領域の高さを指定*/
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
	background-image: url(../images/footer.jpg); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
        text-align: right; /*行の水平方向の揃え方(centerは中央揃え)*/
        color: #ffffff;
        
}

#footer_inner {
	padding: 1px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
        padding-right:350px;
}

#footer p {
	font-size: 0.75em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #ffffff; /*文字色指定*/
	text-align: right; /*行の水平方向の揃え方(centerは中央揃え)*/
}
#footer li {
	padding-left: 15px; /*ボックス内側左の余白*/
	margin-left: 15px; /*ボックス外側左の余白*/
	display: inline; /*要素の表示形式指定(inlineはインラインレベルで表示(リストを横並び))*/
	list-style-type: none; /*リストマーカーの種類指定(noneはなし)*/
}

#footer li.first {
	border-left: solid; /*左境界線の一括指定(noneはなし)*/
}
#footer a { /*リンクの文字設定(マウスをのせる前)*/
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
        font-size: 16px;
        font-weight: bold;
        text-shadow:0 0 10px #000000;
}
#footer a:hover { /*リンクの文字設定(マウスをのせた時)*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
        color: #C74B15;
}
/* ----- フッターメニュー ----- */

#footmenu {
	margin-bottom: 5px; /*ボックス外側下の余白*/
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
}

#footmenu li {
	padding-left: 25px; /*ボックス内側左の余白*/
	margin-left: 15px; /*ボックス外側左の余白*/
	display: inline; /*要素の表示形式指定(inlineはインラインレベルで表示(リストを横並び))*/
	list-style-type: none; /*リストマーカーの種類指定(noneはなし)*/
}

#footmenu li.first {
	border-left: none; /*左境界線の一括指定(noneはなし)*/
}

#footmenu a { /*リンクの文字設定(マウスをのせる前)*/
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
        font-size: 20px;
        font-weight: bold;
        text-shadow:0 0 10px #000000;
        word-break: keep-all;
}

#footmenu a:hover { /*リンクの文字設定(マウスをのせた時)*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
        color:#0000cd;
}


/* ----- コンテンツ ----- */
figure.cp_caption {
	position: relative;
	overflow: hidden;
	width: 300px;
	
	margin: 10px 1%;
	color: #ffffff;
}
figure.cp_caption * {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
figure.cp_caption img {
	width: 300px;
	height: 300px;
}
figure.cp_caption figcaption {
	position: absolute;
	z-index: 1;
	top: 45%;
	padding: 3em 4em;
	transition: all 0.3s ease-out;
	transition-delay: 0.1s;
	opacity: 0;
}
figure.cp_caption:after {
	position: absolute;
	top: 18%;
	right: 18%;
	bottom: 18%;
	left: 18%;
	display: inline-block;
	content: '';
	transition: all 0.3s ease-out;
	opacity: 0;
	background: rgba(85,107,47,0.85);
}
figure.cp_caption:hover:after {
	opacity: 0.9;
}
figure.cp_caption:hover figcaption {
	transform: translateY(-50%);
	opacity: 1;
}
figure.cp_caption p {
	text-align: left;
        font-size: 16px;
}
/* -----  ----- */
#is-loading {
 display: block;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 background: #FFF;
 z-index: 8;
}
#loading {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 margin-top: -100px;
 margin-left: -100px;
 text-align: center;
 color: #fff;
 z-index: 9;
}

/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
/* ------------- スクロールフェードインDown用 ------------- */
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(520px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(520px); -ms-transform: translateY(520px); transform: translateY(520px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインDown用 END ------------- */
.slideConts {
  width: 490px;
  height: 103px;
  margin-left: auto;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.slideContsL {
  background-color: lightpink;
  transform: translate(-800px, 0);
}
.slideContsR {
  background-color: lightblue;
  transform: translate(800px, 0);
}
.slideContsL.show {
  transform: translate(-0px, 0) !important;
}
.slideContsR.show {
  transform: translate(50px, 0) !important;
}

.cp_pricetable3 *, .cp_pricetable3 *:before, .cp_pricetable3 *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_pricetable3 {
	width: 700px;
	margin: 15px auto;
	border-spacing: 1px 0;
	border-collapse: separate;
        
}
.cp_pricetable3 th, .cp_pricetable3 td {
	padding: 10px;
}
/*Headerブロック*/
.cp_pricetable3 th {
	z-index: 1;
	width: 125px;
	height: 50px;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	border-radius: 5px 5px 0 0;
	background: #88b7d5;
        font-size: 15px;
}
.cp_pricetable3 th:after {
	font-family: 'FontAwesome';
	font-size: 18px;
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: -30px;
	left: 0;
	content: '\f0d7';
}
.cp_pricetable3 th.group1 {
	background: #2e9b72;
}
.cp_pricetable3 th.group1:after {
	color: #2e9b72;
}
.cp_pricetable3 th.group2 {
	background: #da3c41;
}
.cp_pricetable3 th.group2:after {
	color: #da3c41;
}
.cp_pricetable3 th.group3 {
	background: #131874;
}
.cp_pricetable3 th.group3:after {
	color: #131874;
}
/*メインブロック*/
.cp_pricetable3 tr td {
	padding-top: 15px;
	text-align: center;
	border: none;
}
.cp_pricetable3 tr:last-child td {
	border-radius: 0 0 5px 5px;
}
.cp_pricetable3 tr:nth-child(2n+1) td.group1 {
	background: #8cd9bc;
}
.cp_pricetable3 tr:nth-child(2n+0) td.group1 {
	background: #c3e4d8;
}
.cp_pricetable3 tr:nth-child(2n+1) td.group2 {
	background: #f2c2c2;
}
.cp_pricetable3 tr:nth-child(2n+0) td.group2 {
	background: #f7e1e1;
}
.cp_pricetable3 tr:nth-child(2n+1) td.group3 {
	background: #a9bce2;
}
.cp_pricetable3 tr:nth-child(2n+0) td.group3 {
	background: #d7e1f4;
}
/*ボタンデザイン*/
.cp_pricetable3 a.cp_btn {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	padding: 0.2em 0.2em;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border: 1px solid #da3c41;
	border-radius: 4px;
	background: #da3c41;
        font-size: 17px;
}
.cp_pricetable3 a.cp_btn2 {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	padding: 0.2em 0.2em;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border: 1px solid #2e9b72;
	border-radius: 4px;
	background: #2e9b72;
        font-size: 17px;
}
.cp_pricetable3 a.cp_btn3 {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	padding: 0.2em 0.2em;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border: 1px solid #131874;
	border-radius: 4px;
	background: #131874;
        font-size: 17px;
}
.cp_pricetable3 .cp_btn:after {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0;
	content: '';
	transition: 0.3s;
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
	opacity: 0;
	background: #ffffff;
}
.cp_pricetable3 .cp_btn:hover {
	color: #da3c41;
}
.cp_pricetable3 .cp_btn:hover:after {
	height: 250%;
	opacity: 1;
}
.cp_pricetable3 .cp_btn:active:after {
	height: 350%;
	opacity: 1;
}
.cp_pricetable3 .cp_btn2:after {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0;
	content: '';
	transition: 0.3s;
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
	opacity: 0;
	background: #ffffff;
}
.cp_pricetable3 .cp_btn2:hover {
	color: #da3c41;
}
.cp_pricetable3 .cp_btn2:hover:after {
	height: 250%;
	opacity: 1;
}
.cp_pricetable3 .cp_btn2:active:after {
	height: 350%;
	opacity: 1;
}
.cp_pricetable3 .cp_btn3:after {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0;
	content: '';
	transition: 0.3s;
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
	opacity: 0;
	background: #ffffff;
}
.cp_pricetable3 .cp_btn3:hover {
	color: #da3c41;
}
.cp_pricetable3 .cp_btn3:hover:after {
	height: 250%;
	opacity: 1;
}
.cp_pricetable3 .cp_btn3:active:after {
	height: 350%;
	opacity: 1;
}
.site-logo img{
    height: 40px;
    width: auto;
}
.gnav__menu{
    display: flex;
}
.gnav__menu__item{
    margin-left: 35px;
}
.gnav__menu__item a{
    color: #333;
    text-decoration: none;
}
.boxbox{
 transform: translate(0%, 0%);
  width: 800px;
  height: 800px;
  background: #12124a;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(9,0,0,0.5);
  border: 2px solid #2a3cad;
  color: #ffffff;
  font-size: 24px;
  padding: 20px;
  opacity: 0.7;
}

.boxbox:before{
  content: '';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.1);
  transition:0.5s;
  pointer-events: none;
}




.boxbox .content{
  position:absolute;
  top:15px;
  left:15px;
  right:15px;
  bottom:15px;
  border:2px solid #696969;
  padding:20px;
  text-align:center;
  box-shadow: 0 5px 5px rgba(9,0,0,0.5);
  
}

.boxbox span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  
}

.boxbox span:nth-child(1)
{
  transform:rotate(0deg);
}

.boxbox span:nth-child(2)
{
  transform:rotate(90deg);
}

.boxbox span:nth-child(3)
{
  transform:rotate(180deg);
}

.boxbox span:nth-child(4)
{
  transform:rotate(270deg);
}

.boxbox span:before
{
  content: '';
  position: absolute;
  width:100%;
  height: 6px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
  transform:scaleX(0);
  transform-origin: left;
  }
  50%
  {
    transform:scaleX(1);
  transform-origin: left;
  }
  50.1%
  {
    transform:scaleX(1);
  transform-origin: right;
    
  }
  
  100%
  {
    transform:scaleX(0);
  transform-origin: right;
    
  }
  
  
} 
.cp_table *, .cp_table *:before, .cp_table *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_table {
	width: 100%;
	border-collapse: collapse;
        
}
.cp_table th, .cp_table  td {
	padding: 10px;
	border: 1.5px solid #c7c3c3;
        font-size: 16px;
         height: 20px;
}
.cp_table th {
	width: 20%;
	text-align: left;
        font-size: 16px;

}

.quote {
  margin: 30px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  display: none;
}
.line-through {
  display: block;
  position: relative;
  border-bottom: 2px solid #fff;
  height: 15px;
}
.line-through span {
  position: absolute;
  display: inline-block;
  background: #54CDAC;
  width: 200px;
  margin-left: -100px;
  line-height: 30px;
}
.stripe-border {
  background: linear-gradient(
    to bottom,
    #fff,
    #fff 25%,
    #54CDAC 25%,
    #54CDAC
  );
  background-size: 100% 8px;
}
.stripe-border blockquote {
  background: #54CDAC;
  margin: 0 10px;
  padding: 30px;
  font-size: 18px;
  font-size: 24px;
  line-height: 1.5;
}

body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    min-width: 500px;
    background-color: #fff;
}

.onetime_popup_title {
    position: relative;
    padding: 0.5em 80px;
    margin: 0px;
    background-color: #ff7f50;
    color: #fff;
    font-size: 32px;
    text-align: center;
    line-height: 1.5;
}

.onetime_popup_title_close {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    cursor: pointer;
}
.onetime_popup_title_close::before,
.onetime_popup_title_close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: #fff;
     content: "";
}
.onetime_popup_title_close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime_popup_title_close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.onetime_popup_content {
    padding: 30px 30px;
    text-align: left;
    font-size: 1.2em;
    font-weight: 300;
}
.onetime_popup_content2 {
    padding: 90px 30px;
    text-align: center;
    background-color: #ff7f50;
    color: #fff;
    display: block;
    position: relative;
    width:160px;
    margin: 0 auto;
    padding: 10px;
    border:2px solid #ff7f50;
    border-radius: 2px;
    font-size: 1.2em;
    font-weight: 300;
    text-align: center;
    letter-spacing: 1px;
    text-decoration: none;
    transition: .15s;
}
.onetime_popup_content2:hover {
	background: #3388dd;
        border:2px solid #3388dd;
	color: #fff;
        cursor: pointer;
}

/* --- MARKARの定義 -------------------------------------------------*/
.sample2b {
  display    : inline-block;
  position   : relative;
}
.sample2b span {
  display    : inline-block;
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  background : linear-gradient(transparent 40%, rgba(0, 255, 0, 0.6) 60%);  /* ラインマーカーを付ける  */
  animation  : sample2bAnime 3s ease-in infinite;  /* アニメ */
}
 /* --- アニメーションの設定 ------------------------------------ */
@keyframes sample2bAnime {
   0% { right : 100%; }     /* 点滅開始色        */
  25% { right : 0;    }     /* 点滅終了色        */
 100% { right : 0;    }     /* 点滅終了色        */
}

.main {
  position: absolute;
  top: 5%;
  left: 35%;
  transform: translate(-50%, -50%);
}

.main-heading {
  color: #777;
  text-transform: uppercase;
}

.main-heading-primary {
  display: block;
  font-size: 5.0rem;
  font-weight: 400;
  letter-spacing: 35px;
  
}

.main-heading-secondary {
  font-family: sans-serif;
  display: block;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 4px;
  color: #fff;
  font-weight:bold;
  animation: moveInRight 3s ease-out infinite alternate;
  text-shadow    : 
       2px  2px 1px #00007f,
      -2px  2px 1px #00007f,
       2px -2px 1px #00007f,
      -2px -2px 1px #00007f,
       2px  0px 1px #00007f,
       0px  2px 1px #00007f,
      -2px  0px 1px #00007f,
       0px -2px 1px #00007f;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  
  80% {
    transform: translateX(10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  
  80% {
    transform: translateX(-10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/* メモ　クリップ　Ａ */
.clip-box-a {
 position: relative;
 margin: 1em auto;
 padding: 5px 35px 5px 45px;
 width: 550px; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 5px solid #ff4500; /* 枠線 */
 box-shadow: 15px 15px 15px #acacac; /* 影の色 */
 text-align: left;
 
}
.clip-box-a::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-a::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #fff; /*背景色と同じ色にする*/
 z-index: 2;
}

.memox{
   position:relative;
   background:#fffde7;
   width:600px;
   margin:2em auto;
   padding:1.5em 1em;
   transform: rotate(-2deg);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   color:#795548;
}
.memox::before{
   content:'図で解説！';
   position:relative;
   display:inline-block;
   border-bottom:3px solid #795548;
   border-radius: 0 0 40% 5% / 0 0 15% 20%;
   padding:0 1em 0.1em 0.2em;
   font-size:25px;
   font-weight:bold;
   transform: rotate(-5deg);
   
}
.memox::after{
   content:'';
   position:absolute;
   left:50%;
   top:-15px;
   margin-left:-75px;
   width:150px;
   height:30px;
   background:rgba(245,245,245,0.7);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   transform: rotate(-4deg);
}
.memox ol{
   margin:0.5em 0.5em 0 1em;
   padding:0 0 0 0;
}
.memox ol li{
   margin-bottom:0.1em;
   text-align: left;
   font-size:22px;
  
}
.msr_box05 {
  width: 465px;
  float: left;
  margin:5px;
  padding:1px;
}
.msr_box05 a{
  border:4px solid #999999;
  box-sizing: border-box;
  color: #333333;
  display:block;
  height: 260px;
}
.msr_box05 a *{
  transition: 0.2s opacity ease-in-out;
  -o-transition: 0.2s opacity ease-in-out;
  -moz-transition: 0.2s opacity ease-in-out;
  -webkit-transition: 0.2s opacity ease-in-out;
}
.msr_box05 p {
  font-size: 16px;
  line-height: 1.6;
  padding: 4px;
}
.msr_box05 .ttl {
  font-size: 20px;
  line-height: 1.0;
  padding: 0.1em 4px 0;
}
.msr_box05 a:hover {
  opacity: 1;
  text-decoration: underline;
}

.msr_newslist01 {
  
  border-top: 1px solid #AAAAAA;
  width: 1000px;
}
.msr_newslist01 li {
  border-bottom: 1px solid #AAAAAA;
  font-size: 14px;
}
.msr_newslist01 li a {
  box-sizing: border-box;
  color: #8b4513;
  display: table;
  padding: 18px;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  width: 100%;
}
.msr_newslist01 li a:hover {
  background: #EEEEEE;
  text-decoration: none;
}
.msr_newslist01 li div {
  display: table-cell;
  width: 180px;
}
.msr_newslist01 li p {
  display: table-cell;
  padding-left: 16px;
  vertical-align: middle;
  text-align: left;
  font-size: 18px;
  
}

/* 時間の設定 */
.msr_newslist01 li time {
  display: table-cell;
  vertical-align: top;
  width: 120px;
  font-size: 16px;
}

/* カテゴリの設定 */
.msr_newslist01 li .cat01,
.msr_newslist01 li .cat02,
.msr_newslist01 li .cat03 {
  background-color: #1B73BA;
  border-radius: 1px;
  color: #FFFFFF;
  font-size: 16px;
  padding: 0 2px;
  text-align: center;
  width: 90px;
  
}
.msr_newslist01 li .cat02 {
  background-color: #008000;
}

.msr_newslist01 li .cat03 {
  background-color: #f08080;
}

.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 35px;
  width: 840px;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  display: none;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 8px;
  width: 60px;
  border-radius: 4px;
  background: #00008b;
  transition: 0.5s;
  position: absolute;
}
/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 14px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 14px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
  background: #00008b;
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
  background: #00008b;
}
  
/* メニューのデザイン*/
.drawer-content {
  text-align:center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #ffffe0;
  transition: .5s;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */


}
.sdt_menu{
	background-color: #4169e1;
	width: 100%;
	height: 40px;
	margin: 0 auto;
}

ul.sdt_menu{
	background-color: #4169e1;
	margin:0 auto;
	padding:0;
	list-style: none;
	font-size:7em;
	width:1000px;
        display: none;
}
ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}
ul.sdt_menu li{
	background:#191970;
	float:left;
	width:190px;
	height:45px;
	position:relative;
	cursor:pointer;
}
ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:190px;
	height:55px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
        
}
ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:15px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}
ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:50px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
        
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
	color:#ffffff;
	font-size:1.4em;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#e6b422;
	float:left;
	clear:both;
	width:155px; /*For dumbass IE7*/
	font-size:12px;
	letter-spacing:3px;
}
ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	z-index:13;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#e6b422;
   background:url("../images/bg_dotline.gif") 0 100% repeat-x;
}
ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:5px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;

}

.fonsp { /*リンクの文字設定(マウスをのせる前)*/
	font-size:30px;
	color: #696969; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
        text-shadow    : none;
}

.fonsp2 { /*リンクの文字設定(マウスをのせる前)*/
	font-size:30px;
	color: #0000FF; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
        text-shadow    : none;

   
}
.fon25 { /*リンクの文字設定(マウスをのせる前)*/
	font-size:25px;
	color: #696969; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
   
}
.fon26 { /*リンクの文字設定(マウスをのせる前)*/
	font-size:20px;
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
   
}
.fon27 { /*リンクの文字設定(マウスをのせる前)*/
	font-size:16px;
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
   
}
.fon28 { /*リンクの文字設定(マウスをのせる前)*/
	font-size:16px;
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
   
}
.fon28:hover  { /*リンクの文字設定(マウスをのせる前)*/
	font-size:16px;
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
   
}
.fon20 { /*リンクの文字設定(マウスをのせる前)*/
	font-size:22px;
	color: #795548; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
        font-weight:bold;
   
}
.fon30 { /*リンクの文字設定(マウスをのせる前)*/
	color: #ffffff; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
        font-size: 16px;
        font-weight: bold;
        text-shadow:0 0 10px #000000;
        border-left: solid;
        padding-left: 15px;
   
}
.sdt_menu a { /*リンクの文字設定(マウスをのせる前)*/
	font-size:16px;
	color: #353F25; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

.post {
	clear: both; /*floatの回り込みを解除*/
	width: auto; /*幅指定(autoは初期値に戻す)*/
}

.post h2 {
   margin-bottom:8px;
   padding:0 0 0 10px;
   color:#000000;
   font-family:Georgia,"MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif;
   font-size:20px;
   font-weight:bold;
   line-height:35px;
   border:1px solid #D8D8D8;
   background:url("../images/head016_10-crop.png") 100% 100% repeat-x;
}

.post h3 {

	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
	line-height: 30px;	/*行の高さ指定*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	font-size:16px; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #333333; /*文字色指定*/
}

.post h4 {

	line-height: 30px;	
	margin-bottom: 10px; 
	font-size:15px;
	color: #000000; 
}

.post ul {
	margin-bottom: 15px; /*ボックス外側下の余白*/
}

.post ul li {
	padding-left: 15px; /*ボックス内側左の余白*/
}

.post h1 {
  padding: 0.5em;/*文字周りの余白*/
  font-size:20px;
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}
.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    width: 500px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin: 2em 0;
    background: #f0e68c;
    color: #00000;
    font-weight: bold;
}
.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #f0e68c;
    width: 0;
    height: 0;
}
.box24 p {
    margin: 0; 
    padding: 0;
}
.box27 {
    position: relative;
    margin: 2em 0;
    width: 500px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    height: 100px;
    font-size:25px;
    text-align: left;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

.box26 {
    position: relative;
    width: 955px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin: 0 0;
    padding: 1em 0.7em;
    font-size: 20px;
    text-align: left;
     background-color:rgba(255,255,255,0.7);
    border: solid 8px #95ccff;
    border-radius: 4px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -5px;
    left: 0;
    padding: 0 15px;
    line-height: 1.5;
    font-size: 22px;
    background-color:#95ccff;
    color: #ffff;
}
.box26 p {
    text-align: left;
    margin: 0; 
    padding: 0;
}
.box28 {
    position: relative;
    margin: 1em 0;
    width: 800px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    height: 200px;
    text-align: left;
    font-size:20px;
    padding: 2em 3em;
    border: solid 4px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    text-align:left;
    margin: 0; 
    padding: 0;
    

}

.box29 {
    position: relative;
    width: 800px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin: 2em 0;
    padding: 2em 0.7em;
    font-size: 25px;
    text-align: left;
    border: solid 3px #62c1ce;
    border-radius: 8px;
}
.box29 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: 0;
    padding: 0 15px;
    line-height: 25px;
    font-size: 25px;
    background-color:#62c1ce;
    color: #ffff;
}
.box29 p {
    text-align: left;
    margin: 0; 
    padding: 0;
}
.box4{
    padding: 8px 8px;
    margin: 0 0;
    width: 980px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    color: #2c2c2f;
    background: #f5f5f5;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}
.box1 {
    padding: 1em 1em;
    margin: 1em 0;
    width: 600px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    height: 110px;
    font-weight: normal;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0; 
    padding: 0;
}
.box2 {
    padding: 0.5em 1em;
    width: 950px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin-right: auto;
    font-weight: normal;
    border: solid 0px #ffffff;
}
.box2 p {
   text-align: left;
   font-family: 'HG正楷書体-PRO',cursive;
    margin: 0; 
    padding: 0;
   font-size: 18px;
}

.box30 {
    width: 490px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin-left: auto;
    height: 103px; /*領域の高さ指定*/
    font-family: 'HG正楷書体-PRO',cursive;
    background: #ffdab9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 22px;
    font-family: 'Roman',serif;
    height: 35px; /*領域の高さ指定*/
    background: #ffa500;
    padding: 2px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
    font-size: 18px;
}
.box31 {
    width: 490px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin-left: auto;
    height: 103px; /*領域の高さ指定*/
    font-family: 'HG正楷書体-PRO',cursive;
    background: #eee8aa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box31 .box-title {
    font-size: 22px;
    font-family: 'Roman',serif;
    height: 35px; /*領域の高さ指定*/
    background: #228b22;
    padding: 2px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box31 p {
    padding: 15px 20px;
    margin: 0;
    font-size: 18px;
}
.box32 {
    width: 490px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin-left: auto;
    height: 103px; /*領域の高さ指定*/
    font-family: 'HG正楷書体-PRO',cursive;
    background: #add8e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box32 .box-title {
    font-size: 22px;
    font-family: 'Roman',serif;
    height: 35px; /*領域の高さ指定*/
    background: #4169e1;
    padding: 2px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box32 p {
    padding: 15px 20px;
    margin: 0;
    font-size: 18px;
}
.slide {
  position: relative;
  margin-left: auto;
  width: 470px;
  height: 250px;
  overflow: hidden;
}

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }

}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 12s linear infinite;
}

.slide img:nth-child(2){
  animation-delay: 4s;
}

.slide img:last-child{
  animation-delay: 8s;
}

/* ---- 画像リストの設定 ----- */

.product {
	overflow: hidden; /*領域に入りきらない内容の処理(hiddenははみ出す場合表示されず)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	border: 1px solid #bfbfbf; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	width: 527px; /*幅指定*/
}

.product img {
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
	width: 170px; /*幅指定*/
}

.product h3 {
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #055723;	/*文字色*/
	padding-left: 180px; /*ボックス内側左の余白*/
}

.product h3 a {
	color: #055723;	/*文字色指定*/
}

.product p {
	padding-left: 180px; /*ボックス内側左の余白*/
}



/* ---- テーブルの設定 ----- */

.ta1 {
	width: 540px; /*幅指定*/
	border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
}

.ta1 th, td {
	border: solid 1px #696969; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 10px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.ta1 th {
	background-color: #321E1F; /*背景色指定*/
	color: #ffffff; /*文字色指定*/}
}

/* ---- ボックスの設定 ----- */

.box {
	overflow: hidden; /*領域に入りきらない内容の処理(hiddenははみ出す場合表示されず)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	border: 1px solid #bfbfbf; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin-bottom: 10px; /*ボックス外側下の余白*/
	width: 527px; /*幅指定*/
}

/* ---- 入力フォームの設定 ----- */

#formtable {
	width: 540px; /*幅指定*/
}

#formtable table {
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
	border-collapse: collapse; /*境界線の表示指定(collapseは重ねて表示)*/
}

#formtable th {
	width: 100px; /*幅指定*/
	border: solid 1px #696969; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	background-color: #321E1F; /*背景色指定*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #ffffff; /*文字色指定*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

#formtable td {
	border: solid 1px #696969; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	padding: 5px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
}

#formtable input {
	border: solid 1px #bfbec5; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
}

#formtable textarea {
	border: solid 1px #bfbec5; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
}

#formtable p {
	margin: 10px 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	text-align:center; /*行の水平方向の揃え方(centerは中央揃え)*/
}
</style>
/* ----- ページ左の内容 ----- */

/* -- サイドバータイトル -- */
.side-title { padding-bottom: 2px;
        padding:3px;
	font-size: 18px;
        font-weight:bold;
        color:#144474;
        padding-left:1px;

}

#leftside img {
	margin-bottom: 5px; /*ボックス外側下の余白*/
}

.sidebar h2 {
	padding-left: 10px; /*ボックス内側左の余白*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #333333; /*文字色指定*/
}




/* ----- ページ右の内容 ----- */



#rightside h2 {
	padding-left: 10px; /*ボックス内側左の余白*/
	margin: 20px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	font-size:18px;
	color: #6A3F89; /*文字色指定*/
}

#rightside h3 {
   padding:3px;
   font-size:20px;
   font-weight:bold;
   color:#fff;
   padding-left:1px;
   background:#2F5B0D;
   border-bottom:1px solid #C1C1C1;
   border-right:1px solid #C1C1C1;
   text-align: center;
}

#rightside h4 {
   margin-bottom:1px;
   padding-left:1px;
   color:#696969;
   font-size:18px;
   border-bottom:1px solid #999;
}
.newlist {
	margin-bottom: 15px; /*ボックス外側下の余白*/
}

.newlist dl {
	width: auto; /*幅指定(autoは初期値に戻す)*/
	height: 200px; /*領域の高さ指定*/
	overflow: auto; /*領域に入りきらない内容の処理(autoはブラウザに依存(通常はみ出す場合はスクロール表示))*/
	padding-left: 5px; /*ボックス内側左の余白*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.newlist dt {
	font-weight: bold; /*フォントの太さ指定(boldは太字)*/
	color: #666666; /*文字色指定*/
}

.newlist dd {
	border-bottom: 1px solid #cccccc; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin: 5px 5px 2px 5px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}

#rightside a { /*リンクの文字設定(マウスをのせる前)*/
	font-size:20px;
	color: #0000FF; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

#rightside a:hover { /*リンクの文字設定(マウスをのせた時)*/
	color: #C74B15; /*文字色指定*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)(underlineは下線を引く)*/
}