@charset "UTF-8";

body {
 color: #333;
 font-size: 12px;
 font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', "MS UI Gothic", Osaka, "MS PGothic", Arial, Helvetica, sans-serif;
 letter-spacing: 0.05em;
 line-height: 150%;
 text-align: center;
 width: 100%;
}

.red {
 color: #ff0000;
}

.red_s {
 color: #ff0000;
 font-size: 7px;
}
.wrapper {
 width: 750px;
 margin: 0 auto;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

figure {
 margin: 0;
 padding: 0;
}

p.left {
 text-align: left;
}

.flexBox {
 display: flex;
 justify-content: space-between;
 margin-top: 20px;
 flex-wrap: wrap;
}

/*****============================================================================
header
============================================================================*****/

header {
 background: url(./image/header_bk.gif);
 height: 85px;
 width: 850px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
}

header h1 {
 margin-left: 10px;
}

header a {
 display: inline-block;
 width: 103px;
 height: 64px;
 margin: auto 0;
 margin-right: 20px;
}

h4.greenTitle {
 color: #19492b;
 font-size: 20px;
 text-align: left;
 padding-bottom: 5px;
 border-bottom: 2px solid;
 margin-top: 20px;
}

h4.greenTitle::before {
 content: url(./image/green_point.gif);
 margin-right: 5px;
}

h4.pinkTitle {
 color: #eb6877;
 font-size: 20px;
 text-align: left;
 padding-bottom: 5px;
 border-bottom: 2px solid;
 margin: 20px 0;
}

h4.pinkTitle::before {
 content: url(./image/pink_point.gif);
 margin-right: 5px;
}

h4.orangeTitle {
 color: #ff8a00;
 font-size: 20px;
 text-align: left;
 padding-bottom: 5px;
 border-bottom: 2px solid;
 margin: 20px 0;
}

h4.orangeTitle::before {
 content: url(./image/orange_point.gif);
 margin-right: 5px;
}

h4.blueTitle {
 color: #0072ff;
 font-size: 20px;
 text-align: left;
 padding-bottom: 5px;
 border-bottom: 2px solid;
 margin: 20px 0;
}

h4.blueTitle::before {
 content: url(./image/blue_point.gif);
 margin-right: 5px;
}

/*****============================================================================
メニュー
============================================================================*****/

.main_image {
 height: 285px;
}

nav {
 width: 850px;
 margin: 0 auto;
}

nav ul.link {
 display: flex;
 list-style: none;
 height: 50px;
 padding: 0;
 margin: 0;
}

nav ul.link li {
 width: 25%;
 background: url(./image/nav_bk.gif);
 border-right: 1px solid #9d9d9d;
}

nav ul.link li:last-child {
 border-right: none;
}

nav ul.link a {
 display: block;
}

nav ul.link a:hover {
 opacity: .5;
}

/*****============================================================================
重ね梁とは
============================================================================*****/
#whats {
 margin-top: 40px;
}

#whats .flexBox.about p {
 text-align: left;
 width: 319px;
}

#whats dl {
 margin-top: 20px;
 width: 100%;
 position: relative;
}

#whats dl dt {
 width: 90px;
 height: 40px;
 background: #8fc31f;
 border-radius: 30px;
 color: #FFF;
 line-height: 40px;
 text-align: center;
 font-size: 15px;
 position: absolute;
}

#whats dl dd {
 width: 750px;
 height: 40px;
 border: 2px solid #8fc31f;
 border-radius: 30px;
 color: #333;
 line-height: 36px;
 text-align: left;
 font-size: 15px;
 position: relative;
 margin-bottom: 10px;
 padding-left: 100px;
 box-sizing: border-box;
}

#whats dl dt.deep {
 background: #097c25;
}

#whats dl dd.deep {
 border: 2px solid #097c25;
}

/*typeBox 構成図
--------------------------------------------------------------------------------*/
#whats .typeBox {
 width: 240px;
 height: 315px;
 box-sizing: border-box;
 border: 3px solid #ff8a00;
 background: #feefe2;
 border-radius: 20px;
 text-align: right;
}

#whats .typeBox h5 {
 height: 30px;
 border-radius: 20px;
 margin: 3px;
 color: #fff;
 background: #ff8a00;
 font-size: 16px;
 line-height: 30px;
 text-align: center;
}

#whats .typeBox p {
 margin: 0;
 text-align: center;
 height: 3em;
 margin: 5px;
}

#whats .typeBox img {
 display: block;
 height: 50px;
 margin: 10px auto;
}

#whats .typeBox img.compo {
 width: 210px;
 height: 112px;
}

#whats .typeBox a {
 display: inline-block;
 text-decoration: none;
 color: #ff8a00;
 right: 0;
 margin-right: 10px;
}

