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


/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul { list-style:none;}
blockquote, q { quotes:none;}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a{
  color: #000;
  text-decoration: none;
}

/*a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}*/

a:hover { transition: 0.3s;}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del { text-decoration: line-through;}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select { vertical-align:middle;}

/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}





/*本編スタイルシート*/



body {
	width: 100%;
    margin-left: auto;
    margin-right: auto;
	background-color: #FFF;
	color: #3D3D3D;
	font-family: 'Noto Sans JP','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	line-height: 2;
  font-weight: 400;
  font-size: 3.733vw;
}


img { vertical-align: bottom; }

#wrapper {
  width:100%;
  overflow:hidden;
}

/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  body{
    font-size: 16px;
  }
}



/*-----------------------------
text_style, box_style
-----------------------------*/

/*スマホ向けレイアウトの指定*/

.fs_10_vw{ font-size: 2.667vw;}
.fs_12_vw{ font-size: 3.2vw;}
.fs_14_vw{ font-size: 3.733vw;}
.fs_16_vw{ font-size: 4.267vw;}
.fs_18_vw{ font-size: 4.8vw;}
.fs_20_vw{ font-size: 5.333vw;}
.fs_24_vw{ font-size: 6.4vw;}
.fs_30_vw{font-size: 8vw;}
.fs_40_vw{font-size: 10.677vw;}
.fs_50_vw{font-size: 13.33vw;}
.fs_60_vw{font-size: 16vw;}
.fs_70_vw{font-size: 18.667vw;}

.ta_center_sp { text-align: center; }
.ta_left_sp { text-align: left; }
.ta_right_sp { text-align: right; }

.fw_normal{ font-weight: 400;}
.fw_bold{ font-weight: 700;}
.fw_black{ font-weight: 900;}

.le_spacing02{letter-spacing: 2px;}

