@charset "UTF-8";
/* CSS Document */

 
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.contactfont{
	font-size: 150%;
	margin: 70px 0px 20px 530px;
}

.contactform{
	margin: 100px 0px 150px 0px;
}

.lead-form{
  text-align: center;
  font-size:25px;
}
form{
  width:600px;
  margin:0 auto;
}
.contactitem{
  overflow: hidden;
  margin-bottom: 20px;
}
.label{
  float: left;
  margin-right: 20px;
  width:250px;
  padding-left: 10px;
  font-size: 150%;
}
.inputs{
  float: left;
  width:300px;
}
input[type="text"],input[type="email"]{
  border: solid 1px #aaa;
  border-radius:5px;
  padding:10px;
  font-size: 25px;
}
textarea{
  border: solid 1px #aaa;
  border-radius:5px;
  padding: 10px;
  height: 160px;
  font-size: 25px;
}
.btn-area{
  text-align: center;
}

input[type="submit"]{
  width: 100px;
  height: 50px;
  background: #000000;
  border: none;
  color: white;
  font-size:17px;
  font-weight:bold;
  padding: 10px 20px;
  margin: 0 5px;
}
input[type="reset"]{
  background: #aaa;
  border: none;
  color: white;
  font-size:17px;
  font-weight:bold;
  padding: 10px 20px;
  margin: 0 5px;
}


/*indexより引用*/
a {
  transition: color .3s;
}


@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

@-webkit-keyframes anime_move1 {
    0% { -webkit-transform: rotateX(0deg) rotate(0deg); }
    100% { -webkit-transform: rotateX(0deg) rotate(360deg); }
}
@keyframes anime_move1 {
    0% { transform: rotateX(0deg) rotate(0deg); }
    100% { transform: rotateX(0deg) rotate(360deg); }
}

html{
  scroll-behavior: smooth;/*カテゴリスクロールを滑らかに*/
}

#wrapper {
  overflow: hidden;/*ボックスからはみ出した内容は「表示しません」*/
}

html, body{
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
}

/*フェードインJQuery必要*/
.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
/*フェードインはここまで*/

.relativetop{
	position: relative;
}

.absolutetop{
	position: absolute;
	bottom: 1px;
}

.star {
  display: inline-block;
  font-size: 3em;
}
 
.star1 {
  animation: r1 3s linear infinite;
}

.header{
	height: 50px;
	margin-left:auto;
	margin-right:auto;
	border: 3px solid #fff;    /* 表示領域を白枠で囲う */
	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 750px;              /* 横の幅970px */
	margin: auto;              /* 中央揃え */
}

.headerbackground{
	background-color: #00409E;
	opacity: 0.8;
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 50px;
}

.headerbackgroundb{
	background-color:#00409E;     /* 背景色(紺) */
	padding:10px 0 20px;       /* 上10px、下20pxをあける */
	height:80px;              /* 縦の高さ110px */
	width:100%;                /* 横の幅を100% */
}

.mu{
	background-color: #ffffff;
	width: 750px;
	height: 90px;
	margin: auto;
}

/*看板*/
.kanban{
	
}

.whatcampylo{
	width: 800px;
	text-align: left;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
}

.campylosetumei{
	margin-top: 150px;
	margin-bottom: 100px;
	font-size: 25px;
}

.campylologo{
	margin: 50px 0px 100px 0px;
}

.followme{
	margin: 50px 0px 300px 0px;
}

.catemoji{
	color: #ffffff;
	font-size: 15px;
}

.catemojia{
	color: #ffffff;
	font-size: 5px;
}

.work{
	width: 1000px;
	text-align: left;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
}

.workichiran{
	margin-bottom: 100px;
	margin-top: 0px;
}

/*スライドエフェクト*/
* {
  box-sizing: border-box;
}

.item {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
/*ここまでスライドエフェクト*/

/*メールエフェクト*/
.mailicon{
  width: 122px;
  height: 122px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  filter:drop-shadow(3px 3px 3px #B0B0A9);
}
.mailicon img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.mailicon img:hover{
  transform: rotate(360deg);
  transition-duration: 0.5s;
}
/*ここまでメーレフェクト*/

.mailicon{
	margin-bottom: 300px;
	margin-top: 100px;
}

.jisseki{
	margin: 200px 0px 50px 0px;
}

.drosha{
	filter:drop-shadow(3px 3px 3px #B0B0A9);
}

.andmore{
	text-align: right;
	font-size: 15px;
	margin: 40px 0px 0px 0px;
}

/*andmoreエフェクト*/
.andmore {
  transition: .3s;
}
.andmore span {
  display: inline-block;
}
.andmore:hover span {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
  transition: .6s;
}
.andmore:hover span:nth-of-type(1) {
  -webkit-transition-delay: .02s;
  transition-delay: .02s;
}
.andmore:hover span:nth-of-type(2) {
  -webkit-transition-delay: .04s;
  transition-delay: .04s;
}
.andmore:hover span:nth-of-type(3) {
  -webkit-transition-delay: .06s;
  transition-delay: .06s;
}
.andmore:hover span:nth-of-type(4) {
  -webkit-transition-delay: .08s;
  transition-delay: .08s;
}
.andmore:hover span:nth-of-type(5) {
  -webkit-transition-delay: .10s;
  transition-delay: .10s;
}


/*きらりマウスホバー*/
.hover14 figure {
    position: relative;
}
.hover14 figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.hover14 figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}
/*ここまできらりマウスホバー*/

.suehisa{
	margin: 100px 0px 0px 0px;
	max-width: 100%;
	max-height: 100%;
}

.sitemap{
	background-color: #474747;
	color: #ffffff;
	margin: 0px 0px 0px 0px;
}

.sitemapyohaku{
	background-color: #474747;
}

.sitemapmoji{
	width: 750px;
	text-align: left;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.sitemaphover {
  position: relative;
  display: inline-block;
  transition: .3s;
}
.sitemaphover::after {
  position: absolute;
  bottom: .3em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #2ecc71;
  opacity: 0;
  transition: .3s;
}
.sitemaphover:hover::after {
  bottom: 0;
  opacity: 1;
}

.footeryohaku{
	background-color: #000000;
	height: 3px;
}

.footer{
	background-color: #000000;
	height: 60px;
}

.footeraline{
	margin: 20px 0px 0px 0px;
}




/*Aboutページ*/
.koujichuu{
	margin: 100px 0px 100px 0px;
}

/*koujiefectエフェクト*/
.koujiefect {
  transition: .3s;
}
.koujiefect span {
  display: inline-block;
}
.koujiefect:hover span {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
  transition: .6s;
}
.koujiefect:hover span:nth-of-type(1) {
  -webkit-transition-delay: .02s;
  transition-delay: .02s;
}
.koujiefect:hover span:nth-of-type(2) {
  -webkit-transition-delay: .04s;
  transition-delay: .04s;
}
.koujiefect:hover span:nth-of-type(3) {
  -webkit-transition-delay: .06s;
  transition-delay: .06s;
}
.koujiefect:hover span:nth-of-type(4) {
  -webkit-transition-delay: .08s;
  transition-delay: .08s;
}
.koujiefect:hover span:nth-of-type(5) {
  -webkit-transition-delay: .10s;
  transition-delay: .10s;
}

.shasin{
	max-width: 100%;
	margin: 0px 0px 200px 0px;
}