@charset 'utf8';
*{
  margin: 0; 
  padding: 0; 
}
*, *:before, *:after { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -o-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box; 
  font-weight: 400;
}
html,body{
  width: 100%; 
  margin: 0; 
  padding: 0; 
  color: #000;
  background-image: url(../images/bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
html{
  font-size: 62.5%; 
  overflow-y: scroll; 
  -webkit-text-size-adjust: 100%; 
  -webkit-tap-highlight-color: transparent;
}
body{ 
  font-size: 1.6rem; 
  font-family: 'Noto Sans JP', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; 
  word-break: break-all; 
}
@font-face { 
  font-family: 'Noto Sans JP'; src: url(../font/NotoSansCJKjp-Regular.woff2) format("woff2"); 
  font-style: normal; 
  font-weight: 400; 
  font-display: swap;
}
@font-face { 
  font-family: 'Noto Sans JP'; src: url(../font/NotoSansCJKjp-Medium.woff2) format("woff2"); 
  font-style: normal; 
  font-weight: 500; 
  font-display: swap;
}
@font-face { 
  font-family: 'Noto Sans JP'; src: url(../font/NotoSansCJKjp-Bold.woff2) format("woff2"); 
  font-style: normal; 
  font-weight: 700; 
  font-display: swap;
}

ul li{
  list-style: none;
}

:root {
  --red01: #c4000a; /* ロゴで使用している赤 */
  --blue01: #0064b0; /* ロゴで使用している青 */
  --yellow01:#ec8800; /* ロゴで使用している黄 */
  --red02: #e60012; 
  --blue02: #005ac4;
  
  --yellow02: #ff8000; 
  --yellow03: #ffd200; 
  
  --pink01: #ff5064;
  --gold01: #c99647;
  --green01: #009250;
  --orange01: #ff8200;
  
}
.txt_red01{
  color: var(--red01);
}
.txt_blue01{
  color: var(--blue01);
}
.txt_small01{
  font-size: 1.1rem;
}
.txt_small02{
  font-size: 1.2rem;
}
.attention01 li{
  text-indent: -1em;
  margin: 0 0 0.7em 1em;
  font-size: 1.3rem;
  line-height: 1.2;
}
.mb1{
  margin-bottom: 1em !important;
}
.mb2{
  margin-bottom: 2em !important;
}
@media all and (min-width:500px),print {
  .sp{display: none;}
}


/* #project01,
#project02,
#project03,
#project04,
#project05,
#project06,
#project07,
#project08,
#project09{
   scroll-padding-top: 100px; 
    scroll-behavior: smooth;
}
 */

#wrap{
  overflow: hidden;
}
#overlay{
  width: 100%;
  height: 100vh;
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  animation: fadeout ease-in 2s forwards;
}
@keyframes fadeout {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

header{
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}



#hamburger_wrap{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}
#hamburger_wrap #hamburger{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2500;
  cursor: pointer;
  background: url(../images/nav_open.png) no-repeat;
  background-size: contain;
}
.active #hamburger_wrap #hamburger{
  background: url(../images/nav_close.png) no-repeat;
  background-size: contain;
}


@media all and (min-width:1230px),print {
  #hamburger{
    display: none;
  }
}

header nav{
  display: none;
  width: 100%;
  height: 100vh;
  padding: 40px 0 15vh;
  background: var(--blue01);
  position: fixed;
  top: 0px;
  right: 0px;
}



.active header nav{
  display: block;
}

@media all and (min-width:1200px),print {
  header{
    z-index: 0;
  }
  header nav{
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: block;
    background: none;
    position: relative;
  }
  header nav .nav_r {
    width: calc(50% - 250px);
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
  }
  header nav .nav_r > div{
    width: 300px;
    height: auto;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translate(-50% , -50%);
  }

  header nav .nav_r .nav_logo{
    display: none;
  }
  header nav .nav_l{
    width: calc(50% - 250px);
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
  }  
  header nav .nav_l img{
    width: 270px;
    height: auto;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translate(-50% , -50%);
  }  


  
}
header nav a{
  text-decoration: none;
  color: #fff;
  font-weight: 400;
}
header .nav_head{
  width: 80%;
  margin: 0 auto 20px;
  text-align: center;
}
header .nav_head img{
  width: 100%;
  max-width: 240px;
  height: auto;
}
.nav_link{
  margin: 0 0 20px;
}
.nav_link li{
  margin: 0 0 14px;
  text-align: center;
}
.nav_link li a, 
header nav .menu li, 
header nav .menu li a{ 
  font-size: 1.7rem;
}
header nav .menu ul{
  width: 50%;
}
header nav .menu li{
  color: #4d93c8;
  margin: 0 0 20px;
  font-weight: 400;
  text-align: center;
}
header nav .menu li a{ 
  font-weight: 400;
}
header nav .menu{
  width: 80%;
  max-width: 270px;
  margin: 0 auto 25px;
  display: flex;
}
@media all and (min-width:1200px),print {
  header .nav_head img{
    width: 100%;
    max-width: 300px;
    height: auto;
  }
  header nav .menu{
    width: 270px;
  }
  header nav .menu ul:first-of-type li{
    text-align: left;
  }
  header nav .menu ul:last-of-type li{
    text-align: right;
  }
  header .nav_r a:hover{
    color: var(--yellow03);
    transition: 0.3s;
  }
  header .nav_head{
    width: 270px;
  }
  .nav_link li a, 
  header nav .menu li, 
  header nav .menu li a{ 
    font-size: 1.7rem;
  }
}
header .nav_logo{
  text-align: center;
}

