﻿body{
	/* font-family:"メイリオ","Hiragino Kaku Gothic Pro",sans-serif; /* */
	font-family: 'Yu Gothic','Yu Gothic Medium','メイリオ','fantasy'; /* */
	/* color:#ffffff; /* */
	 background-color:#ffcc66;  /* */
	/* background-color:rgb(230,196,100,0.9); /*  */
	/* background-image: url(../image/Orange.png);  /*  */

	/* background-repeat: no-repeat; /* */
	/* background-attachment: fixed;
	/* background-position: center top; /* */
	/* background-size: 100% auto;  /* */
	width:100%;
	height:100%;
	line-height:1.5;
	margin:0;
	padding:0;
}
.kiji img {
      /* margin:10px; */
      /* border-radius:12px; */
      /* border:solid 2px #aaa; */
      /* box-shadow:5px 5px 5px #666666; /* */
}
.cont2 img {
     /* margin:10px;
      border-radius:12px;
      border:solid 2px #aaa; */
      /* box-shadow:5px 5px 5px #666666; /* */
}
.head_top {
	height: 80px;
	/* margin:0;
	padding:0; */
	width:1060px;
	margin:0 auto;
	padding:0;
}
.head_top1 {
	margin:0;
	padding:0;
	float:left;
}
.head_top1 img {
	height: 80px;
}
.head_top2 {
	color:#ffcc66;
	font-family:"Cambria","Palatino",serif;
	/* font-family: 'fantasy'; */
	font-size:28px;
	margin:0;
	padding:20px 0 0 5px;
	display:inline-block; /* */
}
.menu {
	font-size:115%;
	/* border-left:15px solid #444444; /* */
	/* border-radius: 10px; /* */
    /* box-shadow: 5px 5px 3px #aaa; */
}
/* .menu-left:before {  /* */
/*    background-color: #555555; /* 線色 */
/*    border-radius: 10px; /* 線幅の半分 */
/*    content: ""; /* */
/*    display: inline-block; /* */
/*    height: 43px; /* 線の長さ */
/*    width: 10px; /* 線幅 */
/*    float:left; /* */
/* } /* */
ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
nav{
	/* background-color:rgba(95,95,95,0.5); /* */
	padding:20px 20px 0 0;
        float:right;    /* */
	color:#fff;
}
nav ul{
	padding:7px 5px;
	margin-bottom:0;
}
nav li{
	display:inline;
	text-shadow:0 5px 10px #000000;
}
article{
	position:relative;
	/* background-image: url(../image/moku3.jpg); */
	width:1060px;
	margin:3px auto 0 auto;
	padding:0;
	/* padding:5px; /* */
}
.catch{
	color:#ffffff;
	position:absolute;
	top:40px;
	left:50px;
	width:460px;
	border-radius:10px;
	text-shadow:0 5px 10px #000000;
	background-color:rgba(0,50,110,0.4);
	padding:15px;
}
.catch:hover{
	color:#ffffff;
	background-color:#203388;
}
.new{
	font-size:80%;
	color:#ffffff;
	background-color:rgba(184,134,11,0.8); /* 71 71 71 0.5 */
	border-radius:8px; /* */
	padding:5px 0 0 0;
	margin:0px;
	font-family: 'fantasy';
    text-align: center;
}

.new_title{
	/* font-size:80%;
	border-bottom:1px dashed #336699;
	border-left:10px solid #336699;
	padding-left:7px;
	font-family: 'fantasy'; */
}
.new img {
    border-radius:8px;
    /* padding:auto 0 auto 0; /* */
    /* margin:0;  /* */
}

