/* ============================== */
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
a{text-decoration:underline; color:#000;}
a:hover{ text-decoration:none; color:#000;}

.alt{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
.br-smp{display: none;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
.br-pc{display: none;}
}
/*///////////////// style ////////////////*/
body{
margin: 0;
-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
}
body * {
  box-sizing : border-box;
}

h1,
.applyBtn a{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing:0;
text-align: center;
text-justify: inter-ideograph;
word-break: break-all;
}

h1{
display: flex;
flex-wrap: wrap;
align-content: stretch;
font-feature-settings:"palt";
}

h1 span:first-child{
font-family: 'Courier New', Courier, monospace;
text-align: left;
padding:.2em 0 0 .4em;
font-size: 3vw;
}
h1 span:last-child{
padding-bottom:.2em ;
font-size: 4vw;
}
h1 span{
display:block;
width: 90vw;
margin:0 auto;
line-height: 1.2;
}


p{
font-feature-settings: "palt";
letter-spacing: 0.004em;
text-align: justify;
text-justify: inter-ideograph;
word-break: break-all;
line-height: 1.6;
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-style: normal;
font-weight: 300;
}
p span
{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing:0;
text-align: justify;
text-justify: inter-ideograph;
}

div.logo{
width: 80%;
margin: auto;
display: block;
background: url(../img/logo.png) center center no-repeat;
background-size: contain;
aspect-ratio:1714/1702 ;
}
div.logo img{
width: 80%;
margin: auto;
display: block;
background: url(../img/logo.png) center center no-repeat;
background-size: contain;
aspect-ratio:1714/1702 ;
}



@media all and (min-width:768px) {
p{
font-size: 2vw;
}
}
@media all and (max-width: 767px) {
h1 span:first-child{
font-size: 3.5vw;
}
h1 span:last-child{
font-size: 4.5vw;
}
p{
font-size: 4vw;
}
}


#wrapper{
border-radius: 2em;
background: #FFF;
position: absolute;
top: 0;bottom: 0;right: 0; left: 0;
overflow: hidden;
}

.box .in_box{
overflow-y: scroll;
margin:0 auto;
}
.box .in_box .scrollbox{
height: max-content;
}

.txtArea span{
display: block;
}
.txtArea span.att{
display: inline-block !important;
background: #F01902;
color: #FFF !important;
padding:.2em .5em;
margin-bottom: .5em;
}
.applyBtnBox{
position: absolute;
bottom: 0;right: 0; left: 0;
}
.applyBtn{
margin: auto;
text-align: center;
}
.applyBtn.nolink a{
color: #ccc;
border-top:solid 3px #ccc;
border-right:solid 3px #ccc;
border-left:solid 3px #ccc;
border-bottom:solid 8px #ccc;
}
.applyBtn.nolink a:hover{
transform:scale(1);
}
.applyBtn a{
display: inline-block;
margin:1em auto .2em;
border-top:solid 3px #000;
border-right:solid 3px #000;
border-left:solid 3px #000;
border-bottom:solid 8px #000;
background: #ffdd00;
color: #000000;
padding:.2em 1em;
border-radius: 2em;
text-decoration: none;
font-size: 120%;
}
.applyBtn a:hover{
transition: all .2s ease;
transform:scale(1.05);
background: #F01902;
color:#fff;
}
@media all and (min-width:768px) {
.box .in_box{
width: 90vw;
height: 65vh;
display: flex;
justify-content: space-between;
padding-bottom: 4em;
}

.box .in_box .imgArea{
width:50%;
height: max-content;
padding: 0;
margin:1em 0;
}
.txtArea{
width:45%;
margin-right: 1em;
}
.txtArea small,
.txtArea p.att_box{
font-size: 1.5vw !important;
}
.applyBtnBox{
min-height:77px;
}

}
@media all and (max-width: 767px) {
.box .in_box{
width: 90vw;
height: 75vh;
display: flex;
flex-wrap: wrap;
padding-bottom: 2em;
}
.box .in_box .imgArea{
width:100%;
height: max-content;
}

.txtArea{
width:90%;
margin: auto;
}
.txtArea small,
.txtArea p.att_box{
font-size: 3vw !important;
}
.applyBtnBox{
min-height:10vh;
}
}


/*color*/
.skyblueArea{
border:solid 3px #10C0FF;
border-bottom:solid 15px #10C0FF;
}
.skyblueArea h1 span{
background: #10C0FF;
color: #FFF;
}
.skyblueArea .txtArea span{
color: #10C0FF;
margin-top: .5em;
}
.skyblueArea .applyBtnBox
{
background: #10C0FF;
text-align: center;
border-radius: 0 0 10px 10px;
}
.skyblueArea .txtArea p:last-child{
border-top: dashed 3px #10C0FF;
padding: 1em 0;
}
/*color*/
.orangeArea{
border:solid 3px #FF8A00;
border-bottom:solid 15px #FF8A00;
}
.orangeArea h1 span{
background: #FF8A00;
color: #FFF;
}
.orangeArea .txtArea span{
color: #FF8A00;
margintop: .5em;
}
.orangeArea .applyBtnBox
{
background: #FF8A00;
text-align: center;
border-radius: 0 0 10px 10px;
}
.orangeArea .txtArea p:last-child{
border-top: dashed 3px #FF8A00;
padding: 1em 0;
}

/*color*/
.greenArea{
border:solid 3px #25A352;
border-bottom:solid 15px #25A352;
}
.greenArea h1 span{
background: #25A352;
color: #FFF;
}
.greenArea .txtArea span{
color: #25A352;
margin-top: .5em;
}
.greenArea .applyBtnBox
{
background: #25A352;
text-align: center;
border-radius: 0 0 10px 10px;
}
.greenArea .txtArea p:last-child{
border-top: dashed 3px #25A352;
padding: 1em 0;
}

/*color*/
.yellowArea{
border:solid 3px #ffdd00;
border-bottom:solid 15px #ffdd00;
}
.yellowArea h1 span{
background: #ffdd00;
color: #000;
}
.yellowArea .txtArea span{
color: #ffdd00;
margin-top: .5em;
}
.yellowArea .applyBtnBox
{
background: #ffdd00;
text-align: center;
border-radius: 0 0 10px 10px;
}
.yellowArea .txtArea p:last-child{
border-top: dashed 3px #ffdd00;
padding: 1em 0;
}


/*color*/
.pinkArea{
border:solid 3px #FF5073;
border-bottom:solid 15px #FF5073;
}
.pinkArea h1 span{
background: #FF5073;
color: #fff;
}
.pinkArea .txtArea span{
color: #FF5073;
margin-top: .5em;
}
.pinkArea .applyBtnBox
{
background: #FF5073;
text-align: center;
border-radius: 0 0 10px 10px;
}
.pinkArea .txtArea p:last-child{
border-top: dashed 3px #FF5073;
padding: 1em 0 2em;
}




/*///////////////// figure ////////////////*/
figure {
margin: 0 0 1em;
padding: 0;
}
figure span.lazy{
width: 100%;
aspect-ratio: 4/3;
}
figure .att{
display: inline-block;
position: absolute;
bottom:5px; right:5px;
background: rgba(240 ,25, 2, 100);
color: #FFF;
font-size:70%;
padding:.2em .5em;
}


/*///////////////// lazy ////////////////*/
.lazy {
  position:relative;
  display:block;
  background:center top no-repeat;
  background-size:cover;
  margin:0 auto;
}
.lazy img{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}