@charset "utf-8";
/* CSS Document */

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■[　共　　通　]■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
html {
	  position:         relative;
	  min-height:       100%;
	  padding-bottom:   100px;
	  box-sizing:       border-box;
}

/*>>[1.デフォルトの制約を解除]/S////////////////////////////////////////*/
body{
    /*▼Webブラウザの種類によって余白の初期値が異なるため解除*/
	margin:0;
	padding:0;
    
    /*▼背景色指定　白を指定*/
	background-color:   #FFFFFF;
    
    /*▼文字の色指定　濃いグレーを指定*/
    color:              #333333;
        
    /*▼文字のサイズ指定*/
    font-size:          15px;
    
    /*▼文字の行間指定*/
    line-height:        2;
    
    /*ページ毎にコンテンツ容量が異なるため、スクロールバーの非表示の違いで表示がガタ付く対応*/
    /*常に表示する*/
    overflow-y:         scroll;
}

p,h1,h2,h3,h4,h5,h6{
    /*▼p要素とh要素のデフォルト上部余白を解除*/
    margin-top:         0;
}

img{
    /*▼img要素の下部に意図しない空白ができる場合の解除*/
    vertical-align: bottom;
}

ul{
    /*▼ul要素のデフォルト余白を解除*/
    margin: 0;
    padding: 0;
}
/*>>[1.デフォルトの制約を解除]/E////////////////////////////////////////*/

/*>>[2.リンクの設定]/S////////////////////////////////////////////////*/
/*▼リンク先：通常*/
a{
    /*▼文字色*/
    color: #000000;
    /*▼下線なし*/    
    text-decoration: none;
}

/*▼リンク先：マウスポインタを置いたとき*/
a:hover{
    /*▼文字色*/
    color: #789ABC;
}

/*▼リンク先：訪問済*/
a:visited{
    /*▼文字色*/
    color: #009cd3;
}
/*>>[2.リンクの設定]/E////////////////////////////////////////////////*/

/*>>[3.ヘッダーの設定]/S//////////////////////////////////////////////*/
/*▼ヘッダー：スタイル*/
header{
    /*▼1024pxディスプレイで問題ない横幅960pxを指定*/
    width: 960px;
    height: 90px;
    /*▼上下の余白を0、ブラウザの幅から要素の幅を引いた値を、左右均等に分配して余白とする*/
    /*▼marginはwidthの後に指定*/
    margin: 0 auto;
    /*背景色*/
    background-color: #ffffff;
}

/*▼ヘッダー：ロゴ*/
.logo{
    /*▼タイトルロゴ表示位置*/    
    text-align: center;
    /*▼背景色指定*/    
    background-color: #ffffff;
}

/*▼ヘッダー：メニュー*/
nav{
    margin: auto;
}

.menumavi{
    width: 100%;
    height: 40px;
    /*▼メニューを中央に配置*/    
    text-align: center;
    /*▼上部余白(タイトルロゴとの余白)*/
    margin-top: 20px;
    /*▼帯の色を指定*/
    background-color: lightseagreen;
}

/*メニューの項目調整*/
.menumavi li{
    /*▼メニュー項目を横並びにする*/
    display: inline-block;
    /*▼メニュー各ボタンの横幅*/
    /* width: 134px; */
    width: 120px;
    /*▼メニュー各ボタンの縦幅*/
    height: 40px;
    /*▼メニュー各項目の左右に余白を作る(上下、左右)*/
    margin: -1px -1px;
    /*▼メニュー各項目の文字サイズ*/
    font-size: 16px;
    /*▼メニュー各項目の枠(幅、線の種類、色)*/
    border: 1px solid #FFFFFF;
    /*background-color: green;*/
}

.menumavi li a{
    display: block;
    color: #ffffff;
    height: 40px;
    /*▼background-color: #789ABC;*/
    /*▼メニューボタンの色(マウスカーソルが触れていないとき)*/
    background-color: darkcyan;
}

.menumavi li a:hover{
    color: #ffffff;
    height: 40px;
    background-color: green;
}

