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

/*  */
html {
/* 多くのブラウザは16ptがデフォルトなのでベースを10ptに指定。絶対値では無く％指定で個人設定の変更にある程度合わせる */
	font-size: 62.5%;

/* 特に指定しなくても良いが、バックグラウンドイメージの縦を100%とか使いたい時には上位の要素が高さを明示的に指定していないといけないので必要 */
	height: 100%;
}

/* paddingが長さ指定の外にあると作業性が悪いので、全てにborder-boxを指定。これで個別に指定しなくてもよくなる */
*,*::before,*::after {
	box-sizing: border-box;
}

/* 本文設定 */
body {
/* フォントは適当に指定。実際にはフォント表示はユーザーの環境によるので、注意 */
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", Meiryo, "メイリオ", sans-serif;

/* emと違って、remを指定する事でhtmlのフォントサイズ指定に対して何倍のフォントにするかが決まる */
	font-size: 1.4rem;
    
/* 幅を指定してmarginをautoにすると、幅固定でブラウザに対して自動でセンタリングされる */
	width: 960px;
	margin: 0 auto;

/* 文字色を指定。真っ黒は少しきついので、適当に黒よりも薄く指定 */
	color: #404040;
	height: 100%;
}

.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

header {
    position: fixed;
    margin: 0 0 13em 0;
    background-color: white;
    z-index: 1;
}

/* hrのmarginで上下の空きの調整 */
header hr {
    margin-top: 0px;
/* 2018.03.13************************************************************************************ */
    /* margin-bottom: 5px; hrのマージンで間隔を調整していたのをやめてnavi2の方で高さを調整するように”0”にした */
    margin-bottom: 0px;
/* ********************************************************************************************** */
}

.container{
    width: 960px;
    margin: auto;
    /* text-align: center; */
}

#Slogo {
    /* display: inline-block;は消すとエラーも消えます */
    float: left;
    width: 103px;/* beOriginalマニュアル通りだとtopページは大きい方の画像なので164pxの方を使います */
    height: 36px;/* アスペクト比を変更しないなら、widthを指定してheightをautoにしても良いです */
    margin: 16px 30px 0px;/* ３つ数値を指定しているので、上 左右 下 のマージン指定となります */
}

#Tlogo {
    float: left;
    margin-top: 16px;
    /* #Tlogoはimgタグなのでfont-sizeは消しました
       画像の場合サイズ指定をしないと画像サイズで表示されるので指定を消しました */
}

#sitemap {
    float: right;
    /* 上端すぎるのでmarginを入れました
        Slogoの上端に揃えてみました */
    margin-top: 45px;
    margin-right: 10px;
}

/* 2018.03.13************************************************************************************ */
/* a {color: gray;} */
#sitemap a {
    text-decoration: none;/*アンカーの下線などを削除*/
    color: inherit;/* aの色指定が色々と邪魔するので、 親要素のtext色を継承する指定 */
}
/* ********************************************************************************************** */

/* Main Menu */
.navi {
    display: inline-block;
    width: 900px;
    margin: 15px 0 0;
    font-size: 0;
}

.navi li {
    display: inline-block;  /* 横並びに配置 */
    width: 16%;             /* メニュー項目の横幅(16%) */
    list-style: none;       /* リストスタイルなし */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    position: relative;     /* サブメニュー表示の基準位置 */
}

.navi li:nth-child(1) {
    color: #ffffff;
    text-shadow:
      black 1px 0px 0px,
      black 0px 1px 0px,
      black -1px 0px 0px,
      black 0px -1px 0px;
}

.navi li:nth-child(2) {
    color: gray;
}

.navi li:nth-child(3) {
    color: #48A9C5;
}

.navi li:nth-child(4) {
    color: #3A913F;
}

.navi li:nth-child(5) {
    color: #DAAA00;
}

.navi li:nth-child(6) {
    color: #fa8072;
}

.navi a {
    text-decoration: none;/*アンカーの下線などを削除*/
    color: inherit;/* aの色指定が色々と邪魔するので、 親要素のtext色を継承する指定 */
    opacity: 1; 
    box-shadow: 0 0 0;
    margin: 10px auto;
}

