@charset "utf-8";
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
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,
font,
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 {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  
}
html {
font-size: 16px;
}
body,
table,
input,
textarea,
select,
option {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
:focus {
  outline: 0;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
img {
  vertical-align: top;
  max-width: 100%;
}
a,
a:link {
  color: #000;
  text-decoration: none;
}
a:visited {
  color: #000;
}
a:hover {
  color: #000;
}
a:active {
  color: #000;
}

div,dt,dd,td,th,p{
	box-sizing: border-box
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
   font-size: 62.5%;
}
body {
  color: #000;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.75;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  background-color: #fff;
}
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
main {
  text-align: left;
}
a[href^="tel:"] {
  cursor: default;
  pointer-events: none;
}

.flex{
	display: flex;
		gap:35px;
}



@media all and (min-width: 897px) {
  .sp {
    display: none !important;
  }
	.pcFlex{
		display: flex;
		gap:35px;
	}
	
}
@media all and (max-width: 896px) {
  body {
    min-width: inherit;
  }
  a:hover,
  a:hover img {
    opacity: 1 !important;
  }
  .pc {
    display: none !important;
  }
  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: auto;
  }
}


/*------------------------------------------------------------
	カラー
------------------------------------------------------------*/
:root {
  --base: #000;	
  --blue: #5abdc5;
  --Lblue: #c8e3e5;
  --green: #72b458;
  --orange: #e36d14;
	--Lgray: #f9f9f9;
	--gray:#a2a2a2;
	--wh:#ffffff;
}


.bgLblue{
	background: var(--Lblue)
}
.bgLgray{
	background: var(--Lgray)
}


/* =======================================

	margin / padding

========================================== */
.mA {
  margin-left: auto;
  margin-right: auto;
}

.mT0 {  margin-top: 0px !important;}
.mT5 {  margin-top: 5px !important;}
.mT10 {  margin-top: 10px !important;}
.mT15 {  margin-top: 15px !important;}
.mT20 {  margin-top: 20px !important;}

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader .hBox {
  position: relative;
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
  padding: 17px 2% 15px;
}
#gHeader .hInfo .hInner{
 display: flex;
 align-items: center;
 gap:0 16px;
}
#gHeader .logo {
  width: 62px;
}
#gHeader h1 {
  font-size: 1.8rem;
  font-weight: 400;
}


@media all and (min-width: 897px) {
  .menuBox {
    display: none !important;
  }
}

@media all and (max-width: 896px) {
 #gHeader{
    height: max(70px,10vw);
 }
  #gHeader .hBox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: max(70px,10vw);
    z-index: 9;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #aaaaaa;
    padding: 0;
  }
  #gHeader .hInfo {
    background-color: #fff;
    width: 100%;
   padding: 0 4%;
   position: relative;
   z-index: 101;
  }
  #gHeader .hInner {
    height: max(70px,10vw);
    align-items: center;
  }

  #gHeader .logo {
    width: min(12vw,62px);
  }
#gHeader h1 {
  font-size:min(3vw,1.8rem) ;
}


  .menu {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-18px);
    width: 36px;
    height: 34px;
  }
  .menu span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    position: absolute;
    right: 6px;
    width: 24px;
    height: 2px;
    background-color: #000;
  }
  .menu span:nth-of-type(1) {
    top: 7px;
  }
  .menu span:nth-of-type(2) {
    top: 15px;
  }
  .menu span:nth-of-type(3) {
    top: 23px;
  }
  .menu.on {
    background: none;
  }
  .menu.on span {
    width: 28px;
    height: 2px;
    background-color: #000;
  }
  .menu.on span:nth-of-type(1) {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
  }
  .menu.on span:nth-of-type(2) {
    right: 50%;
    opacity: 0;
    -webkit-animation: active-menu-bar02 0.8s forwards;
    animation: active-menu-bar02 0.8s forwards;
  }
  .menu.on span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }
}
@media all and (max-width: 560px) {
}
@media all and (max-width: 460px) {
}

/*------------------------------------------------------------
	gNavi
------------------------------------------------------------*/
.hNavi {
  height: auto;
  position: static;
}
#gNavi {
}
/*#gNavi.fix {
  position: fixed;
}*/
#gNavi ul {
}
#gNavi li {
}
#gNavi li.disable {
  pointer-events: none;
}
#gNavi li a {
  display: block;
 font-size: 1.8rem;
}
#gNavi li.disable a{
  color: gray;
}


