@charset "utf-8";

/*リセットCSS*/
*{ margin: 0; padding: 0; }
a{text-decoration: none;}

body {
    font-family:  "Yu Gothic", メイリオ, Meiryo, sans-serif;
}


/*ヘッダロゴ*/
.logo-link{height: 65px;}

/*文字*/
.marker{background-color: #D2EBFD;}
.red{color: #CF0C0C;}
.green{color: #35B412;}
.orange{color: #FFAE1B;}
.card small{font-size: .5em;}
a{color: #FFAE1B;}
a:hover{color: #FF7400;}
h4{color: #505050;}
.big_point{font-size:2.5rem;}
.free{color: #ffffff;
	background-color: #FFAE1B;}
.hero_second h1{font-size: 4rem;}
.title-box h1{font-size: 4rem;
	color: #FFFFFF;
	font-weight: bold;}


.hr_dots{border: 0;
  margin: 1rem 0;
  display: flex;
  align-items: center;
	justify-content: center;}
.hr_dots:after{	
  content: '●●●';
  font-size: 1em;
  letter-spacing: 1em;
	color: #FFAE1B;}

.line{border: none;
	border-top: 1px solid #D2EBFD;
	margin: 0.5rem;}




/*photo*/
.callpe_img{width: 100%;}

/*メイン*/
main{background-color: #D2EDFD;}






/*ボタン*/
.bottun{border: 1px solid #FFAE1B;
	background: #FFAE1B;
	border-radius: 100px;
    display: inline-block;
    width: 150px;
    padding: 10px;
    box-sizing: border-box;
    color: #FFFFFF;
	font-weight: bold;
    text-decoration: none;
    text-align: center;
	 transition-property: opacity;
　-webkit-transition-property: opacity;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
	box-shadow: 3px 3px #d0d0d0;
}
.bottun-wrap{text-align: center;}

.bottun:hover {
 border: 1px solid #FFAE1B;
	background: #FFFFFF;
	color: #FFAE1B
}



/*ヒーロー*/
hero{background-image: url("image/hero.png");
background-size: cover;
  background-position: center;
  height: 70vh;
	display: block;
  justify-content: center;
  align-items: center;
  color:#FFFFFF;
	position: relative;}
.hero_text{background-color: rgba(0,0,0,0.65);
	text-align: center;
position: absolute;
top: 20vh;
left:15%;}
.hero_text span{background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	top:25%;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #FFFFFF;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 2px;
	height: 30px;
	background: #ffffff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 2.0s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}




/*ハンバーガーメニュー*/
body{
	overflow-x: hidden;}
.nav{}
.header-area{
	width: 100%;
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	height: 65px;
	padding: 0 20px;
	align-items: center;
	position: fixed;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);}
.hamburger{
	margin-right: 40px;
	width: 45px;
	height: 30px;
	position: relative;}
.hamburger span{
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: #505050;
	transition: .5s;}
.hamburger span:first-of-type{
	top: 0;}
.hamburger span:nth-of-type(2){
	top:45%;}
.hamburger span:last-of-type{
	top: 90%;}
.slide-menu{
	background-color: rgba(230,230,230,0.95);
	position: fixed;
	top:65px;
	width: 100%;
	left: 0;
	transform: translateX(100%);
	transition: .5s;}
.slide-menu li{
	text-align: center;
	padding: 1em;}
ul{padding: 5%;
	padding-bottom: 10%;}
.menuline{color: #333333;
font-size: large;}
.menuline:hover{color: #FFAE1B;}


/*・消す*/
.slide-menu li{list-style: none;}
.hamburger.active span:first-of-type{
	top: 50%;
	transform: rotate(45deg);}
.hamburger.active span:nth-of-type(2){
	opacity: 0;}
.hamburger.active span:last-of-type{
	top: 50%;
	transform: rotate(-45deg);}
.slide-menu.active{
	transform: translateX(0);}


/*セカンドヒーロー*/
.hero_second{text-align: center;
	padding: 0;
	margin: 0;}
.logomark{width: 90%;}
.leftright{display: flex;
	justify-content:center;
	align-items: center;
	padding: 5% 0%;}
.left{flex: 1;}
.right{flex: 2;}
.leftright p{text-align: left;}
.leftright h1{font-size: 200%;}




#hero{text-align: center;}
#hero h1{color: #555555;}


/*キービジュアル*/
.card-key{background: #FFFFFF;
	padding: 5%;
	margin: 5%;
	border-radius: 0px 0px;}
.card-key h1{color: #808080;
text-align: center;}
.card-key h2{color: #036EB8;}
.card-key h3{color: #505050;}
.card-key p{color: #505050;}

.card-key{animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*一番上のボックス*/
.card-top{background-color: #FFFFFF;
	padding: 5%;
	margin: 5%;
	border-radius: 0px 0px;}
.card-top h1{color: #808080;
text-align: center;}
.card-top h2{color: #036EB8;}
.card-top h3{color: #505050;}
.card-top p{color: #505050;}

.card-top{animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*カード表示*/
.card{background: #FFFFFF;
	padding: 5%;
	margin: 5%;
	border-radius: 0px 0px;}
.card h1{color: #808080;
text-align: center;}
.card h2{color: #036EB8;}
.card h3{color: #505050;;}
.card p{color: #505050;;}
.inner_card{margin: 0.5em;}
.hr_card{background-color: #E0E0E0;
border: none;
height: 1px;}
.inner_card a{transition: all 0.3s ease 0.1s;}
.inner_card a:hover{filter: brightness(70%);}
.center-card{text-align: center;}
.sashie{width: 70%;
margin: 0 10%;
	}


/*カードふわっと*/
.card{opacity: 0.3;
transition: all 1s;
transform: translateY(150px);}
.is-active{opacity: 1;
transform: translateY(0);}

.space{height: 20px;
background-color: #D2EBFD;
}

/*icon*/
.icon_box{text-align: center;}
.icon{width: 50px;}

/*新着ニュース*/
#new_news{ height: 130px;
	overflow-y: scroll;}
/*新着お知らせ*/
	.new_news_link{color: #505050;}
	.new_news_link:hover{color: #FFaE1B;}
.new_news_link{font-size: 0.75em;}
	


/*セキュリティニュース*/
#it_news{ height: 130px;
	overflow-y: scroll;    }
.link_icon{width: 20px;
		height: 20px;
		vertical-align: middle;}


/*表の表示*/
.cell{background-color: #B9B9B9;
	font-size: .5em;
	font-weight: normal;}
.cell_tate{background-color: #B9B9B9;
	font-size: .5em;
	font-weight: normal;}
.cell_yoko{background-color: #BBDBFF;
	font-size: .5em;
	font-weight: normal;}
.cell_naka{background-color: #FFF5BC;
	font-size: .5em;}

/*申込みまでの流れ*/
.box1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #BBDEFF;
    border-radius: 8px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #BBDEFF;
    font-weight: bold;
}
.box2 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box3 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #72BBFF;
    border-radius: 8px;
}
.box3 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #72BBFF;
    font-weight: bold;
}
.box4{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #50AAFF;
    border-radius: 8px;
}
.box4 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #50AAFF;
    font-weight: bold;
}
.box5 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #369DFF;
    border-radius: 8px;
}
.box5 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #369DFF;
    font-weight: bold;
}


/*フッター*/
footer{background-color: #404040;}
.footer_inner{text-align: center;
padding: 20px;}
.footer_link{color: #999999;}
.footer_link:hover{color: #D0D0D0;}
.footer_menu a{color: #ffffff;}
.footer_menu a:hover{color: #FFAE1B;}
.footer_menu li{list-style: none;}


/*ヘッダー手前に固定*/
.header{position: sticky;
z-index: 999;}



/*子ページについて*/

/*NEWS*/
.date{text-align: end;}
.date_color{color: #757575;}
.news_link a:hover{color: #FFaE1B;}
.news-image{width: 80%;
	margin: 0 auto;}

/*ボタン*/
.news-bottun{border: 1px solid #aaaaaa;
	background: #ffffff;
    display: inline-block;
    width: 150px;
    padding: 10px;
    box-sizing: border-box;
    color: #505050;
    text-decoration: none;
    text-align: center;
	 transition-property: opacity;
　-webkit-transition-property: opacity;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
	box-shadow: 3px 3px #d0d0d0;
}
.news-bottun-wrap{text-align: center;}

.news-bottun:hover {
 border: 1px solid #FFae1b;
	background: #ffffff;
	color: #FFAE1B;
}


/*FAQの折り畳み表示*/
summary{font-size: large;
	font-weight: bold;
	color: #808080;
	cursor: pointer;}
details{margin: 1rem;}
summary:hover{color: #FFAE1B;}
/*FAQ文字色サイズ*/
.q{color: #036EB8;
	font-size: large;}
.a{color: #FF5B5B;
	font-size: 1.5rem;
	font-weight: bold;}

/*ご利用規約*/
ol {list-style-type: decimal;}
.jyoukou{margin: 1rem;}
.jyoukou ol{list-style-position: inside;
		color: #505050;}
.jyoukou ul{list-style-position: inside;
		padding: 0.5rem}
.jyoukou h3{padding: 0.25em 0.5em;
	border-left: solid 5px #FFAE1B;}/*左の線*/
.jyoukou ul li::marker{color: #808080;}
.jyoukou ul li{color: #505050;}

/*会社概要*/
.itemr a{color: #808080;}
.itemr a:hover{color: #FFAE1B;}

/*プラン表*/
.kazu_title{color: #808080;
	border-bottom: 1px solid #c0c0c0;}
.kakaku_title{color: #808080;
	border-bottom: 1px solid #c0c0c0;}
.kazu{color: #808080;
	text-align: end;
	border-bottom: 1px solid #c0c0c0;}
.kakaku{color: #808080;
	text-align: end;
	border-bottom: 1px solid #c0c0c0;}
table{border-spacing: 0px;}
.plan_dot ul li::marker{color: #808080;}
.plan_dot ul li{color: #505050;}


/*PCバージョン*/
@media (min-width: 780px){

/*メニュー*/
nav{
	display: flex;}
.header{
	width: 100%;
	display: flex;}
	
.slide-menu{
	background-color: rgba(255,255,255,0.10);
	margin: 0;
	position: static;
	transform: initial;
	padding:  0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;}
.menuline{font-size: medium;}	
.slide-menu li{padding: 0;
	margin: auto 5px;}
	
		
	
/*ヘッダ*/
.hamburger{display: none;}
	
/*ヒーロー*/	
	.hero_text{left: 40%;}
	.hero_text h1{font-size: 280%;}
	
/*セカンドヒーロー*/
	.logomark{width: 50%;}
	.hero_second .orange{font-weight: bold;}
	
/*上下を左右に*/
	.lr{display: flex;
	justify-content:center;
	align-items: flex-start;
	padding:0%;}
.l{flex: 1;}
.r{flex: 1;}
	
	
	
.card{margin: 5% 15%;}
	.card-top{margin: 5% 15%;}
	
	
/*カード３枚表示*/
	.three-box{display: flex;
	justify-content: center;
	margin: 1% 15%;}
	#card_1{margin: 1% 1% 1% 0%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_2{margin: 1%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_3{margin: 1% 0% 1% 1%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_4{margin: 1% 1% 1% 0%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_5{margin: 1%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_6{margin: 1% 0% 1% 1%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_7{margin: 1% 1% 1% 0%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_8{margin: 1%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_9{margin: 1% 0% 1% 1%;
		font-size: 0.7em;
		flex: 1;
		padding: 3%;}
	#card_1 h2{text-align: center;}	
	#card_2 h2{text-align: center;}	
	#card_3 h2{text-align: center;}	
	#card_4 h2{text-align: center;}	
	#card_5 h2{text-align: center;}	
	#card_6 h2{text-align: center;}	
	#card_7 h2{text-align: center;}	
	#card_8 h2{text-align: center;}	
	#card_9 h2{text-align: center;}	
	
	
/*ご利用流れ*/	
.box1{width: 60%;}	
.box2{width: 60%;}	
.box3{width: 60%;}	
.box4{width: 60%;}	
.box5{width: 60%;}
	
	
/*子ページについて*/
/*title*/
.title-box h1{font-size: 6rem;
	color: #FFFFFF;
	font-weight: bold;}
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	top:40%;
    /*全体の高さ*/
	height:50px;
}
	
	
/*会社概要*/	
.itembox{display: flex;
	justify-content: space-around;}
.iteml{flex: 1;}
.itemr{flex: 2;}

	
/*フッター*/
.footer_menu{display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1em;}
	.footer_menu li{margin: .5em;}
}