.fc_white { color: #fff; }
.fc_black { color: #333; }
.fc_blue{ color: #182E8A;}
.fc_red{ color: #E60012;}

.only_sp { display: block; }
.only_tb { display: none; }
.only_pc { display: none; }
.only_sptb {display: block;}/*spとtbに適用*/

.lh_10 { line-height: 1.0; }
.lh_12 { line-height: 1.2; }
.lh_15 { line-height: 1.5; }
.lh_18 { line-height: 1.8; }
.lh_22 { line-height: 2.2; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb80{ margin-bottom: 80px;}
.mb100 { margin-bottom: 100px; }
.mb150 { margin-bottom: 150px; }

.mt20{margin-top: 20px;}
.mt60{margin-top: 60px;}


.img_responsive {
	max-width: 100%;
	height: auto;
}

.va_middle{vertical-align: middle}

	/*タブレットレイアウトの指定*/
	@media only screen and (min-width:768px){
	.fs_12_tb { font-size: 12px; }
  .fs_14_tb { font-size: 14px; }
	.fs_16_tb { font-size: 16px; }
	.fs_18_tb { font-size: 18px; }
	.fs_20_tb { font-size: 20px; }
	.fs_24_tb { font-size: 24px; }
	.fs_30_tb { font-size: 30px; }
	.fs_40_tb { font-size: 40px; }
  .fs_50_tb { font-size: 50px; }
  .fs_70_tb { font-size: 70px; }
  .fs_100_tb { font-size: 100px; }


	.ta_center_tb { text-align: center; }
	.ta_left_tb { text-align: left; }

	.only_sp { display: none; }
	.only_tb { display: block; }
	.only_pc { display: none; }
    
	}

		/*PC向けおよび大型PCの指定*/
		@media only screen and (min-width:1080px){
		body{ min-width: 1080px;}
          
		.fs_12_pc { font-size: 12px; }
		.fs_14_pc { font-size: 14px; }
		.fs_16_pc { font-size: 16px; }
		.fs_18_pc { font-size: 18px; }
		.fs_20_pc { font-size: 20px; }
		.fs_24_pc { font-size: 24px; }
		.fs_30_pc { font-size: 30px; }
    .fs_36_pc { font-size: 36px; }
		.fs_40_pc { font-size: 40px; }
		.fs_50_pc { font-size: 50px; }	
    .fs_60_pc { font-size: 60px; }	
    .fs_70_pc { font-size: 70px; }		

		.ta_center_pc { text-align: center; }
		.ta_left_pc { text-align: left; }
		.ta_right_pc { text-align: right; }

		.only_sp { display: none; }
		.only_tb { display: block; }
		.only_pc { display: block; }
    .only_sptb {display: none;}/*spとtbに適用*/
    
}

/*-----------------------------
responsive_grid
-----------------------------*/

/*スマホ向けレイアウトの指定*/
.inner01 {
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}

.inner02 {
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.flex_sp {display: flex;}

.items_center{ align-items: center;}
.items_end{ align-items: flex-end;}

.flex_equally{ justify-content:space-between;}
.flex_center{ justify-content: center;}
.flex_end{ justify-content:flex-end;}
.flex_reverse{ flex-flow: row-reverse;}


	/*タブレットレイアウトの指定*/
	@media only screen and (min-width:768px){
  .inner01{width: 100%;}
  .inner02{max-width: 1100px;}

	.flex_tb {display: flex;}
  
  .flex_contents02{ width: 48%;} /*同じ大きさで2つ並べる*/
  .flex_contents03{ width: 32%;box-sizing: border-box;} /*同じ大きさで3つ並べる*/
	}

		/*PC向けおよび大型PCレイアウトの指定*/
		@media only screen and (min-width:1080px){        

		.flex_pc {display: flex;}
		}

/*-----------------------------
header
-----------------------------*/
#header{
  position: fixed;
  top: 0;
  z-index: 997;
  background-color: rgba(255,255,255,1);
  width: 100vw;
  box-shadow: 0 3px 0 rgba(0,0,0,0.16);
  padding-bottom: 8px;
  padding-top: 8px;
}

h1{ pointer-events: auto;}

h1 a:hover{opacity: 0.7;}

h1 a img{
  width: 240px;
  height: auto;
  padding: 5px;
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
top:0;
  right: -120%;
width:48%;
  height: 100vh;/*ナビの高さ*/
background:#fff;
  /*動き*/
transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:10%;
  left:3%;
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
}

#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
top: 2px;
right: 10px;
cursor: pointer;
  width: 50px;
  height:50px;
}

/*×に変化*/  
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color: #666;
  width: 45%;
}

.openbtn1 span:nth-of-type(1) {
top:15px; 
}

.openbtn1 span:nth-of-type(2) {
top:23px;
}

.openbtn1 span:nth-of-type(3) {
top:31px;
}

.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

.nav_contact{
  background-color: #182E8A;
  display: block;
  width: 150px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 8px;
}




/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  #header{
    padding: 10px 0;
  }

  h1 a img{
    width: 300px;
    height: auto;
    margin-left: 10px;
  }

}

/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  #header{
    padding: 10px 40px;
    box-sizing: border-box;
  }

  .header_inner{
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
 
  h1 a img{
    width: 450px;
    height: auto;
    margin-left: 0;
  }
  .pc_nav{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .pc_nav ul li{
    width: 15%;
  }
  .pc_nav ul li:last-child{
    width: 160px;
  }
  .pc_nav ul li a:hover{
    opacity: 0.7;
  }

  .nav_contact{
    padding: 10px 20px;
    box-sizing: border-box;
    margin-left: 20px;
  }

}



/*-----------------------------
mainimg
-----------------------------*/
.mainvisual{
  position: relative;
  margin-top: 60px;
  margin-bottom: 60px;
}

.main_txt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-shadow: 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff;
  width: 80%;
}


/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .mainvisual img{
    width: 100%;
    height: auto;
  }


}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .mainvisual{
    margin-top: 70px;
  }

}

/*-----------------------------
共通
-----------------------------*/
/*右矢印*/
.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.arrow-01::before{
	left: 3px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*マーカー下線*/
.marker {
  background: linear-gradient(transparent 70%, #ffb8b8 0%);
  display: inline;
  /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
  padding: 0 2px 4px;
}

/*h3*/
.h3_ttl{
  border-left: 10px solid #182E8A;
  padding-left: 8px;
  line-height: 1.5;
  font-weight: 900;
}

/*h4*/
.h4_ttl{
  border-bottom: 1px solid #182E8A;
  padding-bottom: 3px;
}

/*リンクずれるのを防ぐ*/
.anchor{
  padding-top: 60px;
  margin-top: -60px;
}

/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  /*リンクずれるのを防ぐ*/
  .anchor{
    padding-top: 75px;
    margin-top: -75px;
  }
}


/*-----------------------------
選ばれる理由
-----------------------------*/
.reason_box{
  border: 1px solid #333;
  padding: 10px;
}

.reason_num{
  display: inline-block;
  border-bottom: 1px solid #182E8A;
}

.reason_txt{
  padding: 10px;
}

/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .reason_wrap{
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    gap:20px
  }
  .reason_box{
    width: 48%;
  }
}

