@charset "utf-8";
html{ scroll-behavior: smooth;
  color:#111; background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 62.5%; font-weight: 400; letter-spacing: 0.05em;
}
body{ margin: 0; }
#spa,#task,#main,#search,#nideau_link{ overflow-x:hidden;}


/* 共通設定  */
a{ text-decoration: none; display: block; font-weight: 700;}

.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.white{ color:#fff; }

.marker{
background:linear-gradient(transparent 75%, #FFEA46 75%);
font-weight:bold;
}

.flex{ display: flex; flex-wrap: wrap; justify-content:space-between;}
.text{ font-size: 1.8rem; width:93%; margin:0 auto; line-height: 1.8;}
.title_text{ font-size: 2.4rem; font-weight: 900; line-height: 1.2; margin:10px;}

h1{ font-size: 1.4rem; padding-left: 5px}
h2{ font-size: 3.6rem; font-weight: 900; margin: 50px 10px 20px; padding:0px;}
h3{ font-size: 2.4rem; font-weight: 700; margin:10px; padding:0px; }
#task,#psa{ background: #F7F7F7 url(../images/bg01.png) no-repeat top left/40%; padding:40px 0px 80px;}
#nideau_link{ background: #B4E1FF url(../images/bg02.png) no-repeat top left/40%; padding:20px 0px 40px; }

.flex.outer { width:95%; max-width:920px; margin:20px auto; padding:30px 0 50px;}
.flex.outer .inner{ background:#fff; width:95%; max-width:420px; margin:20px auto;}

/* 終了対応 */
.gray-area {position: relative;}
.gray-background {position: absolute;top: 0;right: 0;background-color: rgba(0, 0, 0, 0.6);width: 100%;height: 100%;z-index: 10;}
.gray-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);text-align: center;z-index: 10;width: 100%;color: #fff;font-weight: bold;font-size: 30px;}
.end{text-align: center;font-size: 1.5rem;font-weight: bold;}

/* main */
#main .header_area img.logo{ width:60%; max-width:280px; padding-right:5px; vertical-align: bottom;}
#main .title_area{ background:#B4E1FF ; width:100%; width:auto; padding:40px 0px 70px}
#main .title_area img{ width:100%; max-width:500px; padding-top:50px; }
#main .title_area .lead{ display: inline-block; width:auto; background: #0061A1; padding:5px 40px; margin:0px auto 0px 0px ; font-size:2.0rem; letter-spacing: 0.07em;}
#main .title_area .title_text{ font-size: 3.8rem; line-height: 1.4; letter-spacing: 0.06em;}
#main .message_area{ margin:30px auto 100px; }

/* task */
#task .message_area{ font-size: 2.0rem; font-weight: 700; margin:30px auto;}
#task .flex .inner{ position:relative; padding: 30px 0 100px;}
#task .flex .inner .text{ font-size: 1.6rem; }
#task .flex .inner a{position: absolute; right:15px; bottom:40px;width:54%; max-width: 190px; padding:7px 0; border: solid 2px #640000;font-size: 1.8rem; color:#640000;}
#task .flex .inner a::after{ position: absolute; right:8px; bottom:10px; content:'▼'; font-size: 1.4rem; transform:rotate(-90deg); }
#task .flex .inner .end{position: absolute; right:15px; bottom:0;}
#task .title_text{ color:#3AB795;position: relative; padding: 0px 0px 20px 52px; }
#task .title_text.no2{ padding-top: 15px; }
#task .title_text::before{
  font-size:3.0rem; position: absolute;
  display: block; text-align: center;
  color:#fff; background:#3AB795; border-radius: 50%;
  width: 50px; height: 50px; line-height: 50px;
  padding: 0em;  font-weight: normal;
  left:-3px; top: 0.3rem;
}
#task .title_text.no1::before{ content:'1';}
#task .title_text.no2::before{ content:'2';}

/* search */
#search{padding:30px 0 120px;}
#search h2{ font-size: 2.8rem; display:block; background:#640000; padding:10px 0; margin:10px auto; font-weight: 700;}
#search a span{ font-size: 2.4rem; font-weight: 700; display: inline-block; margin:auto;}

#search .flex.outer{ width:90%; max-width:650px; margin: 40px auto 20px; }
#search .flex.outer a{  display:block; width:40vw; max-width:180px; height:calc(37vw - 10px); max-height:140px; color:#640000; border:#640000 solid 2px;  border-radius:30px; margin:6px; padding-top:10px; }
#search .flex.outer span.wide::first-letter{ letter-spacing: 0.5em;}
#search .flex.outer img{ width:60px; height:60px; }
#search a.job_etc { display:block; position:relative; width:90vw;  max-width:620px; color:#640000; border:#640000 solid 2px; border-radius:20px; margin:50px auto 0px; padding:15px 0; letter-spacing: 0.4em; }
#search a.accordion_outer::after{ content:"›"; font-size: 2.4rem; position: absolute; right:20px; transition: 0.4s; }
#search .job_etc.inner{ width:90vw; max-width:620px; margin:10px auto; }
#search .job_etc.inner a{ font-size: 2.2rem; font-weight: 400; margin:10px; width:35vw; max-width:180px; box-shadow: none;}
#search a.accordion_outer.rotate90::after{ transform: rotate(90deg); transition: 0.4s; bottom:12px; }

/* psa */
.psa_about{ padding-bottom:80px; }
#psa .title_area img{ display: block; width:90%; max-width:356px; margin:20px auto; }
#psa .message_area h3{
  display: inline-block; font-weight:bold; min-height:45px;
  box-sizing:border-box; border-bottom: #FFEA46 4px solid; margin:30px 0; padding:0 10px;
 }
