@charset="utf-8"

/*  User Agent Stylesheet 
-reset.css
html5doctor reset.css
 */
 
 * {
 box-sizing: border-box;
 }
 
html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 18px; font-size: 1.8rem; } /* =18px */
h2   { font-size: 16px; font-size: 1.6rem; } /* =16px */
p    { font-size: 14px; font-size: 1.4rem; } /* =14px */
 
body{
 font-family: Helvetica, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
 color: #4c4c4c;
 margin:0;　　　　　　 /* ページ全体のmargin */
 padding:0px;        /* ページ全体のpadding */
 text-align:center;  /* 下記のautoに未対応用のセンタリング */
 }
 
.container {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width:960px;         /* 幅を決定する */
 }

/* header------------
-------------------------------------------------------- */

#header-line{
 border-top: solid #000 4px;
 }
 
 .header-inner{
 padding-top:30px;
 border-bottom:1px solid #000;
 padding-bottom:8px;
 }
 
.float-clear::after{
 content: '';
 display: block;
 clear: both;
}

.float-clear{
display: flex;
align-items: center;    /* ロゴ文字を天地センターに */
}

.logo-mark{
float: left;
width:7%;     /* マークの幅を決定する */
padding-left:4px;
}

.logo-mark img{
 width: 60px;
}

.logo-text{
float: left;
width:30%;     /* ロゴ文字の幅を決定する */
}

.logo-text a{
text-decoration: none;
color:#000;
}

.eng-logo{
font-family: 'EB Garamond', serif;
font-size:24px;
}

.header-nav{
float: left;
width:62%;     /* ナビゲーションの幅を決定する */
}

/* ヘッダーのナビゲーション------------------------------ */

.header-nav a{
text-decoration: none;
color:#4c4c4c;
display: block;
}

.nav ul{
margin: 0;
padding-top: 30px;
list-style-type: none;
}

.nav li {
font-size:15px;
font-size:1.5rem;
height: 10px;
padding-left: 76px;
}

.header-nav {
text-align: right;
}
.header-nav li {
display: inline-block;
}

.current{
color: #0099ff;
}

/* ーーーヘッダーのナビに下線が引かれるようにーーー */

.header-nav li a:hover {
opacity: 0.3;
}

.header-nav li a:after {
	content: '';
	width: 0;
	padding-bottom: 6px;   /* 線とリンク文字の間を空ける */
	transition: all 0.3s ease;
	border-bottom: 3px solid #0099ff;
	display: block;
}
.header-nav li a:hover:after {
	width: 100%;
	border-bottom: 3px solid #0099ff;
}

/* main------------
-------------------------------------------------------- */
.article-box{
margin:10px 4px 10px 4px;
}

.naiyo::after{
 content: '';
 display: block;
 clear: both;
}

.article-left{
float:left;
width : 18% ;
height: 180px;
border-right:1px solid #000;
text-align:center;
}

.article-right{
float:right;
width : 80% ;
}

.article-left h2{
font-size:20px;
}

.right-box p, h2{
line-height:150%;
}

.right-box{
	width : 90%;
	margin : 0 auto;
padding-bottom:40px;
}

.tume{
padding-bottom:0px;
}

.right-midasi h1{
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #0099FF;
  border-bottom: 1px solid #ccc;
}

.right-midasi{
padding-top:10px;
padding-bottom:20px;
}


/* footer------------
-------------------------------------------------------- */

.footer-box{
border-top:1px solid #000;
}

.footer-box a{
text-decoration : none;
color :  #4c4c4c;
 }
 
.footer-box a:hover{
 opacity : 0.5;
 }
 
/* ------ 3つのボックスのfloat------ */

.footer-box::after{
 content: '';
 display: block;
 clear: both;
 }

.footer-box1 {
float : left;
width : 20%;　　　/* １つめのボックス横幅を指定する */
 }
 
.footer-box2 {
float : left;
width : 24%;　　　/* ２つめのボックス横幅を指定する */
 }

.footer-box3 {
float : left;
width : 55%;      /* ３つめのボックス横幅を指定する */
text-align : right;
margin-top : 70px;
 }

.footer-box1 ul li,
.footer-box2 ul li {
font-size :16px ;
line-height:1.6;
list-style: none;
}

.footer-box1 ul > li:before {
    content: "\f054";
    position: relative;
    font-family: FontAwesome;
    margin-right: 0.5em;
    font-size: 50%;
}

.footer-box2 ul > li:before {
    content: "\f054";
    position: relative;
    font-family: FontAwesome;
    margin-right: 0.5em;
    font-size: 50%;
}

.footer-box1 ul li ul li,
.footer-box2 ul li ul li{
font-size :14px ;
}

.footer-box1 ul,
.footer-box2 ul {
margin-left: 20px;
padding: 4px 0 8px 10px;
}

.footer-box1 ul .active,
.footer-box2 ul .active {
color:#ccc;
}

/* 会社名・住所・メールアドレスのfooter-box3 */

.footer-box3 h1 {
font-size: 16px;
line-height : 18px;
 }
 
.footer-box3 h2 {
font-size : 12px;
line-height : 1.4;
font-weight : normal;
margin-bottom : 0;
 }
 
 
 .footer-box{
 margin-bottom:38px;
 }
 
/* footerのcopyright-------------------- */

.copyright{
 background-color:#0099ff;
 width: 100%;
 position: fixed;
 bottom: 0;
}

.copyright p{
margin: 0;
padding :4px 0 2px 0;
height: 16px;
font-size: 10px;
color: #fff;
text-align: center;
}

