/****reset
*****************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

a {
  -webkit-text-decoration: normal;
  text-decoration: normal;
  cursor: pointer; }

blockquote, q {
  quotes: none; }

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

input, select {
  vertical-align: middle; }

html {
font-size: 62.5%;
}

@media only screen and (max-width: 768px) {
html {
  font-size: calc(100vw / 75);
  }
}

html, body {
  width: 100%;
  height: auto; }

body {
  color: #333333;
  font-family: 'Noto Sans JP',Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  background: #ffffff;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

img {
  max-width: 100%;
  height: auto; }

a {
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

figure {
  line-height: 0; }

.center {
  text-align: center !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.left {
  text-align: left; }

.right {
  text-align: right; }

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.f_en{
font-family: 'Mulish', sans-serif;
font-weight: 800;
}
.f_alpha{
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
font-size: 120%;
padding-right: 0.2rem;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}
@media screen and (max-width: 768px) {
body.fixed {
    overflow: hidden;
}
}

.lp_main{
	position:relative;
    background: url("/pr/peakshift/img/bg_main_pc.png") top center no-repeat;
    padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
.lp_main{
    background: url("/pr/peakshift/img/bg_main_sp.png") top center no-repeat;
    background-size: 100% auto;
    padding-bottom: 10px;
}
}

.lp_main a,
.footer a,
.lp_main a img {
  opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out; }

.lp_main a:hover,
.footer a:hover,
.lp_main a:hover img {
  opacity: .85; }

/***** .p_header ****/
.lp_header{
position: relative;
height: 70px;
}
.header_logo{
max-width: 230px;
padding: 13px 0 0;
margin-left: 40px;
}
@media screen and (max-width: 768px) {
.lp_header{
height: 40px;
}
.header_logo{
width: 30%;
max-width: 114px;
height: 22px;
padding: 10px 0 0;
margin-left: 15px;
}
}

