/*===========================================================
           CSSでいろいろしてます！！！！！！！！！！！！！！！！
===========================================================*/
html,body{
	width: 100%;
	height: 100%;
	/*
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	*/
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    font-family:'メイリオ','ヒラギノ角ゴシック';
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

a{
text-decoration: none;
}


#top{
  position: relative; 
  width: 100%;
  height: 10%;
  background-color: #FFF1D0;
}

#Container{
  position: relative; 
  width: 100%;
  height: 90%;
}


img {
    max-width: 100%;
    height: auto;
}

/*==========================
          *header
============================*/
header{
	font-family:'Yu Gothic';
	width: 100%;
	height: 90px;
	background-color: #FFF1D0;
	position: fixed;
	top: 0;
	z-index: 999;
	overflow: hidden;/*はみ出したら表示しない*/


}
header .logo{
	width: 30%;
	margin-top:2.5%;
	margin-left:70px;
	float: left;
	transition: all 220ms ease-out;
}
header ul{
	width: 50%;
	float: right;
	border-collapse: separate;
	border-spacing: 20px 0;
	margin-right: 70px;
}
header li{
	display: table-cell;
	color:#086788;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	height: 90px;
	transition: all 220ms ease-out;
}

header a{
	text-decoration: none;
}
.hover{
	color:#FC2A38;
}

.hover2{
	opacity: 0.5;
}
.hover3{
	color:#FC2A38;
	background-color: #F0C808;
}

.hover4{
	opacity: 0.7;
}
.topjamp{
	position: absolute;
	left: 90%;
	top: 87%;
	position: fixed;
	z-index: 999;
}
.topjamp img{
	filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.6));

}

.kakusinav{
	display: none;

}
/*
.Sky #example{
	padding-top: 10%; 　margin-top: 10%;
}
:target:before {
   content:"";
   display:block;
   height:100px;
   margin:-100px 0 0;
}*/
/*
.heading[id]::before {
  content: "";
  display: block;
  height: 8rem;
  margin-top: -8rem;
  visibility: hidden;
}*/


.SNS{
	display: inline-block;
	top: 50%;
	margin-top: -87px;
	position: fixed;
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.6));
	z-index: 999;

}
.SNS li{
	margin-top: 60px;
	margin-left:40px;
	
}
.SNS li img{
	transition: all 220ms ease-out;
}

/*==========================
           *TOP
============================*/
.Sky{
	width: 100%;
	height: 100%;
    background:url(../images/top2.png) no-repeat center center; 
    background-size: cover;
    z-index: 0;	
    background-attachment: fixed;
}

.catch{
	position: absolute;
	left: 50%;
	margin-left: -400px;
	top: 50%;
	margin-top: -240px;

}
.Pagescroll{
	position: absolute;
	left: 50%;
	margin-left: -12px;
	top: 75%;
	opacity: 0.7;
	transform:rotate(180deg)
	

}
/*
p{
	margin-top: 50px;
}
*/

/*==========================
          *About
============================*/
.about{
	background-color:#19242E;
	padding-top: 30px;
	padding-bottom: 150px;
}
.about p{
	text-align: center;
	color: #FFF1D0;
	padding-bottom: 5px;
	font-weight:500;
		font-family:'Yu Gothic';
}
.about.aboutmain p{
	margin-top: 90px;
}

.about h1{
	padding-top: 50px;
	padding-bottom: 80px;
	text-align: center;
	color: #FFF1D0;
	font-size: 20px;
	font-weight: bold;

}

.about h2{
	text-align: center;
	color: #FFF1D0;
	font-size: 40px;
	margin-bottom: 30px;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-family:'Yu Gothic';
}

.fade-in {
  transition: opacity 0.9s;
  -moz-transition: opacity 0.9s;
  -webkit-transition: opacity 0.9s;
  -o-transition: opacity 0.9s;
}
/*
#animation {
margin: 50px 0;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}*/

/*==========================
         *Interview
============================*/
.Interview{
	padding-top: 40px;
	text-align: center;
	padding-bottom: 100px;
}

.Interview h1{
	padding-top: 80px;
	padding-bottom: 80px;
	text-align: center;
	color:#086788;
	font-size: 20px;
	font-weight: bold;
}
.Interview p{
	text-align: center;
	color:#086788;
	margin-bottom: 100px;
	font-weight: bold;

}
.Interview h2{
	text-align: center;
	color:#086788;
	font-size: 35px;
	margin-bottom: 10px;
	font-weight:500;
	
}
.Interview h3{
	text-align: center;
	color:#086788;
	font-size: 19px;
	margin-bottom: 30px;
	font-weight:500;
	
}
.Interview .IV1{
	width: 20%;
	height: 650px;
	background-color: #FC2A38;
	float:left;
}
.IV1 .ue{
	height: 80%;
}
.IV1 .sita{
	height: 20%;
	background-color: #FC2A38;
}
.Interview .IV2
{   width: 20%;
	height: 650px;
	background-color: #19242E;
	float:left;
}
.IV2 .ue{
	height: 80%;
}
.IV2 .sita{
	height: 20%;
	background-color: #19242E;
}
.Interview .IV3
{   width: 20%;
	height: 650px;
	background-color: #F0C808;
	float:left;
}
.IV3 .ue{
	height: 80%;
}
.IV3 .sita{
	height: 20%;
	background-color: #F0C808;
}
.Interview .IV4
{   width: 20%;
	height: 650px;
	background-color: #086788;
	float:left;
}
.IV4 .ue{
	height: 80%;
}
.IV4 .sita{
	height: 20%;
	background-color: #086788;
}
.Interview .IV5
{   width: 20%;
	height: 650px;
	background-color: #06AED5;
	float:left;
}
.IV5 .ue{
	height: 80%;
}
.IV5 .sita{
	height: 20%;
	background-color: #06AED5;
}
.Interview div{
	overflow:hidden;

}
.Interview img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.Interview .mozi p{
	text-align: center;
	padding-top: 55px;
	color: #FFFFFF;
}



