* {
  margin: 0rem;
  padding: 0rem;
  box-sizing: border-box;
}


:root{
  font-size: 16px;
}

@viewport{
  width : extend-to-zoom 100%;
  zoom:1,0
}

body {
  position:relative;
  font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #333333;
  background-color:#F4F5F7;
}

.header{
  z-index: 300;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 6rem;
  background-color: #4dc4ff;
}

.header_inner {
  position: relative;
  padding: 2rem;
}

.logo{
  position: fixed;
  top: 0;
  left: 0;
}

.title{
  display:block;
  margin-top:0 ;
}

.main{  
  margin-top: 9rem;
}

.kennsakukekka{
  text-align: center;
}

.compari{
  display: block;
}

.choose{
  padding:1rem 0rem;
}

.random{
  display: inline-block;
  margin: auto;
}

.first_box{
  margin-top:2rem;
  padding:0.8rem;
  color:#2c2c2f;
  border:dashed 2px #333333;
}

.company_name{
  display:inline;
  background-image:linear-gradient(transparent 60%, #fff000 0%);
}

.second_box{
  margin-top:2rem;
  padding:0.8rem;
  color:#2c2c2f;
  border:dashed 2px #333333;
}

.naiyou1 input{
  display: none;
}

.naiyou2 input{
  display:none;
}

.naiyou3 input{
  display:none;
}

.naiyou4 input{
  display:none;
}

.naiyou5 input{
  display:none;
}

.naiyou6 input{
  display:none;
}

.midashi{
  z-index: 10;
  position: relative;
  width:11.5rem;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #ffff00;
  margin:2rem 0 2rem;
}

.midashi:before {
  z-index: 20;
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #000;
}

.container{
  display: block;
}

.container1{
  display: block;
}

.company_list_item{
  padding: 3 0rem;
}

.container_in{
  padding:0.5rem;

}

.container_in input{
  width:100%;
  padding:0.5rem;
}

.container_inhome{
  padding:0.5rem;
  display:block;
}

.container_inhome input{
  width:100%;
  padding:0.5rem;
  border-radius: 2rem;
  margin-left:auto;
}

.container_inhome input:focus{
  outline:0;
}

.container_in select{
  width:100%;
  padding:0.5rem;
}

.submit input{
  cursor:pointer;
  background-color: #4dc4ff;
  color: #fff;
  border-radius: 2rem;
  border:none;
}

.submit input:hover{
  background-color: #344cb4;
}

.submit input:focus{
  outline: 0;
}

.my_button{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my_button_item,
a.my_button_item{
  margin:1rem;
  padding:0.8rem;
  background-color: #4dc4ff;
  width:20rem;
  text-align: center;
  font-size: 1.3rem;
  border-radius: 2rem;
  color: #fff;
  text-decoration: none;
}

.my_button_item:hover,
a.my_button_item:hover{
  color:#fff;
  background-color: #344cb4;
}

.akukin{
  font-weight: bold;
  color:red;
}



footer {
  width: 100%;
  padding: 40px 0;
  background-color: #4dc4ff;
  color:#F4F5F7;
}
.footer {
  text-align: center;
}

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

  .nav {
    position: fixed;
    right: -320px; /* 右から出てくる */
    top: 0;
    width: 300px; /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
    
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 8px;
    width: 40px; /* クリックしやすい幅 */
    height: 40px; /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300;
  }
  .nav_list {
    
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav_item {
    
    text-align: center;
    padding: 0 14px;
  }
  .nav_item a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
  .nav_item a:hover {
    background-color: #eee;
  }
  .hamburger_border {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 2px;
    background-color: #333;
    transition: all .6s;
  }
  .hamburger_border_top {
    top: 14px;
  }
  .hamburger_border_center {
    top: 20px;
  }
  .hamburger_border_bottom {
    top: 26px;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }

  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }

  .company_list{
    margin-top:3rem;
  }

  .container{
    padding:10 2rem;
    margin:100 auto 8rem;
    width:100%;
  }

  .container1{
    padding:10 2rem;
    margin:20 auto 8rem;
    width:100%;
  }

  p{
    margin-bottom: 1.1rem;
  }

  .loginform_area input{
    width:100%;
    padding: 0.5rem;
    margin:0.5rem 0rem;
  }

  /*企業詳細*/
  .first_box{
    margin-bottom:2rem;
  }

  .naiyou1{
    padding:0 auto;
  }

  .naiyou1 label{
    padding:0.8rem;
    border:solid 2px black;
    cursor:pointer;
  }

  .naiyou2 label{
    padding:0.8rem;
    border:solid 2px black;
    cursor:pointer;
  }
  .naiyou3 label{
    padding:0.8rem;
    border:solid 2px black;
    cursor:pointer;
  }

  .naiyou4 label{
    padding:0.8rem;
    border:solid 2px black;
    cursor:pointer;
  }

  .naiyou5 label{
    padding:0.8rem;
    border:solid 2px black;
    cursor:pointer;
  }

  .naiyou6 label{
    padding:0.8rem;
    border:solid 2px black;
    cursor:pointer;
  }

  .naiyou1 label:before{
    display: inline-block;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f107';
    padding-right: 5px;
    transition: 0.2s;
  }

  .naiyou2 label:before{
    display: inline-block;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f107';
    padding-right: 5px;
    transition: 0.2s;
  }

  .naiyou3 label:before{
    display: inline-block;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f107';
    padding-right: 5px;
    transition: 0.2s;
  }

  .naiyou4 label:before{
    display: inline-block;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f107';
    padding-right: 5px;
    transition: 0.2s;
  }

  .naiyou5 label:before{
    display: inline-block;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f107';
    padding-right: 5px;
    transition: 0.2s;
  }

  .naiyou6 label:before{
    display: inline-block;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f107';
    padding-right: 5px;
    transition: 0.2s;
  }

  .naiyou1 .naiyou_show1{
    height:0;
    padding:0;
    overflow:hidden;
    opacity:0;
    transition:0.8s;
  }

  .naiyou2 .naiyou_show2{
    height:0;
    padding:0;
    overflow:hidden;
    opacity:0;
    transition:0.8s;
  }

  .naiyou3 .naiyou_show3{
    height:0;
    padding:0;
    overflow:hidden;
    opacity:0;
    transition:0.8s;
  }

  .naiyou4 .naiyou_show4{
    height:0;
    padding:0;
    overflow:hidden;
    opacity:0;
    transition:0.8s;
  }

  .naiyou5 .naiyou_show5{
    height:0;
    padding:0;
    overflow:hidden;
    opacity:0;
    transition:0.8s;
  }

  .naiyou6 .naiyou_show6{
    height:0;
    padding:0;
    overflow:hidden;
    opacity:0;
    transition:0.8s;
  }
  
  .naiyou1 input:checked ~ .naiyou_show1{
    padding:10px 0;
    height:auto;
    opacity:1;
  }

  .naiyou2 input:checked ~ .naiyou_show2{
    padding:10px 0;
    height:auto;
    opacity:1;
  }

  .naiyou3 input:checked ~ .naiyou_show3{
    padding:10px 0;
    height:auto;
    opacity:1;
  }
  
  .naiyou4 input:checked ~ .naiyou_show4{
    padding:10px 0;
    height:auto;
    opacity:1;
  }

  .naiyou5 input:checked ~ .naiyou_show5{
    padding:10px 0;
    height:auto;
    opacity:1;
  }

  .naiyou6 input:checked ~ .naiyou_show6{
    padding:10px 0;
    height:auto;
    opacity:1;
  }


  /*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	right: 20px;
	bottom: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	visibility: hidden; 
	transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	/*改行禁止*/
    white-space: nowrap;
	/*矢印の動き*/
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
	right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
	right:0;
}



}/* sp */

