@charset "utf-8";

/**** title *******************************************************************************************************************/
#title #logo img{
/* 背景グラデーションの作成 */
background: rgb(255,196,159);
background: linear-gradient(270deg, rgba(255,196,159,1) 15%, rgba(0,0,0,1) 65%);
  background-size: 100% 100%;
  animation: AnimationName 10s ease infinite;
}


/**** content *******************************************************************************************************************/
#content{color:#464646;}

#content h2{
height: 171px;
margin: 80px auto 445px auto;
display: block;
overflow: hidden;
text-align:center;
}

#content dl dt{padding-bottom:17px;font-size:16px;font-weight:bold;line-height: 22px;}
#content dl dd{padding-bottom:22px;font-size:15px;line-height:1.7;}

#content .box{margin-bottom:20%;}
#content .box img{width:100%;height:auto;}
#content .box dl{margin-left:4%;margin-right:4%;}

#content .box1{
	margin-right:15%;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
#content .box1 .photo{width: 900px;height: auto;}
#content .box1 dl{margin-right:10%;}

#content .box2{
	margin-left:16%;
	display: flex;
	align-items:flex-end;
}
#content .box2 .photo{width: 600px;height: auto;}
#content .box2 dl{
	margin-bottom:5%;
}

#content .box3{
	margin-right:15%;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;

}
#content .box3 .photo{width: 900px;height: auto;}
#content .box3 dl{margin-right: 9%;}

#content .box4{
	margin-left: 9%;
	display: flex;
	align-items: center;
}
#content .box4 .photo{width: 900px;height: auto;}
#content .box4 dl{
	margin-top:10%;
}

#content .box5{
	margin-right:19%;
	display: flex;
	flex-direction: row-reverse;
	align-items:flex-end;
}
#content .box5 .photo{width: 600px;height: auto;}
#content .box5 dl{
margin-bottom:4%;margin-right:5%;
}


/**** 1000以下 ********/
@media screen and (max-width: 1000px) {
#content h2 {
    margin: 0 auto 20% auto;
    width: 100%;
    }

#content .box {
    margin-bottom: 13%;
    }
#content .box dl{margin-left:4%;margin-right:4%;}
#content .box dl dd{line-height: 1.6;}
#content dl dt {
    padding-bottom: 10px;
    font-size:0.9em;
    font-weight:bold;
    line-height: 18px;
    }
#content dl dd {
    padding-bottom: 10%;
    font-size:0.8em;  
    }  
#content .box1{
	margin-right:3%;
	display: flex;
	flex-direction: row-reverse;
	align-items:flex-end;
}
#content .box1 .photo{width: 60%;height: auto;}
#content .box1 dl{margin-bottom:5%;}

#content .box2{
	margin-left:15%;
	display: flex;
	align-items:flex-end;
}
#content .box2 .photo{width: 40%;height: auto;}
#content .box2 dl{
	margin-bottom:5%;
}

#content .box3{
	margin-right:4%;
	display: flex;
	flex-direction: row-reverse;
	align-items:flex-end;
}
#content .box3 .photo{width: 60%;height: auto;}
#content .box3 dl{margin-bottom: 5%;}

#content .box4{
	margin-left: 5%;
	display: flex;
	align-items: flex-start;
}
#content .box4 .photo{width: 60%;height: auto;}
#content .box4 dl{
	margin-top:10%;
}

#content .box5{
	margin-right:15%;
	display: flex;
	flex-direction: row-reverse;
	align-items:flex-end;
}
#content .box5 .photo{width:40%;height: auto;}
#content .box5 dl{
margin-bottom:4%;
}
}


/*********************
:::::::::::::::::::::::
************************/

/*********************************************/
@media screen and (max-width: 480px) {

#content .box1,
#content .box2,
#content .box3,
#content .box4,
#content .box5,
#content .box6{align-items: flex-start;display: block;margin: 0;}

#content .box .photo{width:100%;}



#content .box dl {
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 2%;
}


}