/*-----------------------------
事例紹介
-----------------------------*/
.case_table{
  border: 1px solid #e5e5e5;
  width: 100%;
}
.case_table tr th{ background: #e5e5e5;}
.case_table tr:first-child th{ border-bottom: 1px solid #fff;}
.case_table tr:first-child td{ border-bottom: 1px solid #e5e5e5;}
.case_table tr th,.case_table tr td{ padding: 3px 0;}

.case_wrap{
  border-bottom: 1px solid #e5e5e5;
}

/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .case_wrap{
    flex-flow: row-reverse;
  }
  .case_box01{
    width: 31%;
  }
  .case_box02{
    width: 65%;
  }
	.case_table{
		width:70%;
	}
}

/*-----------------------------
顧問客数推移
-----------------------------*/
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .graph_wrap{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .graph_wrap{
    width: 60%;
  }
}
/*-----------------------------
サービス一覧
-----------------------------*/
.services_box{
  border: 1px solid #333;
  border-radius: 15px;
  gap: 10px;
  padding: 5px 15px;
  display: flex;
  align-items: center;
}
.services_txt{line-height: 1.5;}

.osusume_box{
  background-color: #fff;
  box-shadow: 0 1px 5px #c1c1c1;
  padding: 20px;
}
.osusume_img{
  margin-bottom: 40px;
}

.sample_banner{
	border: 2px solid #182E8A;
	cursor: pointer;
	}


/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .services_box{ width: 50%; }
  .services_wrap{ gap: 10px; }
  .services_txt{line-height: 2;}

  .osusume_img{
    width: 35%;
    margin-bottom: 0;
  }
  .osusume_txt{
    width: 62%;
  }
  .osusume_box{
    justify-content: space-between;
  }

}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .osusume_box{
    justify-content: center;
    gap: 20px;
    padding: 30px;
  }
	.sample_banner:hover{
		opacity: 0.7;
	}
	.sample_banner{
		width: 80%;
		height: auto;
	}
	
}

/*-----------------------------
料金表
-----------------------------*/
.price_table{
  width: 100%;
  table-layout: fixed;
}
.price_table th,.komon_table th{
  background-color: #182E8A;
  color: #fff;
}
.price_table td,.komon_table td,.service_table td{
  background-color: #e5e9f8;
}
.price_table th,.price_table td{
  border: 1px solid #fff;
  padding: 5px 3px;
  text-align: center;
  box-sizing: border-box;
  border-collapse: collapse;
}
.price_table th:last-child,.price_table td:last-child,.komon_table td:last-child{
  border-bottom: 0;
}

.komon_table,.service_table{width: 100%;}
.komon_table th,.komon_table td,.service_table td{
  padding: 3px 8px;
  border: 1px solid #fff;
}
.komon_table th{border-top: 0;}
.komon_table th:last-child,.komon_table td:last-child{border-right: 0;}
.komon_table td:first-child{width: 50%;}

.service_table td:last-child{border-bottom: 0;}

/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .price_table th,.price_table td,.komon_table th,.komon_table td,.service_table td{
    padding: 8px 10px;
  }
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .price_table th,.price_table td,.komon_table th,.komon_table td,.service_table td{
    padding: 10px;
  }
}

/*-----------------------------
オプション
-----------------------------*/
.option_num{
  background-color: #182E8A;
  padding: 2px 5px;
  margin-right: 10px;
}
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .option_wrap{
    width: 400px;
    margin: 0 auto;
  }
}

/*-----------------------------
契約の流れ
-----------------------------*/
.flow_box{
  border: 1px solid #333;
  padding: 20px 10px;
  box-sizing: border-box;
}
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .flow_box{
    width: 23%;
  }
}

/*-----------------------------
代表ごあいさつ
-----------------------------*/
.greeting_img img{
  width: 80%;
}
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .greeting_img img{
    width: 100%;
  }
  .greeting_wrap{
    gap: 10px;
  }
  .greeting_txt{
    width: 100%;
  }
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .greeting_img{
    width: 50%;
  }
}

/*-----------------------------
事務所概要
-----------------------------*/
.office_table{width: 100%;}
.office_table tr th{
  font-weight: 400;
  text-align: left;
}
.office_table tr th,.office_table tr td{
  border-bottom: 1px dashed #333;
  padding: 12px 8px;
}
.office_table tr:first-child{
  border-top: 1px solid #333;
}
.office_table tr:last-child{
  border-bottom: 1px solid #333;
}
.ggmap {
  position: relative;
  padding-bottom: 65%; /*これが縦横比*/
  height: 0;
  overflow: hidden;
}
.ggmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.quality_box{
  background-color: #182E8A;
  padding: 3px 10px;
}
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  .office_img{
    gap:20px;
  }
  .quality_box{
    width: 38%;
    margin-right: 20px;
    padding: 10px 0;
    text-align: center;
  }
  .quality_txt{
    width: 60%;
  }
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
  .office_table,.ggmap,.office_img,.quality_wrap{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .ggmap{
    padding-bottom: 45%; /*これが縦横比*/
  }
}
/*-----------------------------
お問い合わせ
-----------------------------*/
#contact,#thanks{
  margin-top: 80px;
}
.form_inner{
	margin-left: auto;
	margin-right: auto;
}

