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

/*[base]_________________________________________________________________________________________*/
body{
	margin:0;                                    /*ブラウザにより余白の初期値が異なるため解除*/
	padding:0;                                   /*ブラウザにより余白の初期値が異なるため解除*/
	background-color: #cccccc;                 /*背景色指定　薄いグレーを指定*/
    color: #333333;                            /*文字の色指定　濃いグレーを指定*/
    font-size: 15px;                             /*文字のサイズ指定*/
    line-height: 2;                              /*文字の行間指定*/
}

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

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


.image_70{
    width: 70%;                                  /*サイズはimgタグ内でclass指定*/
}
.image_80{
    width: 80%;                                  /*サイズはimgタグ内でclass指定*/
}
.image_100{
    width: 100%;                                  /*サイズはimgタグ内でclass指定*/
}
.image_l{
    text-align: left;                            /*配置はimgタグをdivかpで囲み、同タグでclass指定*/
}
.image_r{
    text-align: right;                           /*配置はimgタグをdivかpで囲み、同タグでclass指定*/
}
.image_c{
    text-align: center;                          /*配置はimgタグをdivかpで囲み、同タグでclass指定*/
}

ul{
    margin: 0;                                   /*ul要素のデフォルト余白を解除*/
    padding: 0;                                  /*ul要素のデフォルト余白を解除*/
}
        
a{                                               /*リンク先：通常*/
    color: #3583aa;                            /*文字色*/    
    text-decoration: none;                       /*通常時は下線なし*/
}

a:visited{                                       /*リンク先：訪問済*/
    color: #788d98;                            /*文字色*/
}

a:hover{                                         /*リンク先：マウスポインタを置いたとき*/
    text-decoration: underline;                  /*下線あり、.grobal-nav li a:hover で解除した*/
}

/*▼ヘッダー：スタイル*/
header{
    /*▼1024pxディスプレイで問題ない横幅960pxを指定*/
    /*2020/11/02 「会社紹介」追加により横幅を100px増やす*/
    /*2020/11/30 「会社紹介」→「受け入れの流れ」名称変更により横幅を40px増やす*/
    width: 1100px;
    height: 110px;
    /*▼marginはwidthの後に指定*/
    /*▼上下の余白を0、ブラウザの幅から要素の幅を引いた値を、左右均等に分配して余白とする*/
    margin: 0 auto;
}

/*▼div class ヘッダー：ロゴ*/
.logo{
    /*▼float:ボックスを左右に寄せて、その反対側に後続の内容を流し込む*/
    float: left;
    /*▼上部余白*/    
    margin-top: 10px;
    text-align: center;
}

/*▼div class ヘッダー：メニュー位置*/
.global-nav{
    float: right;
    /*▼上部余白*/    
    margin-top: 60px;
}

/*▼ヘッダー：メニューの項目調整*/
.global-nav li{
    /*▼メニュー項目のデフォルト縦並を横並びにする*/    
    float: left;
    /*▼メニュー各項目の左右に余白を作る*/    
    margin: 0 14px;
    /*▼メニュー各項目の文字サイズ*/    
    font-size: 17px;
    /*▼メニューのデフォルトで行頭「・」アイコン自動付与非表示*/
    list-style: none;
    /*▼メニュー各項目の文字フォント「Google Fonts」の「Bitter」を指定したがサンプルのメニューは日本語なので外す*/
    /*font-family: 'Bitter', serif;*/
}

/*▼ヘッダー：メニューの文字色：通常*/
.global-nav li a{
    color: #000000;
}

/*▼ヘッダー：メニューの文字色：マウスポインタを置いたとき*/
.global-nav li a:hover{
    color: #ffffff;
    /*▼2pxは下線の幅、solidは実線*/
    border-bottom: 2px solid #ffffff;
    /*▼文字と下線の余白*/
    padding-bottom: 2px;
    /*▼a:hoverのtext-decoration:underlineが不要のため解除*/    
    text-decoration: none;
}

#wrap{
    /*▼ヘッダー内の各要素に指定したfloatプロパティは、それ以降の要素を回り込ませてしまう*/
    /*▼header要素の後のid属性div要素「wrap」に影響を与えないようにするため、要素への回り込みを解除*/    
    clear: both;
    
    /*▼コンテンツエリアの背景を白にする*/    
    background-color: #ffffff;
    /*▼コンテンツエリアの上部に余白を設定*/    
    margin-top: 220px;
    /*▼コンテンツエリアの内側に余白を設定*/    
    padding: 35px; 0;
}

/*▼コンテンツエリアを中央揃えにする*/    
.content{
    width: 1060px;
    margin: 0 auto;
}

/*▼フッター：スタイル*/
footer{
    /*▼文字の中央揃え*/    
    text-align: center;
    /*▼文字色*/    
    color: #ffffff;
    /*▼内側の上下に余白*/    
    padding: 20px 0;
    /*▼背景色*/    
    background-color: #767671;
}

