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

/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: YakuHanRP,'M PLUS Rounded 1c',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%;}
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
button, input, select, textarea{ font-family: inherit; font-size: 100%;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, ol, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}



/*************************************************************************************************************************
* style
*************************************************************************************************************************/
html{ font-size: 14px; color: #000;}

.sp-only { display: block; }
.pc-only{ display: none;}
.pctb-only{ display: none;}


@media print, screen and (min-width: 768px){
	.sp-only { display: none; }
  .pctb-only{ display: block;}
}


@media print, screen and (min-width: 1100px){
  body{ padding: 130px 0 0;}
  .pc-only{ display: block;}
}


.custom-image {
    width: auto; /* 画像の元の幅を使用 */
    max-width: 300px; /* 最大幅を300pxに設定 */
    height: auto; /* 縦横比を維持 */
}





/* header
*************************************************************************************************************************/
.header{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px;}

.header__logo{ width: 180px; margin-left: 20px; }
.header__logo a{ display: block; height: 100%;}

.header__btns { order: 2; position: relative; }
.header__btns li:last-child { width: 60px; height: 60px; }

.header__nav{ order: 3; background: #fff; width: 100%; height: 100%; position: fixed; top: 0; left: 200vw; z-index: 2000; transition: left .6s ease-out;}
.header__nav--on{ left: 0;}
.header__nav-logo{ display: flex; justify-content: center; align-items: center; height: 19%; border-bottom: 1px solid #e6e6e6;}
.header__nav-logo img{ width: 245px;}

.header__gnav-item{ border-bottom: 1px solid #e6e6e6;}
.header__gnav-link{ display: flex; justify-content: center; align-items: center; width: 100%; height: 8vh; min-height: 55px; font-weight: 800; font-size: 18px; line-height: 1; color: #888; text-align: center;}

.header__sns{ display: flex; justify-content:space-between; width: 225px; position: absolute; bottom: 105px; left: 50%; transform: translateX(-50%);}
.header__sns-item{ width: 45px;}

.header__gnav-close{ display: flex; justify-content: center; align-items: center; background: #2896b4; width: 100%; height: 60px; position: absolute; bottom: 0; left: 0;}
.header__gnav-close img{ width: 15px;}

/*.header__btn{ display: flex; justify-content: center; align-items: center; background: #2896b4; width: 60px; height: 60px; position: fixed; bottom: 15px; border-radius: 50%; z-index: 100;}*/
.header__btn{ display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; position: absolute; right: 0; bottom: 0; }
.header__btn01{ position: fixed; right: 20px; bottom: 20px; background: #2896b4; border-radius: 50%; z-index: 100; }
/*.header__btn02{ right: 20px;}*/
.header__btn01 img{ width: 21px;}
.header__btn02 img{ width: 16px;}

/* recruit-home */
.recruit-home .header{ background: none; position: relative; z-index: 100;}
.recruit-home .header__logo{ background: url("../img/logo_white.svg") no-repeat 0 0/contain; height: 23px;}
.recruit-home .header__logo img{ display: none;}


@media print, screen and (max-height: 540px){
  .header__nav-logo{ height: 70px;}
  .header__gnav-link{ min-height: 50px;}
  .header__sns{ bottom: 65px;}
  .header__gnav-close{ height: 45px;}
}


@media print, screen and (min-width: 768px){
  .header{ height: 90px;}
  .header__logo{ width: 260px; }
  
  /* recruit-home */
  .recruit-home .header__logo{ height: 33px;}
}


@media print, screen and (min-width: 1100px){
  .header{ background: #fff; justify-content: space-between; height: 130px; padding: 35px 28px 0 38px; position: absolute; top: 0; left: 0; transition: background .3s ease-out;}
  .header--fixed{ position: fixed!important; top: -45px; z-index: 1000!important;}
  .header__logo{ width: 320px; margin-left: 0; z-index: 1000;}
  
  .header__nav{ display: flex; justify-content: space-between; align-items: center; background: none; width: 740px; height: auto; position: static;}
  .header__nav-logo{ display: none;}
  
  .header__gnav{ display: flex; justify-content: space-between; width: 600px; }
  .header__gnav-item{ border-bottom: none;}
  .header__gnav-link{ background-image: linear-gradient(to right, #64c8c8 0%,#c8e628 100%); width: 110px; height: 30px; min-height: 30px; position: relative; border-radius: 15px; font-weight: 400; font-size: 16px; color: #000;}
  .header__gnav-link::before,
  .header__gnav-link::after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
  .header__gnav-link::before{ background: #fff; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 14px;}
  .header__gnav-link::after{ width: 100%; height: 100%;
    background-image: linear-gradient(00deg, #fff, #fff), linear-gradient(00deg, #fff, #fff), linear-gradient(00deg, #fff, #fff), linear-gradient(00deg, #fff, #fff), linear-gradient(00deg, #fff, #fff);
    background-repeat: no-repeat;
    background-position: left bottom, right bottom, top right, left top;
    background-size: 100% 2px, 10px 100%, 100% 2px, 10px 100%;
  }
  .header__gnav-link:hover::after{ animation: gnav_link-border .3s linear forwards;}
  .header__gnav-link span{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; z-index: 2; border-radius: 15px; overflow: hidden;}
  .header__gnav-link span:hover{animation: gnav_link-color .2s linear .3s forwards;}
  .header__gnav-link span::after{ background-image: linear-gradient(to right, #64c8c8 0%,#c8e628 100%); content: ''; width: 0; height: 100%; position: absolute; top: 0; left: -15%; z-index: -1; transform: skew(160deg); transition-duration: .6s; transform-origin: top left; transition: all .5s ease;}
  .header__gnav-link:hover span::after{ animation: gnav_link-bg .25s linear .3s forwards;}
  
  .header__sns{ justify-content:space-between; width: 110px; position: static; transform: none;}
  .header__sns-item{ width: 30px;}
  
  .header__gnav-close{ display: none;}
  .header__btns{ display: none;}
  
  /* recruit-home */
  .recruit-home .header{ position: absolute;}
  .recruit-home .header.bgOn{ background: #fff!important;}
  .recruit-home .header__logo{ height: 41px;}
  .recruit-home .header__gnav-link{ overflow: hidden;}
  .recruit-home .header__sns-link{ display: block; height: 30px;}
  .recruit-home .header__sns-link--fb{ background: url("../img/share_facebook-white.svg") no-repeat 0 0/contain;}
  .recruit-home .header__sns-link--tw{ background: url("../img/share_twitter-white.svg") no-repeat 0 0/contain;}
  .recruit-home .header__sns-link--li{ background: url("../img/share_line-white.svg") no-repeat 0 0/contain;}
  .recruit-home .header__sns-link img{ display: none;}
}





@media print, screen and (min-width: 1200px){
  .header__logo{ width: 360px; margin-left: 0; }
  
  /* recruit-home */
  .recruit-home .header__logo{ height: 46px;}
}


/* hover animation */
@keyframes gnav_link-border{
  0%{ background-size: 100% 2px, 10px 100%, 100% 2px, 10px 100%;}
  30%{ background-size: 100% 2px, 10px 100%, 0 2px, 10px 100%;}
  45%{ background-size: 100% 2px, 10px 0, 0 2px, 10px 100%;}
  85%{ background-size: 0 2px, 10px 0, 0 2px, 10px 100%;}
  100%{ background-size: 0 2px, 10px 0, 0 2px, 10px 0;}
}
@keyframes gnav_link-color{
  0%{ color: #000;}
  100%{ color: #fff;}
}
@keyframes gnav_link-bg{
  0%{ width: 0;}
  100%{ width: 135%;}
}




/* recruit button
*************************************************************************************************************************/
/*.btn__recruit{ display: block; background: linear-gradient(to right, #ff512f 0%,#dd2476 100%); width: 186px; height: 186px; padding: 32px 0 0; position: fixed; bottom: -93px; left: 50%; z-index: 100; border: 5px solid #fff; border-radius: 50%; transform: translateX(-50%); font-weight: 800; font-size: 18px; line-height: 1.22; color: #fff; text-align: center; }*/
/* .btn__recruit{ display: block; background: linear-gradient(to right, #ff512f 0%,#dd2476 100%); width: 186px; height: 186px; padding: 32px 0 0; position: absolute; bottom: -93px; left: 50%; z-index: 100; border: 5px solid #fff; border-radius: 50%; transform: translateX(-50%); font-weight: 800; font-size: 18px; line-height: 1.22; color: #fff; text-align: center; } */
.btn__recruit{ display: block; background: linear-gradient(to right, #ff512f 0%,#dd2476 100%); width: 186px; height: 186px; padding: 32px 0 0; position: fixed; bottom: -93px; left: 50%; z-index: 100; border: 5px solid #fff; border-radius: 50%; transform: translateX(-50%); font-weight: 800; font-size: 18px; line-height: 1.22; color: #fff; text-align: center; }
.btn__recruit--fixed{ display: none;}

.btn__recruit span{ position: relative; z-index: 2;}

.btn__recruit::before{ opacity: 0; content: ""; background: linear-gradient(45deg, #dd2476 0%,#ff512f 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 50%; transition: opacity .3s ease-out;}
.btn__recruit:hover::before{ opacity: 1;}

.btn-more-wrap { margin: 45px 0 20px; }
.btn-more { display: flex; justify-content: space-between; align-items: center; width: 150px; height: 36px; margin: 0 auto; padding: 0 20px; border: 1px solid #ddd; border-radius: 18px; text-decoration: none; color: #888; cursor: pointer; transition: all 0.2s ease; }
.btn-more:hover { background-color: #eee; }
.btn-more:after { transform: rotate(135deg); width: 8px; height: 8px; border-top: 1px solid #888; border-right: 1px solid #888; margin-bottom: 5px; content: ""; }

/* character on button */
.char__move{ width: 70px; height: 60px; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); display: none; /* Added 20211213 */ }
.char__img{ background: url("../img/btn_recruit_char.png") no-repeat 0 0/140px 60px; width: 70px; height: 60px; position: relative; animation: char-anime .3s steps(2) infinite;}






@media print, screen and (min-width: 768px){
	.btn__recruit { position: fixed; }
}

@media print, screen and (min-width: 1100px){
  .btn__recruit--fv{ width: 260px; height: 260px; padding-top: 84px; position: absolute; bottom: -50px; left: 50%; font-size: 30px; line-height: 1.5; /*animation: btn-anime 3s infinite;*/}
  .btn__recruit--fixed{ display: block; width: 210px; height: 210px; padding-top: 66px; position: fixed; bottom: -300px; left: auto; right: 20px; transform: none; font-size: 24px; line-height: 1.5; transition: bottom .5s ease-out;}
  .btn__recruit--fixed--active{ bottom: 20px;}
  
  .char__move{ width: 54px; height: 46px; position: absolute;}
  .btn__recruit--fv .char__move{ top: -51px; left: 98px; transform-origin: center 175px; animation: char-rotate 6s linear infinite;}
  .btn__recruit--fixed .char__move{ top: -51px; left: 73px; transform-origin: center 150px; animation: char-rotate 5s linear infinite;}
}


/* anime */
/*
@keyframes btn-anime{
  0%{ transform:translateY(0) translateX(-50%);}
  50%{ transform:translateY(30px) translateX(-50%);}
  100%{ transform:translateY(0px) translateX(-50%);}
}
*/
@keyframes char-anime{
  to { background-position: -140px 0;}
}

@keyframes char-rotate{ 
  0%{ transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}




/* page title
*************************************************************************************************************************/
.page_ttl{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 150px; margin: 0 0 10px; position: relative; z-index: 2;}
.page_ttl::before{ content: ""; background: rgba(0,0,0,.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.page_ttl::after{ content: ""; background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 100%; height: 10px; position: absolute; bottom: -10px; left: 0;}
.page_ttl img{ width: auto; height: 35px;}
.page_ttl span{ margin: 10px 0 0; font-weight: 400; font-size: 16px; line-height: 1; color: #fff;}

.page__ttl--company{ background: url("../../company/img/bg_page_ttl-sp.jpg") no-repeat center/cover;}
.page__ttl--products{ background: url("../../products/img/bg_page_ttl-sp.jpg") no-repeat center/cover;}
.page__ttl--recruit{ background: url("../../recruit/common/img/bg_page_ttl-sp.jpg") no-repeat center/cover;}
.page__ttl--recruit-home{ background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); height: 140px; padding: 15px 0 0;}
.page__ttl--recruit-home::before{ display: none;}
.page__ttl--contact{ background: url("../../contact/img/bg_page_ttl-sp.jpg") no-repeat center/cover;}

@media print, screen and (min-width: 768px){
  .page_ttl{ height: 200px;}
  .page_ttl img{ height: 50px;}
  .page_ttl span{ margin-top: 17px;}

  .page__ttl--company{ background-image: url("../../company/img/bg_page_ttl-pc.jpg");}
  .page__ttl--products{ background-image: url("../../products/img/bg_page_ttl-pc.jpg");}
  .page__ttl--recruit{ background-image: url("../../recruit/common/img/bg_page_ttl-pc.jpg");}
  .page__ttl--recruit-home{ height: 260px; padding-top: 130px;}
  .page__ttl--contact{ background-image: url("../../contact/img/bg_page_ttl-pc.jpg");}
}




/* home title
*************************************************************************************************************************/
.home__ttl{ text-align: center;}
.home__ttl img{ width: auto; height: 30px;}
.home__ttl span{ display: block; margin: 10px 0 0; font-weight: 400; font-size: 16px; line-height: 1;}


@media print, screen and (min-width: 768px){
  .home__ttl img{ height: 40px;}
  .home__ttl span{ margin-top: 15px;}
}


@media print, screen and (min-width: 1100px){
  .home__ttl img{ height: 50px;}
}




/* section title
*************************************************************************************************************************/
.section__ttl{ text-align: center;}
.section__ttl img{ width: auto; height: 30px;}
.section__ttl span{ display: block; margin: 10px 0 0; font-weight: 400; font-size: 16px; line-height: 1;}


@media print, screen and (min-width: 768px){
  .section__ttl img{ height: 34px;}
  .section__ttl span{ margin-top: 15px;}
}


/* catch anime
*************************************************************************************************************************/
.catch-anime{ position: relative; z-index: 2; overflow: hidden;}
.catch-anime span{ margin: 10px 0 0; position: relative; border-radius: 5px; overflow: hidden; font-weight: 400; font-size: 22px; line-height: 1; color: #fff; text-align: center; white-space: nowrap;}

.catch-anime span[data-aos="aos_catch-anime"]{ transform: translateX(-100%);}
.catch-anime span[data-aos="aos_catch-anime"].aos-animate{ transform: translateX(0); background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%);}

.catch-anime span::before{ content: ""; background: #32c8ff; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.catch-anime01.aos-animate::before{ animation: toRightAnime .8s cubic-bezier(1, 0, 0, 1) forwards}
.catch-anime02.aos-animate::before{ animation: toRightAnime .8s cubic-bezier(1, 0, 0, 1) forwards}


@media print, screen and (max-width: 374px){
  .catch-anime span{ font-size: 18px;}
}


@media print, screen and (min-width: 768px){
  .catch-anime span{ margin-top: 20px; font-size: 2.0rem;}
}



/* catch animation */
@keyframes toRightAnime {
  0%{ transform: translateX(0%);}
  40%{ transform: translateX(0%);}
  100%{ transform: translateX(101%);}
}




/* bg
*************************************************************************************************************************/
.contents__bg{ background: url("../img/bg_article.png") repeat 0 0/2px 2px;}




/* news
*************************************************************************************************************************/
.news{ max-width: 740px; margin: 0 auto; overflow: hidden;}
.news__home{ padding: 5px 30px 50px;}
.news__recruit{ padding: 36px 30px 50px;}

.news__list { padding-top: 30px; }
.news__item:not(:last-child){ margin: 0 0 30px;}

.news__date{ padding: 0 0 10px; position: relative; font-weight: 800; font-size: 16px; line-height: 1;}
.news__home .news__date{ color: #ff8cc8;}
.news__recruit .news__date{ color: #000;}
.news__date::before{ content: ""; width: 100%; height: 3px; position: absolute; bottom: -3px; left: 0;}
.news__home .news__date::before{ background: #ff8cc8;}
.news__recruit .news__date::before{ background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%);}

.news__txt{ margin: 17px 0 0; line-height: 1.7;}
.news__txt strong{ font-weight: 800;}
.news__txt a{ color: #2896b4; transition: .3s;}
.news__txt a:hover{ color: #dd2476;}


@media print, screen and (min-width: 768px){
  .news{ padding: 30px 30px 100px;}
  .news__entry{ display: flex; justify-content: space-between; position: relative;}
  
  .news__entry::before{ content: ""; width: 3px; position: absolute; top: 0; left: 160px; transition: height .3s ease-out;}
  .news__home .news__entry::before{ background: linear-gradient(to bottom, #ffdc32 0%,#ff8cc8);}
  .news__recruit .news__entry::before{ background: linear-gradient(to bottom, #32c8ff 0%,#aaf032);}
  
  .news__entry[data-aos="aos_news-border-pc"]::before{ height: 0;}
  .news__entry[data-aos="aos_news-border-pc"].aos-animate:before{ height: 100%;}
  .news__date{ width: 130px; border-bottom: none; line-height: 1.7;}
  .news__date::before{ display: none;}
  .news__txt{ width: calc(100% - 190px); margin-top: 0;}
}


@media print, screen and (min-width: 1100px){
  .news{ padding: 100px 0;}
  .news__list{ padding: 50px 0 0;}
}




/* app os bg color
*************************************************************************************************************************/
.os-list{ display: flex; justify-content: space-between; }/*		max-width: 170px;		*/
/* .os-list__item{ display: flex; justify-content: center; align-items: center; width: 100%; height: 20px; border-radius: 10px; font-weight: 700; font-size: 12px; line-height: 1; color: #fff;} */
.os-list__item{ display: flex; justify-content: center; align-items: center; width: 30%; height: 20px; border-radius: 10px; font-weight: 700; font-size: 12px; line-height: 1; color: #fff;}

.os-list__item--ios{ background: #50b4f0;}
.os-list__item--android{ background: #78c81e;}
.os-list__item--pc{ background: #f0aa8c;}
.os-list__item--off{ background: #eee;}



/* links
*************************************************************************************************************************/
.links{ display: flex; flex-wrap: wrap;}
.links__item{ width: 100%;}
.links__item a{ display: block; width: 100%; height: 120px; position: relative; overflow: hidden;}
.links__item--recruit a{ background: url("../img/link_recruit.jpg") no-repeat center/cover;}
.links__item--company a{ background: url("../img/link_company.jpg") no-repeat center/cover;}
.links__item--products a{ background: url("../img/link_products.jpg") no-repeat center/cover;}
.links__item--contact a{ background: url("../img/link_contact.jpg") no-repeat center/cover;}

.links__item a::before,
.links__item a::after{ opacity: .5; content: ""; width: 100%; height: 100%; position: absolute; top: 0; transition: left .6s ease-out;}
.links__item a::before{ left: 0;}
.links__item a::after{ left: -100%;}
.links__item a:hover::before{ left: 100%;}
.links__item a:hover::after{ left: 0;}

.links__item--recruit a::before{ background: linear-gradient(to right, #64c8c8 0%,#c8e628 100%);}
.links__item--company a::before{ background: linear-gradient(to right, #ff8cc8 0%,#ffdc32 100%);}
.links__item--products a::before{ background: linear-gradient(to right, #ee9900 0%,#66ff00 100%);}
.links__item--contact a::before{ background: linear-gradient(to right, #8cb4ff 0%,#ffafec 100%);}

.links__item--recruit a::after{ background: linear-gradient(to right, #c8e628 0%,#64c8c8 100%);}
.links__item--company a::after{ background: linear-gradient(to right, #ffdc32 0%,#ff8cc8 100%);}
.links__item--products a::after{ background: linear-gradient(to right, #66ff00 0%,#ee9900 100%);}
.links__item--contact a::after{ background: linear-gradient(to right, #ffafec 0%,#8cb4ff 100%);}

.links__item a span{ display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.2); width: 180px; height: 50px; position: absolute; top: 50%; left: 50%; border: 1px solid #fff; overflow: hidden; font-weight: 700; font-size: 18px; line-height: 1; color: #fff; transform: translate(-50%,-50%); z-index: 2; transition: all .6s ease;}
.links__item:hover a span{ color: #000;}

.links__item a span::after{ background: #fff; content: ''; width: 0; height: 100%; position: absolute; top: 0; left: -15%; z-index: -1; transform: skew(160deg); transition-duration: .6s; transform-origin: top left; transition: all .6s ease;}
.links__item:hover a span::after{ width: 135%;}

/* hide link */
.links__home .links__item--products,
.links__company .links__item--company,
.links__company .links__item--recruit,
.links__products .links__item--products,
.links__products .links__item--recruit{ display: none;}


@media print, screen and (min-width: 768px){
  .links li:not(.links__item--recruit){ width: 50%;}
  .links__item a{ height: 160px;}
  .links__item a span{ width: 250px; height: 65px; font-size: 24px;}
}


@media print, screen and (min-width: 1100px){
  .links__item a{ height: 200px;}
  .links__item a span{ width: 300px; height: 80px; font-size: 30px;}
}




/* form
*************************************************************************************************************************/
input,
textarea,
select{ background: none; border: none; border-radius: 0; -webkit-appearance: none; font: 400 14px/1.7 YakuHanRP,'M PLUS Rounded 1c',"sans-serif"; text-align: left;}
input[type=radio],
input[type=checkbox]{ display: none;}


.form__text{ line-height: 1.7;}
.form__text a{ color: #2896b4; transition: .3s;}
.form__text a:hover{ color: #dd2476;}
.form-thanks__text{ display: flex; justify-content: center; padding: 10px; line-height: 1.7;}

.form-step{ display: flex; justify-content: space-between; max-width: 315px; margin: 20px auto 0; position: relative;}
.form-step::before,
.form-step::after{ content: ""; background: #ccc; width: 18px; height: 2px; position: absolute; top: 50%; transform: translate(0,-50%);}
.form-step::before{ left: calc((100% - 72px) / 3 + 10px);}
.form-step::after{ right: calc((100% - 72px) / 3 + 10px);}
.form-step__item{ display: flex; justify-content: center; align-items: center; background: #ccc; width: calc((100% - 72px) / 3); max-width: 81px; height: 40px; border-radius: 20px; font-size: 15px; line-height: 1; color: #fff;}
.form-step__item--on{ background: #ffb45e;}

.form-box{ background: #fff; max-width: 1000px; margin: 30px auto 0; padding: 30px; border-radius: 20px;}

.form-input__dt{ display: flex; align-items: center; margin: 40px 0 13px; font-weight: 800; font-size: 16px; line-height: 1.5;}
.form-input__dt:first-child{ margin-top: 0;}
.form-input__dt.file{ flex-direction: column; align-items: flex-start;}
.form-input__dt--sub{ margin: 0 0 0 3px; font-size: 12px;}

.form-required{ display: flex; justify-content: center; align-items: center; background: #ffb45e; width: 40px; height: 20px; margin: 0 0 0 13px; border-radius: 10px; font-weight: 400; font-size: 12px; line-height: 1; color: #fff; white-space: nowrap; transition: .2s;}
.form-required--valid{ width: 20px; background: url("../../common/img/ico_valid.svg") no-repeat center/20px 20px #2896b4; text-indent: 100%; overflow: hidden; font-size: 0; line-height: 0;}

.form-sub{ font-weight: 400; font-size: 14px; line-height: 1.5; color: #999;}
.form-txtlmt{ margin: 7px 0 0;}
.form-mail__confirm{ margin: 10px 0; line-height: 1.5;}

.form-notes01{ margin: 30px 0 0;}
.form-notes01__item{ padding: 0 0 0 1rem; position: relative; line-height: 1.7;}
.form-notes01__item::before{ content: "・"; position: absolute; top: 0; left: 2px;}
.form-notes02{ margin: 15px 0 0;}
.form-notes02__item{ padding: 0 0 0 1rem; position: relative; line-height: 1.7;}
.form-notes02__item::before{ content: "※"; position: absolute; top: 0; left: 0;}

.form-privacy{ display: flex; justify-content: center; align-items: center; margin: 50px 0 0;}
.form-privacy a{ display: inline-block; padding: 0 24px 0 0; position: relative; font-size: 18px; line-height: 1; color: #2896b4;}
.form-privacy a::after{ content: ""; background: url("../../common/img/ico_arrow-b_blue.svg") no-repeat 0 0/contain; width: 16px; height: 10px; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg);}
.form-agree{ display: flex; justify-content: center; margin: 20px 0 0;}
.form-btn{ max-width: 360px; margin: 50px auto 0;}

.form-btn__list{ max-width: 780px; margin: 0 auto;}
.form-btn__item{ max-width: 360px; margin: 30px auto 0;}



@media print, screen and (min-width: 768px){
  .form__text{ text-align: center;}
  
  .form-step{ width: 580px; max-width: none; margin-top: 55px}
  .form-step::before,
  .form-step::after{ width: 60px;}
  .form-step::before{ left: 150px;}
  .form-step::after{ right: 150px;}
  .form-step__item{ width: 140px; max-width: none;}
  
  .form-box{ max-width: 1100px; margin-top: 40px; padding: 50px;}
  .form-input__dt{ margin-top: 50px;}
  .form-input__dt.file{ flex-direction: row; align-items: center;}
  .form-input__dt.file .form-sub{ margin: 0 0 0 15px;}
  
  .form-preview .form-input__dt{  margin: 50px 0 30px;}
  .form-preview .form-input__dt:first-child{ margin-top: 0;}
  .form-preview .form-input__dd{ margin: 0 0 0 18px;}
  
  .form-sub{ font-size: 16px;}
  .form-mail__confirm{ margin: 13px 0;}
  .form-notes01{ margin-top: 40px}
  .form-notes02{ margin-top: 20px;}
  
  .form-privacy{ margin-top: 60px;}
  .form-agree{ margin-top: 30px;}
  .form-btn{ margin-top: 60px;}
  
  .form-btn__list{ display: flex; justify-content: space-between;}
  .form-btn__item{ width: calc(50% - 30px); max-width: none; margin: 60px 0 0;}
}



/* text / textarea */
.form-text,
.form-textarea{ background: #e6f0f0; width: 100%; border-radius: 7px;}
.form-text{ height: 40px; padding: 0 13px;}
.form-textarea{ display:block; height: 170px; padding: 13px;}

@media print, screen and (min-width: 768px){
  .form-text{ height: 50px; padding: 0 18px;}
  .form-textarea{ padding: 18px;}
}


/* radio / checkbox */
.form__label--radio,
.form__label--checkbox,
.form__label--agree{ position: relative; line-height: 20px; cursor: pointer;}
.form__label--radio{ padding: 0 0 0 35px;}
.form__label--checkbox{ padding: 0 0 0 35px;}
.form__label--agree{ padding: 0 30px 0 0;}

.form__label--radio::after,
.form__label--checkbox::after,
.form__label--agree::after{ display: block; content: ''; background: #fff; position: absolute; top: -1px;}
.form__label--radio::after{ width: 16px; height: 16px; left: 0; border: 2px solid #ffb45e; border-radius: 50%;}
.form__label--checkbox::after{ width: 19px; height: 19px; top: 0; left: 0; border-top: 1px solid #ffb45e; border-left: 1px solid #ffb45e; transition: .2s;}
.form__label--agree::after{ width: 16px; height: 16px; right: 0; border: 2px solid #ddd;}

.form__label--radio::before,
.form__label--checkbox::before,
.form__label--agree::before{ display: block; content: ""; position: absolute; z-index: 2;}

.form__label--radio::before{ opacity: 0; background: #ffb45e; width: 10px; height: 10px; top: 4px; left: 5px; border-radius: 50%;}
.form__label--checkbox::before{ width: 19px; height: 19px; top: 0; left: 0; border-bottom: 1px solid #ffb45e; border-right: 1px solid #ffb45e; transition: .2s;}
.form__label--agree::before{ opacity: 0; width: 5px; height: 12px; top: -1px; right: 6px; border-right: 3px solid #2896b4; border-bottom: 3px solid #2896b4; transform:rotate(45deg);}

input[type=radio]:checked + .form__label--radio::before{ opacity: 1;}
input[type=checkbox]:checked + .form__label--checkbox::before{ width: 8px; height: 18px; left: 5px; transform: rotate(45deg); transform-origin: center right;}
input[type=checkbox]:checked + .form__label--checkbox::after{ opacity: 0; width: 0; height: 0;}
input[type=checkbox]:checked + .form__label--agree::before{ opacity: 1;}

.form-checklist_item--disable .form__label--checkbox{ pointer-events: none; color: #eee;}
.form-checklist_item--disable .form__label--checkbox::after{ border-top-color: #eee; border-left-color: #eee;}
.form-checklist_item--disable .form__label--checkbox::before{ border-bottom-color: #eee; border-right-color: #eee;}


/* selectbox */
.form-select01{ background: #e6f0f0; width: 100%; position: relative; border-radius: 7px; overflow: hidden; z-index: 2;}
.form-select01::before{ content: ""; background: #fff; width: 2px; height: 100%; position: absolute; top: 0; right: 40px;}
.form-select01::after{ content: ""; background: url("../img/ico_arrow-b_blue.svg") no-repeat 0 0/contain; width: 17px; height: 10px; position: absolute; top: 50%; right: 11px; z-index: -1; transform: translateY(-50%);}
.form-select01 select{ background: transparent; width: 150%; height: 40px; padding: 0 0 0 13px;}

.form-select02{ background: #e6f0f0; width: 100%; position: relative; border-radius: 7px; overflow: hidden; z-index: 2;}
.form-select02::after{ content: ""; background: url("../img/ico_select.svg") no-repeat 0 0/contain; width: 6px; height: 10px; position: absolute; top: 50%; right: 7px; z-index: -1; transform: translateY(-50%);}
.form-select02 select{ background: transparent; width: 150%; height: 40px; padding: 0 0 0 13px;}

@media print, screen and (min-width: 768px){
  .form-select01::before{ right: 52px;}
  .form-select01::after{ width: 20px; height: 12px; right: 16px;}
  .form-select01 select{ height: 50px; padding-left: 18px;}
  
  .form-select02 select{ height: 50px; padding-left: 18px;}
}


/* file */
.form-file{ position:relative; }
.form-file div{ display: block; background: #2896b4; width: 140px; height: 40px; position: relative; border-radius: 7px; color: #fff; line-height: 40px; text-align: center; cursor: pointer;}
.form-file div span{ width: 100%; position: absolute; top: 0; left: 0;}
.form-file div input[type="file"]{ opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer;}
.form-file #val{ display: none; background: #fff; width: 100%; margin: 5px 0 0; padding: 0; border: none; border-radius: 0; color: #000;}
.form-file .form-file__err{ font-weight: bold; color: #d82023; line-height: 1.5;}
.form-file a{ display: none; background: #999; width: 100px; margin: 5px 0 0; padding: 10px 20px; border-radius: 7px; line-height: 1; color: #fff; text-align: center;}

@media print, screen and (min-width: 768px){
  .form-file div{ width: 134px; height: 50px; line-height: 50px;}
  .form-file #val{ width: calc(100% - 180px); margin-top: 0; position: absolute; top: 13px; left: 155px;}
  .form-file a{ display: none; margin: 0; position: absolute; top: 8px; right: 0;}
}


/* submit / back */
.form-submit,
.form-back{ display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; padding: 0; position: relative; z-index: 2; border: none; border-radius: 30px; overflow: hidden; font-size: 20px; color: #fff;}
.form-submit{ background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%);}
.form-submit::before,
.form-submit::after{ opacity: 0; content: "";  width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: .3s ease-out;}
.form-submit::before{ background: linear-gradient(to right, #aaf032 0%,#32c8ff 100%);}
.form-submit::after{ background: #ddd;}
.form-submit:hover::before{ opacity: 1;}
.form-submit--disable{ pointer-events: none;}
.form-submit--disable::after{ opacity: 1;}
.form-back{ background: #2896b4; transition: .3s ease-out;}
.form-back:hover{ background: #3eb9d6;}

@media print, screen and (min-width: 768px){
  .form-submit,
  .form-back{ font-size: 25px;}
}


/* placeholder */
::-webkit-input-placeholder{ line-height: 1.7; color: #999;}
:-ms-input-placeholder{ line-height: 1.7; color: #999;}
::-ms-input-placeholder{ line-height: 1.7; color: #999;}
::-moz-placeholder{ line-height: 1.7!important; color: #999;}
::placeholder{ line-height: 1.7; color: #999;}

:focus::-webkit-input-placeholder{ color: transparent;}
:focus:-ms-input-placeholder{ color: transparent;}
:focus::-ms-input-placeholder{ color: transparent;}
:focus::-moz-placeholder{ color: transparent;}
:focus::placeholder{ color: transparent;}




/* privacy policy
*************************************************************************************************************************/
.privacy-policy{ opacity: 0; background: rgba(255,255,255,.95); width: 100%; height: 100%; padding: 40px 20px; position: fixed; top: 0; left: 0; z-index: -100; overflow-y: scroll; -webkit-overflow-scrolling: touch; transition: opacity .5s;}
.privacy-policy.on{ opacity: 1; z-index: 10000;}
.privacy-policy h3{ font-size: 22px; line-height: 1; color: #000; text-align: center;}
.privacy-policy div{ max-width: 600px; margin: 30px auto 0;}
.privacy-policy div dl{ margin: 30px 0 0;}
.privacy-policy div dl dt{ margin: 30px 0 10px; padding: 0 0 5px; border-bottom: 1px solid rgba(0,0,0,.1); font-weight: bold;}
.privacy-policy div dl dd ul{ margin: 15px 0 0;}
.privacy-policy div dl dd ul li{ padding: 0 0 0 1rem; position:relative;}
.privacy-policy div dl dd ul li:before{ content: "・"; position: absolute; top: 0; left: 0;}
.privacy-policy > a{ display: block; background: url("../img/btn_close.svg") no-repeat center/14px 14px #ffb45e; width: 40px; height: 40px; position: fixed; top: 10px; right: 10px; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap;}

@media print, screen and (min-width: 680px){
  .privacy-policy{ padding: 60px 40px;}
  .privacy-policy h3{ font-size: 28px;}
  .privacy-policy div{ margin-top: 50px;}
}




/* footer
*************************************************************************************************************************/
.footer{ max-width: 1000px; margin: 0 auto; padding: 45px 0 140px;}
.footer-nav{ display: none;}

.footer__sns{ display: flex; justify-content:space-between; width: 225px; margin: 0 auto;}
.footer__sns-item{ width: 45px;}

.footer__logo{ width: 180px; margin: 60px auto 0;}
.footer__copyright{ margin: 20px 0 0; font-size: 10px; line-height: 1; text-align: center;}


@media print, screen and (min-width: 768px){
  .footer{ padding-top: 70px;}
}


@media print, screen and (min-width: 1100px){
.footer{ display: flex; flex-direction: row-reverse; justify-content: space-between; padding-bottom: 90px;}

.footer-nav{ display: flex; flex-direction: column; justify-content: space-around; height: 160px; margin: 10px 0 0; padding: 0 0 0 35px; position: relative;}
.footer-nav::before{ content: ""; background: linear-gradient(80deg, #32c8ff 0%,#aaf032 100%); width: 3px; height: 100%; position: absolute; top: 0; left: 0; border-radius: 2px;}
.footer-nav__item{ display: flex; align-items: center;}
.footer-nav__item--parent{ width: 95px;}
.footer-nav__item > a,
.footer-nav__item--parent a{ font-weight: 800; font-size: 14px; line-height: 1; color: #000;}
.footer-nav__subs{ display: flex;}
.footer-nav__sub-link::after{ content: "／"; margin: 0 7px;}
.footer-nav__sub-link:last-child::after{ display: none;}
.footer-nav__sub-link a{ font-size: 12px; line-height: 1; color: #000;}

.footer-box{ display: flex; flex-direction:column; }
.footer__sns{ order: 2; width: 112px; margin: 22px 0 0;;}
.footer__sns-item{ width: 32px;}

.footer__logo{ order: 1; width: 240px; margin: 0;}
.footer__copyright{ order: 3; margin: 74px 0 0; font-size: 11px; text-align: left;}
}








/* news list accordion
*************************************************************************************************************************/
.news__list--wrap {
	height: 400px;
	overflow: hidden;
	transition: all 0.2s ease;
	position: relative;
}
.news__list--wrap:after {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 10%;
	opacity: 1;
	content: "";
	left: 0;
	transition: all 0.2s ease;
	background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 50%);
}
.news__list--wrap.no-fade {
	background: none;
	height: auto;
}
.news__list--wrap.no-fade:after { display: none; }
.news__list {
	width: 100%;
	position: relative;
	transition: all 0.2s ease;
}
.expand-news__list--wrap:checked + .news__list--wrap {
	transition: all 0.2s ease;
}
.expand-news__list--wrap:checked + .news__list--wrap:after {
	transition: all 0.2s ease;
	opacity: 0;
	height: 0%;
}

.expand-news__list--wrap:checked + .news__list--wrap + .btn-more-wrap .expand-news__list--wrap-label:after {
	transition: all 0.2s ease;
	transform: rotate(-45deg) translateY(6px) translateX(-2px);
}

@media print, screen and (min-width: 768px){
	.news__list--wrap:after {
		height: 15%;
	}
}