.form_table{
  width: 100%;
  text-align: left;
  border: 3px solid #e5e5e5;
}

.form_table tr th,.form_table tr td{
  display: block;
  padding: 8px;
}

.form_table tr th{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: normal;
  background-color:#ebedf5;/*ブルーグレー*/
}

.wpcf7-form-control{ width: 100%;}

.middle,select{
  height: 35px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  padding: 5px;
  background-color: #fff;
  margin: 5px 0;
}
select{width: 100%;appearance: none;}

.form_table textarea{
  height: 250px;
  border: 1px solid #c0c0c0;
  border-radius: 10px;
  width: 96%;
	line-height:1.5;
	padding:5px;
}

.required,.unrequired{
  color: #fff;
  padding: 1px 5px;
  font-size: 0.7em;
  margin-right: 10px;
  border-radius: 5px;
}
.required{background-color: rgb(249, 84, 84);}
.unrequired{background-color: #56a5da;}

input[type="text"], input[type="tel"],input[type="email"],input[type="submit"],textarea, button{
	outline: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form_btn{
	width: 250px;
	margin-left: auto;
	margin-right: auto;
}

.form_btn input {		
	background-color: #182E8A;
	padding: 10px 100px;
	font-size: 1em;
	color: #fff;
	letter-spacing: 5px;
  width: 250px;
}

.form_btn input:hover {
	opacity: 0.7;
	cursor: pointer;
}
/*placeholderがはみ出るのを防ぐ*/
.wpcf7-text{
	width:94%;
}

/*Recapchaの右下の表示を非表示*/
.grecaptcha-badge { visibility: hidden; }


/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
  #contact,#thanks{
    margin-top: 100px;
  }
   .form_table textarea{ width: 99%; 	}
  .wpcf7-list-item:first-child{margin-left: 0;}
}

/*PC向けおよび大型PCの指定*/
@media only screen and (min-width:1080px){
  #contact{
    margin-top: 120px;
  }
	.form_inner{width: 80%;}
	
  .form_table tr th,.form_table tr td{
    display: table-cell;
    padding: 10px 0;
  }
  
  .form_table tr{
    border-bottom: 1px solid #c1c1c1;
    background-color:#ebedf5;/*ブルーグレー*/
  }
  .form_table tr td{
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .form_table tr th{ 
    width: 30%;
    padding-left: 10px; 
  }
  .naiyou_ttl{ 
    display:flex ;
    vertical-align: top;
  }
}

/*-----------------------------
footer
-----------------------------*/
footer{
  background-color: #e8e8e8;
  padding-top: 40px;
}

footer img{
  width: 250px;
  height: auto;
}

/*PC向けおよび大型PCの指定*/
@media only screen and (min-width:1080px){
  footer img{
    width: 300px;
    height: auto;
  }

}

/*-----------------------------
totopボタン
-----------------------------*/
/*リンクの形状*/

#page-top a:hover{ opacity: 0.7;}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:80px;
  z-index: 99;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(140px);
  }
}

/*PC向けおよび大型PCの指定*/
@media only screen and (min-width:1080px){
  #page-top {
    bottom:10px;
  }
}

/*-----------------------------
画面遷移フェード
-----------------------------*/
/*ページを読み込み時にふわっと*/
body {
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

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

  100% {
    opacity: 1
  }
}
/*-----------------------------
1文字ずつ文字が出現
-----------------------------*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 0.8s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}


/*-----------------------------
順番に表示
-----------------------------*/
/*スタート時は要素自体を透過0にするためのopacity:0;を指定する*/
.box{ opacity: 0;}

.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

/*-----------------------------
fadein
-----------------------------*/
  .fadein_right{
    opacity : 0;
    transform: translateX(20px);
    transition: all 0.4s;
    }
  
  .fadein_left{
    opacity : 0;
    transform: translateX(-20px);
    transition: all 0.4s;
    }
  
  .fadein_top{
    opacity : 0;
    transform: translateY(30px);
    transition: all 0.6s;
    }