@media only screen and (min-width: 769px) {
  .header_inner{
    width: 100%;
    margin-left: auto;
    margin-right: 15rem;
  }
  .logo{
    padding: 0px 20px;
  }
  .nav_list{
    text-align: right;
  }
  .nav_list li{
    display: inline-block;
    text-align: right;
    padding-left: 0rem;
  }
  .nav_list li a{
    /*背景色の基点とするためrelativeを指定*/
    position: relative;
    color: #fff;
    font-weight: 600;
    padding:1rem 1rem;
    text-decoration: none;
  }

  .nav_list li a::after{
    content: '';
     /*絶対配置で線の位置を決める*/
    position:absolute;
    z-index: -1;
    bottom:0;
    left:0;
    /*背景の形状*/
    width:0;
    height:100%;
    background:#F4F5F7;
    /*アニメーションの指定*/
    transition:all .5s;
    opacity: 0;/*はじめは透過0*/
  }

    /*現在地とhoverの設定*/
  .nav_item a::after,
  .nav_list li a:hover::after{
    /*背景の形状*/
    width:100%;/*横幅を伸ばす*/
    opacity:1;/*不透明に*/
  }

/*現在地とhoverの設定*/
  .nav_item  a,
  .nav_list li a:hover{
    color:#4dc4ff;
    /*テキストを最前面へ*/
    z-index:1;
  }

  .container{
    padding:10 5rem;
    margin:100 auto 40rem;
    width:100%;
  }

  .container1{
    padding:10 5rem;
    margin:20 auto 40rem;
    width:100%;
  }

  .search{
    margin:0 auto;
    text-align: center;
  }

  .search_form{
    display:inline-block;
    text-align: left;
  }

  .loginform_area{
    padding:1.5rem;
  }
  
  .loginform_area input{
    margin:0.8rem;
    width:18rem;
    padding:0.5rem;
  }
  
  .submit{
    display:flex;
    justify-content: center;
  }
  
  .submit input{
    margin:0.8rem;
    width:15rem;
  }

  .compari{
    display:flex;
    justify-content: space-between;
  }
  
  .campany{
    width:60%;
    margin-left:auto;
    margin-right:auto;
  }

  .nonepc{
    display: none;
  }


  #area-1{
    flex:1;
    margin:2em 0rem 1rem;
  }
  
  
  .first p {
    margin:0;
    padding:0;
  }
  
  #area-2{
    flex:1;
    margin:2em 1rem 0rem;
  }
  
  .second p{
    margin:0;
    padding:0;
  }

  .company_list{
    display: flex;
    flex-wrap: wrap;
    padding: 0 5rem;
  }

  .company_list_item{
    width:calc(50% - 10px);
  }
}/* pc */

@media (min-width:1040px){
  .container{
    width:70rem;
    margin-left:auto;
    margin-right:auto;
  }

  .container1{
    width:70rem;
    margin-left:auto;
    margin-right:auto;
  }
}