header .nav_l{
  display: none;
}

main{
  width: 100%;
  background: #fff;
  max-width: 500px;
  overflow: hidden;
}
@media all and (min-width:500px),print {
  main{
    margin: 0 auto;
  }
}
@media all and (min-width:1680px),print {
  main{
    z-index: 2000;
    position: relative;
  }
}
h1{
  margin: 0;
  padding: 0;
}
h1 img{
  width: 100%;
  height: auto;
  max-width: 500px;
}



#lead{
  padding: 20px 0 100px;
  overflow: hidden;
  background-image: url(../images/carousel.png);
  background-position: left bottom;
  background-size: auto 146px;
  background-repeat: repeat-x;
  animation: loop 80s linear infinite;
  will-change: transform;
}


@keyframes loop {
	0% {
		background-position: 0 bottom;
	}
	100% {
		background-position: -3374px bottom;
	}
}

#lead .lead_year{
  margin: 0 0 60px;
}
#lead .lead_year img{
  width: 100%;
  height: auto;
}
#lead .lead_txt {
  margin: 0 0 60px;
  text-align: center;
  font-size: 1.7rem;
  line-height: 2.2;
  position: relative;
}
#lead .lead_txt:before,
#lead .lead_txt:after {
  position: absolute;
  content: "";
  display: block;  
}
#lead .lead_txt:before{
  width: 80px;
  height: 80px;
  background: url(../images/lead_kira01.png) no-repeat 0 0;
  background-size: contain;
  top: -40px;
  right: 0;
}
#lead .lead_txt:after{
  width: 80px;
  height: 80px;
  background: url(../images/lead_kira02.png) no-repeat 0 0;
  background-size: contain;
  bottom: -15px;
  left: 0;
}


#lead .lead_txt p{
  margin: 0 0 0.5em;
  padding: 0 0 1.7em;
  position: relative;
}
#lead .lead_txt p:before{
  width: 23px;
  height: 23px;
  position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  display: block;
  background: url(../images/lead_kira_gray.png) no-repeat 0 0;
  background-size: contain;
}
#lead .lead_txt p:last-of-type:before{
  display: none;
}

#project20s{
  padding: 40px 10px 300px;
  background: #001daf;
  position: relative;
}
@media all and (min-width:768px),print {
  #project20s{
    padding: 40px 10px 260px;
  }
}
#project20s:before{
  width: 100%;
  height: 300px;
  background: url(../images/bg_20pro_01.png) no-repeat 10px 10px;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
}
#project20s:after{
  width: 100%;
  height: 300px;
  background: url(../images/bg_20pro_02.png) no-repeat 10px 10px;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  display: block;
}


#project20s h2 {
  margin: 0 0 30px;
  text-align: center;
}
#project20s h2 img{
  width: 90%;
  height: auto;
}

.project20s_wrap{
  display: grid;
  grid-template-columns: 32% 32% 32%;
  gap: 2%;
}
@media all and (min-width:768px),print {
  .project20s_wrap{
    display: grid;
    grid-template-columns: 32% 32% 32%;
    gap: 1% 2%;
  }
}

.project20s_wrap > div{
  position: relative;
}
.project20s_01 a,
.project20s_02 a,
.project20s_03 a,
.project20s_04 a,
.project20s_05 a,
.project20s_06 a,
.project20s_07 a,
.project20s_08 a,
.project20s_09 a{
  height: 100%;
  padding: 0;
  text-decoration: none;
  line-height: 1.2;
  display: block;
  border-radius: 20px;
  overflow: hidden;
}
.project20s_wrap > div a:hover {
  opacity: 0.6;
  transition: 0.2s;
}

.project20s_wrap img {
  width: 100%;
  height: auto;
}


