@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

:root {
--black: #333333;
--light-gray: #f2f2f2;
--light-gray2: #b7b7b7;
--yellow: #f8eb05;
--dark-yellow: #ffe114;
--pink: #f90691;
--green: #0aa737;
--dark-green: #006934;
--light-green: #badf8d;
--light-green-bg: #bfee87;
--light-blue: #96e8e1;
--white: #ffffff;

--font-h2: 50px;
--font-h3: 30px;
--font-h4: 40px;
--font-h5: 26px;

--font-base: 22px;
--font-size-l: 28px;
--font-size-xl: 30px;
--font-size-xxl: 32px;
--font-size-s: 20px;
--font-size-xs: 18px;
--font-size-xxs: 16px;
--font-size-xxxs: 14px;
--font-size-min: 11px;
--font-page-nav: 24px;

--font-h2-sp: 20px;
--font-h3-sp: 22px;
--font-h4-sp: 25px;
--font-h5-sp: 16px;

--font-base-sp: 16px;
--font-size-l-sp: 20px;
--font-size-xl-sp: 30px;
--font-size-s-sp: 15px;
--font-size-xs-sp: 14px;
--font-size-xxs-sp: 14px;
--font-page-nav-sp: 16px;

--font-family-base:'Noto Sans JP','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
--font-family-num: 'Noto Sans JP', sans-serif;
--font-family-tit: "Zen Maru Gothic", serif;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
word-break: break-word;
}

html{
font-size: 62.5%;
/*\*/
_font-size: 62.5%;
/**/
}

a{
color: var(--black);
text-decoration: none;
}

a:hover, a:focus{text-decoration: none;}

a:hover,a:focus,
a:hover img,
a:focus img{
opacity: 1;
}

img {
margin: 0;
padding: 0;
border: 0;
vertical-align:top;
}

ul, ol {
list-style: none;
}

.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */

.embed{
width: 100%;
display: block;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed video{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-size: contain;
}
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}

body{
width: 100vw;
display: block;
color: var(--black);
font-family: var(--font-family-base);
font-size: var(--font-base);
font-weight: 600;
line-height: 1.8;
letter-spacing: 0.5px;
font-feature-settings: "palt";
text-align:justify;
overflow-x:hidden;
}
body.scroll-prevent{
overflow: hidden;
}

/* bg border */
.bg_stripe_yellow{
background-size: auto auto;
background-color: rgba(255, 217, 53, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(255, 220, 55, 1) 13px, rgba(255, 220, 55, 1) 33px );
}
.bg_stripe_green{
background-size: auto auto;
background-color: rgba(0, 166, 76, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(0, 157, 60, 1) 13px, rgba(0, 157, 60, 1) 33px );
}
.bg_stripe_yellowgreen{
background-size: auto auto;
background-color: rgba(250, 255, 214, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(247, 255, 194, 1) 13px, rgba(247, 255, 194, 1) 33px );
}
.bg_stripe_gray{
background-size: auto auto;
background-color: rgba(235, 235, 235, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(240, 240, 240, 1) 13px, rgba(240, 240, 240, 1) 33px );
}
.bg_border_gray{
background-size: auto auto;
background-color: rgba(240, 240, 240, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(225, 225, 225, 1) 20px, rgba(225, 225, 225, 1) 22px );
}

/* Layout */
section{
display:block;
}
#page{
width: 100vw;
display: block;
position: relative;
overflow-x: hidden;
}
.scroll-prevent #page{
overflow: hidden;
}
.wrapper{
width: 1100px;
display: block;
margin: 0 auto 0 auto;
text-align: center;
position: relative;
overflow: visible;
}
.wrapper.box{
padding: 85px 87px 70px 87px;
background-color: var(--white);
border: 5px solid var(--black);
border-radius: 100px;
}
.wrapper *{
position: relative;
}