#whats .typeBox a::after {
 content: "▶︎";
 margin-left: 5px;
}

#whats .typeBox a:hover {
 opacity: .5;
}

#whats .typeBox.pink {
 border: 3px solid #eb6877;
 background: #fdeff0;
}

#whats .typeBox.pink h5 {
 background: #eb6877;
}

#whats .typeBox.pink a {
 color: #eb6877;
}

#whats .typeBox.blue {
 border: 3px solid #0072ff;
 background: #e3f6ff;
}

#whats .typeBox.blue h5 {
 background: #0072ff;
}

#whats .typeBox.blue a {
 color: #0072ff;
}

/*table テーブル
--------------------------------------------------------------------------------*/
#whats table.kasane {
 margin-top: 20px;
}

#whats table.kasane thead th,
#whats table.kasane thead td {
 height: 28px;
 color: #fff;
 background-color: #19492b;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 padding: 2px;
 vertical-align: middle;
}

#whats table.kasane thead td {
 color: #000;
 background-color: #AAC59F;
 font-size: 10px;
}

#whats table.kasane tbody th {
 background-color: #ededed;
 text-align: center;
 height: 28px;
 line-height: 28px;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 font-weight: normal;
 padding: 5px;
 vertical-align: middle;
}

#whats table.kasane tbody td {
 border-right: 2px solid #ededed;
 border-bottom: 2px solid #ededed;
 padding: 4px;
 vertical-align: middle;
}

#whats table.kasane tbody td.td_left {
 text-align: left;
}

/*test 試験
--------------------------------------------------------------------------------*/

#whats figure.step {
 margin-top: 20px;
}

#whats .testImage figure {
 margin-bottom: 10px;
}

#whats .testImage figcaption {
 background: #f5f1df;
 height: 24px;
 text-align: center;
 line-height: 24px;
 margin-bottom: 5px;
}

/*table テーブル kasane02
--------------------------------------------------------------------------------*/
#whats table.kasane02 {
 margin-top: 20px;
 margin-bottom: 10px;
}

#whats table.kasane02 thead th {
 width: 230px;
 height: 28px;
 line-height: 28px;
 color: #fff;
 background-color: #19492b;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
}

#whats table.kasane02 thead th.short {
 width: 58px;
}

#whats table.kasane02 tbody th {
 background-color: #ededed;
 text-align: left;
 height: 28px;
 line-height: 28px;
 padding: 0 8px;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 font-weight: normal;
 vertical-align: middle;
}

#whats table.kasane02 tbody th span {
 font-size: 10px;
}

#whats table.kasane02 tbody td {
 padding-left: 10px;
 text-align: left;
 border-bottom: 2px solid #ededed;
 border-left: 2px solid #ededed;
 vertical-align: middle;
}

#whats p.attention {
 font-size: 10px;
 text-align: left;
 margin: 0;
}

/*****============================================================================
タイプA
============================================================================*****/
#typeA {
 margin-top: 40px;
 margin-bottom: 50px;
}

#typeA .flexBox dl {
 display: flex;
 flex-wrap: wrap;
 margin-left: 30px;
 width: 520px;
}

#typeA .flexBox dl dt {
 width: 120px;
 height: 25px;
 line-height: 25px;
 border-radius: 20px;
 background: #eb6877;
 color: #fff;
 margin-right: 10px;
 display: block;
}

#typeA .flexBox dl dd {
 display: block;
 width: 360px;
 height: 25px;
 text-align: left;
 margin-right: 10px;
 margin-left: 1em;
}

#typeA .flexBox dl dd::before {
 content: "▶︎";
 color: #d8d7d7;
 margin-left: -1em;
}

#typeA .flexBox dl dd.short {
 width: 100px;
 float: left;
}

/*table テーブル
--------------------------------------------------------------------------------*/
table.typeTable thead th,
table.typeTable thead td {
 height: 28px;
 width: 100px;
 background-color: #eb6877;
 color: #fff;
 line-height: 28px;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
}

#typeB table.typeTable thead th,
#typeB table.typeTable thead td {
 background-color: #ff8a00;
}

#typeC table.typeTable thead th,
#typeC table.typeTable thead td {
 background-color: #0072ff;
}

table.typeTable thead td {
 width: 160px;
 font-weight: bold;
}

table.typeTable tbody th {
 background-color: #ededed;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 padding: 5px;
 vertical-align: middle;
 font-weight: normal;
}

table.typeTable tbody td {
 padding: 5px;
 vertical-align: top;
 border-right: 2px solid #ededed;
 border-bottom: 2px solid #ededed;
}

table.typeTable img {
 width: 90px;
}