.project_lead{
  margin: 0 0 30px;
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.7;
  position: relative;
}
.project_lead span{
  font-weight: 700;
}
@media all and (min-width: 768px),print {
  .project_lead{
    margin: 0 0 60px;
    font-size: 1.7rem;
  }
}

#project01{
  padding: 30px 0 160px;
}
#project02{
  padding: 30px 0 220px;
}
#project05{
  padding: 30px 0 120px;
}
#project03,
#project04,
#project06,
#project07,
#project08,
#project09{
  padding: 30px 30px 220px;
}

#project03 article,
#project04 article,
#project05 article,
#project06 article,
#project07 article,
#project08 article,
#project09 article{
  background: #fff;
  border-radius: 12px;
  border: 3px solid var(--gold01);
}

#project08 article,
#project09 article{
  padding: 20px;
}

#project01,
#project02,
#project03,
#project04,
#project05,
#project06,
#project07,
#project08,
#project09,
#project_cs{
  position: relative;
}
#project01 h2,
#project02 h2,
#project03 h2,
#project04 h2,
#project05 h2,
#project06 h2,
#project07 h2,
#project08 h2,
#project09 h2,
#project_cs h2{
  width: 110%;
  height: 150px;
  padding: 60px 0 0;
  border-radius: 50% / 100% 100% 0 0;
  display: block;
  text-align: center;
  content: "";
  position: absolute;
  top: -145px;
  left: -5%;
}

@media all and (min-width:500px),print {
  #project01 h2,
  #project02 h2,
  #project03 h2,
  #project04 h2,
  #project05 h2,
  #project06 h2,
  #project07 h2,
  #project08 h2,
  #project09 h2,
  #project_cs h2{
    width: 540px;
    height: 150px;
    padding: 60px 0 0;
    border-radius: 50% / 100% 100% 0 0;
    display: block;
    text-align: center;
    content: "";
    position: absolute;
    top: -148px;
    left: -20px;
  }
}

#project01 h2 {
  background: #ffb466;
}
#project02 h2{
  background: #ffe466;
}
#project03 h2{
  background: #ffaeae;
}
#project04 h2{
  background: #89d6b3;
}
#project05 h2{
  background: #ffb1de;
}
#project06 h2{
  background: #96d3ef;
}
#project07 h2{
  background: #cfade4;
}
#project08 h2{
  background: #ffb466;
}
#project09 h2{
  background: #ffe466;
}
#project_cs h2{
  content: "";
  background: #c5c6c6;
}


.content_wrap{
  padding: 20px;
}


/* ==============================
   #project01
   ==============================*/

#project01{
  background: url(../images/bg_pro_01.jpg) ;
}
#project01 h2:before{
  width: 20%;
  max-width: 136px;
  height: 131px;
  display: block;
  content: "";
  background: url(../images/pro01_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  right: 5%;
}
#project01 h2:after{
  width: 8%;
  max-width: 54px;
  height: 54px;
  display: block;
  content: "";
  background: url(../images/pro01_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -29%;
  left: 10%;
}
.pro01_img img{
  width: 100%;
  height: auto;
  margin: 0 0 40px;
}

#project01 .project_lead{
  position: relative;
}
#project01 .project_lead:after{
  width: 12%;
  max-width: 53px;
  height: 52px;
  display: block;
  content: "";
  background: url(../images/pro01_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 15%;
  left: 3%;
}

#project01 .btn a,
#project01 .btn a span{
  font-weight: 700;
  font-size: 2.3rem;
}
#project01 .btn a{
  width: 90%;
  margin: 0 auto 100px;
  padding: 0.5em;
  text-align: center;
  display: block;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 15px;
  font-weight: 700;
}
#project01 .btn a span{
  color: #ff2b7c;
}
#project01 .btn a:hover{
  opacity: 0.6;
  transition: 0.2s;
}
@media all and (min-width:768px),print {
  #project01 .btn a,
  #project01 .btn a span{
    font-weight: 700;
    font-size: 3.0rem;
  }
}



/* ==============================
   #project02
   ==============================*/
#project02{
  background: url(../images/bg_pro_02.jpg) ;
}
#project02 h2:before{
  width: 20%;
  max-width: 53px;
  height: 52px;
  display: block;
  content: "";
  background: url(../images/pro02_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 10%;
  left: 10%;
}
#project02 h2:after{
  width: 18%;
  max-width: 128px;
  height: 112px;
  display: block;
  content: "";
  background: url(../images/pro02_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -30%;
  right: 8%;
}
#project02 .project_lead:after{
  width: 10%;
  max-width: 53px;
  height: 53px;
  display: block;
  content: "";
  background: url(../images/pro02_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -10%;
  left: 5%;
}
.pro02_img {
  width: 90%;
  margin: 0 auto 30px;
  max-width: 501px;
}
.pro02_img img{
  width: 100%;
  height: auto;
}


