﻿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;  /* */

	line-height:1.5;
	margin:0;
	padding:0;
}
.kiji img {
      margin:5px;
      /* border-radius:12px;
      border:solid 2px #aaa; */
      /* box-shadow:5px 5px 5px #666666; /* */
}
.kiji p {
	width:650px;
}
.cont2 img {
      margin:10px;
      border-radius:12px;
      border:solid 2px #aaa;
      /* box-shadow:5px 5px 5px #666666; /* */
}
.head_top {
	height: 80px;  /* 56px */
	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-top:0;
	padding:0;
}
nav{
	/* background-color:rgba(95,95,95,0.5); /* */
	padding:20px 20px 0 0;
        float:right;    /* */
	color:#ffffff;
}
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); */
	padding:7px 0 0 10px; /* */
	width:1050px;
	margin:3px auto; /* */
	/* background-color:rgba(205,133,63,0.8); */
}
.catch{
	position:absolute;
	top:40px;
	left:50px;
	width:460px;
	border-radius:10px;
	text-shadow:0 5px 10px #000000;
	background-color:rgba(0,0,0,0.5);
	padding:15px;
}

.new{
	font-size:80%;
	color:#ffffff;
	background-color:rgba(184,134,11,0.8); /* 71 71 71 0.5 */
	border-radius:10px;
	padding-left:15px;
	padding-right:15px;
	font-family: 'fantasy';
}

.new_title{
	font-size:85%;
	border-bottom:1px dashed #336699;
	border-left:10px solid #336699;
	padding-left:7px;
	font-family: 'fantasy';
}

.new_p {
	width:720px;
}

h2 {
	margin:8px 0px 5px 0px;
}
.icon {
  color:#555;
  /* background-color:#486b0b; */
  font-size:80%;
  font-family: 'fantasy';
  padding-left: 10px;
  content: "";
  border-left: 7px solid #9cb4a4;
  /* text-shadow:0 5px 10px #000000; */
}
.photograph-list li {
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  list-style: none;
}
.photograph-list img {
  width:220px;
  height:160px;
}
.clearfix {
	clear:both;
}
.photograph-list li:hover {
  /*  width:215px;
    height:155px; */
  margin: 0;
  /* padding: 0; */
    /* border-radius:3px; /* */
    /* border:solid 1px #ddd; /* */
     box-shadow: 3px 3px 2px #fa0; /* */
}
aside {
	/* position:absolute; */
        /* position:fixed; */
        /* position:sticky; */
	/* top:30px; */
	/* right:10px; */
	width:275px;
	height:300px;
	/* background-color:#333333; */
	margin:3px 3px 0 0;
}
aside a:hover{
	background-color:rgba(80,100,60,0.5);
}
aside h1{
	/* font-family:"Cambria","Palatino",serif; */
	font-family: 'fantasy'; /* */
	font-size:135%;
	border-bottom:2px dotted #888888;
	margin:0;
	color:#203388;
}
aside li{
	background-color:rgba(70,102,0,0.3);
	border-bottom:1px dashed #bbb;
	height:53px;
}
.work{
	display:block;
	font-size:90%;
	color:#dc143c; /* 6495ed; /*1e90ff; /* 4682b4; */
	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:#355b08; */
	/* 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:0;
	margin:0;
}
.company {
	/* font-family:"Cambria","Palatino",serif; */
	font-family: 'fantasy'; /* */
	/* font-size:130%; */
	margin:0;
	padding:0;
}
.company h4 {
	color:#203388;
	margin:0;
	padding:0;
}
.company ul {
	margin:0;
	padding:0;
}

.company li {
	/* line-height:1; */
	font-size:95%;
	margin:0 0 0 30px;
	padding:0;
}
h3 {
	color:#a02222;
}
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:150%;
	padding-left:10px;
	border-left:15px solid #203388;
	border-bottom:1px dashed #3b3ba8;
	width:300px; /* background-color:#486b0b; */
}

.kiji a{
	color:#0000ff;
}

video{
	max-width:100%;
	height:auto;
}
input{
	display:block;
	width:440px;
}
textarea{
	display:block;
	width:660px;
	height:140px;
}
button{
	width:150px;
	padding:10px;
	margin-bottom:5px;
}
.bu_sub {
	margin:0;
}
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:#d53333;
}

/* body img 切り替え */
  /* https://codepen.io/soji-ohta/pen/jOeRmwJ */
.container{
   width: 1056px; /* 770px */
   height: 570px;  /* */
   position: relative; */
  /* border:5px solid #aabbcc; */
}

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

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

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

.image:nth-of-type(1) {
  animation-delay: 2s;
} 
.image:nth-of-type(2) {
  animation-delay: 6s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 13s;
}
.image:nth-of-type(5) {
  animation-delay: 16s;
}
.image:nth-of-type(6) {
  animation-delay: 19s;
}
.image:nth-of-type(7) {
  animation-delay: 23s;
}
.image:nth-of-type(8) {
  animation-delay: 27s;
}

@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-left:auto;
	margin-right:auto;
}
.kiji{
	width:770px;
        float:left; /* */
	/* width:64%;  /* */
}
aside{
	float:right; /* */
	height:3300px;
	/* display: flex; /* */
}
aside ul {
   position:sticky;
   top:150px;
}
#w-img-zoom {
   position:sticky;
   top:480px;
}
header{
   /* display: flex; /* */
   /* position:fixed; /* */
   position:sticky;
   top:0px;
   z-index: 1; /* 重なり順序 1番上 */
	/* margin-left:auto; */
	/* margin-right:auto; */
}
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;
}
aside{
	position:relative; /* */
}
input,textarea{
	width:330px;
}
}

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