@charset "UTF-8";
* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    line-height: 1.8;
	font-family: 'Noto Sans JP', sans-serif;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}



.blockTitle{
	text-align: center;
	padding: 20px 0 20px 0;
 
    /*font-weight: bold;
    border: solid 3px #000000;*/
	
}

.blockTitle h1{
	font-size: 24px;
	letter-spacing: 0.5rem;
	font-family: "Hiragino Sans", Meiryo, "sans-serif";
	color: #b22222;
	
	
}

.sec_works{
	background-image:url("../images/kamiwaza_image/haikeigazou-8.png");
	background-size:cover;
	background-repeat:no-repeat;
}

background-img{
	background-position:bottom ;
	background-position: right;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
#bohan main h1,h2{color:#b22222;}
.mainV{
	background-image: url("../images/dm_nyuukou.jpg");
	background-repeat: no-repeat;
	background-position: center 0%;
	background-size: cover;
}


.rennsyuu{
	/*background-image: url("../images/aaaa.png");*/
	background-repeat:no-repeat;
	background-color: #000000;
	background-position: center;
	height: 400px;
	margin: auto;
	margin-bottom:0;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}
.rennsyuu2 p{
	letter-spacing: 0.2rem;
}

.rennsyuu2{
	text-align: left;
	color: #ffffff;
	margin-left: 350px;
	/*background : transparent;
    background: url("../images/aaaa.png")center / cover;
	animation: fadein 5s ease-out forwards;	*/
}



.taitoru{
	position: relative; bottom: 0.2px; right: 10px;
	color: #ffffff;
}
.taitoru h1{
	position: absolute;
	left: 10%;
	right: 10%;
	font-size: 6.4rem;
	z-index: 1;
	
	
}
.taitoru p{
	letter-spacing: 0.2rem;
	font-size: 15px;
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    width: 560px;

	
}

.sasie{
	position: relative;
	text-align: right;
	
	
}
.sasie h1{
	position: absolute;
	top: 130px;
	right: 10%;
	left: 20%;
	z-index: 1;
	
}



.block_works1 p,.block_works2 p{
	font-size: 17px;
	letter-spacing: 0.1rem;
	line-height: 2rem;
	text-align: left;
	letter-spacing: 0.5rem;
	font-family: "Hiragino Sans", Meiryo, "sans-serif";
}
.block_works1,.block_works2{
	display: flex;
	justify-content:space-around;
	align-items: center;
	
	margin-bottom:10%;
	margin-left: auto;
	padding: 20px;
}
.block_works1 h2,.block_works2 h2{
	margin-bottom: 5%;
	font-size: 20px;
	letter-spacing: 0.3rem;
	text-align: left;
}
.block_works1 .box-worksL-1 img,.block_works2 .box-worksR-2 img{
	width: 100%;
	height: 100%;
}
.block_works1 .box-worksL-1,.block_works2 .box-worksR-2{
	width: 40%;
	margin: 5% auto;
}
.block_works1 .box-worksR-1,.block_works2 .box-worksL-2{
	width: 40%;
	text-align: center;
	margin: 5% auto;
	
}





.rennsyuu2 {
  position   : relative;
  max-width  : 400px;
  height     : 500px;
  margin     : auto;
	align-items: center;
  
}
.sasie_mozi{
  position   : relative;
  max-width  : 900px;
  height     : 500px;
  margin     : auto;
  align-items: center;
	
  
}
.rennsyuu2 .bgImg {
  position   : absolute;
  top        : 40px;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
  background-repeat:no-repeat;
	width: 700px;
}
/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.rennsyuu2 .src1 {
  background-image : url("../images/haikei2222.png");   /* 背景の画像を指定 */
}
.rennsyuu2 .src2 {
  background-image : url("../images/asetto_haikei10-8.png");   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.rennsyuu2 .src3 {
  background-image : url("../images/asetto_haikei-9.png");   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.rennsyuu2 .src4{
  background-image : url("../images/asetto_hikei11-8.png");   /* 背景の画像を指定 */
  animation-delay  : 15s;
}


@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}


@media screen and (max-width:600px){
	.taitoru p{
		width: 85%;
	}
	.rennsyuu2 .bgImg{
		width: 80%;
	}
	.block_works1{
		flex-direction: column;
	}
	.block_works2{
		flex-direction: column-reverse;
	}
	.taitoru h1{
		font-size: 3rem;
	}
	.taitoru p{
		font-size: 10px;
	}
	.blockTitle h1{
		font-size: 20px;
	}
	.box_worksL-1,.box_worksR-2{
		width: 70%;
	}
	.block_works1 h2,.block_works2 h2{
		font-size: 17px;
		margin-top: 5%;
	}
	.block_works1 p,.block_works2 p{
		font-size: 14px;
	}
}

/*==================================================
ハンバーガー

===================================*/
header {
background-color: #f1de18;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
position: static;
}

.menu {
    position: absolute;
    z-index: 1000;
    top: 25px;
    right: 60px;
    width: 35px;
    height: 22px;
    border: none;
	background-color: rgba(0, 0, 23, 0);
}


ul {
    list-style-type: none;
}


nav ul {
    display: flex;
	justify-content: flex-end;
}
nav li {
    margin-left: 25px;
    font-size: 1.2rem;
}
nav li a {
    color: #333333;
    text-decoration: none;
}
nav li a:hover {
    color: #00A2FD;
    text-decoration: underline;
}
nav ul {
    flex-direction: column;
}

.rogo{
	margin-left: 80px;
}

.blockNav {
	z-index: 999;
    width: 100%;
    height: 50vh;
    background-color: #f1de18;
    position: fixed;
    top: 0px;
    right: 0px;
    opacity: 0;
    visibility: hidden;}
.blockNav.active {
    right: 0px;
    opacity: 1;
    visibility: visible;
}
.blockNav ul {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 0px;
    padding-left: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0px;
    margin-left: 0px;
}
.blockNav ul li {
    margin-left: 0px;
    border-bottom: 1px solid #CCC;
}
.blockNav li a {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 0px;
    padding-left: 0px;
    text-align: center;
    color: #333;
    transition: 1s;
}
.blockNav li a:hover {
    background-color: #F5EDE7;
}
.menu, .menu span {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.menu span {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background-color: #000000;
    z-index: 10;
}
.menu span:nth-of-type(1)  {
    top: 0px;
}
.menu span:nth-of-type(2) {
    top: 10px;
}
.menu span:nth-of-type(3) {
    bottom: 0px;
}
.menu.active span:nth-of-type(1) {
    transform: translateY(10px)rotate(45deg);
}
.menu.active span:nth-of-type(2) {
    opacity: 0;
}
.menu.active span:nth-of-type(3) {
    transform: translateY(-10px)rotate(-45deg);
}

/*---------------------------------*/

div a{
	color: #e48e00;
    text-decoration: none;
}

div a:hover {
    color: #00a0e9;
}

/*---------------------------------*/

footer{
	position: relative;
}

.footer {
    position: absolute;
    width: 100%;
    margin-top: auto;
	top: auto;
	right: 0;
    font-family: 'YuGothic','Hiragino Sans','Meiryo','sans-serif';
    font-weight: 100;
    font-size: 1.5rem;
    color: white;
    background-color: #0782c9;
    display: flex;
}

.footer a{
	color: white;
	text-decoration: none;
}

.deken img {
	width: 10%;
	margin-bottom: 15%;
}

.footercontents1 {
	width: 50%;
	padding: 50px;
}

.icon {
	margin: 10% 2% 0 2%;
	width: 60px;
}

.footercontents2 {
	width: 50%;
	padding: 50px;
	list-style: none;
}

.footercontents2 p {
	font-weight: bold;
}

.zyugyou {
	width: 50%;
	margin-right: 30px;
	float: left;
}

.copyright {
	position: absolute;
	padding: 30px 50px;
	bottom: 0;
	right: 0;
}