/* ==============================
   #project03
   ==============================*/
#project03{
  background: url(../images/bg_pro_03.jpg) ; 
}
#project03 h2:before{
  width: 20%;
  max-width: 136px;
  height: 120px;
  display: block;
  content: "";
  background: url(../images/pro03_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 15%;
  left: 7%;
}
#project03 h2:after{
  width: 18%;
  max-width: 114px;
  height: 114px;
  display: block;
  content: "";
  background: url(../images/pro03_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -50%;
  right: 5%;
}
#project03 .project_lead:after{
  width: 10%;
  max-width: 54px;
  height: 54px;
  display: block;
  content: "";
  background: url(../images/pro03_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -35%;
  left: 0%;
}
.pro03_img {
  width: 80%;
  margin: 0 auto 30px;
  max-width: 343px;
}
.pro03_img img{
  width: 100%;
  height: auto;
}
.pro03_img02{
  width: 80%;
  margin: 30px auto 0;
  max-width: 400px;
}
.pro03_img02 img{
  width: 100%;
  height: auto;
}

#project03 article{
  margin: 50px 0 0;
  position: relative;
}

#project03 h3{
  width: 100%;
  text-align: center;
  position: absolute;
  top: -25px;
  left: 0;
}
#project03 h3 span{
  padding: 0.3em 1em;
  font-weight: 700;
  font-size: 2.7rem;
  color: #fff;
  background: var(--pink01);
  border-radius: 200px;
  display: inline-block;
}
#project03 .title_list_wrap{
  padding: 30px 15px;
  background: #ffe4e4;
  position: relative;
}
#project03 .title_list_wrap h4 {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
#project03 .title_list_wrap h4 span {
  margin: 0 25px;
  padding: 5px;
  font-weight: 700;
  font-size: 2.0rem;
  color: #fff;
  background: #000;
  border-radius: 0 0 10px 10px;
  display: block;
}
#project03 h5{
  width: 100%;
  height: 2.6em;
  display: block;
  margin: 30px 0 15px;
}

#project03 h5:nth-of-type(1){
  background: url(../images/pro_03_h5_01.png) no-repeat 50% 50%;
  background-size: cover;
}
#project03 h5:nth-of-type(2){
  background: url(../images/pro_03_h5_02.png) no-repeat 50% 50%;
  background-size: cover;
}
#project03 h5:nth-of-type(3){
  background: url(../images/pro_03_h5_03.png) no-repeat 50% 50%;
  background-size: cover;
}
#project03 h5:nth-of-type(4){
  background: url(../images/pro_03_h5_04.png) no-repeat 50% 50%;
  background-size: cover;
}
#project03 h5:nth-of-type(5){
  background: url(../images/pro_03_h5_05.png) no-repeat 50% 50%;
  background-size: cover;
}

#project03 h5 span{
  display: none;
}
.title_list li{
  margin: 0 0 15px 1em;
  text-indent: -1em;
  font-weight: 700;
}
#project03 .txt01{
  margin: 30px 0 0px;
  font-size: 1.8rem;
  line-height: 1.7;
}
#project03 .txt02{
  text-align: center;
  font-weight: 700;
  font-size: 3rem;
}
#project03 .txt03{
  margin: 0 0 30px;
  text-align: center;
}
#project03 .txt03 span{
  padding: 0 10px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2;
  background: var(--pink01);
}
@media all and (min-width:500px),print {
  #project03 .txt03 span{
    font-size: 1.8rem;
  }
}

#project03 .btn{
  margin: 20px 0 60px;
  text-align: center;
}
#project03 .btn a{
  width: 100%;
  padding: 0.5em 1em;
  background: #858585;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
  font-size: 2.3rem;
  border-radius: 12px;
}

/* ==============================
   #project04
   ==============================*/
#project04{
  background: url(../images/bg_pro_04.jpg) #89d7b3; 
}
#project04 h2:before{
  width: 10%;
  max-width: 66px;
  height: 66px;
  display: block;
  content: "";
  background: url(../images/pro04_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 55%;
  left: 15%;
}
#project04 h2:after{
  width: 15%;
  max-width: 123px;
  height: 166px;
  display: block;
  content: "";
  background: url(../images/pro04_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -95%;
  right: 5%;
}
#project04 .project_lead:after{
  width: 10%;
  max-width: 58px;
  height: 58px;
  display: block;
  content: "";
  background: url(../images/pro04_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -25%;
  left: 0%;
}