.navi a:hover {
    opacity: .5;
}

.navi2 li{
    display:inline-block;
    text-align: center;
    font-size: 16px;
    list-style: none;
    color: gray;
}

.navi2 li a {
    display: inline-block;
    width: 100px;
    text-decoration: none;/*アンカーの下線などを削除*/
    color: inherit;/* aの色指定が色々と邪魔するので、
                        親要素のtext色を継承する指定 */
/* 2018.03.13 ************************************************************************ */
/* navi2 の文字の上下の余白でもクリック出来るようにしたいので、liの高さは指定せずに、
a要素の高さで調整します。今回は行の高さで調整してみました。 */
    line-height: 40px;
/* *********************************************************************************** */
}

.topspacer {
    height: 200px;
}

.jump {
    padding-top: 200px;
    margin-top: -200px;
}

.kiji {
	/* 位置決めの基準にします */
	position: relative;
	width: 960px;
	margin: 0px auto;
	text-align: left;
}

.backpict {
	/* 背景の○を作ります。divタグの角を50％で丸めて円を作ってます */
	/* 位置を指定する為にpositionで適当にズラしてます */
	position: absolute;
	top: -50px;
	height: 220px;
	width: 220px;
	border-radius: 50%;
	border: solid 1px gainsboro;
}

.kiji .coltitle {
	font-size: 38px;
	line-height: 50px;
	letter-spacing: 1px;
	color: gray;
/* 2018.03.13 *********************************************************************** */
    /* margin: 0 30px 10px; タイトルを後ろの円の中央にしたいので、中央揃えで合うように */
    margin: 0 0 10px;/* 左のマージンを削除して幅を後ろの円と同じにして、文字揃えを中央揃えに */
    width: 220px;
    text-align: center;
/* ********************************************************************************** */
}

.honbun {
	font-size: 1.8rem;
	width: 960px;
    padding-left: 110px;
    padding-right: 110px;
	margin: 0 auto;
	/* position指定したものは指定していない物の上に配置されるので */
	/* 背景の円の上に配置する為に本文もposition指定してやります */
	position: relative;
}

.honbun p {
	margin-top: 0;
	line-height: 3.5rem;
}

.img {
    float: left;
    margin-right: 30px;
}

.tokumaru {
    margin-left: 200px;
}




#marks {
    float: left;
    position: relative;
    width: 900px;
    height: 100px;
    margin-left: 10px;
}

/* 2018.03.13 ************************************************************************ */
#marks a {
    text-decoration: none;/*アンカーの下線などを削除*/
    color: inherit;/* aの色指定が色々と邪魔するので、 親要素のtext色を継承する指定 */
}
/* ********************************************************************************************** */

#SCam {
    position: absolute;
    width: 73px;
    height: 73px;
    top: 5px;
    left: 0px;
}

#zenjukyo {
    position: absolute;
    width: 73px;
    height: 73px;
    top: 5px;
    left: 85px;
}

#Pmark {
    position: absolute;
    width: 75px;
    height: 75px;
    top: 2px;
    left: 170px;
}

#ISO {
    position: absolute;
    width: auto;
    height: 84px;
    top: -3px;
    left: 251px;
}

/*
#ISOcts {
    position: absolute;
    line-height: 150%;
    top: 0px;
    left: 325px;
    font-size: 11px;
}*/

.sitepolicy {
    position: absolute;
    display: block;
    top: 5px;
    left: 585px;/* 右から指定すると其々に違う数値を
                    指定しないといけないので、左からの
                    指定にしましょう */
    font-size: 11px;
}

.kozinhousin {
    position: absolute;
    display: block;
    top: 25px;
    left: 585px;
    font-size: 11px;
}

.kozintoriatukai {
    position: absolute;
    display: block;
    top: 45px;
    left: 585px;
    font-size: 11px;
}

#Copyright {
    float: right;
    width: 140px;
    text-align: right;
    margin: 0;
    padding-top: 45px ;
    font-size: 11px;
    color: #888888;
}