@charset "UTF-8";
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #ffffff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: small;
	line-height: 1.7;
}



.naka3 {
	width: 1200px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
	position:absolute;
	left:50%;
	top:0;
	    transform: translateX(-50%);
	    
}
.scroll-brock{
position:absolute;
top:80%; 
left:48%; 
transform: rotate(90deg);
}
.scroll:link{
	 	 text-decoration:none; 
	 	 font-size:400%;

	 	  
}


.Headline1{
  animation: SlideIn1 1.6s;  
  animation-delay: 0s;  
  position: absolute;/*絶対配置*/ 
   animation-fill-mode: forwards;
      opacity: 0;/*初期状態では透明に*/
  color: white;/*文字は白に*/
  top: 260px;
  left: 0px;
  font-weight: bold;
    line-height: 0;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn1 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateY(-60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.Headline2{
  animation: SlideIn2 1.6s;  
  animation-delay: 1s;  
  animation-fill-mode: forwards;
      opacity: 0;/*初期状態では透明に*/
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 280px;
  left:0px;
  font-weight: bold;
    line-height: 0;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn2 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.Headline3{
  animation: SlideIn3 1.6s;  
  animation-delay: 2s;  
  animation-fill-mode: forwards;
  position: absolute;/*絶対配置*/
      opacity: 0;/*初期状態では透明に*/
  color: white;/*文字は白に*/
  top: 390px;
  left: 0px;
  font-weight: bold;
  line-height: 0;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn3 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


a{
   color: #643D37;
}

a:link{
   color: #643D37;
}

a:visited{
   color: #643D37;
}

a:active{
   color: #643D37;
}


img{
vertical-align: top;
}
img a {
	border:none;
}

.main {
		width: 100%;
	margin: auto;
	background-position: top center;
	background-repeat: repeat-x;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: large;
	line-height: 1.7;
	overflow: hidden;
}

.naka {
	width: 1200px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}

.naka00 {
	width: 1400px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}

.naka01 {
	width: 1210px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}

.naka02 {
	width: 1200px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
	display : flex;
}

.naka03 {
  margin: 10px auto;
width: 100%;
display: flex;
justify-content: space-between;
}

.naka1600 {
	width: 1600px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}


.pc550 {
	width: 550px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
text-align:center;
}


.pc660 {
	width: 660px;
	justify-content: center; /* 子要素を中央揃え */
	font-size: medium;
}

.pc660 p{
	font-size:medium;
	vertical-align:top;
}
.pc680 {
	width: 700px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}

.pc700 {
	width: 700px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
border-width: thick;
border-color: #ffffff;
border-style: solid;
	font-size: medium;
}

.pc720 {
	width: 720px;
	justify-content: center; /* 子要素を中央揃え */
	font-size: medium;
}

.pc750 {
	width: 750px;
	justify-content: center; /* 子要素を中央揃え */
}


.pc750p {
	width: 750px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
	font-size: medium;
}

.pc900 {
	width: 900px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
border-width: thick;
border-color: #ffffff;
border-style: solid;
	font-size: medium;
}
.pc1000 {
	width: 1000px;
	margin: auto;
#	justify-content: center; /* 子要素を中央揃え */
}

.pc1020c {
	width: 1000px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}

.pc1100 {
	width: 1100px;
	margin: auto;
	justify-content: center; /* 子要素を中央揃え */
}
.hizuke {
	width: 1000px;
	margin: auto;
}

.title {
	width: 1000px;
	margin: auto;
}

.honbun {
	width: 1000px;
	margin: auto;
}

.photo {
	width: 1020px;
	margin: auto;
}

.head {
	width:600px;
height:110px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.foot {
	width: 780px;
display: flex;
justify-content: space-between;
	margin: auto;
align-items: flex-end;
}

.foot a{
	text-decoration:none;
	 font-size:large;
	  color:white;
}

.sp_foot {
	width: 750px;
display: flex;
justify-content: space-between;
	margin: auto;
align-items: flex-end;
}

.sp_foot a{
	text-decoration:none;
	 font-size:large;
	  color:white;
}


.gray100 {
width: 100%;
	background-color: #e9ebea;
	
}

.blue100 {
	width: 100vw;
	background-image:url(img/blue.png) ;	
	margin:0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);

}
.green-prof100 {
	width: 100%;
	background-image:url(img/greenprof.png) ;
}

.green-vision100 {
	width: 100vw;
	background-image:url(img/greenvision.png) ;
}

.grayvision {
width: 100%;
	background-color: #e4e5e7;
}

.graykouen {
width: 100%;
	background-color: #e4e5e7;
}

.graywnew {
width: 100%;
	background-color: #eff0f3;
}

.sp750 {
width: 750px;
	font-size: x-large;
	display: none;
}
.sp750 img{
  max-width: 100%;
  height: atuo;
}

.sp710 {
width: 710px;
	margin: 20px;
}

.sp670 {
width: 670px;
	margin: 50px;
}
.sp650 {
width: 650px;
	margin: 40px;
}
.sp670 {
width: 670px;
	margin: 40px;
}
.sp630 {
width: 630px;
	margin-left: 50px;
	margin-right: 70px;
}
.sp630 td{
    vertical-align: top;
}
.center{
	margin: auto;
}


.top-prof {
  position: relative;
}
 
.top-prof p {
  position: absolute;
  height: 80%;
  display: flex;
  top: 11%;
  left: 12%;
  font-size: medium;
  line-height: 1.5;
}

.top-prof-link {
  position: absolute;
  top: 84%;
  left: 12%;
}
.top-prof-text{
  position: absolute;
  height: 50%;
  top: 29%;
  left: 12%;
  font-size: medium;
  line-height: 1.5;
}
.top-prof-text2{
  display: flex;
}
	
.top-vision {
  position: relative;
}
 
.top-vision p {
  position: absolute;
  height: 70%;
  display: flex;
  top: 22%;
  left: 59%;
  font-size: x-large;
}
.top-vision-link {
  position: absolute;
  top: 80%;
  left: 59%;
}

.sp-top-img {
  position: relative;
}
 
.sp-top-img prof {
  position: absolute;
  display: flex;
  bottom: 0px;
  left: 380px;
}
.sp-top-img vision {
  position: absolute;
  display: flex;
  bottom: 0%;
  left: 15px;
}

.prof {
  position: relative;
}
 
.prof p {
  position: absolute;
  width: 900px;
  display: flex;
  top:  -2.5%;
  left: 12.5%;
  font-size: medium;;
  line-height: 1.8;
}
.prof span {
  position: absolute;
  display: flex;
  top:  21.2%;
  left: 4.9%;
}
.prof-text{
  position: absolute;
  top: 8%;
  left: 12%;
  font-size: medium;
  line-height: 1.6;
}


.input-pc1 {
background:#33609e; 
color:white; 
width:226px; 
height:36px; 
font-size:130%; 
border:none; 
cursor:pointer;
line-height: 0;
}

.input-sp1 {
background:#33609e; 
color:white; 
width:380px; 
height:60px; 
font-size:130%; 
border:none; 
cursor:pointer;
}



#hdbtn_items {

}

#catemenu {
	width: 750px;
	height: 118px;
position: relative;
	justify-content: center; /* 子要素を中央揃え */
	text-align: center;
   z-index: 20;
display:none;
}

#catemenu2 {
 display:flex; 
   background:#3ca4bc; 
border: 2px dotted;
border: outset white;
}
#catemenu3 {
	color: white;
text-decoration:none;
margin:auto;
font-size: 1.5em;
	width: 750px;
line-height:3.3;
}


