@charset "UTF-8";
	@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap&subset=japanese');

/************************************************
 ブラウザリセット
************************************************ */
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;
	list-style: none;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

/*基本設定*/

body{
background:#fff;
}

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

a:hover{
text-decoration:underline;
color:#555;
}

/*ヘッダー*/
header{
position:fixed;top:0px;
width:100%;
background:#1a1a1a;
clear:both;
height:55px;
text-align:center;
padding-top:25px;
}

header img{
width:150px;
vertical-align:middle;
}

/*responsive - header*/
@media screen and ( max-width:479px )
{
 header img{
 width:40%;
 }
}

/*グローバルナビ*/

#global-navi {
position:fixed;top:80px;
background:#333;
right: 0px;
width: 100%;
text-align:center;
}

#wrapper nav ul li{
display:inline-block;
font-size: 15px;
padding:  20px 20px 20px 28px;
letter-spacing:1px;
}

#wrapper nav ul li a{
color: #ddd;
font-family: serif;
font-weight:bold;
}

#wrapper nav ul li.now a{
color:#cda466;
font-family: serif;
border-bottom:1px solid #cda466;
}

#wrapper nav ul li.now a:hover{
text-decoration:none;
}

/*スマホ画面で例１のハンバーガーメニューの形にする*/
@media screen and (max-width: 600px) {
#wrapper nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background:#333;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
}
#wrapper nav ul li {
    display:block;
    padding: 20px 28px
}
 
#wrapper nav ul li a {
    text-decoration: none;
    color: #ddd
}
 
#wrapper .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
#wrapper .btn-gnavi span:nth-child(1) {
    top: 0
}
 
#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px
}
 
#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px
}
 
#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
 
#wrapper .btn-gnavi.open span {
    background: #fff
}
 
#wrapper .btn-gnavi.open span {
    width: 24px;
}
#wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 6px #666
}
 
#wrapper .contents section:nth-child(odd) p {
    left: 10%
}
 
#wrapper .contents section:nth-child(even) p {
    right: 10%
}
}
/*-----ここまで----------------------------------------*/


/*フッター*/

footer{
background:#fff;
font-size:13px;
border-top:2px solid #cba466;
padding:30px 0;
}

footer .box{
width:70%;
margin:0 auto;
padding:0 20px;
}

.f-minibox{
width:80%;
margin:0 auto;
}

.f-left{
float:left;
width:70%;
height:80px;
}

.f-left p.sales{
display:inline-block;
width:40%;
letter-spacing:1px;
line-height:130%;
}

.f-left p.id-logo{
display:inline-block;
vertical-align:top;
}

.f-right{
float:right;
width:30%;
text-align:right;
}

.f-right dl dt{
font-size:16px;
font-weight:bold;
line-height:200%;
}

.f-right dl dd{
line-height:180%;
font-size:14px;
font-weight:bold;
}

.f-right dl dd a{
color:#666;
text-decoration:none;
}

 .f-right dl dd img{
height:40px;
vertical-align:middle;
}

.saio-logo{
float:right;
margin:30px 0 20px 0;
}

.saio-logo img{
height:40px;
}

.copyright{
clear:both;
text-align:center;
border-top:1px solid #ececec;
padding-top:15px;
}


/*----------responsive - footer----------*/
@media screen and ( max-width:479px )
{

 footer .box{
 width:100%;
 padding:0;
 }

 .f-minibox{
 width:100%;
 margin:0 auto;
 }

 .f-left{
 float:none;
 width:92%;
 height:auto;
 margin:0 auto 14px auto;
 }

 .f-left p.sales{
 width:60%;
 line-height:150%;
 letter-spacing:1px;
 }

 .f-left p.id-logo{
 width:30%;
 text-align:right;
 }

 .f-right{
 float:none;
 width:92%;
 margin:10px auto;
 }

 .f-right dl{
 text-align:center;
 border:1px solid #ccc;
 padding:14px;
 }

 .f-right dl dt{
 padding:0 0 10px 0;
 }

 .saio-logo{
 float:none;
 margin:20px 0;
 text-align:center;
 }
}
/*--------------------ここまで--------------------*/


/*スポット適用*/
.cen{
text-align:center;
}

.right{
text-align:right;
}

.red{
color:#ff0000;
}

.bold{
font-weight:bold;
}

.cl{
clear:both;
}