html,body,header,main,nav,footer,div{
  width:100%;
}
main{
     display:block; /* IE対策に追加 */
}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "メイリオ", Meiryo, YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, sans-serif;
  font-size:16px;
  text-align:center;
  color:#222;
}
img{
  width:auto;
}
/*共通設定*/
.column-wrap{
  width:65%;
  margin:auto;
}
@media screen and (min-width: 1200px) {
  .column-wrap{
    width: 950px;
  }
}
@media screen and (max-width: 899px) {
  .column-wrap{
      width: 90%;
  }
}
.left-area{
  float:left;
}
.right-area{
  float:right;
}
.float-clear{
  clear:both;
}
.w-auto{
  width:auto;
}
.w100{
  width:100%;
}
.sp-hide{
  display:block;
}
.sp-show{
  display:none;
}
@media screen and (max-width: 899px) {
  .sp-hide{
    display:none;
  }
  .sp-show{
    display:block;
  }
  .left-area,.right-area{
    float:none;
  }
  header .left-area{
    float:left;
  }
}
/*メインカラー*/
.bgColor-main{
  background:#1ebeca;
}
.fontColor-main{
  color:#1e9dac;
}
.bgColor-white{
  background:#fff;
}
.fontColor-white{
  color:#fff;
}
.main-line-bottom{
  border-bottom:4px solid #1ebeca;
}
/*flex*/
.flexbox{
  display:flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  align-content: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  justify-content: space-between;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
}
/*フォントサイズ設定*/
.section-title{
  font-size:24px;
}
h2{
  font-size:36px;
}
h3{
  font-size:21px;
}
.column-wrap p{
  line-height:32px;
}
.fontSize16{
  font-size:16px;
}
.fontSize18{
  font-size:18px;
}
@media screen and (max-width: 899px) {
  .section-title{
    font-size:24px;
  }
  h2{
    font-size:28px;
  }
  h3{
    font-size:21px;
  }
  .column-wrap p{
    line-height:32px;
  }
  .fontSize18{
    font-size:16px;
  }
}
/* padding */
.pdTB20{
  padding-top:20px;
  padding-bottom:20px;
}
.pdTB50{
  padding-top:50px;
  padding-bottom:50px;
}
.pdT10{
  padding-top:10px;
}
.pdT30{
  padding-top:30px;
}
.pdT40{
  padding-top:40px;
}
.pdT50{
  padding-top:50px;
}
.pdT80{
  padding-top:80px;
}
.pdT100{
  padding-top:100px;
}
.pdT150{
  padding-top:150px;
}
.pdB10{
  padding-bottom:10px;
}
.pdB30{
    padding-bottom:30px;
}
.pdB50{
  padding-bottom:50px;
}
.pdB80{
  padding-bottom:80px;
}
.pdR20{
  padding-right:20px;
}
.pdL20{
  padding-left:20px;
}
/* margin */
.mrT5{
  margin-top:5px;
}
.mrT10{
  margin-top:10px;
}
.mrT15{
  margin-top:15px;
}
.mrT20{
  margin-top:20px;
}
.mrT24{
  margin-top:24px;
}
.mrT36{
  margin-top:36px;
}
.mrT40{
  margin-top:40px;
}
.mrT50{
  margin-top:50px;
}
.mrT60{
  margin-top:60px;
}
.mrT80{
  margin-top:80px;
}
.mrT100{
	margin-top:100px;
}
.mrB10{
  margin-bottom:10px;
}
.mrB16{
  margin-bottom:16px;
}
.mrB20{
  margin-bottom:20px;
}
.mrB30{
  margin-bottom:30px;
}
.mrB40{
  margin-bottom:40px;
}
.mrB50{
  margin-bottom:50px;
}
.mrB60{
  margin-bottom:60px;
}
.mrB80{
  margin-bottom:80px;
}
.mrB100{
  margin-bottom:100px;
}
.mrB135{
  margin-bottom:135px;
}
.mrB150{
  margin-bottom:150px;
}
.mrR10{
  margin-right:10px;
}
.mrL10{
  margin-left:10px;
}
.mrL30{
  margin-left:30px;
}
@media screen and (max-width: 899px) {
  .pdTB50{
    padding-top:25px;
    padding-bottom:25px;
  }
  .pdT50{
    padding-top:25px;
  }
  .pdT80{
    padding-top:40px;
  }
  .pdT150{
    padding-top:75px;
  }
  .pdB80{
    padding-bottom:40px;
  }
  .mrT60{
    margin-top:30px;
  }
  .mrT80{
    margin-top:40px;
  }
  .mrB40{
    margin-bottom:20px;
  }
  .mrB60{
    margin-bottom:30px;
  }
  .mrB80{
    margin-bottom:40px;
  }
  .mrB100{
    margin-bottom:50px;
  }
}
/*ヘッダー*/
header{
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  transition: .5s;
}
header.logo-wrap-hide{
  transform: translateY(-60px);
}
header .logo-wrap{
  height:60px;
}
nav{
  text-align:right;
  height:60px;
  line-height:60px;
}
nav a{
  position: relative;
  display: inline-block;
  color:#fff;
  font-size:18px;
  margin-left:30px;
}
nav a::after {
  position: absolute;
  bottom: 16px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.hover-line:hover::after {
  transform: scale(1, 1);
}
.logo-wrap-hide nav{
  background-color:rgba(255,255,255,0.8);
}
.logo-wrap-hide nav a{
  color:#222;
}
.logo-wrap-hide nav a::after {
  background: #222;
}
/*フッター*/
.white-line-top {
  border-top: 1px solid #fff;
}
.white-line-bottom {
  border-bottom: 1px solid #fff;
}
footer h3 {
  color:#fff;
  margin: 16px 0;
  line-height: 1.25;
}
footer a {
  color:#fff;
  position: relative;
  font-size: 14px;
}
footer a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
footer a:hover::after {
  transform: scale(1, 1);
}
footer li {
  margin-bottom: 16px;
}
.footer-company {
  width: 30%;
}
.footer-menu {
  width: 70%;
}
.footer-item {
  width: auto;
  margin-left: 4%;
}
.footer-pmark {
  align-items: center;
}
.pmark-box {
  width: 20%;
}
.pmark {
  width: 66%;
  margin: 17%;
}
.pmark-text {
  width: 80%;
}
.pmark-text p {
  font-size: 14px;
  line-height: 1.5;
}
.policy-box {
  margin-top: 20px;
}
.policy-box a {
  margin: 0 10px 20px;
  color: #222;
}
.footer-line {
  height: 50px;
  line-height: 50px;
}
@media screen and (max-width: 899px) {
  footer h3 {
    font-size: 16px;
    margin: 8px 0 0;
  }
  footer a {
    font-size: 12px;
  }
  footer li {
    margin-bottom: 8px;
  }
  .footer-company {
    width: 100%;
  }
  .footer-menu {
    width: 100%;
  }  
  .footer-item {
    margin: 0 5%;
  }
  .footer-item h3 {
    line-height: 3.2;
  }
  .footer-pmark {
    justify-content: center;
  }
  .pmark-box {
    width: 25%;
  }
  .pmark-text {
    width: 100%;
  }
  .pmark-text p {
    font-size: 12px;
  }
  .policy-box {
    text-align: left;
    margin: 0 5%;
  }
  .policy-box a {
    width: 45%;
    margin: 5% 5% 0 0;
  }
  .footer-line {
    font-size: 12px;
  }
  /* フッター */
  .sp-hide-f {
    display: block;
  }
  .sp-show-f {
    display: none;
  }
}
/*ハンバーガーメニュー*/
nav.sp-show{
  background-color:rgba(255,255,255,0.8);
}
nav.sp-show a{
  color:#222;
  display: block;
  text-align:center;
  margin-left:0px;
}
nav.sp-show a::after {
  background: none;
}
#menu-toggle[type="checkbox"]:not(:checked),
#menu-toggle[type="checkbox"]:checked {
  display: none;
}
.menu-toggle_trigger,
.menu-toggle_burger,
.menu-toggle_burger:before,
.menu-toggle_burger:after {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 30px;
  height: 5px;
  background-color: #222;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
  transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.menu-toggle_trigger {
  background: none;
}
.menu-toggle_burger:before {
  content: "";
  top: 10px;
  left: 0;
}
.menu-toggle_burger:after {
  content: "";
  top: 20px;
  left: 0;
}
.menu_body {
  position: absolute;
  right:0;
  width: 0;
  padding-top:100px;
  height: 0;
  background-color: #fcfcfc;
  border-bottom-left-radius: 100%;
  box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  z-index: 10;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
.menu_body-element{
  margin:auto;
  width:50%;
  border-bottom:2px solid #222;
}
#menu-toggle:checked + .menu-toggle_trigger + .menu-toggle_burger {
  top: 35px;
  -webkit-transform: rotate(405deg);
          transform: rotate(405deg);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu-toggle:checked + .menu-toggle_trigger + .menu-toggle_burger:before {
  top: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu-toggle:checked + .menu-toggle_trigger + .menu-toggle_burger:after {
  top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu-toggle:checked + .menu-toggle_trigger + .menu-toggle_burger + .menu_body {
  -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
          animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
#menu-toggle:checked + .menu-toggle_trigger ~ .menu_body .menu_body-element, #menu-toggle:checked + .menu-toggle_trigger ~ .menu_body .menu_body-link {
  display: block;
}
@-webkit-keyframes checkboxCheckedAnimation {
  50% {
    width: 100vw;
    height: 100vh;
  }
  100% {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}
@keyframes checkboxCheckedAnimation {
  50% {
    width: 100vw;
    height: 100vh;
  }
  100% {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}
@-webkit-keyframes checkboxUncheckedAnimation {
  0% {
    width: 100vw;
    height: 100vh;
  }
}
@keyframes checkboxUncheckedAnimation {
  0% {
    width: 100vw;
    height: 100vh;
  }
}
@-webkit-keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* nav採用情報ボタン */
.nav_button {
	position: relative;
	z-index: 1;
	padding: 0.1em;
	width: 140px;
	cursor: pointer;
	transition: color .3s cubic-bezier(.02,.01,.47,1),border-color .3s cubic-bezier(.02,.01,.47,1);
	color: #fff;
	background: transparent;
	overflow: hidden;
	border: 1px solid #fff;
	border-radius: 100px;
    font-size: 18px;
}
.logo-wrap-hide .nav_button{
    color: #222;
    border: 1px solid #222;
}
.nav_button:hover {
	background: #fff;
	color: #222;
}
.logo-wrap-hide .nav_button:hover {
	background: #222;
	color: #fff;
}
  /* フッター */
footer .f-flexbox{
  display:flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  align-content: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  justify-content: space-between;
  -ms-flex-pack: justify; 
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between;
}
.sp-hide-f{display: block;}
.sp-show-f{display:none;}
@media only screen and (max-width: 750px) {
  /* フッター */
  .cp_actab {
    position: relative;
    overflow: hidden;
    width: 70%;
  }
  .cp_actab input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .cp_actab label {
    line-height: 3;
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0 0 1px 0;
  }
  .cp_actab .cp_actab-content {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
  }
  .cp_actab .cp_actab-content p {
    margin: 1em;
  }
  /* :checked */
  .cp_actab input:checked ~ .cp_actab-content {
    max-height: 20em;
  }
  /* Icon */
  .cp_actab label::after {
    line-height: 3;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 3em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center;
  }
  .cp_actab input[type=checkbox] + label::after {
    content: '+';
  }
  .cp_actab input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
  }
  footer  .f-flexbox{
    display: none;
  }
  .sp-hide-f{display: none;}
  .sp-show-f{display:block;}
  footer .footer-item h3{
    font-size:16px;
    margin:6px 0;
  }
}
.pc-br::before {
	content: "\A" ;
	white-space: pre ;
}
@media only screen and (max-width: 750px) {
  .pc-br::before {
    content:normal;
    white-space:normal;
  }
  .sp-t-left{
    text-align: left;
  }
}
.f-color{
    color: #4d4d4d;
}
@media only screen and (max-width: 750px) {
  .footer-line{
    height: auto;
  }
  .footer-line .flexbox a {
    text-align: left;
  }
}
@media all and (-ms-high-contrast: none) {
  nav a{
    line-height: 0px;
    padding-top: 20px;
  }
}