/***** lp_kv ****/
.lp_kv_wrap{
padding-bottom: 80px;
background: url("/pr/peakshift/img/bg_kv_pc.png") bottom center repeat-x;
background-size: 214px auto;
}
.lp_kv_inn{
background: #9fde9e;
}
.lp_kv_block{
position: relative;
width: 90%;
max-width: 970px;
margin: 0 auto;
padding: 80px 0 50px;
}
.lp_kv_messe{
}
.lp_kv_messe.loadani{
animation: topani01 0.8s 0s ease both;
}
.lp_kv_read1{
color: #0068b7;
font-size: 2.3rem;
}
.lp_kv_read1.loadani{
animation: topani02 1.0s 0.2s ease both;
}
.lp_kv_read2{
color: #0068b7;
font-size: 1.38rem;
margin-top: 1.5rem;
width: 52%;
}
.lp_kv_read2.loadani{
animation: topani02 1.0s 0.5s ease both;
}
.lp_kv_read2 a{
color: #FFF;
text-decoration: underline;
}
.kv_fig_01{
position: absolute;
width: 27%;
max-width: 260px;
right: 2%;
bottom: 18%;
}
.kv_fig_01.loadani{
animation: fuwafuwa01 2.8s infinite ease-in-out 0s alternate;
}
.kv_fig_02{
position: absolute;
width: 16%;
max-width: 150px;
right: 32%;
bottom: 4%;
}
.kv_fig_02.loadani{
animation: fuwafuwa02 3s infinite ease-in-out 0s alternate;
}
.kv_fig_03{
position: absolute;
width: 8.3%;
max-width: 80px;
right: 25%;
bottom: 2%;
}
.kv_fig_03.loadani{
animation: fuwafuwa02 2.5s infinite ease-in-out 0s alternate;
}
@media screen and (max-width: 768px) {
.lp_kv_wrap{
padding-bottom: 6.8vw;
background-size: auto 7vw;
overflow: hidden;
}
.lp_kv_block{
width: 90%;
margin: 0 auto;
padding: 8vw 0 7vw;
}
.kv_fig_01{
width: 55%;
max-width: inherit;
right: 0%;
bottom: auto;
top: 35vw;
}
.kv_fig_02{
width: 30%;
max-width: inherit;
right: auto;
left: 3%;
bottom: auto;
top: 35vw;
}
.kv_fig_03{
width: 20%;
max-width: inherit;
right: 48%;
bottom: auto;
top: 55vw;
}
.lp_kv_read1{
font-size: 3.4rem;
margin-top: 40vw;
}
.lp_kv_read2{
font-size: 2.4rem;
margin-top: 1.5rem;
width: 100%;
}
}
@keyframes topani01 {
  0% {
    transform: translateY(80px) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: translateY(-20px) scale(1.0);
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes fuwafuwa01 {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -7px);
  }
  100% {
    transform:translate(0, 0);
  }
}
@keyframes fuwafuwa02 {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}
@keyframes topani02 {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/***** lp_intro ****/
.lp_intro_wrap{
position: relative;
width: 90%;
max-width: 970px;
margin: 60px auto;
}
.lp_intro_l{
display: inline-block;
width: 63%;
vertical-align: middle;
}
.lp_intro_head{
max-width: 410px;
}
.lp_intro_read{
color: #0068b7;
font-size: 1.7rem;
margin: 1.0rem 0 0;
}
.lp_intro_fig{
display: inline-block;
width: 26%;
max-width: 250px;
margin-left: 5%;
vertical-align: middle;
}
@media screen and (max-width: 768px) {
.lp_intro_wrap{
width: 90%;
margin: 7vw auto 3rem;
}
.lp_intro_l{
width: 100%;
}
.lp_intro_head{
width: 80%;
max-width: 410px;
}
.lp_intro_read{
font-size: 3.0rem;
margin: 1.2rem 0 0;
}
.lp_intro_fig{
display: block;
width: 45%;
max-width: 250px;
margin: 3vw auto 0;
}
}

/***** lp_bg_wave ****/
.lp_bg_wave{
background: url("../img/bg_wave_pc.png") top center repeat;
background-size: 213px auto;
}
@media screen and (max-width: 768px) {
.lp_bg_wave{
background-size: auto 45vw;
background-position: 0 center;
}
}

/***** lp_kaden ****/
.lp_kaden_wrap{
position: relative;
width: 90%;
max-width: 970px;
margin: 0 auto;
padding: 120px 0 50px;
}
ul.lp_kaden_list {
  display: flex;
  flex-wrap: wrap;
  max-width: 910px;
  margin: 0 auto;
}
ul.lp_kaden_list  li{
  position: relative;
  width: 28%;
  background: #0068b7;
  border-radius: 30px;
  margin: 2.5%;
    opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
ul.lp_kaden_list  li:hover{
opacity: 0.9;
}
ul.lp_kaden_list  li:nth-child(2n){
  background: #9fde9e;
}
ul.lp_kaden_list  li::before {
  content: "";
  display: block;
  padding-top: 100%;
}
ul.lp_kaden_list  li a {
position: absolute;
width: 100%;
height: 100%;
display: block;
top: 0%;
left: 0%;
}
.tile_arrow{
position: absolute;
width: 10%;
max-width: 18px;
display: block;
top: 20px;
right: 20px;
}
.kaden_tile_name{
position: absolute;
width: 90%;
bottom: 15px;
left: 5%;
text-align: center;
font-size: 1.7rem;
font-weight: 700;
color: #FFFFFF;
line-height: 1.4;
}
.tile_kaden_fig{
position: absolute;
width: 80%;
top: 46%;
left: 50%;
transform: translate(-50%,-50%);
}
ul.lp_kaden_list  li:nth-child(2) .tile_kaden_fig{
top: 42%;
}
@media screen and (max-width: 768px) {
.lp_kaden_wrap{
width: 97%;
padding: 0rem 0 5rem;
}
ul.lp_kaden_list  li{
  width: 29%;
  border-radius: 3rem;
  margin: 2%;
}
.tile_arrow{
width: 9%;
max-width: 18px;
top: 1.5rem;
right: 2rem;
}
.kaden_tile_name{
bottom: 1.3rem;
font-size: 2.4rem;
line-height: 1.2;
}
.tile_kaden_fig{
width: 76%;
top: 44%;
}
ul.lp_kaden_list  li:nth-child(2) .tile_kaden_fig{
top: 40%;
}
}


/***** lp_enquete ****/
.lp_enquete_block{
width: 90%;
max-width: 1070px;
margin: 50px auto;
padding: 40px 0 40px;
background: #ebedf0;
border-radius: 30px;
color: #2c496b;
text-align: center;
}
.lp_enquete_head{
font-size: 2.3rem;
font-weight: 700;
}
.lp_enquete_read{
font-size: 1.5rem;
font-weight: 500;
margin: 0.5rem 0 2.0rem;
}
.lp_enquete_btn a{
display: inline-block;
padding: 0.6rem 1.0rem;
min-width: 400px;
background: #0068B7;
border-radius: 30px;
color: #FFFFFF;
border: solid 8px #d8dae0;
position: relative;
font-size: 1.5rem;
font-weight: 500;
}
.lp_enquete_btn a::after {
content: '';
border: 0;
border-top: solid 2px #FFFFFF;
border-right: solid 2px #FFFFFF;
display: inline-block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 768px) {
.lp_enquete_block{
width: 93%;
margin: 5rem auto;
padding: 4rem 0 4rem;
border-radius: 3rem;
}
.lp_enquete_head{
font-size: 2.8rem;
font-weight: 700;
}
.lp_enquete_read{
font-size: 2.0rem;
font-weight: 500;
margin: 0.5rem 0 2.0rem;
}
.lp_enquete_btn a{
padding: 0.8rem 10.0rem;
min-width: inherit;
border-radius: 6rem;
border: solid 4px #d8dae0;
font-size: 2.4rem;
}
.lp_enquete_btn a::after {
border-top: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
width: 8px;
height: 8px;
right: 15px;
}
}


/***** lp_footer ****/
.lp_footer_block{
width: 90%;
max-width: 1180px;
margin: 50px auto;
}
.lp_footer_head{
max-width: 230px;
}
.lp_footer_line{
max-width: 54px;
margin: 0;
padding: 0;
}
.lp_footer_inn{
margin: 30px auto;
  display: flex;
  justify-content: space-between;
}
.lp_footer_inn ul{
display: inline-block;
}
ul.lp_footer_navi li{
display: inline-block;
position: relative;
margin-right: 150px;
}
ul.lp_footer_navi li::before {
content: '';
border: 0;
border-top: solid 1px #0b62a9;
border-right: solid 1px #0b62a9;
display: inline-block;
width: 8px;
height: 8px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%) rotate(45deg);
}
.ul.lp_footer_navi li:last-child{
margin-right: 0;
}
ul.lp_footer_navi li a{
color: #0b62a9;
text-decoration: underline;
font-size: 1.4rem;
margin-left: 16px;
}
ul.lp_footer_sns li{
display: inline-block;
margin: 0 8px;
}
@media screen and (max-width: 768px) {
.lp_footer_block{
width: 93%;
margin: 5rem auto;
}
.lp_footer_head{
max-width: 114px;
}
.lp_footer_line{
max-width: 27px;
}
.lp_footer_inn{
margin: 3rem auto;
}
ul.lp_footer_navi li{
margin-right: 5rem;
}
.ul.lp_footer_navi li:last-child{
margin-right: 0;
}
ul.lp_footer_navi li::before {
width: 6px;
height: 6px;
}
ul.lp_footer_navi li a{
font-size: 2.0rem;
margin-left: 14px;
}
ul.lp_footer_sns li{
width: 30px;
margin: 0 5px;
}
}



/*popup*/
.pop-box-wrap{
width: 96%;
margin: 50px auto 50px;
}
.pop-box{
background:#0068b7;
max-width: 960px;
margin: 0 auto;
border-radius: 30px;
color: #FFFFFF;
}
.pop_main{
padding: 50px 70px 50px 70px;
margin: 0 auto;
}
.pop_head_box{
position: relative;
min-height: 10rem;
}
.pop_ttl{
display: inline-block;
vertical-align: middle;
font-size: 3.3rem;
font-weight: 700;
margin-right: 2.0rem;
}
.pop_ttl_sub{
display: inline-block;
vertical-align: middle;
font-size: 1.7rem;
font-weight: 700;
border: solid 2px #FFFFFF;
padding: 0.1rem 0.8rem 0.2rem;
border-radius: 0.8rem;
margin-right: 0.5rem;
}
.pop_ttl_fig{
float: right;
max-width: 150px;
margin-left: auto;
margin-top: -5%;
}
.pop_read{
font-size: 1.4rem;
font-weight: 500;
line-height: 1.7;
padding-right: 3.0rem;
height:auto;
max-height: calc(95vh - 100px - 100px - 10rem);
overflow-y: auto;
}
.pop_inn_ttl{
font-size: 2.2rem;
font-weight: 700;
padding-left: 1.5rem;
position: relative;
margin: 0rem 0 0.5rem;
line-height: 1.3;
}
.pop_inn_ttl:before {
    height: 75%;
    content:"";
    display:block;
    width:6px;
    background: #9fde9e;
    position: absolute;
    top:17%;
    left:0;
}
.pop_read .pop_inn_ttl:first-child{
margin-top: 0;
}
.pop_inn_ttl2{
font-size: 2.2rem;
font-weight: 700;
}
.pop_inn_read{
margin-bottom: 2.0rem;
vertical-align: middle;
}
.pop_read .pop_inn_read:last-child{
margin-bottom: 0;
}
ul.pop_inn_list1{
padding-left:1em;
text-indent:-1em;
margin-bottom: 2.0rem;
}
.pop_inn_note{
font-size: 1.4rem;
margin-top: 2.0rem;
}
.pop_inn_note a{
color: #9fde9e;
text-decoration: underline;
}
.pop_inn_note2{
margin-bottom: 2.0rem;
}
.pop_fo_big{
font-size: 200%;
margin: -0.5rem 0.2rem 0;
font-weight: 700;
/*vertical-align:baseline;*/
line-height: 1.2;
display: inline-block;
vertical-align: middle;
}
.pop_fo_col{
color: #9fde9e;
font-weight: 700;
}
.pop_inn_read sup {
	font-size: 70%;
	vertical-align: super;
	top: -0.1rem;
}
.pop_inn_fig{
margin: 0.5rem 0 0;
}
.pop_close_btn{
max-width: 100px;
margin: 2em auto 0;
}
.pop_close_btn2{
display: none;
}

@media only screen and (max-width: 768px) {
.pop-box-wrap{
margin: 40px auto 40px;
}
.pop-box{
border-radius: 3rem;
}
.pop_main{
padding: 4rem;
margin: 0 auto;
}
.pop_head_box{
min-height: 15rem;
}
.pop_ttl{
display: block;
vertical-align: middle;
font-size: 4.2rem;
font-weight: 700;
margin-right: 0;
margin-bottom: 1.0rem;
}
.pop_ttl_sub{
display: inline-block;
vertical-align: middle;
font-size: 2.2rem;
border: solid 1px #FFFFFF;
padding: 0.1rem 0.8rem 0.2rem;
border-radius: 0.8rem;
margin-right: 0.5rem;
}
.pop_ttl_fig{
float: right;
width: 20%;
max-width: 150px;
margin-left: auto;
margin-top: -2rem;
}
.pop_read{
font-size: 2.2rem;
line-height: 1.7;
padding-right: 5.0rem;
max-height: calc(85vh - 80px - 8rem - 15rem);
}
.pop_inn_ttl{
font-size: 3.0rem;
padding-left: 2.0rem;
margin: 0rem 0 0.5rem;
line-height: 1.3;
}
.pop_inn_ttl:before {
    height: 80%;
    content:"";
    display:block;
    width:4px;
    background: #9fde9e;
    position: absolute;
    top:15%;
    left:0;
}
.pop_read .pop_inn_ttl:first-child{
margin-top: 0;
}
.pop_inn_ttl2{
font-size: 3.0rem;
}
.pop_inn_read{
}
.pop_read .pop_inn_read:last-child{
margin-bottom: 0;
}
ul.pop_inn_list1{
}
.pop_inn_note{
font-size: 2.0rem;
margin-top: 2.0rem;
}
.pop_inn_note a{
}
.pop_inn_note2{
}
.pop_fo_big{
font-size: 170%;
margin: -0.5rem 0.2rem 0;
line-height: 1.2;
display: inline-block;
vertical-align: middle;
}
.pop_fo_col{
}
.pop_inn_read sup {
}
.pop_inn_fig{
margin: 0.5rem 0 0;
}

.pop_close_btn{
width: 20%;
max-width: 100px;
margin: 2em auto 0;
}
.pop_close_btn2{
position: fixed;
top: 5px;
right: 0;
max-width: 40px;
display: block;
}
}

.mfp-bg{
background: #FFF;
opacity: 0.6;
}
.mfp-content{
max-width: 960px;
}
.pop-close{
position: absolute;
top: 5px;
right: -50px;
width: 40px;
cursor: pointer;
}
@media only screen and (max-width: 1100px) {
.pop-close{
right: 15px;
}
}
@media only screen and (max-width: 768px) {
.pop-close{
width: 30px;
}
}

.mfp-container{
/*overflow-y: scroll;
width: 100%;
height: 100%;*/
}

.simplebar-scrollbar::before {
background: #ffffff;
width:3px;
}
.simplebar-scrollbar.simplebar-visible::before {
opacity: 1;
margin: 0;
padding: 0;
}
.simplebar-track {
background: #80b4db;
width:7px !important;
}

/*****フッター****/

.l-footer {
    width: 100%;
    border-top: solid 1px #4d4d4d;
    text-align: center;
}
ul.l-footer_navi{
text-align: center;
max-width: 1280px;
margin: 30px auto;
}
ul.l-footer_navi li{
display: inline-block;
width: 28%;
text-align: center;
font-size: 1.5rem;
}
ul.l-footer_navi li a{
color: #4d4d4d;
text-decoration: underline;
}
.l-footer .l-footer_inner {
background: #0068b7;
color: #FFFFFF;
padding: 1.5rem;
}
.l-footer_copy{
font-size: 1.0rem;
}
#page-top {
    position: fixed;
    bottom: 10px;
    right: 15px;
	width:65px;
	z-index:10;
	display:none;
}
#page-top img{max-width: 100%;height: auto;}
#page-top a {
    text-decoration: none;
    display: block;
  opacity: 1;
  transition: all .2s;
}
#page-top a:hover {
	opacity: 1;
}
@media (max-width : 768px) {
.l-footer {
}
ul.l-footer_navi{
margin: 3rem auto;
padding: 0 3rem;
}
ul.l-footer_navi li{
width: 32%;
font-size: 1.8rem;
}
.l-footer .l-footer_inner {
padding: 1.5rem;
}
.l-footer_copy{
font-size: 1.8rem;
}
#page-top{
    bottom: 20px;
    right: 10px;
	width:12%;
	max-width:50px;
}
}




.lp_anime {
    opacity : 0.01;
    transform : translate(0, 20px);
    transition : all 1000ms;
    }
 
.lp_anime.lp_fadein {
    opacity : 1;
    transform : translate(0, 0);
    }


/* ==========================================================================
   Helper classes
   ========================================================================== */

.pc-only{ display:inline;}
.sp-only{ display:none;}
.pc-b-only{ display: block;}
.sp-b-only{ display:none;}
@media screen and (max-width: 768px) {
.pc-only{ display:none;}
.sp-only{ display:inline;}
.pc-b-only{ display: none;}
.sp-b-only{ display:block;}
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}