.Interviewbox{
	clear: both;
}

.Interviewbox .box1{
	width: 20%;
	height: 130px;
	float:left;
	background-color: #FFF1D0;
}

.Interviewbox .box1 p{
	text-align: center;
	color: #06AED5;
	margin-top:50px;
	margin-bottom: 50px;
	font-weight: bold;
}

.Interviewbox .box1 a{
	text-decoration: none;
}
/*昼前はここからかいてたよ*/


/*==========================
          *banner
============================*/
.banner{
	clear: both;
	font-family:'Yu Gothic';
}

.banner p{
	text-align: center;
	color: #19242E;
	margin-top:70px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
	transition: all 220ms ease-out;
	letter-spacing: 0.3em;

}
.banner .mozicenter p{
	text-align: center;
	color: #19242E;
	font-size: 14px;
	margin-bottom: 70px;
	letter-spacing: 0.1em;
}

.banner .box2{
	width: 50%;
	height: 250px;
	float:left;
	background-color: #FFFFFF;
	transition: all 320ms ease-out;

}



.banner div{
	overflow: hidden;
}
/*
.banner .border{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#F9F8F4 3px, #F9F8F4 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#F9F8F4 3px,)
}
*/

/*==========================
          *contact
============================*/
.contact{
	width: 100%;
	height: 500px;
	clear: both;
	background-color: #06AED5;

}

.catch2{
	position: absolute;
	left: 50%;
	margin-left: -300px;
	margin-top: 200px;

}
.contact .button2{
	position: absolute;
	left: 50%;
	margin-left: -125px;
	margin-top: 330px;
	box-shadow: 0 5px 8px rgba(0,0,0,0.3);
	transition: .3s;
}

.contact .button2:hover {
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
/*==========================
          *footer
============================*/
footer{
	background-color:#19242E;
	vertical-align: middle;
	clear: both;

}
footer .footerwidth{
	width: 80%;
	margin:0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
}

footer img{
	margin-top: 30px;
	display:block;
}
footer p{
	color: #FFF1D0;
	font-size: 13px;
	margin-top:30px;
}

footer .ctext p{
	color:#837C7C;
	margin-top: 30px;
}
footer .logo2{
transition: all 220ms ease-out;
width: 200px;

}

/*==============================================================================
              *ビジネスマンのメモ帳
================================================================================*/

/*==========================
           *TOP2
============================*/
.memotop{
	width: 100%;
	height: 100%;
    background:url(../images/top3.png) no-repeat center center; 
    background-size: cover;
    z-index: 0;	
    background-attachment: fixed;
}

.catch4{
	position: absolute;
	left: 50%;
	margin-left: -400px;
	top: 40%;
	margin-top: -84px;

}

.memoicon ul{
	position: absolute;
	top: 55%;
	left: 50%;
	margin-left: -510px;
}
.memoicon li{
	display: inline-block;
	margin-left: 130px;
}
.memoicon li img{
	transition: all 220ms ease-out;
}

/*==========================
          *About2
============================*/
.about2{
	width: 100%;
	background-color:#FFFFFF;
	padding-top: 30px;
	height: auto;
	overflow: hidden;


}
.about2 p{
	color:#19242E;
	padding-bottom: 5px;
	font-weight:500;
	font-family:'OCRB';
}
.about2.aboutmain p{
	margin-top: 90px;
	font-family:'OCRB';
}

.about2 h1{
	padding-top: 30px;
	padding-bottom: 90px;
	text-align: center;
	color: #19242E;
	font-size: 25px;
	font-weight: bold;

}

.about2 h2{
	color: #06AED5;
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.about2 h3{
	color: #086788;
	font-size: 17px;
	padding-top:20px;
	padding-bottom: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.about2 h4{
	text-align: center;
	padding-top: 60px;
}

.memowidth{
	margin-top: 20px;
	margin-bottom: 50px;
}
.memowidth p{
	padding: 25px;
	background-color:#F2F1F1;
}
.memomo p{
	color:#767575;
	background-color:#FFFFFF;
}
.memomain{
	width: 100%;
	padding: 30px 15% 120px;
	box-sizing:border-box;
	display: inline-block;
	position: relative;
	height: auto;
	overflow: hidden;
}

/*==========================
          *contact2
============================*/
.contact2{
	width: 100%;
	height: 500px;
	clear: both;
	background-color: #F0C808;

}

.catch2{
	position: absolute;
	left: 50%;
	margin-left: -300px;
	margin-top: 200px;

}
.contact2 .button{
	position: absolute;
	left: 50%;
	margin-left: -125px;
	margin-top: 330px;
	box-shadow: 0 5px 8px rgba(0,0,0,0.3);
	transition: .3s;
}

.contact2 .button:hover {
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}