/* ====================================================
* ELEMENT ---
html, wrap, body, h1, h2
* ===================================================*/
/*wrapの指定*/
wrap {
background: #ffffff; /*背景色の指定*/
display: inline-block; /*高さ、横幅を指定可能なボックス*/
margin: auto; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
position: relative; /*要素の位置 relativeはabusolute, center, page, fixedには影響与えず*/
width: 950px /*幅の指定*/
}
/*bodyの指定*/
body {
color: #333333; /*テキストの色*/
font-size: 16pt; /*テキストのフォントサイズ*/
font-family: "ヒラギノ丸ゴ ProN W4", "メイリオ", sans-serif; /*フォントファミリの指定*/
text-align: center; /*テキストの配置*/
letter-spacing: 2pt; /*テキストの文字間隔*/
margin: 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff; /*背景色の指定*/
}
/*フォント統一*/
h1, h2, h3, ul, li {
margin: 1px; /*外側の隙間を指定 上:1px, 右:1px, 下:1px, 左:1px*/
padding: 1px; /*内側の隙間を指定 上:1px, 右:1px, 下:1px, 左:1px*/
}
/*h1*/
h1 {
background-color: #ffffff; /*背景色の指定*/
font-size: 12pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
margin: 0px 0px 8px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 5px 3px 3px 5px; /*内側の隙間を指定 左から、上、右、下、左*/
}
/*ルビの設定*/
rt {
line-height: 0.5;
}
/*要素のスタイル無し*/
ul {
list-style: none; /*リストのスタイル*/
}
/*画像の設定*/
img {
border: none; /*枠線なし*/
}
/*リンクの表示*/
a:link {
color: #0044cc;
}
a:visited {
color: #000066;
}
a:link:hover {
color: #ff0000;
}
a:visited:hover {
color: #ff0000;
}
/* ====================================================
* CLASS # ---
Title, Menu, Main, Footer
* ===================================================*/
/*CHeaderの指定*/
#CHeader {
position: relative;
display: block;
float: left;
width: 950px;
height: 170px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff; /*CHeaderの背景色の指定*/
}
#CHeader h1 {
font-size: 24pt; /*テキストのフォントサイズ*/
color: #333366; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#CHeader ul {
width: 950px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:px*/
}
#CHeader ul li {
display: inline-block;
min-height: 0px;
float: left;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
}
/*BHeaderの指定*/
#BHeader {
position: relative;
display: block;
float: left;
width: 950px;
height: 370px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff; /*CHeaderの背景色の指定*/
}
#BHeader h1 {
font-size: 24pt; /*テキストのフォントサイズ*/
color: #333366; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#BHeader ul {
width: 950px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:px*/
}
#BHeader ul li {
display: inline-block;
min-height: 0px;
float: left;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
}
/*CMenuの指定*/
#CMenu {
position: relative;
float: left;
width: 225px;
height: 100%;
text-align: left; /*テキストの配置*/
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 10px 0px 0px 5px; /*内側の隙間を指定 上:10px, 右:0px, 下:0px, 左:5px*/
background-color: #ffffff; /*CMenuの背景色の指定*/
}
#CMenu h1 {
font-size: 12pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#CMenu ul {
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
}
#CMenu ul li {
float: left;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 10px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:10px*/
font-size: 11pt; /*テキストのフォントサイズ*/
}
/*CMainの指定*/
#CMain {
position: relative;
float: right;
width: 715px;
height: 100%;
display: block;
margin-bottom: 40px;
padding: 5px 0px 0px 0px; /*内側の隙間を指定 上:5px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff /*CMainの背景色の指定*/
}
#CMain > p > b {
font-size: 36px;
font-weight: bold;
text-decoration: none;
color: #86CABE;
}
#CMain table + p {
margin: 40px 0 0;
padding: 0;
}
/*Main内の文字間隔などの調整*/
#CMain p {
line-height: 1.5;
text-indent: 1em;
letter-spacing: 0.2em;
margin: 10px 0;
}
#CMain tr {
line-height: 2.5;
letter-spacing: 0.2em;
font-size: 13pt; /*テキストのフォントサイズ*/
margin: 0px 0px 0px 60px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:25px*/
padding: 0px 0px 0px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
}
/*MokutekiMainの指定*/
#MokutekiMain {
position: relative;
float: right;
width: 715px;
height: 700px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 10px 0px 0px 0px; /*内側の隙間を指定 上:10px, 右:0px, 下:0px, 左:0px*/
background-image: url(../img/cyousa_mokuteki.jpg);
}
/*MokutekiMain内の文字の指定*/
#MokutekiMain p {
line-height: 1.7;
text-indent: 0em;
letter-spacing: 0.2em;
font-size: 13pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
/*OtoiawaseMainの指定*/
#OtoiawaseMain {
position: relative;
float: right;
width: 715px;
height: 700px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 10px 0px 0px 0px; /*内側の隙間を指定 上:10px, 右:0px, 下:0px, 左:0px*/
background-image: url(../img/otoiawase.gif);
}
/*OtoiawaseMain内の文字の指定*/
#OtoiawaseMain p {
line-height: 1.5;
text-indent: 0em;
letter-spacing: 0.2em;
font-size: 16pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: center; /*テキストの配置*/
}
/*ResultMainの設定*/
#ResultMain {
position: relative;
float: right;
width: 900px;
height: 100%;
margin: 5px 10px 10px 5px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 5px 10px 10px 5px; /*内側の隙間を指定 上:5px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff /*CMainの背景色の指定*/
}
/*ResultMain内の文字の指定*/
#ResultMain h1 {
line-height: 1.7;
text-indent: 0em;
letter-spacing: 0.2em;
font-size: 15pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
background-color: #3cb371 /*背景色の指定*/
}
#ResultMain h2 {
line-height: 1.7;
text-indent: 0em;
letter-spacing: 0.2em;
font-size: 13pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
border-bottom: 1px solid #808080;
}
#ResultMain h2 {
line-height: 1.7;
text-indent: 0em;
letter-spacing: 0.2em;
font-size: 13pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
margin: 30px 0px 10px 10px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
}
#ResultMain p {
line-height: 2.0;
text-indent: 1.5em;
letter-spacing: 0.1em;
margin: 0px 15px 0px 15px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
font-size: 12pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#ResultMain ul {
list-style: none; /*リストのスタイル*/
width: 950px;
text-indent: 1.5em;
text-align: left; /*テキストの配置*/
display: block;
font-size: 12pt; /*テキストのフォントサイズ*/
}
/*EndMainの設定*/
#EndMain {
position: relative;
clear: both; /*floatで設定したテキストの回り込みの解除*/
display: block;
width: 950px;
height: 1px;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff; /*EndMainの背景色の指定*/
border-top: 1px solid #ffffff; /*上の枠線*/
}
/*Pankuzuの設定*/
#Pankuzu {
position: relative;
clear: both; /*floatで設定したテキストの回り込みの解除*/
display: block;
width: 950px;
height: 30px;
text-align: left; /*テキストの配置*/
margin: 10px 0px 0px 0px; /*外側の隙間を指定 上:10px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 10px 0px; /*内側の隙間を指定 上:0px, 右:0px, 下:10px, 左:0px*/
background-color: #ffffff; /*Pankuzuの背景色の指定*/
border-top: 1px solid #000000; /*上の枠線*/
border-bottom: 1px solid #000000; /*下の枠線*/
}
#Pankuzu ul li {
display: inline;
margin: 0;
padding: 0px 0px 0px 5px; /*内側の隙間を指定 上:0px, 右;0px, 下:0px, 左:5px*/
font-size: 11pt; /*テキストのフォントサイズ*/
}
/*LinkMainの設定*/
#LinkMain {
position: relative;
float: right;
width: 650px;
height: 100%;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 5px 0px 0px 0px; /*内側の隙間を指定 上:5px, 右:0px, 下:0px, 左:0px*/
background-color: #ffffff /*CMainの背景色の指定*/
}
#LinkMain p {
font-size: 13pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#LinkMain h1 {
font-size: 18pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#LinkMain h2 {
font-size: 14pt; /*テキストのフォントサイズ*/
color: #333333; /*テキストの色*/
text-align: left; /*テキストの配置*/
}
#LinkMain .sectionH1 {
clear: both;
display: block;
margin: 0px 0px 26px 0px;
padding: 26px 0px 5px 0px;
border-top: 1px dotted #ccc;
background: url(../img/h_back.gif) no-repeat 0 0;
}
#LinkMain .sectionH2 {
display: block;
float: left;
margin: 0 10px 0 0;
padding: 0 0 0;
width: 280px;
}
#LinkMain .sectionH3 {
display: block;
float: left;
margin: 0 10px 0 0;
padding: 0 0 0;
width: 560px;
}
#LinkMain ul li {
margin: 0px 0px 0px 0px;
padding: 8px 7px 5px 27px; /*内側の隙間を指定 上:8px, 右;7px, 下:5px, 左:27px*/
font-size: 12pt; /*テキストのフォントサイズ*/
text-align: left; /*テキストの配置*/
background: url(../img/link_icon.gif) no-repeat 0 7px;
}
/*Footerの設定*/
#Footer {
position: relative;
font-size: 16px; /*テキストのフォントサイズ*/
color: #000000; /*テキストの色*/
text-align: center; /*テキストの配置*/
clear: both; /*floatで設定したテキストの回り込みの解除*/
width: 100%; /*幅の指定*/
margin: 0px 0px 0px 5px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:5px*/
padding: 15px 0px 0px 5px; /*内側の隙間を指定 上:15px, 右:0px, 下:0px, 左:5px*/
}
/* ====================================================
* id . ---
* ===================================================*/
/*Main内の文字間隔などの調整*/
.Mform {
color: #333333; /*テキストの色*/
font-size: 11pt; /*テキストのフォントサイズ*/
text-align: left; /*テキストの配置*/
letter-spacing: 0.5pt; /*テキストの文字間隔*/
line-height: 20px;
width: 650px;
height: 100%;
margin: 0px 0px 0px 0px; /*外側の隙間を指定 上:0px, 右:0px, 下:0px, 左:0px*/
padding: 0px 0px 0px 30px; /*内側の隙間を指定 上:0px, 右:0px, 下:0px, 左:30px*/
}
/*---------------------
メインフレームのメニユー1
-----------------------*/
.menu {
padding: 0;
}
.menu h1 {
text-align: center;
}
.menu nav {
display: block;
top: 170px;
margin-left: 25px;
padding-left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
.menu nav ul {
overflow: hidden;
}
.menu nav ul li {
float: left;
display: inline-block;
}
.menu nav ul li a {
display: block;
padding: 5px 2px 0px 0px; /*内側の隙間を指定 上:5px, 右:2px, 下:2px, 左:0px*/
width: 80px;
color: #666;
text-align: center;
text-shadow: 0px 1px 1px #eee;
font-size: 0.55em;
font-family: arial, helvetica, verdana, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif
}
.menu nav ul li a:hover {
color: #333;
text-shadow: 0px 1px 1px #bbb;
}
.menu nav ul li.current {
padding: 0px 0px 0px 0px;
}
/*---------------------
メインフレームのメニユー2
-----------------------*/
.menu2 {
width: 100%;
height: 75px;
padding: 0;
}
.menu2 h1 {
text-align: center;
}
.menu2 nav {
display: block;
top: 170px;
margin-left: 20px;
padding-left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
.menu2 nav ul {
overflow: hidden;
}
.menu2 nav ul li {
float: left;
display: inline-block;
}
.menu2 nav ul li a {
display: block;
padding: 5px 2px 0px 0px; /*内側の隙間を指定 上:5px, 右:2px, 下:2px, 左:0px*/
width: 115px;
color: #666;
text-align: center;
text-shadow: 0px 1px 1px #eee;
font-size: 0.55em;
font-family: arial, helvetica, verdana, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif
}
.menu2 nav ul li a:hover {
color: #333;
text-shadow: 0px 1px 1px #bbb;
}
.menu2 nav ul li.current {
padding: 0px 0px 0px 0px;
}
#hanrei {
font-size: 18px;
line-height: 1em;
}
#hanrei + ul li {
float: left;
}
#ht {
position: absolute;
top: -100%;
}