@charset "utf-8";
:root {
  /* Main */
  --color-primary: #6F8F78;
  --color-primary-light: #EAF2ED;
  --color-primary-dark: #56705D;
  /* Accent */
  --color-accent-blue: #9EC3E6;
  --color-accent-yellow: #E6E36F;
  --color-accent-blue-dark: #6FA6D2;
  /* Text */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-heading: #1F2D24;
  /* Background */
  --color-white: #FFFFFF;
  --color-bg: #F7F7F5;
  /* Border / Line */
  --color-border: #E5E5E5;
  --color-line: #D8E0DB;
  /* Link */
  --color-link: var(--color-primary);
  --color-hover: var(--color-primary-dark);
  /* Status */
  --color-error: #D9534F;
  --color-success: #5CB85C;
}

html {scroll-behavior: smooth;}
body {font-family: "Noto Sans JP", sans-serif; font-size: 18px; color: var(--color-text); line-height: 1.75; background-color: var(--color-bg);}
img {display: block; width: 100%;}
a {text-decoration: none; color: var(--color-link); transition: .5s;}
a:hover {color: var(--color-hover);}
ul,ol {list-style-position: inside;}
.grecaptcha-badge {visibility: hidden;}
@media screen and (max-width:1280px) {
    body {font-size: 16px;}
}
@media screen and (max-width:768px) {
    body {font-size: 14px;}
}