#psa .message_area img{ width:30px; padding-bottom:10px; padding-left:10px; vertical-align: middle;}
#psa .flex .inner{ padding-bottom:50px; }
#psa .flex .inner .text{ width:88%; }
#psa .flex .inner ul{ padding-inline-start:70px; list-style-image: url(../images/icon_check.png); }
#psa .flex .inner li{ font-size: 1.8rem; margin:10px auto;}

.psa_contents h2{ margin-bottom: 50px;}
.psa_contents h3{
  position: relative; display: block;
  width:calc(98% - 86px); max-width:calc(920px - 200px);line-height: 1.2;
  margin:10px auto; padding: 10px 10px 10px 70px;
  background:#3AB795; border: 3px solid #3AB795;
}

.psa_contents h3::before {
  content:''; width: 50px; height: 100%;
  position: absolute; left: 0px; top: 0px;
  background: #fff no-repeat center center;
}
.psa_contents h3.no1::before { background-image: url(../images/step1.png); }
.psa_contents h3.no2::before { background-image: url(../images/step2.png); }
.psa_contents h3.no3::before { background-image: url(../images/step3.png); }

.psa_contents .movie{ width:97%; max-width: 650px; height:72vw; max-height:486px; margin:0px auto; }
.psa_contents .outer .gray-background {width:97%; max-width: 650px;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
.psa_contents .movie iframe{ width:100%; height:100%;}
.psa_contents .lead{ font-size:1.6rem; margin: 50px auto 0px 1.5%; }
.psa_contents aside{
  width:calc(97% - 20px); max-width: 630px; margin: 15px auto; padding:10px; font-size:1.4rem;
  background: #fff; color:#777; border:#777 solid 1px;
}
.psa_contents .arrow_img{ display: block; margin:100px auto; }
.psa_contents a{
  position:relative;
  width:95%; max-width:650px; margin: 80px auto 10px; padding:10px 0;
  background: #640000; font-size: 2.6rem;
}
.psa_contents a::after{
  content:'▼'; font-size: 1.4rem;
  position: absolute; left:20px; top:50%;
  transform:translateY(-50%) rotate(-90deg);
}

/*nideau_link*/
#nideau_link a{ background: #fff; width:95%; max-width:450px; margin:80px auto; padding:40px 0; }

/* footer */
footer{ font-size: 1.4rem;}


/*-- PC&タブレット版表示CSS --*/
@media screen and (min-width:921px){
	.sp_area,.sp_br{ display: none; }
	.pc_area{ display: block; }

  h1{ position: absolute; left:calc((100% - 920px) / 2); width:920px;}
  h2{ font-size: 4.4rem; }
  h3{ font-size: 2.8rem; }

  .text{ font-size:2.0rem; }
  .title_text{ font-size: 2.8rem;}

  #main .header_area{ height:50px; }
  #main .title_area{ position: relative; width:100%; height:450px;}

  #main .title_area .title_text{ position:absolute; left:calc((100% - 920px) / 2); font-size: 5.6rem; top:30px; margin-left:0; z-index:1;}
  #main .title_area .lead{ position:absolute; left:calc((100% - 920px) / 2); top:40px; }
  #main .title_area img{ position:absolute; right:calc((100% - 920px) / 2);  top:160px;}
  #main .message_area,  #task .message_area{ text-align: center;}
  #search h2{ width:680px; }
  #search .flex.outer a{ margin: 15px;}

  #psa .psa_about .title_area{ position:relative; width:100%; height:400px; }
  #psa .psa_about .title_area h2{ position:absolute; left:calc((100% - 920px) / 2 + 400px); top:20px; margin:0;}
  #psa .psa_about .title_area p{ position:absolute; left:calc((100% - 920px) / 2 + 400px); top:100px; width:500px; }
  #psa .psa_about .title_area img{ position:absolute; left:calc((100% - 920px) / 2); }

  #psa .flex .inner ul{ padding-inline-start:55px; }
  .psa_contents h3::before { width: 80px; }
  .psa_contents h3{ padding-left:120px; }
  .psa_contents .text{ font-size:2.4rem; width:650px; }
  .psa_contents .lead{ font-size:2.0rem; width:650px; margin:50px auto 10px;}
  .psa_contents aside{ font-size:1.6rem; line-height: 2.2; }
  .psa_contents aside p{ padding:5px 15px;}
  #nideau_link h2{ text-align: center;}
  #nideau_link .text{width:600px;}
  #nideau_link a{ padding:30px 0; }
  #nideau_link a:hover{ position: relative; top:1px; left:1px; box-shadow: 1px 1px 2px rgb(0 0 0 / 15%); }
}

/*-タブレット版表示CSS-*/
@media screen and (min-width:561px) and (max-width:920px){
	.sp_area,.sp_br{ display: none; }
	.pc_area{ display: block; }
  .flex{ justify-content:space-around;}
  #main .title_area .title_text{ font-size: 4.2rem;}
  #main .title_area img{ display: block; margin:0px 10px 0px auto; }
  #main .message_area,  #task .message_area{ text-align: center;}

  /* 終了対応 */
.gray-text {font-size: 5vw;}

/*-スマホ版表示CSS-*/
@media screen and (max-width:560px){
	html{padding-bottom: 60px;}
	.pc_area,.pc_br{ display: none; }
	.sp_area{ display: block; }

#task .flex .inner a{  background-image: linear-gradient( to right, #640000 0%, #640000 50%, #fff 50%,#fff 100% );}
#task .flex .inner a:hover,#task .flex .inner a:active{ color:#fff; right:14px; bottom:14px; }

.psa_contents a{  background-image: linear-gradient( to right, #fff 0%, #fff 50%, #640000 50%,#640000 100% ); border: solid 3px #640000;}
.psa_contents a:hover,.psa_contents a:active{ color:#640000; border: solid 3px #640000; position:relative; top:1px; left:1px; box-shadow: 1px 1px 2px rgb(0 0 0 / 15%);}

#search .flex.outer a:hover,#search .flex.outer a:active{ position: relative; top:1px; left:1px; box-shadow: 1px 1px 2px rgb(0 0 0 / 15%); }
#search a.job_etc:hover,#search a.job_etc:active{ position: relative; top:1px; left:1px; box-shadow: 1px 1px 2px rgb(0 0 0 / 15%); }

/* 終了対応 */
.gray-text {font-size: 5vw;}

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.6s ease-out;
	-ms-transform:translate(0, 20px);
	-ms-transition: all 0.6s ease-out;
 }

 .fade {
 	opacity: 0;
 	transition: all 1s ease;
	-ms-transition: all 1s ;
  }
 .arrow_img figure:nth-child(2){ transition-delay: 0.3s; }
 .arrow_img figure:nth-child(3){ transition-delay: 0.6s; }