.pro04_img {
  width: 70%;
  margin: 0 auto 30px;
  max-width: 330px;
}
.pro04_img img{
  width: 100%;
  height: auto;
}
.pro04_img02{
  width: 100%;
  margin: 0 auto 60px;
  max-width: 495px;
  text-align: center;
}
.pro04_img02 img{
  width: 100%;
  height: auto;
}

#project04 article{
  position: relative;
}
#project04 article h3{
  width: 100%;
  text-align: center;
  position: absolute;
  top: -40px;
  left: 0;
}
#project04 article h3 span{
  padding: 15px 30px;
  font-weight: 700;
  font-size: 2.2rem;
  color: #fff;
  background: var(--green01);
  line-height: 1.2;
  border-radius: 200px;
  display: inline-block;
}

#project04 .prize_wrap > p{
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;

}
#project04 .prize_wrap > div{
  margin: 0 0 40px;
  background: #fff;
  border-radius: 14px;
  border: 2px solid var(--gold01);
  position: relative;
}
#project04 .prize_wrap > div .title{
  padding: 10px;
  font-size: 2.8rem;  
  background: var(--green01);
  color: #fff;
  font-weight: 700;
  border-radius: 12px 12px 0 0;
  text-align: center;
  line-height: 1;
}
#project04 .prize_wrap > div:nth-of-type(4) .title{
  padding: 14px;
  font-size: 2.4rem;
  background: var(--pink01);
}
#project04 .prize_wrap > div .point{
  width: 68px;
  height: 65px;
  line-height: 60px;
  display: block;
  position: absolute;
  top: -30px;
  left: 15px;
}
#project04 .prize_wrap > div .point img{
  width: 100%;
  height: auto;
}
#project04 .prize_wrap > div .txt01{
  margin: 15px 0 0px;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  line-height: 1.5;
}
#project04 .prize_wrap > div .txt02{
  font-weight: 700;
  margin: 0 0 15px;
  font-size: 3rem;
  text-align: center;
}
#project04 .prize_wrap > div:nth-of-type(1) .txt02{
  color: var(--red01);
}
#project04 .prize_wrap > div:nth-of-type(2) .txt02{
  color: var(--yellow02);
}
#project04 .prize_wrap > div:nth-of-type(3) .txt02{
  color: var(--blue01);
}
#project04 .prize_wrap > div:nth-of-type(4) .txt02{
  color: var(--pink01);
}
#project04 .txt_sign{
  margin: 0 0 40px;
  font-family: 700;
  font-size: 1.5rem;

}


#project04 .sign_list_wrap{
  padding: 60px 25px 25px;
  border-radius: 0 0 12px 12px;
  background: #d0efe1;
  position: relative;
}
#project04 .sign_list_wrap h4{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
#project04 .sign_list_wrap h4 span{
  margin: 0 25px;
  padding: 5px;
  font-size: 1.8rem;
  color: #fff;
  background: #000;
  border-radius: 0 0 10px 10px;
  display: block;
}
#project04 .sign_list_wrap dl{
  margin: 0 0 15px;
}
#project04 .sign_list_wrap dl dt{
  padding: 15px 0;
  color: #fff;
  background: var(--green01);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
@media all and (min-width:500px),print {
  #project04 .sign_list_wrap dl dt{
    font-size: 1.6rem;
  }
}
#project04 .sign_list_wrap dl dd{
  padding: 10px;
  font-weight: 700;
  font-size: 1.9rem;
  text-align: center;
  background: #fff;
  position: relative;
}
#project04 .sign_list_wrap dl dd span{
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 1.3rem;
}


#project04 .apply{
  margin: 0 0 30px;
}
#project04 .apply .txt01{
  margin: 0 0 15px;
  font-size: 1.6rem;
}
#project04 .apply .txt02{
  font-size: 1.6rem;
}


#project04 .adr{
  margin: 0 0 90px;
}
#project04 .apply .midashi,
#project04 .adr .midashi{
  padding: 0 0 6px 27px;
  font-weight: 700;
  font-size: 2.5rem;
  position: relative;
}
#project04 .apply .midashi:before,
#project04 .adr .midashi:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: var(--green01);
  border-radius: 100px;
  position: absolute;
  top: 10px;
  left: 0;
}
#project04 .adr p{
  font-size: 2.2rem;
  font-weight: 700;
}
@media all and (min-width:500px),print {
  #project04 .adr p{
    font-size: 2.5rem;
  }
}
#project04 .adr .attention01{
  margin: 20px 0 0;
}
#project04 .content_wrap .txt01{
  margin: 40px 0 10px;
  text-align: center;
  font-weight: 700;
}
#project04 .sign_list_wrap .txt02{
  margin: 0 0 1em;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
}