@media all and (min-width: 897px) {
  #gNavi {
   position: relative;
   box-sizing: border-box;
  }
  #gNavi ul {
 display: flex;
  }
 #gNavi ul li{
  position: relative;
 }
 #gNavi ul li + li::before{
  content: "";
  display: block;
  background: #cbcbcb;
  width: 1px;
  height: 11px;
  position: absolute;
  left: 0;
  top: 50%;transform: translate(0, -50%);
 }
 #gNavi ul li a{
  display: block;
  padding: 4px 8px 0;
  border-bottom: 4px solid transparent;
  font-size: 1.8rem;
  font-weight: 700;
 }
#gNavi li a:hover {
  border-bottom: 4px solid var(--green);
}
}

@media all and (max-width: 896px) {
  .hNavi {
  visibility: hidden;
  position: absolute;
  top: -100vh;
  left: 0;
  z-index: -1;
  transition: 0.2s ease-in-out; 
   background: #fff;
   width: 100%;
  }
 body.fixed .hNavi{
  visibility: visible;
  top: 100%;
  z-index: 100;
 }
  #gNavi ul {
  border-top: 1px #ccc solid;
  }
 #gNavi ul li{
  border-bottom: 1px #ccc solid;
 }
 #gNavi ul li a{
  display: block;
  padding: 10px 4vw;
  text-align: center;
 }
}
/*----common-----*/
.inner{
 width: 94%;
 max-width: 1040px;
 margin: 0 auto;
}
.secTitle{
	color: var(--green);
	font-weight: 700;
}
.secTitle:before{
	background: url("../img/ic_h2.svg") no-repeat;
	background-size: contain;
	height: 1em;
	width: .8em;
	content: '';
	display: inline-block;
	vertical-align: baseline
}

.secTitle span{
	font-size: 88%;
	margin-left: 1.5em;
}

.overview{
	display: flex;
	flex-wrap: wrap;
	border-radius: 4px;
}

.overview dt,
.overview dd{
	padding: .8em 2em
}

.overview.blue{
	border: 2px solid var(--blue);
}

.overview.green{
	border: 2px solid var(--green);
}
.overview.blue dt{
	background: var(--blue);
	color: var(--wh);
	font-weight: 600;
}

.overview.green dt{
	background: var(--green);
	color: var(--wh);
	font-weight: 600;
}

.head_desc{
	list-style: disc;
	margin-left: .5em
}

.btnWrap{
	text-align: center;
	
}
.btn{
	background: var(--orange);
	border-radius: 999px;
	text-align: center;
	color: var(--wh) !important;
	font-weight: 700;
	width: 100%;
	padding: .6em;
	position: relative;
	display: block;
	margin: auto
}

.btn:before{
	content: '';
	position: absolute;
	right: 8%;
}
	

.btn.other:before{
	width: 17px;
	height: 15px;
	top:calc(50% - 7px);
	background: url("../img/ic_other_white.png") no-repeat;
	background-size: contain;
}

.btn.zip:before{
		width: 22px;
	height: 23px;
	top:calc(50% - 11px);
	background: url("../img/ic_zip.png") no-repeat;
	background-size: contain;
}

.btn.pdf:before{
		width: 22px;
	height: 23px;
	top:calc(50% - 11px);
	background: url("../img/ic_pdf.png") no-repeat;
	background-size: contain;
}

.note{
	font-size: 82%
}


@media all and (min-width: 897px) {
.inner{
	padding: 50px 0
}
.secTitle{
	font-size: 3rem;
	margin-bottom: 30px;
}	
.inBox{
	margin: 0 30px;
}
.overview{
	margin-top: 20px;
	display: flex
}	
	.overview dt{
		font-size: 2.1rem;
		width: 280px;
	}
	.overview dd{
		width: calc(100% - 280px);
	}
	.btnWrap{
		margin-top: 30px;
	}
	.btn{
		font-size: 2rem;
		max-width: 390px;
	}
	.btn.long{
	max-width: 460px;
}
}/*PC only*/

@media all and (max-width: 896px) {/*SP */
.inner{
	padding: 30px 0;
        width: 88%;
}
.secTitle{
	font-size: 2.2rem;
	margin-bottom: 15px
}	
.secTitle span{
	display: inline-block;
	padding-left: 1.5em;
	margin: 0;
	line-height: 1.4;
	font-size: 84%
}	
	
.inBox{
	margin: 0 2%;
}	
	
.overview{
	margin-top: 15px;
	flex-direction: column;
}	
.overview dt,
.overview dd{
	padding: .8em 1.5em
}
.overview dt{
		font-size: 1.8rem
	}	
.btnWrap{
		margin-top: 20px;
	}	
	
.btn{
font-size: 1.8rem;
	width: auto;
	line-height: 1.4
}
	
	
}/*SP only*/


/*heroVisual
-----------------------------*/
#heroVisual{
	margin-bottom: 50px
}


@media all and (min-width: 897px) {
	#heroVisual{
	margin-bottom: 50px
}
}/*PC only*/