h2 {
	/* margin:8px 0px 5px 0px; */
}
aside {
	width:275px;
	height:300px;
	/* background-color:#333333; */
	margin:3px 3px 0 0;
}
aside a:hover{
	background-color:rgba(70,102,0,0.5);
}
aside h1{
	font-size:130%;
	border-bottom:2px dotted #888888;
	margin:0;
}
aside li{
	background-color:#333333;
	border-bottom:1px dotted #888888;
	height:53px;
}
.work{
	display:block;
	font-size:90%;
	color:#ffcc66;
	padding-top:6px;
	font-weight:bold;
}
aside img{
	float:left;
	margin-right:10px;
}
aside li{
	clear:both;
}
header {
	/* border:solid 1px #ccc; */
	background-color:#486b0b;
	/* width:1060px;
	margin:0 auto;
	padding:0; */
}
footer{
	background-color:rgba(72,101,11,0.2); /* #486b0b; /* 72 107 11 */
	/* background-color:rgba(184,134,11,0.8); /* 71 71 71 0.5 */
	/* height:60px; */
	/* color:#101010; */
	text-align:center;
	font-size:80%; /* */
	border-top:solid 8px #355b08; /* */
	margin:3px auto 0 auto;
	padding:3px 0 3px 0;
}
footer #footer_memo {
    display:inline-block;
}
footer small{
    display:block;
}
img{
	/* max-width:100%; /* */
	/* height:auto; /* */
}
ol li{
	display: inline;
	font-size:100%;
	margin-right:5px;
}
ol{
	padding-left:0;
}
.company {
	font-size:130%;
}
h3 {
	color:yellow;
}
table{
	font-size:90%;
	color:#333333;
	margin-bottom:20px;
	border:1px solid #333333;
	border-collapse:collapse;
}
th{
	background-color:#99ff66;
	width:20%;
	padding:10px;
	border:1px solid #333333;
}
td{
	background-color:#ffffff;
	padding:10px;
	border:1px solid #333333;
}
caption{
	color:#ffcc66;
	font-weight:bold;
}
.h1-sub{
	font-size:180%;
	padding-left:10px;
	border-left:15px solid #99ff66;
}
video{
	max-width:100%;
	height:auto;
}
input{
	display:block;
	width:440px;
}
textarea{
	display:block;
	width:660px;
	height:140px;
}
button{
	width:150px;
	padding:10px;
}
nav a{
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	padding:10px;
}
nav a:hover{
	color:#000000;
	background-color:rgba(119,170,51,0.8);
}
aside a{
	display:block;
	color:#ffffff;
	text-decoration:none;
}
header h1 a,section a{
	color:#ffcc66;
	text-decoration:none;
}
ol a{
	color:#ffcc66;
}

/* body img 切り替え */
  /* https://codepen.io/soji-ohta/pen/jOeRmwJ */
.container{
   width: 1056px; /* 770px */
   height: 580px;  /* */
   position: relative;
   padding:0;
   margin:0; 
   border:2px solid #ededed; /* */
   /* box-shadow: 5px 5px 3px #aaa ; /* */
  /* border:5px solid #aabbcc; */
}

.image {
   position: absolute; /* */
   top: 1px; /* */
   left: 1px; /* */
   bottom: 1px;  /* */
   right: 1px;  /* */
   opacity: 0; /* */
   background-size: cover; /* */
   background-position: center center; /* */
   /* border:5px solid #dddddd; /* */
   /* box-shadow: 5px 5px 3px #aaa ; /* */

   animation: image-switch-animation 19s infinite; /* */
}

.src1 {
  background-image: url(../image/top1.jpg);
}
.src2 {
  background-image: url(../image/top2.jpg);
}
.src3 {
  background-image: url(../image/top4.jpg);
}
.src4 {
  background-image: url(../image/top8.jpg);
} 
.src5 {
  background-image: url(../image/top5.jpg);
} 
.src6 {
  background-image: url(../image/top6.png);
}

.image:nth-of-type(1) {
  animation-delay: 1s;
} 
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 9s;
}
.image:nth-of-type(4) {
  animation-delay: 12s;
}
.image:nth-of-type(5) {
  animation-delay: 15s;
}
.image:nth-of-type(6) {
  animation-delay: 18s;
}


@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}


/* 1024px以上の場合 */ 
@media(min-width:1024px){
.placement{ 
	/* width:1060px;
	margin:3px auto 0 auto;
	padding:0; */
}
.kiji{
	/* float:left; /* */
	/* width:100%;  /* 64% */
	margin:0;
	padding:0;
}
aside{
	float:right;
}
footer{
	clear:both;
}
.cont2{
	/* clear:both;
	width:1060px;
	margin-left:auto;
	margin-right:auto; */
}
}

/* 600px以下の場合 */ 
@media(max-width:600px){
header h1{
	font-size:150%;
}
nav ul{
	font-size:70%;
}
.catch{
	top:20px;
	left:10px;
	padding:5px;
}
input,textarea{
	width:330px;
}
}

/* プリント出力 */
@media print{
.catch{
	font-weight:bold;
	color:#000000;
	text-shadow:none;
}
}