/* ==============================
   #project05
   ==============================*/
#project05{
  background: url(../images/bg_pro_05.jpg) #ffb1df;
}
#project05 h2:before{
  width: 20%;
  max-width: 44px;
  height: 44px;
  display: block;
  content: "";
  background: url(../images/pro05_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 45%;
  left: 15%;
}
#project05 h2:after{
  width: 25%;
  max-width: 155px;
  height: 126px;
  display: block;
  content: "";
  background: url(../images/pro05_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -5%;
  right: 3%;
}
#project05 .project_lead:after{
  width: 13%;
  max-width: 66px;
  height: 66px;
  display: block;
  content: "";
  background: url(../images/pro05_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 80%;
  left: 0%;
}

.pro05_img {
  width: 85%;
  margin: 0 auto 30px;
  max-width:421px;
}
.pro05_img img{
  width: 100%;
  height: auto;
}

#project05 .btn a,
#project05 .btn a span{
  font-weight: 700;
  font-size: 2.3rem;
}
#project05 .btn a{
  width: 90%;
  margin: 0 auto 100px;
  padding: 0.5em;
  text-align: center;
  display: block;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 15px;
  font-weight: 700;
}
#project05 .btn a span{
  color: #ffed00;
}
#project05 .btn a:hover{
  opacity: 0.6;
  transition: 0.2s;
}
@media all and (min-width:768px),print {
  #project05 .btn a,
  #project05 .btn a span{
    font-weight: 700;
    font-size: 3.0rem;
  }
}



/* ==============================
   #project06
   ==============================*/
#project06{
  background: url(../images/bg_pro_06.jpg) #89d7b3; 
}
#project06 h2:before{
  width: 15%;
  max-width: 101px;
  height: 104px;
  display: block;
  content: "";
  background: url(../images/pro06_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  left: 8%;
}
#project06 h2:after{
  width: 8%;
  max-width: 43px;
  height: 43px;
  display: block;
  content: "";
  background: url(../images/pro06_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 5%;
  right: 15%;
}
#project06 .project_lead:after{
  width: 15%;
  max-width: 85px;
  height: 81px;
  display: block;
  content: "";
  background: url(../images/pro06_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0%;
  left: 0%;
}
#project06 .project_lead:before{
  width: 15%;
  max-width: 85px;
  height: 85px;
  display: block;
  content: "";
  background: url(../images/pro06_kira_04.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -30%;
  right: -4%;
}

.pro06_img {
  width: 85%;
  margin: 0 auto 30px;
  max-width:406px;
}
.pro06_img img{
  width: 100%;
  height: auto;
}
.pro06_img02{
  width: 80%;
  margin: 0 auto 30px;
  max-width: 415px;
  text-align: center;
  border: 1px solid #000;
  background: #2ea7e0;
}
.pro06_img02 img{
  width: 100%;
  height: auto;
}
.pro06_img02 a:hover {
  opacity: 0.6;
  transition: 0.2s;
}

#project06 article{
  margin: 20px 0 0;
}
.newwork_wrap{
  padding: 20px;
  text-align: center;
  color: #fff;
  line-height: 1;
  background: #2ea7e0;
}
.newwork_wrap .txt01{
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 3.0rem;
}
.newwork_wrap .txt02{
  font-size: 1.5rem;
}
.newwork_title,
.newwork_sale{
  text-align: center;
  font-weight: 700;
}
.newwork_title{
  margin: 20px 0 10px;
  font-size: 2rem;
  line-height: 1.2;
}
.newwork_sale{
  margin: 0 0 20px;
  font-size: 1.8rem;
  color: var(--red01);
}


/* ==============================
   #project07
   ==============================*/
#project07{
  background: url(../images/bg_pro_07.jpg) #ffb1df;
}

#project07 h2:before{
  width: 12%;
  max-width: 72px;
  height: 74px;
  display: block;
  content: "";
  background: url(../images/pro07_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 65%;
  left: 12%;
}
#project07 h2:after{
  width: 10%;
  max-width: 43px;
  height: 43px;
  display: block;
  content: "";
  background: url(../images/pro07_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 25%;
  right: 10%;
}
#project07 .project_lead:after{
  width: 12%;
  max-width: 43px;
  height: 43px;
  display: block;
  content: "";
  background: url(../images/pro07_kira_03.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -25%;
  left: 0%;
}
#project07 .project_lead:before{
  width: 20%;
  max-width: 100px;
  height: 100px;
  display: block;
  content: "";
  background: url(../images/pro07_kira_04.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -90%;
  right: -5%;
}

.pro07_img {
  width: 55%;
  margin: 0 auto 30px;
  max-width: 257px;
}
.pro07_img img{
  width: 100%;
  height: auto;
}