/* ----------------------トップにもどるボタンのcss---------------------- */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 80px;   /* --------下からの位置-------- */
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



/* =================================================
===================================================================== */
/* ========================レスポンシブ対応========================== */

/* ============ウィンドウ幅が601〜960pxの場合に適用するCSS=========== */
@media screen and (min-width:601px) and ( max-width:960px)
 {

 .container {
 width:100%;
}

.header-inner{
 padding-top:6px;
}

.logo-mark img{
 width: 54px;
}

.logo-mark{
width:54px;
}

.logo-text{
width:32%;
padding-top: 20px;
}

.logo-text h1{
font-size:14px;
}

.eng-logo{
font-family: 'EB Garamond', serif;
font-size:20px;
}

.header-nav{
width:58%; 
}

 .float-clear{
display: block;   
}

.nav ul{
margin-right: 2px;
padding-top: 40px;
}

.nav li {
font-size:15px;
font-size:1.5rem;
height: 18px;
padding-left: 35px;
}


.header-nav {
text-align: right;
}

.header-nav li a:after {
padding-bottom: 3px;
} 

/* ----ここまでheader----- */

/* ----ここからmain----- */

.article-box{
margin:6px 6px;
}

.article-left h2{
font-size:18px;
}

.right-box h2{
font-size:16px;
}

.right-box p{
font-size:14px;
}

/* ----ここまでmain----- */

/* ----ここからfooter----- */

.footer-box1 ul li,
.footer-box2 ul li {
font-size :14px ;
line-height:1.4;
}

.footer-box1 ul li ul li,
.footer-box2 ul li ul li{
font-size :12px ;
}

.footer-box3{
margin-top : 40px;
}

.footer-box3 h1{
font-size :14px;
}

.footer-box3 h2{
font-size :11px;
}


}


/* ============ウィンドウ幅が480〜600pxの場合に適用するCSS=========== */
@media screen and (min-width:480px) and ( max-width:600px)
 {
 
 .container {
 width:100%;
}

.header-inner{
 padding-top:4px;
}

.logo-mark img{
 width: 50px;
}

.logo-mark{
width:50px;
}

.logo-text{
width:80%;
padding-top: 20px;
}

.logo-text h1{
font-size:16px;
}

.eng-logo{
font-family: 'EB Garamond', serif;
font-size:22px;
}

.header-nav{
width:100%; 
border-top: 1px solid #000;
}

 .float-clear{
display: block;   
}
 
.nav ul{
margin-right: 80px;
padding-top: 8px;
}

.nav li {
font-size:14px;
font-size:1.4rem;
height: 16px;
padding-left: 70px;
}


.header-nav {
text-align: center;
}

.header-nav li a:after {
padding-bottom: 2px;
} 

/* ----ここまでheader----- */

/* ----ここからmain----- */

.article-box{
margin:4px 6px;
}

.article-left{
float:left;
width : 100% ;
height: 100%;
border-right:0px solid #000;
border-bottom:1px solid #000;
text-align:center;
}

.article-right{
float:right;
width : 100% ;
}

.article-left h2{
font-size:18px;
background:linear-gradient(transparent 1%, #ebebeb 0%);
}

.right-box h2{
font-size:16px;
}

.right-box p{
font-size:14px;
}

/* ----ここまでmain----- */

/* ----ここからfooter----- */

.footer-box1 ul li,
.footer-box2 ul li {
font-size :14px ;
line-height:1.6;
}

.footer-box1 ul li ul li,
.footer-box2 ul li ul li{
font-size :12px ;
}

.footer-box3{
margin-top : 50px;
}

.footer-box3 h1{
font-size :14px;
}

.footer-box3 h2{
font-size :11px;
}

}


/* ============ウィンドウ幅が0〜479pxの場合に適用するCSS=========== */
@media screen and ( max-width:479px )
{

.container {
 width:100%;
}

.header-inner{
 padding-top:2px;
}

.logo-mark img{
 width: 48px;
}

.logo-mark{
width:48px;
}

.logo-text{
width:80%;
padding-top: 20px;
}

.logo-text h1{
font-size:14px;
}

.eng-logo{
font-family: 'EB Garamond', serif;
font-size:20px;
}

.header-nav{
width:100%; 
border-top: 1px solid #000;
}

.float-clear{
display: block;   
}

.nav ul{
margin-right: 25px;
padding-top: 4px;
}

.nav li {
font-size:14px;
font-size:1.4rem;
height: 16px;
padding-left: 25px;
}

.header-nav {
text-align: center;
}

.header-nav li a:after {
padding-bottom: 2px;
}

/* ----ここまでheader----- */

/* ----ここからmain----- */

.article-box{
margin:4px;
}

.article-left{
float:left;
width : 100% ;
height: 100%;
border-right:0px solid #000;
border-bottom:1px solid #000;
text-align:center;
}

.article-right{
float:right;
width : 100% ;
}

.article-left h2{
font-size:16px;
background:linear-gradient(transparent 1%, #ebebeb 0%);
}

.right-box h2{
font-size:14px;
}

.right-box p{
font-size:12px;
}

/* ----ここまでmain----- */

/* ----ここからfooter----- */
.footer-box1{
width:45%;
}

.footer-box2{
width:50%;
}

.footer-box3{
width:98%;
margin-top : 10px;
text-align: center;
}

.footer-box1 ul li,
.footer-box2 ul li {
font-size :14px ;
line-height:1.6;
}

.footer-box1 ul li ul li,
.footer-box2 ul li ul li{
font-size :12px ;
}

}