/*▼フッター：コピーライト表記*/
footer small{
    /*▼文字サイズ*/    
    font-size: 13px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■[　ＴＯＰ頁　]■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#index{
    /*▼背景画像*/
    background-image: url(images/topbackground2.jpg);
    /*▼背景画像繰り返し配置解除*/
    background-repeat: no-repeat;
    /*▼背景画像表示位置(左右から中央と上端)*/
    background-position: center top;
    /*▼背景画像表示位置(コンテンツと共にスクロール)*/
    background-attachment: scroll;
    /*▼背景画像表示(縦幅は保持、横幅は表示に併せて拡大縮小)*/
    background-size: 100% auto;
}

/*▼トップページの大見出し*/
#index h1{
    font-size: 40px;
    line-height: 1;
    color: #000000;
    /*▼フォントを指定できるが、外す*/    
    font-family: serif;
    /*▼表示位置を調整*/
    font-weight: bold;
    text-align: right;
    /*▼下部の余白を調整*/
    margin-bottom: 50px;
    /*▼Aboutページ作成による影響を修正：下線が表示されるので消す*/
    border: none;
}
#index h2{
    font-size: 20px;
    line-height: 1;
    color: #FFFF00;
    /*▼フォントを指定できるが、外す*/    
    font-family: sans-serif;
    /*▼表示位置を調整*/
    text-align: right;
    /*▼下部の余白を調整*/
    margin-bottom: 100px;
    /*▼Aboutページ作成による影響を修正：下線が表示されるので消す*/
    border: none;
}

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

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

/*▼トップページのフッター*/
#index footer{
    /*▼幅*/
    /*width: 960px;*/
    /*▼ボタンとの距離と中央寄せ*/
    /*margin: auto;*/     
    /*Aboutページ作成による影響を修正：背景色を透明にする*/
    background-color: transparent;
}

/*▼Aboutページ作成による影響を修正*/
#index #wrap{
    /*▼背景色を白から透明にする*/
    background-color: transparent;
    /*▼上部の余白を解除*/
    margin-top: 0;
    /*▼要素内部の余白を解除*/
    padding: 0;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■[　会社概要　]■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#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 #9cb4a4;
}

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

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

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

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

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

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

/*▼経歴セクションの表を装飾2*/
#about .career td{
    /*▼データセルの横幅を指定(940(全体)-240(見出しセル)-40(左の余白)=660←調整*/
    width: 360px;
    /*▼データセルの背景色を指定*/
    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_712a.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;
}

/*▼問合せフォーム全体*/
#contact .form{
    /*▼背景色指定*/
    background-color: #eaeaea;
    /*▼内側の余白を調整*/
    padding: 30px 50px;
}

/*▼項目名の表示エリアを設定*/
#contact .form dl dt{
    /*▼横幅*/
    width: 165px;
    /*▼上下の余白*/
    padding: 10px 0;
    /*▼項目を横並びにする*/
    float: left;
    /*▼項目毎に横並びを解除*/
    clear: both;
}

/*▼フォームのレイアウト調整*/
#contact .form dl dd{
    /*▼上下の余白*/
    padding: 10px 0;
}

/*▼フォームパーツの装飾*/
/*▼名前入力欄*/
#contact .form .name{
    width: 240px;
    height: 30px;
}

/*▼メールアドレス入力欄*/
#contact .form .email{
    width: 300px;
    height: 30px;
}

/*▼電話番号入力欄*/
#contact .form .tel{
    width: 240px;
    height: 30px;
}

/*▼問合せ種別*/
#contact .form .type{
    width: 180px;
    height: 30px;
}

/*▼メッセージ入力欄*/
#contact .form .message{
    width: 660px;
    height: 150px;
}

/*▼フォームの送信ボタンの装飾：通常*/
#contact .form button{
    background-color: #009cd3;
    color: #ffffff;
    font-size: 20px;
    width: 120px;
    
    /*▼HTML4までは要素はブロックレベル要素とインライン要素に分類されていた、HTML5では廃止*/
    /*▼ブロックレベル要素：p、h1、div、ulなど／インライン要素：a、img、spanなど*/
    /*▼CSSのデフォルトが上記分類を引き継いでいるため、インライン要素はテキストの一部として扱われ、高さ、幅の指定ができない*/
    /*▼上記を解決するため、displayプロパティを使用、ブロックレベル扱いの要素をインラインとして扱ったり、逆も可能*/
    /*▼ブロック要素扱いにする*/
    display: block;
    
    /*▼文字の中央揃え*/
    text-align: center;
    /*▼行の高さ*/
    line-height: 50px;
    /*▼要素の角を丸くする*/
    border-radius: 10px;
    /*▼要素の枠線*/
    border: 3px solid #009cd3;
    /*▼ボタンの表示位置を調整*/
    margin-left: 165px;
}

/*▼フォームの送信ボタンの装飾：マウスを置いたとき*/
#contact .form button:hover{
    background-color: #ffffff;
    color: 009cd3;
    /*ボタンに乗ったポインタの形状を指定*/
    cursor: pointer;
}

/*▼フォームの入力必須項目に赤字で「*」をつける*/
#contact .form .required:after{
    content: " * ";
    color: #ff0000;
}

/*▼フォームの注意書きの表示位置指定*/
#contact .form .attention{
    margin: 20px 0 0 165px;
}

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