/* ==============================
   #project08
   ==============================*/
#project08{
  background: url(../images/bg_pro_08.jpg) #96d3ef
}

#project08 h2:before{
  width: 10%;
  max-width: 65px;
  height: 65px;
  display: block;
  content: "";
  background: url(../images/pro08_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 45%;
  left: 10%;
}
#project08 h2:after{
  width: 18%;
  max-width: 116px;
  height: 110px;
  display: block;
  content: "";
  background: url(../images/pro08_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 15%;
  right: 8%;
}
.pro08_img {
  width: 90%;
  margin: 0 auto 40px;
  max-width:526px;
}
.pro08_img img{
  width: 100%;
  height: auto;
}
.pro08_img02{
  width: 100%;
  margin: 0 auto 30px;
  max-width: 440px;
  text-align: center;
}
.pro08_img02 img{
  width: 100%;
  height: auto;
}

#project08 h3{
  margin: 0 0 20px;
  text-align: center;
}
#project08 h3 span{
  padding: 0 4px;
  font-weight: 700;
  font-size: 1.9rem;
  background: var(--orange01);
  color: #fff;
  line-height: 1.8;
}
@media all and (min-width:500px),print {
  #project08 h3 span{
    font-size: 2.2rem;
  }
}

#project08 .txt01,
#project08 .txt02,
#project08 .txt03,
#project08 .txt04{
  text-align: center;
  font-weight: 700;
}
#project08 .txt01{
  margin: 0 0 20px;
  line-height: 2.2;
}
#project08 .txt02{
  margin: 0 0 5px;
  font-size: 1.9rem;
  color: var(--blue01);
}
/* #project08 .txt03{
  margin: 0 0 40px;
  font-size: 1.1rem;
} */
#project08 .txt04{
  margin: 0 0 20px;
}
@media all and (min-width:500px),print {
  #project08 .txt01{
    font-size: 1.9rem;
  }
  #project08 .txt02{
    font-size: 2.5rem;
  }
  #project08 .txt04{
    font-size: 1.9rem;
  }  
}
#project09 .arrow_under{
  margin: 0 0 40px;
  text-align: center;
}


#project08 .btn01,
#project08 .btn02,
#project08 .btn03{
  margin: 0 0 10px;
}
#project08 .btn01 a,
#project08 .btn02 a,
#project08 .btn03 a{
  text-align: center;
  text-decoration: none;
  padding: 10px;
  color: #fff;
  display: block;
  border-radius: 8px;
  font-size: 2rem;
}
#project08 .btn01 a:hover,
#project08 .btn02 a:hover,
#project08 .btn03 a:hover{
  opacity: 0.6;
  transition: 0.2;
}
#project08 .btn01 a{
  background: var(--blue01);
}
#project08 .btn02 a{
  background: #000;
}
#project08 .btn03 a{
  background: var(--green01);
}


/* ==============================
   #project09
   ==============================*/
#project09{
  background: url(../images/bg_pro_09.jpg) #ffe466;
}
#project09 h2:before{
  width: 25%;
  max-width: 127px;
  height: 116px;
  display: block;
  content: "";
  background: url(../images/pro09_kira_01.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 15%;
  left: 5%;
}
#project09 h2:after{
  width: 20%;
  max-width: 117px;
  height: 89px;
  display: block;
  content: "";
  background: url(../images/pro09_kira_02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -15%;
  right: 5%;
}
.pro09_img {
  width: 90%;
  margin: 0 auto 40px;
  max-width:526px;
}
.pro09_img img{
  width: 100%;
  height: auto;
}
.pro09_img02{
  width: 100%;
  margin: 0 auto;
  max-width: 440px;
  text-align: center;
}
.pro09_img02 img{
  width: 100%;
  height: auto;
}
#project09 h3{
  margin: 0 0 20px;
  text-align: center;
}
#project09 h3 span{
  padding: 0 4px;
  font-weight: 700;
  font-size: 1.9rem;
  background: var(--yellow03);
  color: #000;
  line-height: 1.8;
}
@media all and (min-width:500px),print {
  #project09 h3 span{
    font-size: 2.1rem;
  }
}

#project09 .txt01,
#project09 .txt02,
#project09 .txt03{
  text-align: center;
  font-weight: 700;
}
#project09 .txt01{
  margin: 0 0 20px;
  line-height: 1.8;
}
#project09 .txt02{
  margin: 0 0 40px;
  font-size: 1.8rem;
  color: var(--red01);
}
#project09 .txt03{
  margin: 0 0 20px;
}
@media all and (min-width:500px),print {
  #project09 .txt01{
    font-size: 1.9rem;
  }
  #project09 .txt02{
    font-size: 2.5rem;
  }
  #project09 .txt03{
    font-size: 1.9rem;
  }  
}