/*>>[3.ヘッダーの設定]/E////////////////////////////////////////////*/

/*>>[4.コンテンツの設定]/S//////////////////////////////////////////*/
#wrap{
    /*▼コンテンツエリアの背景を白にする*/  
    background-color: #ffffff;
    /*▼コンテンツエリアの上部に余白を設定*/    
    margin-top: 20px;
}
/*>>[4.コンテンツの設定]/E//////////////////////////////////////////*/

/*>>[5.フッターの設定]/E////////////////////////////////////////////*/
footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgb(170, 173, 172);
    /*▼文字色*/    
    color: #ffffff;
    /*▼文字の中央揃え*/    
    text-align: center;
    /*▼内側の上下に余白*/    
    padding: 20px 0;
}

/*コピーライト表記*/
footer small{
    /*▼文字サイズ*/
    font-size: 13px;
}
/*>>[5.フッターの設定]/E////////////////////////////////////////////*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■[　ＴＯＰ頁　]■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#index{
}

/*▼トップページの大見出し*/
#index h1{
    font-size: 60px;
    line-height: 1;
    color: #000000;
    font-family: 'Bitter', serif;
    /*▼下部の余白を調整*/
    margin-bottom: 100px;
    /*▼Aboutページ作成による影響を修正：下線が表示されるので消す*/
    border: none;
}

/*▼ヘッダーとコンテンツエリアの余白*/
#index .content{
    margin-top: 60px;
}

/*▼トップページのp要素だけ*/
#index p{
    font-size: 16px;
    color: #ffffff;
}
.btn{
    margin: auto;
}

/*▼トップページのボタンの装飾：通常*/
.btn a{
    background-color: #789ABC;
    color: #ffffff;
    font-size: 15px;
    width: 105px;
    
    /*▼HTML4までは要素はブロックレベル要素とインライン要素に分類されていた、HTML5では廃止*/
    /*▼ブロックレベル要素：p、h1、div、ulなど／インライン要素：a、img、spanなど*/
    /*▼CSSのデフォルトが上記分類を引き継いでいるため、インライン要素はテキストの一部として扱われ、高さ、幅の指定ができない*/
    /*▼上記を解決するため、displayプロパティを使用、ブロックレベル扱いの要素をインラインとして扱ったり、逆も可能*/
    /*▼ブロック要素扱いにする*/
    display: inline-block;
    
    /*▼文字の中央揃え*/
    text-align: center;
    /*▼行の高さ*/
    line-height: 30px;
    /*▼上部(本文)との間を空ける*/
    margin-top: 12px;
    /*▼要素の角を丸くしないa*/
    border-radius: 0px;
    /*▼要素の枠線*/
    border: 1px solid #555555;
}

/*▼トップページのボタンの装飾：マウスを置いたとき*/
.btn a:hover{
    text-decoration: none;
    background-color: #bbbbbb;
    color: 333333;
}

/*自動画像表示*/
#photo {
    width: 1024px;
    height: 576px;
    margin: 0 auto;
    text-align: left; /*centerがいい*/
    overflow: hidden;
    position: relative;
}

#photo img {
    top: 0;
    left: 0;
    position: absolute;/*relativeがいい*/
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■[　会社概要　]■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#about{
    /*▼背景画像*/
    background-image: url(images/i006_712a.jpg);
    /*▼背景画像繰り返し配置解除*/
    background-repeat: no-repeat;
    /*▼背景画像表示位置(左右から中央と上端)*/
    background-position: center top;
    /*▼背景画像表示位置(コンテンツ量に関わらず固定)*/
    background-attachment: fixed;
    /*▼背景画像表示(縦幅は保持、横幅は表示に併せて拡大縮小)*/
    background-size: 100% auto;
}

/*▼メインエリアの幅と中央揃え*/
.main-center{
    width: 940px;
    margin: 0 auto;
}

/*▼大見出し文字*/
h1{
    font-size: 36px;
    border-bottom: 2px solid #cccccc;
}