@media all and (max-width: 896px) {/*SP */
	
	#heroVisual{
	margin-bottom: 30px
}
 
}/*SP only*/




/*
-----------------------------*/
#news{}
.news-itmes{
	border-top: 1px solid var(--gray);
}

.news-itmes li{
	border-bottom: 1px solid var(--gray);
	padding: .6em 0;
	display: flex;
	gap:5em;
	
}

@media all and (max-width: 896px) {/*SP news */
.news-itmes li{
	gap:0 2em;
} 
}/*SP only*/

/* about
-----------------------------*/
#about{}

p.head_mark{
	text-indent: -2.5em;
	padding-left: 2.5em
}

#about .overview dt{
		font-size: 1.8rem;
		font-weight: 400;
	border-bottom: 1px solid var(--wh)
	}
#about .overview dd{
		border-bottom: 1px solid var(--blue)
	}
#about .overview dt:nth-child(5),
#about .overview dd:nth-child(6){
	border-bottom: none
}

/* target
-----------------------------*/
#target{}

#target .overview dt{
	padding: 1em;
}

.head_chara{
	margin-left: 1em;
	margin-bottom: .5em
}

.head_chara li{
	display: flex;
	gap:.8em;
	align-items: baseline
		
}

.head_chara li span{
	background: var(--Lblue);
	padding: 0px 2px 3px;
	line-height: 1;
	display: block;
	border-radius: 4px;
}

.img_cut {
	padding: 20px 40px;
	text-align: center;
	width: 100%;
}

.img_cut .caption{
	font-size: 80%;
	line-height: 1.4
}


#target .overview.green dd p{
	margin-bottom: 1em
}

#target .overview.green dd .img_cut img{
	height: 96px
}
#target .overview.green dd .img_cut{
	line-height: 1;
	margin-bottom: 10px
}

@media all and (max-width: 896px) {/*SP target */
 .head_chara{
	margin-left: 0;
}
 .img_cut {
	padding: 20px 20px;
	width: auto;
}
 .img_cut .caption{
  display: block;
  margin-top: 10px;
 }

}/*SP only*/

/* #expenses
-----------------------------*/
#expenses{}

#expenses .overview{
	flex-direction: column;
}

#expenses .overview{
	margin-top: 0
}
#expenses .overview dt,
#expenses .overview dd{
	width: 100%;
}
#expenses .overview dt{
	padding: .6em .3em;
	text-align: center;
	font-size: 2rem
}

@media all and (max-width: 896px) {/*SP #expenses */
 #expenses .overview{
  margin-top: 20px;
 }
 #expenses .overview dt{
	padding: .6em .5em;
	font-size: 1.8rem
}
}/*SP only*/

/* application
-----------------------------*/
#application{}


/* howApply
-----------------------------*/
#howApply{}


/* requirements
-----------------------------*/
#requirements{}

#requirements .lead{
	text-indent: -25px;
	padding-left: 25px;
	
}
#requirements .lead:before{
	background: url("../img/ic_check.png") no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px
}

.head_num{
	margin-top: 15px;
	margin-left: 25px
}
.head_num li{
	display: flex;
	gap:5px
}

#requirements h3{
	margin-top: 50px;
	text-align: center;
	margin-bottom: 20px;
	font-size: 2.2rem
}

/*
-----------------------------*/

#schedule{}

.scheduleItem{
	border-bottom: 2px solid var(--blue);
	padding: 10px 0;
	position: relative;
	display: flex;
	gap:20px;

}



.scheduleItem:after{
	background: var(--blue);
  height: 10px;
  width: 26px;
   clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	display: block;
	position: absolute;
	bottom:-10px;
	left:calc(50% - 13px)
}

.scheduleItem.last:after{
	display: none
}
.scheduleItem dt{
	background: var(--blue);
	color: var(--wh);
	font-size: 2.1rem;
	width: 280px;
	border-radius: 4px;
	padding: .3em 1em;
	font-weight: 700
}

.scheduleItem dt span{
	font-size: 1.8rem;
	margin-right: 1em;
}

.scheduleItem dd{
	width: calc(100% - 300px);
	display: flex;
	align-items: center
}

@media all and (max-width: 896px) {/*SP faq */
	.scheduleItem{
		flex-direction: column;
		gap:10px;
		margin-bottom: 15px
	}
	.scheduleItem dt,
	.scheduleItem dd{
	width: 100%;
	}
	
	
}