h2{
width: 900px;
display: block;
margin: 0 auto 0 auto;
background-color: var(--green);
border: 5px solid var(--dark-green);
border-radius: 30px;
color: var(--white);
font-family: var(--font-family-tit);
font-size: var(--font-h2);
font-weight: 700;
line-height: 106px;
letter-spacing: 6px;
text-align: center;
}
h3{
width: 100%;
height: 128px;
display: block;
margin: 0 auto 0 auto;
background: url(../img/bg_h3.png) no-repeat center center;
background-size: 400px 128px;
color: var(--black);
font-family: var(--font-family-tit);
font-size: var(--font-h3);
font-weight: 700;
line-height: 90px;
letter-spacing: 4px;
text-align: center;
}
h3.bg_long{
background: url(../img/bg_h3_long.png) no-repeat center center;
background-size: auto 128px;
}
.wrapper.box h3{
position: absolute;
top: -61px;
left: 0;
}
h4{
display: block;
color: var(--dark-green);
font-family: var(--font-family-tit);
font-size: var(--font-h4);
font-weight: 700;
line-height: 44px;
text-align: center;
}
h5{
display: block;
font-family: var(--font-family-tit);
font-size: var(--font-h5);
font-weight: 700;
line-height: 1;
text-align: center;
}
h5.place_tit{
padding: 0 0 0 39px;
font-family: var(--font-family-num);
line-height: 30px;
text-align: left;
}
h5.place_tit:before{
content: "";
width: 30px;
height: 30px;
display: block;
background-color: var(--green);
position: absolute;
top: 0;
left: 0;
}

strong{
font-weight: bold;
font-weight: 700;
}

.nolink{
color: #666666;
pointer-events: none;
cursor: default;
}

.pcHide{
display: none !important;
}
.spHide{
display: block !important;
}
.pc_br{
display: inline;
}
.sp_br{
display: none;
}

.wrapper:after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}


/* related_link */
#related_link{
display: block;
padding: 200px 0 200px 0;
}
.related_box{
display: flex;
justify-content: center;
align-items: center;
}
.related_left{
width: 414px;
display: block;
padding: 0 42px 0 0;
text-align: center;
}
.related_left img{
width: 372px;
height: auto;
}
.related_right{
width: 400x;
display: block;
padding: 36px 0 36px 42px;
border-left: 2px solid var(--black);
}
.related_right img{
width: 400px;
height: auto;
}
.related_tit{
display: block;
font-size: var(--font-size-l);
}
.related_btn{
display: block;
}
.related_right .related_btn:nth-of-type(2){
margin: 42px 0 0 0;
}

/* coop */
#coop{
display: block;
padding: 90px 0 105px 0;
}
#coop .wrapper{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

#coop .wrapper .coop_box{
display: flex;
flex-direction: column;
gap: 50px;
}
#coop .wrapper .coop_box:nth-of-type(1){
}
#coop dl{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
#coop .wrapper.box.nontitle dl{
margin: 0 0 0 0;
}
#coop dl dt{
display: block;
font-size: var(--font-size-xl);
font-weight: 900;
}
#coop dl dt span{
display: inline-block;
font-family: var(--font-family-num);
font-weight: bold;
transform: scale(1.5,1);
}
#coop dl dd{
display: flex;
justify-content: center;
gap: 40px;
}
#coop dl dd p{
display: inline-block;
}
#coop dl dd p a{
display: block;
}
#coop dl dd p img{
width: auto;
height: 60px;
}
#coop dl dd.col6 p img{
width: auto;
height: 38px;
}
.coop_att{
display: block;
margin: 40px 0 0 0;
font-size: var(--font-size-xxxs);
font-weight: 400;
}


/* contact */
#contact{
margin-bottom: 100px;
}
.contact_tit{
display: block;
margin: 55px 0 0 0;
}
.contact_.email{
display: block;
}
.contact_time{
display: block;
}
.contact_out{
display: block;
margin: 34px 0 0 0;
font-size: var(--font-size-s);
font-weight: 700;
}
.contact_out a{
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}


/* footer */
footer{
display: block;
padding: 100px 0 0 0;
position: relative;
}
footer.apply_page{
padding: 200px 0 96px 0;
}
footer:after{
content: "";
width: 100vw;
height: 124px;
background: url(../img/bg_glass.png) repeat-x center center;
background-size: auto 124px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1000;
}
footer.apply_page:after{
bottom: 96px;
}
.footer_bottom{
display: block;
padding: 70px 0 11px 0;
background: url(../img/bg_footer.png) no-repeat center top;
background-size: auto 123px;
position: relative;
z-index: 1100;
}
footer.apply_page{
margin: 95px 0 0 0;
}
#page-top{
width: 183px;
height: 0;
display: block;
margin: 0 auto 0 auto;
padding-top: 208px;
background: url(../img/btn_top.png) no-repeat center center;
background-size: contain;
overflow: hidden;
}