/*▼中見出し文字*/
h2{
    font-size: 24px;
}

/*▼中見出しの飾り：擬似要素*/
.icon:before{
    content: "";
    padding-right: 10px;
    border-left: 7px solid #556b2F;
}

/*▼テキストの幅と位置を指定*/
#about .profile-txt{
    width: 940px;
    float: left;
}

/*▼テキストの一部を太字にする*/
#about .profile-txt span{
    font-weight: bold;
}

/*▼プロフィールの画像に右寄せの指定*/
#about .profile-image{
    float: right;
}

/*▼崩れたレイアウトをclearfixで修正*/
.clearfix:after{
    /*▼空のボックスを生成*/
    content: "";
    /*▼インライン要素なので、ブロックレベル要素にする*/
    display: block;
    /*▼floatを解除する*/    
    clear: both;
}

/*▼セクション間の余白を調整*/
section{
    margin-bottom: 35px;
}

/*▼経歴セクションの表を装飾1*/
#about .career th{
    /*▼見出しセルの横幅を指定*/
    width: 240px;
    /*▼見出しセルの背景色を指定*/
    background-color: #aaaaaa;
    /*▼見出しセルの上下幅を調整*/
    padding: 12px 0;
    /*▼見出しセルの枠線をつける*/
    border: 1px solid #cccccc;    
}

/*▼経歴セクションの表を装飾2*/
#about .career td{
    /*▼データセルの横幅を指定(940(全体)-240(見出しセル)-40(左の余白)=660*/
    width: 660px;
    /*▼データセルの背景色を指定*/
    background-color: #f0f0f0;
    /*▼データセルの上下幅を調整*/
    padding: 12px 0 12px 40px;
    /*▼データセルの枠線をつける*/
    border: 1px solid #cccccc;
}

/*▼経歴セクションの表を装飾3*/
table{
    /*▼隣り合ったセルのボーダーとボーダーの間隔を0にする*/    
    border-spacing: 0;
    /*▼隣り合ったセルの枠線がそれぞれ表示されるので解消する*/    
    /*▼重ねて表示する：collapse／隙間を空けて表示：separate*/    
    border-collapse: collapse;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■[　アクセス　]■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#contact{
    /*▼背景画像*/
    background-image: url(images/i006_666.jpg);
    /*▼背景画像繰り返し配置解除*/
    background-repeat: no-repeat;
    /*▼背景画像表示位置(左右から中央と上端)*/
    background-position: center top;
    /*▼背景画像表示位置(コンテンツ量に関わらず固定)*/
    background-attachment: fixed;
    /*▼背景画像表示(縦幅は保持、横幅は表示に併せて拡大縮小)*/
    background-size: 100% auto;
}

/*▼table要素に左寄せの指定をしてGoogleMapを右側に配置*/
#contact .access table{
    float: left;
}

/*▼住所と地図の表の修飾*/
#contact .access th,
#contact .access td{
    /*▼テキストを左寄せ、上端揃えに指定*/
    text-align: left;
    vertical-align: top;    
    /*▼行間を広くとる*/
    line-height: 2.5;
}

/*▼住所と地図の表のtd要素の内側の余白を調整*/
#contact .access td{
    padding-left: 30px;
}

/*▼GoogleMapの表示位置調整*/
#contact .access iframe{
    /*▼ifreme要素の幅*/
    width: 460px;
    /*▼ifreme要素を右寄せにする*/
    float: right;
}

/*リンク頁の設定*/
.link-box span {
    font-weight: bolder;
}
.link-box hr {
    opacity: 0.5;
    width: 95%;
    border-color: green;
}
.link-box a {
    /*▼文字色*/
    color: #009cd3;
    /*▼下線なし*/
    text-decoration: none;
}
/*▼リンク先：マウスポインタを置いたとき*/
.link-box a:hover{
    /*▼文字色*/
    /* color: #789ABC; */
    opacity: .5;
    text-decoration: underline;
}

/*▼リンク先：訪問済*/
.link-box a:visited{
    /*▼文字色*/
    color: #609;
}