#project08 .arrow_under{
  margin: 0 0 40px;
  text-align: center;
}


#project09 .midashi01,
#project09 .midashi02,
#project09 .midashi03{
  margin: 0 0 6px;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}

#project09 .midashi01{
  color: var(--red01);
}
#project09 .midashi02{
  color: var(--blue01);
}
#project09 .midashi03{
  color: var(--green01);
}
#project09 .btn01 a,
#project09 .btn02 a,
#project09 .btn03 a,
#project09 .btn04 a{
  text-align: center;
  text-decoration: none;
  padding: 10px;
  display: block;
  border-radius: 15px;
  font-size: 2rem;
}
#project09 .btn01 a:hover,
#project09 .btn02 a:hover,
#project09 .btn03 a:hover,
#project09 .btn04 a:hover{
  opacity: 0.6;
  transition: 0.2;

}
#project09 .btn01 a{
  margin: 0 0 15px;
  color: #fff;
  background: var(--red01);
}
#project09 .btn02 a{
  margin: 0 0 30px;
  color: var(--red01);
  background: #000;
}
#project09 .btn03 a{
  margin: 0 0 30px;
  color: var(--blue01);
  background: #000;
}
#project09 .btn04 a{
  color:#fff;
  background: var(--green01);
}


/* ==============================
   #project_cs
   ==============================*/
#project_cs{
  min-height: 200px;
  padding: 180px 30px 150px;
  background: url(../images/bg_pro_cs.jpg) #c5c6c6;
}
.pro_cs_img{
  width: 60%;
  margin: 0 auto;
  text-align: center;
}
.pro_cs_img img{
  width: 100%;
  height: auto;
  max-width: 221px;
}


/* ==============================
   accordion
   ==============================*/
.btn_accordion, .btn_accordion_close{
  width: 55%;
  margin:0 auto;
}
.btn_accordion span, .btn_accordion_close{
  padding: 8px 1em 5px 0;
  background: #fff;
  border-radius: 100px;
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0px 8px 0px 0px rgba(0, 0, 0, 1);
  display: block;
  cursor: pointer;
  text-align: center;  
  font-weight: 700;
  position: relative;
}
.btn_accordion_close{
  margin: 40px auto 0;
}

.btn_accordion span:before{
  width: 1em;
  height: 1em;
  content: "";
  display: block;
  background: url(../images/open.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0.8em;
  right: 1em;
}
.btn_accordion_close:before{
  width: 1em;
  height: 1em;
  content: "";
  display: block;
  background: url(../images/close.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0.8em;
  right: 2.2em;
}

.wrap_accordion{
  padding: 0;
  display: none;
}
.open + .wrap_accordion{
  display: block;
}
.open span{
  display: none;
}
.btn_accordion:hover, .btn_accordion_close:hover{
  opacity: 0.6;
  transition: 0.2s;
}


/* ==============================
   slick
   ==============================*/
#project02_slide{ 
  width: 300px;
  height: 400px;
  margin: 0 auto;
  padding: 10px 0 0 0;
  background: #fff;
  border-radius: 15px;
  border: 2px solid var(--gold01);
}
#project02_slide .slick-slide li{
  text-align: center;
}
#project02_slide .slick-slide img{
  width: 95%;
  height: auto;
  margin: 0 auto;
}
#project07_slide{ 
  width: 300px;
  height: 400px;
  margin: 0 auto;
  padding: 10px 0 0 0;
  background: #fff;
  border-radius: 15px;
  border: 2px solid var(--gold01);
}
#project07_slide .slick-slide li{
  text-align: center;
}
#project07_slide .slick-slide img{
  width: 95%;
  height: auto;
  margin: 0 auto;
}
.slick-next {
  right: -40px !important;
}
.slick-prev {
  left: -40px !important;
}

.slick-next:before {
  content:url(../images/arrow_r.png) !important;
}
.slick-prev:before {
  content:url(../images/arrow_l.png) !important;
}

/* ==============================
   UP
   ==============================*/
#up{
  width: 15%;
  max-width: 90px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}
#up:hover{
  opacity: 0.6;
  transition: 0.2s;
}
#up img{
  width: 100%;
  height: auto;
}
@media all and (min-width:500px),print {
  #up{
    right: calc(50% - 240px);
  }
}
@media all and (min-width:1200px),print {
  #up{
    display: none;
  }
}

/* ==============================
   Copyright
   ==============================*/
#copyright{
  padding: 10px;
  color: #fff;
  background: #000;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
}