#copyright{
display: block;
margin: 38px 0 0 0;
font-size: var(--font-size-s);
font-weight: 700;
line-height: 1;
text-align: center;
}

.btn_page{
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
margin: 40px 0 80px 0;
}
.btn_apply{
width: 100vw;
display: block;
padding: 17px 0 17px 0;
background-color: var(--dark-yellow);
text-align: center;
position: fixed;
bottom: -200px;
left: 0;
z-index: 9000;
}
.btn_page a.col2,
.btn_apply a.col2{
padding: 10px 0 10px 0;
line-height: 39px;
}
.btn_page a.col2 span,
.btn_apply a.col2 span{
display: block;
font-size: var(--font-base);
line-height: 29px;
}
.btn_apply.on{
animation: apply_on_animation 0.8s forwards;
}
.btn_apply.off{
animation: apply_off_animation 0.8s forwards;
}
.btn_page a,
.btn_apply a{
width: 640px;
display: block;
margin: 0 auto 0 auto;
background-color: var(--pink);
color: var(--white);
border: 5px solid var(--black);
border-radius: 31px;
font-family: var(--font-family-tit);
font-size: var(--font-size-xl);
line-height: 52px;
position: relative;
}
.btn_page a:after,
.btn_apply a:after{
content: "";
width: 42px;
height: 42px;
display: block;
background: url(../img/icon_link.svg) no-repeat left 17px center;
background-size: 13px auto;
background-color: var(--white);
border: 2px solid var(--black);
border-radius: 22px;
position: absolute;
top: 3px;
right: 10px;
}
.btn_page a.col2:after,
.btn_apply a.col2:after{
top: 20px;
}
.btn_br{
display: none;
}
.btn_page a:hover,
.btn_apply a:hover{
border: 5px solid var(--pink);
}
.btn_page a:hover:after,
.btn_apply a:hover:after{
background: url(../img/icon_link_w.svg) no-repeat left 17px center;
background-size: 13px auto;
background-color: var(--pink);
border: 2px solid var(--pink);
}

.btn_more{
width: 160px;
margin: 0 auto 0 auto;
}
.btn_more a{
width: 100%;
display: block;
background: url(../img/arr_l_w.svg) no-repeat right 10px center;
background-size: 11px auto;
background-color: var(--green);
color: var(--white);
border: 2px solid var(--black);
border-radius: 25px;
font-size: var(--font-size-xxs);
line-height: 46px;
text-align: center;
}

/* menu */
#menu{
width: 50px;
height: 40px;
display: block;
position: fixed;
top: 30px;
right: 30px;
overflow: hidden;
cursor: pointer;
z-index: 95000;
}
#menu span{
width: 50px;
height: 3px;
display: block;
background-color: var(--black);
border-radius: 2px;
position: absolute;
right: 0;
}

#menu span:nth-of-type(1) {
top: 9px;
}
#menu span:nth-of-type(2) {
top: 19px;
}
#menu span:nth-of-type(3) {
bottom: 9px;
}

#menu span:nth-of-type(1) {
animation: menu-bar01 .5s forwards;
}
#menu span:nth-of-type(2) {
animation: menu-bar01 .75s forwards;
}
#menu span:nth-of-type(3) {
animation: menu-bar01 1s forwards;
}

@keyframes menu-bar01 {
0% {
transform: translateX(40px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

#menu.active{
}
#menu.active span{
}

#menu.active span:nth-of-type(1) {
animation: active-menu-bar01 .5s forwards;
}
@keyframes active-menu-bar01 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(54px);
opacity: 0;
}
51% {
transform: translate(0,10px) rotate(-45deg);
opacity: 0;
background: #333333;
}
100% {
transform: translate(0,10px) rotate(-45deg);
opacity: 1;
background: #333333;
}
}