.fadeInUp {
  opacity : 0;
  transform: translateY(20px);
  transition: 2s;
}



.pagination {
  display: flex;
  justify-content: center;
  text-align: center;
}  
.pagination  a {
    display: inline-block;
    padding: .5rem .5rem;
    background-color: #eee;
    text-decoration: none;
    color: black;
  }  
  .pagination span {
    display: inline-block;
    padding: .5rem .5rem;
    background-color: #eee;
    text-decoration: none;
    color: black;
  }  
.pagination a:hover,
.pagination a:focus {
      background-color: #ddd;
    }
  


.sp-img-move{
	display: none;
	
}


.pagination__items {
  display: flex;
  list-style: none;
  margin: 0 1px;
  }
.pagination__items li {
    margin: 0 2px;
   

   } 

 .is-active a {
    background-color: black;
    color: white;
      pointer-events: none;
    
}








@media screen and (min-width: 1200px){

.green-prof100 {
	width: 100%;
	background-image:url(img/greenprof.png) ;
	margin:0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}
.green-vision100 {
	width: 100vw;
	background-image:url(img/greenvision.png) ;
	margin:0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}
}










@media screen and (max-width: 768px){

.main {
	display: none;
}

.sp750 {
	display: block;
}

.sp-img-move{
	display: block;
}



}