/* header */
#header .header {width: 100%; height: 120px; position: fixed; background-color: rgba(247, 247, 245, 0.5); top: 0; left: 0; z-index: 100;}
#header .header .wrap {height: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .header .wrap .logo {padding: 0 0 0 50px;}
#header .header .wrap .logo a {display: flex; align-items: center;}
#header .header .wrap .logo a:hover {opacity: .8;}
#header .header .wrap .logo a img {width: 115px; height: 100px;}
#header .header .wrap .nav {height: 100%;}
#header .header .wrap .nav .menu {display: flex; list-style: none; align-items: center; height: 100%;}
#header .header .wrap .nav .menu>li {padding: 0 20px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#header .header .wrap .nav .menu>li>a {text-decoration: none; color: var(--color-text); transition: .5s; font-size: 20px;}
#header .header .wrap .nav .menu>li:last-child {padding: 0 50px 0 20px;}
#header .header .wrap .nav .menu>li:last-child>a {color: var(--color-bg); display: flex; align-items: center; background-color: var(--color-primary); padding: 20px 30px 20px 80px; position: relative; border-radius: 15px;}
#header .header .wrap .nav .menu>li:last-child>a::after {content: url(../img/paper-plane.svg); width: 30px; height: 30px; position: absolute; top: 50%; left: 30px; transform: translate(0,-50%);}
#header .header .wrap .nav .menu>li>a>span {display: none;}
#header .header .wrap .nav .menu>li>a:hover {color: var(--color-hover);}
#header .header .wrap .nav .menu>li:last-child>a:hover {color: var(--color-bg); background-color: var(--color-hover);}
#header .header .wrap .responsive {display: flex;}
#header .header .wrap .responsive .responsive_box {display: none; top: 0; right: 0; padding: 11px;}
#header .header .wrap .responsive .responsive_box .responsive_btn {display: none; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; cursor: pointer; position: relative;}
.menu_line_1 ,.menu_line_2 ,.menu_line_3 {background: var(--color-text); width: 100%; height: 2px; margin: 6px 0; transition: 0.5s;}
#header .header .wrap .nav .nav_info {display: none;}
#header .header .wrap .nav .nav_info .nav_logo {display: inline-block; text-decoration: none; transition: .5s; display: flex; align-items: center;}
#header .header .wrap .nav .nav_info .nav_logo img {width: 115px; height: 100px;}
#header .header .wrap .nav .nav_info ul li {list-style: none; margin-top: 1rem; color: var(--color-bg); white-space: pre-wrap; word-break: keep-all;}
.nav_info_tel,.nav_info_map {text-decoration: none; color: var(--color-bg); margin-top: 1rem; transition: .5s;}
.nav_info_tel:hover,.nav_info_map:hover {color: var(--color-primary-light);} 
.nav_info_map::after{display: inline-block; width: 10px; margin-left: 5px; content: url(../img/link_w.svg); }
@media screen and (max-width:1280px) {
    #header .header {height: 100px;}
    #header .header .wrap .logo {padding: 0 0 0 40px;}
    #header .header .wrap .logo a img {width: 92.01px; height: 80px;}
    #header .header .wrap .nav .menu>li {padding: 0 15px;}
    #header .header .wrap .nav .menu>li>a {font-size: 18px;}
    #header .header .wrap .nav .menu>li:last-child {padding: 0 40px 0 15px;}
    #header .header .wrap .nav .menu>li:last-child>a {padding: 15px 25px 15px 70px;}
    #header .header .wrap .nav .menu>li:last-child>a::after {width: 25px; height: 25px;}
}
@media screen and (max-width:960px) {
    #header .header .wrap .responsive {margin: 0 40px 0 0; z-index: 101;}
    #header .header .wrap .responsive .responsive_box {display: flex;}
    #header .header .wrap .responsive .responsive_box .responsive_btn {display: flex;}
    #header .header .wrap .nav {display: flex; align-items: center; background: var(--color-primary); width: 100%; height: 100vh; position: fixed; top: 0; right: -100%; transition: 0.5s; z-index: 100;}
    #header .header .wrap .nav .menu, #header .header .wrap .nav .nav_info {display: block; width: 50%; padding: 0 0 0 20px; height: auto;}
    #header .header .wrap .nav .menu>li {padding: 0 0 20px; height: auto; position: relative; display: block;}
    #header .header .wrap .nav .menu>li>a {display: inline-block; font-size: 16px; color: var(--color-bg);}
    #header .header .wrap .nav .menu>li:last-child {padding: 0 0 20px;}
    #header .header .wrap .nav .menu>li:last-child>a {color: var(--color-bg); line-height: 1.75; background-color: transparent; border-radius: 0; padding: 0; display: block;}
    #header .header .wrap .nav .menu>li:last-child>a::after {content: "";}
    #header .header .wrap .nav .menu>li>a>span {font-size: 12px; display: block;}
    #header .header .wrap .nav .menu>li>a:hover {color: var(--color-primary-light);}
    #header .header .wrap .nav .menu>li:last-child>a:hover {color: var(--color-primary-light); background-color: transparent;}
}
#header .header .wrap .menu_active {right: 0;}
.line_1_active {transform: translateY(14px) rotate(-45deg); background: #fff;}
.line_2_active {opacity: 0;}
.line_3_active {transform: translateY(-14px) rotate(45deg); background: #fff;}
@media screen and (max-width:768px) {
    #header .header {height: 80px;}
    #header .header .wrap .logo {padding: 0 0 0 20px;}
    #header .header .wrap .logo a img {width: 69.01px; height: 60px;}
    #header .header .wrap .responsive {margin: 0 20px 0 0;}
    #header .header .wrap .responsive .responsive_box {padding: 7px;}
    #header .header .wrap .responsive .responsive_box .responsive_btn {width: 36px; height: 36px;}
    #header .header .wrap .nav {display: block;}
    #header .header .wrap .nav .menu {width: 100%; margin: 80px 0 0;}
    #header .header .wrap .nav .nav_info {display: none;}
    #header .header .wrap .nav .menu>li {padding: 0 0 20px;}
    .menu_line_1 ,.menu_line_2 ,.menu_line_3 {height: 2px; margin: 4.5px 0;}
    .line_1_active {transform: translateY(11px) rotate(-45deg);}
    .line_3_active {transform: translateY(-11px) rotate(45deg);}
}

/* head */
#header .head {padding: 120px 0 0;}
#header .head .wrap {margin: 0 80px 0;}
@media screen and (max-width:1280px) {
    #header .head {padding: 100px 0 0;}
    #header .head .wrap {margin: 0 60px 0;}
}
@media screen and (max-width:960px) {
    #header .head .wrap {margin: 0 30px 0;}
}
@media screen and (max-width:768px) {
    #header .head .wrap {margin: 0 10px 0;}
}

/* common */

/* recruit */


/* footer */
#contact .wrap {padding: 100px 0; background-color: var(--color-accent-blue);}
#contact .wrap .contact {margin: 0 100px; display: flex;}
#contact .wrap .contact .desc {width: 30%;}
#contact .wrap .contact .desc h2 {font-size: 30px; color: var(--color-text); font-weight: bold; margin: 0;}
#contact .wrap .contact .desc .txt {font-size: 24px; font-weight: bold; margin: 30px 0 0;}
#contact .wrap .contact .btn-col {width: 70%; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 400px); gap: 60px; justify-content: center; align-items: stretch;}
#contact .wrap .contact .btn-col .btn {background-color: var(--color-white); border-radius: 30px; display: flex; min-height: 200px; align-items: center; color: var(--color-text); font-weight: bold; position: relative;}
#contact .wrap .contact .btn-col .btn span {padding: 0 0 0 40%; font-size: 20px;}
#contact .wrap .contact .btn-col .btn span span {padding: 0; font-size: 14px;}
#contact .wrap .contact .btn-col .btn.tel {line-height: 1;}
#contact .wrap .contact .btn-col .btn.form::before {content: ""; position: absolute; top: 50%; left: 17.5%; width: 40px; height: 30px; transform: translate(0,-50%); background-color:#333; -webkit-mask-image:url("../img/mail.svg"); mask-image:url("../img/mail.svg"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
#contact .wrap .contact .btn-col .btn.tel::before {content: ""; position: absolute; top: 50%; left: 17.5%; width: 30px; height: 30px; transform: translate(0,-50%); background-color:#333; -webkit-mask-image:url("../img/phone.svg"); mask-image:url("../img/phone.svg"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
#contact .wrap .contact .btn-col .btn:hover {background-color: var(--color-hover); color: var(--color-white);}
#contact .wrap .contact .btn-col .btn.form:hover::before {background-color:#fff;}
#contact .wrap .contact .btn-col .btn.tel:hover::before {background-color:#fff;}

#footer .wrap {padding: 100px 0 50px; background-color: var(--color-primary);}
#footer .wrap .f-nav {margin: 0 100px;}
#footer .wrap .f-nav .f-menu {--item-width: 300px; --col-gap: 20px; --row-gap: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr)); column-gap: var(--col-gap); row-gap: var(--row-gap); max-width: calc(var(--item-width) * 6 + var(--col-gap) * 5 - 1px); margin-inline: auto; list-style: none;}
#footer .wrap .f-nav .f-menu > li {height: 100%; display: flex; flex-direction: column;}
#footer .wrap .f-nav .f-menu > li > a {font-weight: bold; color: var(--color-white);}
#footer .wrap .f-nav .f-menu > li .f-child {list-style: none;}
#footer .wrap .f-nav .f-menu > li .f-child > li {padding: 0 0 0 0.5em;}
#footer .wrap .f-nav .f-menu > li .f-child > li > a {font-size: 16px; color: var(--color-white);}
#footer .wrap .f-info {margin: 50px 100px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px;}
#footer .wrap .f-info h1 {width: 100%; justify-self: start;}
#footer .wrap .f-info h1 a {display: inline-block; color: var(--color-white); font-size: 24px; line-height: 1.25; white-space: nowrap;}
#footer .wrap .f-info h1 a span {font-size: 18px;}
#footer .wrap .f-info h1 a .kana {font-size: 16px;line-height: 1;}
#footer .wrap .f-info .address {justify-self: center;}
#footer .wrap .f-info .address p {color: var(--color-white); white-space: nowrap;}
#footer .wrap .f-info .sns {width: 100%; display: flex; justify-content: flex-end; gap: 15px;}
#footer .wrap .f-info .sns a {content: ""; width: 50px; height: 50px; background-color:#fff; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
#footer .wrap .f-info .sns .instagram {-webkit-mask-image:url("../img/instagram.svg"); mask-image:url("../img/instagram.svg");}
#footer .wrap .f-info .sns .x {-webkit-mask-image:url("../img/x.svg"); mask-image:url("../img/x.svg");}
#footer .wrap .f-info .sns .facebook {-webkit-mask-image:url("../img/facebook.svg"); mask-image:url("../img/facebook.svg");}
#footer .wrap .f-info .sns .line {-webkit-mask-image:url("../img/line_logo.svg"); mask-image:url("../img/line_logo.svg");}
#footer .wrap .f-info .sns .tiktok {-webkit-mask-image:url("../img/tiktok.svg"); mask-image:url("../img/tiktok.svg");}
#footer .wrap .copy {margin: 50px 100px 0;}
#footer .wrap .copy small {color: var(--color-white); font-size: 14px;}

@media screen and (max-width:1280px) {
    #contact .wrap .contact {margin: 0 50px; flex-direction: column;}
    #contact .wrap .contact .desc {width: 100%;}
    #contact .wrap .contact .desc h2 {font-size: 24px;}
    #contact .wrap .contact .desc .txt {font-size: 20px;}
    #contact .wrap .contact .btn-col {width: 100%; margin: 50px 0 0;}

    #footer .wrap .f-nav {margin: 0 50px;}
    #footer .wrap .f-nav .f-menu {--item-width: 250px;}
    #footer .wrap .f-nav .f-menu > li .f-child > li a {font-size: 14px;}
    #footer .wrap .f-info {margin: 50px 50px 0; gap: 30px;}
    #footer .wrap .f-info h1 a {font-size: 20px;}
    #footer .wrap .f-info h1 a span {font-size: 16px;}
    #footer .wrap .f-info h1 a .kana {font-size: 14px;}
    #footer .wrap .f-info .sns a {width: 40px; height: 40px;}
    #footer .wrap .copy {margin: 50px 50px 0; text-align: center;}
    #footer .wrap .copy small {font-size: 12px;}

}

@media screen and (max-width:960px) {
    #footer .wrap .f-info {grid-template-columns: 1fr; gap: 25px; text-align: center;}
    #footer .wrap .f-info h1,
    #footer .wrap .f-info .address,
    #footer .wrap .f-info .sns {width: 100%; justify-self: center;}
    #footer .wrap .f-info .sns {justify-content: center;}
    #footer .wrap .f-info .address p {white-space: normal;}

}

@media screen and (max-width:768px) {
    #contact .wrap .contact {margin: 0 20px;}
    #contact .wrap .contact .btn-col {grid-template-columns: minmax(0, 400px); gap: 30px;}

    #footer .wrap .f-nav {margin: 0 20px;}
    #footer .wrap .f-nav .f-menu {--item-width: 200px;}
    #footer .wrap .f-nav .f-menu > li .f-child > li a {font-size: 12px;}
    #footer .wrap .f-info {margin: 40px 20px 0; gap: 20px;}
    #footer .wrap .f-info h1 a {font-size: 18px;}
    #footer .wrap .f-info h1 a span {font-size: 14px;}
    #footer .wrap .f-info h1 a .kana {font-size: 12px;}
    #footer .wrap .f-info .sns a {width: 30px; height: 30px;}
    #footer .wrap .copy {margin: 40px 20px 0;}
    #footer .wrap .copy small {font-size: 10px;}
}

@media screen and (max-width:590px) {
    #footer .wrap .f-nav .f-menu {--item-width: 150px;}
}
/* common */
.bgdesign {background: url(../img/bg_gradation.svg) center top / auto no-repeat;}

.main {text-align: center; container-type: inline-size;}
.main > * {--line-max: 250px; --line-gap: 50px; position: relative; display: inline-block; color: var(--color-primary); font-size: 30px;}
.main > *::before ,
.main > *::after {content: ""; position: absolute; top: 50%; width: min(var(--line-max), max(0px, calc((100cqw - 100%) / 2 - var(--line-gap)))); height: 3px; transform: translateY(-50%); background-image: repeating-linear-gradient(to right, var(--color-primary) 0 3px, transparent 3px 16px);}
.main > *::before {right: calc(100% + var(--line-gap));}
.main > *::after {left: calc(100% + var(--line-gap));}

.sub {font-family: "Homemade Apple", cursive; font-size: 30px; color: var(--color-text-light); margin: 0 150px;}
.sub.right {text-align: right;}

.main-desc {margin: 100px 150px;}
.main-desc .catch {font-size: 30px; text-align: center; font-weight: bold; word-break: keep-all; white-space: normal;}
.main-desc .note {margin: 100px auto; text-align: center; font-weight: bold;}

.link a {display:flex; align-items:center; justify-content: center; gap:15px;}
.link a span {flex-shrink:0; width:60px; height:60px; border-radius:50%; background-color:var(--color-primary); transition:.3s; position:relative;}
.link a span::before{content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; transform:translate(-50%,-50%); background-color:#fff; -webkit-mask-image:url("../img/arrow.svg"); mask-image:url("../img/arrow.svg"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
.link a:hover span{background-color:var(--color-hover);}

.sp {display: none;}

.common-col {display: flex; align-items: center; margin: 150px 0 250px 100px;}
.common-col .img {width: 50%; padding: 2.2%;}
.common-col .img .mask {width: 100%; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center;}
.common-col .img .mask img {width: 100%; height: 100%; object-fit: cover; display: block;}
.common-col .desc {width: 50%; padding: 0 0 0 50px;}
.common-col .desc .inner {background-color: var(--color-white); padding: 4.4vw 7.8vw; border-radius: 80px 0 0 80px;}
.common-col .desc h3 {display:inline; line-height: 2; font-size: 30px; color: var(--color-primary); background:url("../img/line.svg") repeat-x left 100%; background-size:auto 8px; padding-bottom: 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone; word-break: keep-all; white-space: normal;}
.common-col .desc .catch {margin: 30px 0 0;}
.common-col .desc .catch p {font-size: 22px; font-weight: bold; color: var(--color-text-light); display: inline-block; background-position: center; background-size: contain; background-repeat: no-repeat;}
.common-col .desc .content {width: 100%; margin: 40px auto;}
.common-col .about .desc .content p {margin: 0 auto 1em;}

.common-col:nth-child(odd) {flex-direction: row-reverse; margin: 150px 100px 250px 0;}
.common-col:nth-child(odd) .desc {padding: 0 50px 0 0;}
.common-col:nth-child(odd) .desc .inner {border-radius: 0 80px 80px 0;}

.common-col:last-child {margin-bottom: 0;}

.common-col .desc .catch.heart p {background-image: url("../img/icon/heart.svg");}
.common-col .desc .catch.sprout p {background-image: url("../img/icon/sprout.svg");}
.common-col .desc .catch.tree p {background-image: url("../img/icon/tree.svg");}
.common-col .desc .catch.hands p {background-image: url("../img/icon/hands.svg");}
.common-col .desc .catch.flower p {background-image: url("../img/icon/flower.svg");}
.common-col .desc .catch.medical p {background-image: url("../img/icon/medical.svg");}
.common-col .desc .catch.home p {background-image: url("../img/icon/home.svg");}
.common-col .desc .catch.book p {background-image: url("../img/icon/book.svg");}
.common-col .desc .catch.hat p {background-image: url("../img/icon/hat.svg");}

.swiper-scroll .swiper-wrapper {transition-timing-function: linear;}
.swiper-scroll .swiper-wrapper .swiper-slide .mask {width: 100%; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center;}
.swiper-scroll .swiper-wrapper .swiper-slide .mask img {width: 100%; height: 100%; object-fit: cover; display: block;}

.news {margin: 0 100px; display: flex;}
.news .side {width: 30%;}
.news .list {width: 70%;}
.news .list ul {list-style: none;}
.news .list > ul > li {display: flex; align-items: center; color: var(--color-text-light); background-image : linear-gradient(to right, #666, #666 2px, transparent 2px, transparent 8px); background-size: 8px 2px; background-position: left bottom; background-repeat: repeat-x;}
.news .list > ul > li .date {display: flex; align-items: center;}
.news .list > ul > li .date .cat {margin: 0 50px;}
.news .list > ul > li .date .cat > ul > li {background-color: var(--color-text-light); border-radius: 99px; padding: 0 20px; color: var(--color-bg); font-size: 16px;}
.news .list > ul > li a h3 {font-size: 18px; font-weight: normal; color: var(--color-text-light); line-height: 4;}

/* recruit */
#recruit .wrap {margin: 250px auto 0; padding: 200px 0; background-color: var(--color-primary); position: relative;}
#recruit .wrap::before {content: ""; position: absolute; top: -63px; left: 0; width: 100%; height: 64px; background: url("../img/wave.svg") center bottom / 100% 100% no-repeat; pointer-events: none;}
#recruit .sub {color: var(--color-bg);}
#recruit h2 {font-size: 20px; font-weight: normal; margin: 0 150px; color: var(--color-bg);}

.recruit {display: flex; margin: 0 100px;}
.recruit .img {width: 50%;  padding: 2.2%;}
.recruit .img .mask {width: 100%; position: relative; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center;}
.recruit .img .mask img {width: 100%; height: 100%; object-fit: cover; display: block;}
.recruit .desc {width: 50%; padding: 0 0 0 50px;}
.recruit .desc h3 {display:inline; line-height: 2; font-size: 30px; color: var(--color-bg); background:url("../img/line_w.svg") repeat-x left 100%; background-size:auto 8px; padding-bottom: 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.recruit .desc .content {width: 100%; margin: 70px auto;}
.recruit .desc .content p {margin: 0 auto 1em; font-weight: bold; color: var(--color-bg);}
.recruit .desc .link a {color: var(--color-bg);}
.recruit .desc .link a span {background-color:var(--color-bg);}
.recruit .desc .link a span::before{background-color: var(--color-primary);}
.recruit .desc .link a:hover {color: var(--color-primary-light);}
.recruit .desc .link a:hover span {background-color: var(--color-primary-light);}

/* head */
/* page */
#header .head .wrap.page .head-img {width: 100%; height: calc(100vh - 370px); -webkit-mask-image: url("../img/mask_01.svg"); mask-image: url("../img/mask_01.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; position: relative;}
#header .head .wrap.page .head-img img {width: 100%; height: 100%; object-fit: cover; display: block;}
#header .head .wrap.page .head-img .ttl {position: absolute; bottom: 15%; left: 5%; width: fit-content; max-width: 90%; font-size: 2.75vw; color: var(--color-primary); font-weight: normal;}
#header .head .wrap.page .head-img .ttl-span {display: inline; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-color: var(--color-white); padding: 0 0.25em;}
#header .head .wrap.page .head-img .ttl-sub {position: absolute; bottom: 0; right: 0; display: inline-block; white-space: nowrap; font-size: 1.75vw; color: var(--color-accent-blue); transform: translate(50%, 0) rotate(-12deg); font-family: "Homemade Apple", cursive;}

.table table {width: 100%; border-collapse: collapse;}
.table table tr th {font-weight: normal; width: 25%; text-align: left; padding: 0.5em 0; background-image : linear-gradient(to right, #1F2D24, #1F2D24 2px, transparent 2px, transparent 8px); background-size: 8px 2px; background-position: left bottom; background-repeat: repeat-x;}
.table table tr td {font-weight: normal; width: 75%; padding: 0.5em 0; background-image : linear-gradient(to right, #9EC3E6, #9EC3E6 2px, transparent 2px, transparent 8px); background-size: 8px 2px; background-position: left bottom; background-repeat: repeat-x;}


@media screen and (max-width:1280px) {
    .sub {font-size: 22px; margin: 0 50px;}

    .main > * {--line-max: 180px; --line-gap: 35px; font-size: 22px;}
    .main > *::before, .main > *::after {height: 2px; background-image: repeating-linear-gradient(to right, var(--color-primary) 0 2px, transparent 2px 12px);}

    .main-desc {margin: 100px 50px;}
    .main-desc .catch {font-size: 22px;}

    .link a span {width:54px; height:54px;}
    .link a span::before{width:16px; height:16px;}

    .common-col {margin: 100px 0 150px 50px;}
    .common-col .desc {padding: 0 0 0 20px;}
    .common-col .desc .inner {padding: 50px; border-radius: 64px 0 0 64px;}
    .common-col .desc h3 {font-size: 27px; padding-bottom: 8px;}
    .common-col .desc .catch {margin: 27px 0 0;}
    .common-col .desc .catch p {font-size: 20px;}
    .common-col .desc .content {margin: 32px auto;}

    .common-col:nth-child(odd) {margin: 100px 50px 150px 0;}
    .common-col:nth-child(odd) .desc {padding: 0 20px 0 0;}
    .common-col:nth-child(odd) .desc .inner {border-radius: 0 64px 64px 0;}

    .news {margin: 0 50px;}
    .news .list ul li .date .cat {margin: 0 20px;}
    .news .list ul li .date .cat ul li {font-size: 14px;}
    .news .list ul li a h3 {font-size: 16px;}

    #recruit .wrap {margin: 200px auto 0;}
    #recruit h2 {font-size: 18px; margin: 0 50px;}
    
    .recruit {margin: 0 50px;}
    .recruit .desc {padding: 0 0 0 40px;}
    .recruit .desc h3 {font-size: 24px; padding-bottom: 8px;}
    .recruit .desc .content {margin: 50px auto;}

    #header .head .wrap.page .head-img {height: calc(100vh - 350px);}
}

@media screen and (max-width:960px) {
    .common-col {display: block; margin: 100px 50px;}
    .common-col .img {width: 100%; max-width: 650px; margin: 50px auto;}
    .common-col .desc {width: 100%; padding: 0;}
    .common-col .desc .inner {border-radius: 50px; text-align: center;}

    .common-col:nth-child(odd) {margin: 100px 50px;}
    .common-col:nth-child(odd) .desc {padding: 0;}
    .common-col:nth-child(odd) .desc .inner {border-radius: 50px;}

    .common-col:last-child {margin-bottom: 0;}

    .news {display: block;}
    .news .side {width: 100%;}
    .news .list {width: 100%;}

    .recruit {display: block;}
    .recruit .img {width: 100%; max-width: 650px; margin: 50px auto; padding: 28px;}
    .recruit .desc {width: 100%; padding: 0;}
}

@media screen and (max-width:768px) {
    .sub {font-size: 18px; margin: 0 20px;}

    .main > * {--line-gap: 25px; font-size: 18px;}

    .main-desc {margin: 100px 20px;}
    .main-desc .catch {font-size: 18px;}

    .link a span {width:43px; height:43px;}
    .link a span::before{width:12px; height:12px;}

    .common-col {margin: 100px 20px;}
    .common-col .desc .inner {padding: 50px 5px;}
    .common-col .desc h3 {font-size: 20px; padding-bottom: 6px;}
    .common-col .desc .catch {margin: 20px 0 0;}
    .common-col .desc .catch p {font-size: 16px;}

    .common-col:nth-child(odd) {margin: 100px 20px;}

    .common-col:last-child {margin-bottom: 0;}

    .news {margin: 0 20px;}
    .news .list ul li .date .cat {margin: 0 10px;}
    .news .list ul li .date .cat ul li {font-size: 12px; padding: 0 10px;}
    .news .list ul li a h3 {font-size: 14px;}

    #recruit .wrap {margin: 150px auto 0; padding: 100px 0;}
    #recruit h2 {font-size: 15px; margin: 0 20px;}

    .recruit {margin: 0 20px;}
    .recruit .desc h3 {font-size: 20px; padding-bottom: 6px;}

    #header .head .wrap.page .head-img {height: calc(100vh - 330px); -webkit-mask-image: url("../img/mask_01_sp.svg"); mask-image: url("../img/mask_01_sp.svg");}
    #header .head .wrap.page .head-img .ttl {bottom: 15%; left: 5%; font-size: 5vw;}
    #header .head .wrap.page .head-img .ttl-sub {bottom: 15%; left: 25%; font-size: 3.5vw;}
}

@media screen and (max-width:700px) {
    .recruit .img {padding: 4.3%;}

}

@media screen and (max-width:590px) {

    .main > * {--line-gap: 15px;}

    .sp {display: block;}

    .news .list>ul>li {display: block; padding: 1em 0}
    .news .list ul li a h3 {line-height: 2;}

    #header .head .wrap.page .head-img {height: calc(80vh - 330px);}

}

/* Fade In Animation */
/* 通常コンテンツ */
.js-fadein {opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;}
.js-fadein.is-show {opacity: 1; transform: translateY(0);}
/* 写真専用 */
.js-fadein-img {opacity: 0; transform: translateY(30px) scale(1.03); transition: opacity 1.2s ease, transform 1.2s ease;}
.js-fadein-img.is-show {opacity: 1; transform: translateY(0) scale(1);}
/* 遅延表示用 */
.js-fadein.delay-1 {transition-delay: 0.15s;}
.js-fadein.delay-2 {transition-delay: 0.3s;}
.js-fadein.delay-3 {transition-delay: 0.45s;}