#menu.active span:nth-of-type(2) {
animation: active-menu-bar02 .5s forwards;
}
@keyframes active-menu-bar02 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(54px);
}
100% {
transform: translateX(54px);
}
}

#menu.active span:nth-of-type(3) {
animation: active-menu-bar03 .5s forwards;
}
@keyframes active-menu-bar03 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(54px);
opacity: 0;
}
51% {
transform: translate(0,-10px) rotate(45deg);
opacity: 0;
background: #333333;
}
100% {
transform: translate(0,-10px) rotate(45deg);
opacity: 1;
background: #333333;
}
}


#gNav{
width:100vw;
height: 100vh;
display: none;
padding: 80px 0 80px 0;
position: fixed;
top: 0;
left: 0;
z-index: 94000;
overflow-y: scroll;
}

#gNav.active{
display: block;
}
#gNav .nav_block{
display: flex;
flex-direction: column;
justify-content: center;
}
#gNav .nav_block ul{
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
margin: 40px auto 0 auto;
font-family: var(--font-family-tit);
text-align: center;
}
#gNav .nav_block ul li{
display: inline-block;
margin: 0 0 0 0;
padding: 0 0 0 70px;
line-height: 80px;
text-align: left;
position: relative;
}
#gNav .nav_block ul li:before{
content: "";
width: 6px;
height: 6px;
display: block;
}
#gNav .nav_block ul li a{
display: inline-block;
}

#gNav .nav_block ul li.nav_close{
display: none;
}

.sns_list{
width: 196px;
display: flex;
justify-content: center;
gap: 40px;
margin: 40px auto 0 auto;
}
.sns_list li{
width: 78px;
display: block;
}
.sns_list li a{
width: 78px;
height: 0;
display: block;
padding-top: 78px;
border-radius: 10px;
overflow: hidden;
}
.sns_list li.sns_x a{
background:url(../img/ico_x_w.svg) no-repeat center center;
background-size: auto 45px;
background-color: var(--black);
}
.sns_list li.sns_in a{
background:url(../img/ico_in_w.svg) no-repeat center center;
background-size: auto 50px;
background-color: var(--black);
}


#related_link{
background-color: var(--green);
}

/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */


body{
font-size: var(--font-base-sp);
font-weight: 600;
line-height: 1.8;
letter-spacing: 0.5px;
}
body.scroll-prevent{
overflow: hidden;
}


/* Layout */
section{
}
#page{
}
.scroll-prevent #page{
}
.wrapper{
width: auto;
margin: 0 6.1vw 0 6.1vw;
}
.wrapper.box{
padding: 42px 3.3vw 70px 3.3vw;
border: 3px solid var(--black);
border-radius: 30px;
}

h2{
width: auto;
margin: 0 6.1vw 0 6.1vw;
border: 2px solid var(--dark-green);
border-radius: 10px;
font-size: var(--font-h2-sp);
line-height: 52px;
letter-spacing: 2px;
}
h3{
width: 100%;
height: 84px;
background: url(../img/bg_h3.png) no-repeat center center;
background-size: auto 84px;
font-size: var(--font-h3-sp);
line-height: 60px;
letter-spacing: 2px;
}
.wrapper.box h3{
top: -42px;
left: 0;
}
h4{
font-size: var(--font-h4-sp);
line-height: 1.8;
}
h5{
font-size: var(--font-h5-sp);
line-height: 1;
}
h5.place_tit{
padding: 0 0 0 39px;
line-height: 30px;
}
h5.place_tit:before{
width: 30px;
height: 30px;
background-color: var(--green);
top: 0;
left: 0;
}

.nolink{
}

.pcHide{
display: block !important;
}
.spHide{
display: none !important;
}
.pc_br{
display: none;
}
.sp_br{
display: inline;
}

.wrapper:after{
}


/* related_link */
#related_link{
padding: 100px 0 80px 0;
}
#related_link .wrapper{
width: auto;
}
.related_box{
flex-direction: column;
justify-content: flex-start;
}
.related_left{
width: auto;
margin-top: 40px;
padding: 0 0 0 0;
}
.related_left img{
width: 240px;
height: auto;
}
.related_right{
width: 240px;
margin-top: 36px;
padding: 36px 0 0 0;
border-left: none;
border-top: 1px solid var(--black);
}
.related_right img{
width: 240px;
height: auto;
}
.related_tit{
display: block;
font-size: var(--font-size-xxs);
}
.related_btn{
}
.related_right .related_btn:nth-of-type(2){
margin: 30px 0 0 0;
}