/* faq
-----------------------------*/
#faq{}
.faqList{}
.faqList dt{
 position: relative;
 background: #fff;
 margin-top: 15px;
 padding: 12px 50px 12px 77px;
 cursor: pointer;
}
.faqList dt span{
 position: absolute;
 left: 32px;
 top: 15px;
 color: var(--green);
 font-size: 21px;
 font-weight: 700;
 line-height: 1;
}
.faqList dt::before,
.faqList dt::after{
 content: "";
 display: block;
 background: var(--green);
 width: 15px;
 height: 2px;
 position: absolute;
 right: 30px;
 top: 24px;
}
.faqList dt::after{
 transform: rotate(90deg);
 transition: 0.2s ease-in-out;
}
.faqList.is-accordion-active dt::after{
 transform: rotate(0deg);
}
.faqList dd{
 position: relative;
 background: #fff;
 padding: 12px 28px 10px 77px;
}
.faqList dd::before{
 content: "";
 display: block;
 background: var(--green);
 width: calc(100% - 32px - 30px);
 height: 1px;
 position: absolute;
 top: 0;
 left: 32px;
}
.faqList dd span{
 position: absolute;
 left: 32px;
 top: 15px;
 color: var(--blue);
 font-size: 21px;
 font-weight: 700;
 line-height: 1;
}

#faq .btnWrap{
 margin-top: 30px;
}
@media all and (max-width: 896px) {/*SP faq */
 .faqList dt{
 margin-top: 15px;
 padding: 12px 50px 12px 57px;
}
.faqList dt span{
 left: 20px;
 top: 15px;
 font-size: 18px;
}
.faqList dt::before,
.faqList dt::after{
 right: 20px;
 top: 24px;
}
.faqList dd{
 padding: 12px 20px 10px 57px;
}
.faqList dd::before{
 width: calc(100% - 20px - 20px);
 left: 20px;
}
.faqList dd span{
 left: 20px;
 top: 15px;
 font-size: 18px;
}
}/*SP only*/



/* #gFooter
-----------------------------*/
#gFooter{
 background: var(--green);
 padding: 33px 0 0;
 text-align: center;
}
#gFooter *{
 color: #fff;
}
#gFooter h2{
 margin-bottom: 27px;
 font-size: 30px;
 font-weight: 700;
 line-height: 1.1;
}
#gFooter h3{
 margin-bottom: 42px;
 font-size: 24px;
 font-weight: 700;
 line-height: 1.1;
}
#gFooter ul{
 max-width: 922px;
 padding: 0 0 116px;
 margin: 0 auto;
}
#gFooter ul li{
 border: 1px #fff solid;
 border-radius: 4px;
}
@media all and (min-width: 897px) {
 #gFooter ul li{
  width: 48%;
  max-width: 430px;
  padding: 44px 46px 27px;
 }
}/*PC only*/
#gFooter .tel a{
 display: flex;
 justify-content: center;
 align-items: center;
 gap:0 9px;
 font-size:36px ;
 font-weight: 700;
 line-height: 1.1;
}
#gFooter .tel a::before{
 content: "";
 display: block;
 background: url("../img/ic_tel.png") no-repeat left top/100% auto;
 width: 26px;
 height: 34px;
}
#gFooter .tel p{
 margin-top: 10px;
 font-weight: 700;
 
}
#gFooter ul .web h4{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:0 12px;
  margin-bottom: 17px;
  font-size: 26px;
 line-height: 1.1;
 }
 #gFooter ul .web h4::before{
  content: "";
  display: block;
  background: url("../img/ic_pc.png") no-repeat left top/100% auto;
  width: 42px;
  height: 32px;
 }
 #gFooter ul .web .btn{
  position: relative;
  display: grid;
 place-content: center;
	border-radius: calc(infinity * 1px);
  background: #fff;
  max-width: 317px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--green) !important;
 }
 #gFooter ul .web .btn::after{
  content: "";
  display: block;
  background: url("../img/ic_other_green.png") no-repeat left top/100% auto;
  width: 17px;
  height: 15px;
  position: absolute;
  right: 22px;
  top: 0;
  bottom: 0;
  margin: auto;
 }
#gFooter small{
 display: block;
 background: #fff;
 padding: 25px 0 40px;
 color: #000000;font-size: 12px;
 text-align: center;
 line-height: 1;
}

@media all and (max-width: 896px) {/*SP #gFooter */
 #gFooter{
  padding: 20px 0 0;
 }
 
#gFooter h2{
 margin-bottom: 15px;
 font-size: 26px;
}
#gFooter h3{
 margin-bottom: 20px;
 font-size: min(4.5vw,24px);
}
#gFooter ul{
 padding: 0 4% 55px;
}
#gFooter ul li{
 margin-top: 24px;
 padding: 20px 20px 15px;
}
 #gFooter ul .web h4{
  margin-bottom: 15px;
  font-size: min(6vw,26px);
 }
 #gFooter ul .web .btn{
  font-size: 18px;
	 max-width: 280px;
 }
#gFooter small{
 padding: 15px 0 20px;
}

}/*SP only*/