/*table テーブル 製品の基準強度と基準弾性係数
--------------------------------------------------------------------------------*/
table.typeTable.pink2 tbody td {
 vertical-align: middle;
}

table.typeTable.pink2 thead td.small {
 background-color: #ffc9cf;
 font-size: 10px;
 color: #333;
}

/*table テーブル 信州接着重ね梁の長期、短期許容応力度
--------------------------------------------------------------------------------*/
table.pink3 thead th {
 width: 160px;
}

table.pink3 thead td {
 width: 293px;
 font-weight: bold;
}

#typeA p {
 text-align: left;
 margin-top: 10px;
}

/*****============================================================================
タイプB
============================================================================*****/
#typeB {
 margin-top: 40px;
 margin-bottom: 50px;
}

#typeB .flexBox dl {
 display: flex;
 flex-wrap: wrap;
 margin-left: 30px;
 width: 520px;
}

#typeB .flexBox dl dt {
 width: 120px;
 height: 25px;
 line-height: 25px;
 border-radius: 20px;
 background: #ff8a00;
 color: #fff;
 margin-right: 10px;
 display: block;
}

#typeB .flexBox dl dd {
 display: block;
 width: 360px;
 height: 25px;
 text-align: left;
 margin-right: 10px;
 margin-left: 1em;
}

#typeB .flexBox dl dd::before {
 content: "▶︎";
 color: #d8d7d7;
 margin-left: -1em;
}

#typeB .flexBox dl dd.short {
 width: 120px;
 float: left;
}

#typeB .flexBox dl .clear dd.short {
 width: 5em;
}

#typeB .flexBox dl .clear {
 height: 25px;
}

/*table テーブル 製品の基準強度と基準弾性係数
--------------------------------------------------------------------------------*/
#typeB table.orange2 tbody td {
 vertical-align: middle;
}

#typeB table.orange2 thead td.small {
 background-color: #ffcb8e;
 font-size: 10px;
 color: #333;
}

/*table テーブル 信州接着重ね梁の長期、短期許容応力度
--------------------------------------------------------------------------------*/
#typeB table.orange3 thead th {
 width: 160px;
}

#typeB table.orange3 thead td {
 width: 293px;
 font-weight: bold;
}

#typeB p {
 text-align: left;
 margin-top: 10px;
}

/*****============================================================================
タイプC
============================================================================*****/
#typeC {
 margin-top: 40px;
 margin-bottom: 50px;
}

#typeC .flexBox dl {
 display: flex;
 flex-wrap: wrap;
 margin-left: 30px;
 width: 520px;
}

#typeC .flexBox dl dt {
 width: 120px;
 height: 25px;
 line-height: 25px;
 border-radius: 20px;
 background: #0072ff;
 color: #fff;
 margin-right: 10px;
 display: block;
}

#typeC .flexBox dl dd {
 display: block;
 width: 360px;
 height: 25px;
 text-align: left;
 margin-right: 10px;
 margin-left: 1em;
}

#typeC .flexBox dl dd::before {
 content: "▶︎";
 color: #d8d7d7;
 margin-left: -1em;
}

#typeC .flexBox dl dd.short {
 width: 120px;
 float: left;
}

#typeC .flexBox dl .clear dd.short {
 width: 5em;
}

#typeC .flexBox dl .clear {
 height: 25px;
}

/*table テーブル 製品の基準強度と基準弾性係数
--------------------------------------------------------------------------------*/
#typeC table.blue2 tbody td {
 vertical-align: middle;
}

#typeC table.blue2 thead td.small {
 background-color: #e3f6ff;
 font-size: 10px;
 color: #333;
 line-height: 1.8em;
 vertical-align: middle;
}

/*table テーブル 信州接着重ね梁の長期、短期許容応力度
--------------------------------------------------------------------------------*/
#typeC table.blue3 thead th {
 width: 160px;
}

#typeC table.blue3 thead td {
 width: 293px;
 font-weight: bold;
}

#typeC p {
 text-align: left;
 margin-top: 10px;
}

/*****============================================================================
footer フッター
============================================================================*****/
footer {
 width: 850px;
 margin: 0 auto;
 margin-top: 40px;
}

footer .footerLink {
 background: #F5F5F5;
 text-align: right;
 width: 750px;
 padding: 30px 50px 20px;
}

footer .footerLink .flexBox {
 display: flex;
 width: 750px;
 margin: 0 auto;
 justify-content: center;
}

footer .footerLink .flexBox a {
 margin: 0;
}

footer a.toTop {
 display: inline-block;
 margin-top: 10px;
 color: #1c4c2e;
}

footer a:hover {
 opacity: .5;
}

footer .copyArea {
 width: 850px;
 height: 80px;
 color: #FFF;
 line-height: 80px;
 background: #1c4c2e;
}