/* coop */
#coop{
padding: 80px 0 80px 0;
}
#coop .wrapper{
width: auto;
flex-direction: column;
}
#coop .wrapper .coop_box{
margin: 50px 0 0 0;
}
#coop .wrapper .coop_box:nth-of-type(1){
margin: 0 0 0 0;
}
#coop dl{
flex-direction: column;
gap: 20px;
}
#coop .wrapper.box.nontitle dl{
margin: 0 0 0 0;
}
#coop dl dt{
width: auto;
display: block;
font-size: var(--font-size-xxs);
}
#coop dl dt span{
display: inline-block;
font-weight: bold;
transform: scale(1.3,1);
}
#coop dl dd{
width: auto;
flex-direction: column;
gap: 20px;
text-align: center;
}
#coop dl dd p{
display: block;
}
#coop dl dd p a{
display: block;
}
#coop dl dd p img{
width: auto;
height: 36px;
}


/* contact */
#contact{
margin-bottom: 80px;
}
.contact_tit{
margin: 30px 0 0 0;
}
.contact_.email{
}
.contact_time{
}
.contact_out{
margin: 34px 0 0 0;
font-size: var(--font-size-xxs);
font-weight: 700;
}
.contact_out a{
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}


/* footer */
footer{
padding: 80px 0 0 0;
}
footer.apply_page{
padding: 80px 0 96px 0;
}
footer:after{
content: "";
width: 100vw;
height: 62px;
background: url(../img/bg_glass.png) repeat-x center center;
background-size: auto 62px;
bottom: 0;
}
footer.apply_page:after{
bottom: 94px;
}
.footer_bottom{
padding: 40px 0 11px 0;
background: url(../img/bg_footer.png) no-repeat center top;
background-size: auto 74px;
}
footer.apply_page{
margin: 0 0 0 0;
}
#page-top{
width: 147px;
margin-left: calc(50% - 74px - 10px);
padding-top: 167px;
background: url(../img/btn_top.png) no-repeat center center;
background-size: contain;
}

#copyright{
margin: 12px 0 0 0;
font-size: var(--font-size-xxs-sp);
}

.btn_page{
margin: 20px 0 60px 0;
}
.btn_apply{
padding: 20px 0 20px 0;
}
.btn_page a,
.btn_apply a{
width: auto;
margin: 0 5.3vw 0 5.3vw;
border: 3px solid var(--black);
border-radius: 27px;
font-family: var(--font-family-tit);
font-size: var(--font-base-sp);
line-height: 48px;
position: relative;
}
.btn_page a.col2,
.btn_apply a.col2{
padding: 5px 0 5px 0;
line-height: 28px;
}
.btn_page a.col2 span,
.btn_apply a.col2 span{
display: block;
font-size: var(--font-size-xxs-sp);
line-height: 20px;
}
.btn_page a{
margin: 0;
}
.btn_page a:after,
.btn_apply a:after{
content: "";
width: 28px;
height: 28px;
display: block;
background: url(../img/icon_link.svg) no-repeat left 11px center;
background-size: 11px auto;
background-color: var(--white);
border: 2px solid var(--black);
border-radius: 19px;
position: absolute;
top: 8px;
right: 10px;
}
.btn_page a.col2:after,
.btn_apply a.col2:after{
top: 12px;
}

/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */

@media screen and (max-width: 460px) {
.btn_br{
display: inline;
}
.btn_page a{
padding: 10px 0 10px 0;
line-height: 1.2;
}
.btn_page a:after{
top: calc(50% - 16px);
}
}

@media screen and (max-width: 480px) {
.btn_page a:after,
.btn_apply a:after{
display: none;
}
}



/* --------- */
/* --------- */
/* animation */
/* --------- */
/* --------- */
@keyframes  apply_on_animation {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-200px);
}
}

@keyframes  apply_off_animation {
0% {
transform: translate(0,-200px);

}
100% {
transform: translate(0,0);
}
}