@charset 'utf-8';

.lead { margin-bottom: 0;}
.job_main .contents_inner { margin: 0 auto;}
.job_main .contents_box:last-of-type { margin-bottom: 0;}
.contents_box { width:100%; margin-bottom:40px; }
.contents_box p { font-family: "Zen Kaku Gothic New", sans-serif; line-height:2em; text-align: justify;}
.column_three { width:100%; display:flex; flex-wrap:wrap; justify-content: space-between; margin-top:40px; }
.column_three li { width:100%; margin-bottom:30px; }
.column_three li img { width:100%; border:1px solid #707070; margin-bottom:10px; }
.column_three li span { font-size: 14px;}
.column_two { width:100%; margin:50px 0 0 0; display:flex; flex-wrap:wrap; justify-content: space-between; }
.column_two li { width:100%; margin-bottom: 32px; }
.column_two li img { width:100%; border:1px solid #707070; margin-bottom:12px; }
.column_two li strong { width:100%; font-size:24px; display:inline-block; margin-bottom:12px; line-height:1.5em; }
.column_three.reno li { position:relative; }
.column_three.reno li span { font-size: 14px; font-family: "Zen Kaku Gothic New", sans-serif;}
.column_two.reno li { position:relative;}
.column_two.reno li:last-of-type { margin-bottom: 0;}
.column_two.reno li span { font-size: 14px; font-family: "Zen Kaku Gothic New", sans-serif;}
.contents_wrap.toplink { margin: 0 auto; padding: 0;}

@media screen and (min-width:768px) {
    .contents_box { margin-bottom:100px; }

    .contents_box p { margin-bottom:40px; }
    .column_three { margin-top:initial; }
    .column_three li { width:32%; margin-bottom:initial; margin-bottom:30px; }
    .column_two { width:100%; margin:0; display:flex; justify-content: space-between; margin-top:initial; }
    .column_two li { width:49%; }
    .column_two li img { width:100%; border:1px solid #707070; margin-bottom:12px; }
    .column_two li strong { font-size:18px; }
    .column_two li strong .inline_pad { display:inline-block; }
   
}
@media screen and (min-width:1280px) {
    .column_two li strong { font-size:24px; }
    .column_two li strong .inline_pad { display:none; }
    

}

.logo_wrap { width:100%; display:flex;flex-wrap:wrap; align-items: flex-start;  margin-bottom:40px; }
.logo_wrap img { width:70%; margin:20px auto; display:block; }
.logo_wrap p { line-height:1.7em; text-align: justify;}
@media screen and (min-width:768px) {
    .logo_wrap { margin-bottom:80px; }
    .logo_wrap img { width:20%; margin:0 10% 0 auto; }
}

h2.border_bottom { margin-bottom: 10px;}
h3 { font-size:24px; line-height:1.5em; display:flex; align-items: baseline; margin-bottom:32px; }
@media screen and (min-width:768px) {
    h2.border_bottom { margin-bottom: 20px;}
    h3 { font-size:32px; }
}

.jobs_top { width:100%; height:auto; display:flex; flex-wrap:wrap;  margin-bottom:100px; }
.jobs_top .lead { width:100%; font-size: 20px; text-align: justify; line-height: 1.7em;}
.jobs_top .lead.gothic { font-size: 16px;}
@media screen and (min-width:768px) {
    .jobs_top { justify-content: space-between; margin: 100px auto 150px auto; }
    .jobs_top .lead { width:initial; font-size: 32px; }
    .jobs_top .lead.gothic { font-size: 16px;}
}
@media screen and (min-width:1024px) {
    .jobs_top { margin-top:0; }
    .jobs_top .lead { font-size: 22px; margin-top:100px; }

}

/*ボタンクリック　モーダル*/
.circle-wrap { position:relative; width:100%;  display:grid; place-items:center; margin-top: 150px;}
/*.circle { width:410px; height:410px; border-radius:50%; border:1px solid #000; }*/
.circle { width:75vw; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #000; max-width: 410px; margin: 0 auto;}
.btn { position:absolute; width:38%; height:auto; cursor:pointer; transition:transform .25s ease; }
.btn::before { content:"More　"; position:absolute; z-index:1; color:#000; background-color: #9DC52C; top:54%; right:0; left:0; margin:0 auto; width:90px; height:30px; border-radius:15px; text-align:center; font-size:15px; line-height:30px; letter-spacing:0.1em;}
.btn::after { content:"›"; width:10px; height:20px; position:absolute; z-index:1; color:#000; top:59%; right:50%; left:65%;transform:rotate(90deg); }
.btn img {transition: transform 0.5s ease;}
.btn:hover img{ transform: scale(1.05);}
.btn:hover::before { background-color: #fff; border: solid 1px #9DC52C; color: #9DC52C;}
.btn:hover::after { color: #9DC52C; }
.btn1 img,.btn2 img,.btn3 img,.btn4 img,.btn5 img { width:100%; }
.btn[data-pos="top-right"] { top:18%; right:-3%;}
.btn[data-pos="top-left"] { top:18%; left:-3%;}
.btn[data-pos="top"] { top:-5%; right:10%; top:-18%; left:0; right: 0; margin: 0 auto;}
.btn[data-pos="bottom-right"] { right:8%; bottom:-15%;}
.btn[data-pos="bottom-left"] { left:8%; bottom:-15%;}
.circle_logo { width: 25%; position: absolute; right: 0; left: 0; margin: 0 auto; transform: translateY(-50%); top: 50%; }
.circle-wrap .attention { position: absolute;margin: 0 auto;right: 0;left: 0;text-align: center;top: -28vw;font-size: 3.5vw; border: solid 1px; padding: 7px; width: 90%;}
.ill { display:none; }
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.42); backdrop-filter:saturate(110%) blur(2px); z-index:100000; }
.modal.show { display:flex; }
.modal__panel { position:relative; width:min(92vw,1200px); max-height:84vh; background:#fff; display:grid; grid-template-rows:auto 1fr; overflow:hidden; animation:fadeIn .32s ease;
padding:40px 5%; }
.template_logo { width:100%; margin-bottom:20px; }
.template_logo5 { width: 85%; margin: 0 auto;}
.template_text { margin-bottom:20px; text-align: justify;}
@media screen and (min-width:768px) {
    .circle-wrap { margin: 100px auto 0 auto; width:410px; aspect-ratio:1/1; }
    .circle { width:410px; height:410px; border-radius:50%; border:1px solid #000; }
    .template_logo { width:60%; }
    .btn { width: 40%;}
    .btn[data-pos="top-right"] { top:18%; right:-13%;}
    .btn[data-pos="top-left"] { top:18%; left:-13%;}
    .btn[data-pos="top"] { top:-5%; right:10%; top:-18%; left:0; right: 0; margin: 0 auto;}
    .btn[data-pos="bottom-right"] { right:5%; bottom:-5%;}
    .btn[data-pos="bottom-left"] { left:5%; bottom:-5%;}
    .circle_logo { width:140px; }
    .circle-wrap .attention { bottom: -80px; top: inherit; font-size: 15px;}
    .ill { display:block; position:absolute; }
    .ill1 { width:66px; top:20px; right:-18%; }
    .ill2 { width:72px; bottom:-30px; right:-50px; }
    .ill3 { width:72px; bottom:-37px; left:-38px; }
    .ill4 { width:154px; top:200px; left:-80px; }
    .ill5 { width:102px; top:-60px; left:40px; }
  
}
@media screen and (min-width:1280px) {
    .circle-wrap { margin: 150px 10% 0 0; width:410px; aspect-ratio:1/1; }
    .ill1 { width:66px; top:20px; right:-100px; }
    .ill4 { left:-150px; }
    
}
.modal__hd { display:flex; align-items:center; gap:12px; padding:14px 18px 24px 18px; border-bottom:1px solid #707070;  }
.modal__title { margin:0; font-size:40px; letter-spacing:.0.1em; }
.modal__close { margin-left:auto; width:36px; height:36px; display:grid; place-items:center; cursor:pointer; transition:transform .2s ease,background-color .2s ease; }
.modal__close:hover { background:#f2f7fa; transform:scale(1.05); }
.modal__bd { padding:24px 18px 18px 18px; overflow:auto; line-height:1.8; }
.modal__bd img, .modal__bd video, .modal__bd iframe { max-width:100%; height:auto; display:block; }
body.lock { overflow:hidden; }
@keyframes fadeIn { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
/*@media (prefers-reduced-motion:reduce) { .btn,.modal__close { transition:none; } .modal { backdrop-filter:none; } .modal__panel { animation:none; } }*/


.template { width:100%; display:flex; flex-wrap:wrap; justify-content: space-between;}
.template li { width:100%; margin-bottom:10px; }
.arrow_more { margin-top: 20px; display: flex; justify-content: flex-end;}
#tmpl-top .template li img { margin: 0 auto; }
@media screen and (min-width:768px) {
    .template li { width:48%; margin-bottom:initial; }
    .arrow_more { display: flex; justify-content: flex-start;}
}

.image_top { width: 90%; margin: 0 auto; height:auto; overflow:hidden; display:flex; align-items:center; margin-bottom:80px; }
.image_top video { width:100%; }
@media screen and (min-width:768px) {
    .image_top { height:37vw;}
}