/* =================================================================
page共通
=================================================================*/
.page {position: relative; overflow: hidden; padding-top: 99px;}
.page:before {content: ""; display: block; width: 100%; height: 450px; background: #1E1E1E; position: absolute; top: 0; z-index: -1;}

.page-header:before {content: ""; background-image: url(../img/page/common_bg_left.svg); display: block; width: 1051.09px; height: 583.91px; position: absolute; left: -251px; top: 252px; z-index: -1;}
.page-header:after {content: ""; background-image: url(../img/page/common_bg_right.svg); display: block; width: 928px; height: 1178px; position: absolute; right: -464px; top: -209px; z-index: -1;}

.breadcrumbs {display: flex; align-items: center; width: 100%; max-width: 1480px; margin: 0 auto 75px;}
.breadcrumbs li {color: #fff; font-size: 14px; letter-spacing: -0.025em;}
.breadcrumbs .arrow {padding-left: 0.5em;}

.page-title {font-size: 48px; color: #fff; font-weight: bold; padding: 0 136px; width: 100%; max-width: 1480px; margin: 0 auto; line-height: 1.3;}
.page-title .en {font-size: 24px; font-weight: bold; margin-top: 20px; display: block;}

@media screen and (max-width: 1199px) {
    .page {padding-top: 58px;}
    .page:before {height: 359px;}
    .page-header:before {display: none;}
    .page-header:after {width: 228px; height: 290px; right: -114px; top: 0;}

    .breadcrumbs {padding: 0 32px; margin-bottom: 45px; gap: 6px 0px; flex-wrap: wrap;}
    .breadcrumbs li {font-size: 11px;}

    .page-title {font-size: 30px; padding: 0 30px;}
    .page-title .en {font-size: 15px;}
}

/* =================================================================
presidentmessage
=================================================================*/
.presidentmessage {padding-bottom: 211px;}
.page.presidentmessage:after {content: ""; display: block; width: 87.5%; height: 100%; background: #3D3D3D; position: absolute; top: 0; left: 0; z-index: -2;}

.presidentmessage .page-title {margin-bottom: 88px;}
.presidentmessage .message {max-width: 900px; margin: auto;}
.presidentmessage p {font-size: 18px; line-height: 2.111111111111111; color: #fff;}
.presidentmessage .message .name {margin-top: 59px; line-height: 1.944444444444444;}

.presidentmessage .quality {display: flex; justify-content: flex-end; position: relative; max-width: 900px; margin: 165px auto 0;}
.presidentmessage .quality .image {position: absolute; left: -394px; width: 691.49px; height: 384.14px;}
.presidentmessage .quality h3 {font-size: 28px; font-weight: bold; color: #fff; margin-bottom: 29px;}
.presidentmessage .quality ol {list-style-type: decimal; padding-left: 1em;}
.presidentmessage .quality li {font-size: 18px; line-height: 2.111111111111111; color: #fff;}

@media screen and (max-width: 1199px) {
    .presidentmessage {padding-bottom: 109px;}
    .presidentmessage .page-title {margin-bottom: 36px;}
    .page.presidentmessage:after {width: 100%; background-color: #1E1E1E;}
    .presidentmessage .message {padding: 0 30px; position: relative;}
    .presidentmessage .message:after {content: ""; display: block; width: 172vw; height: auto; aspect-ratio: 642.09 / 307.91; background: url(../img/page/presidentmessage/message_bg.svg); background-size: cover; position: absolute; top: 59%; z-index: -1; right: -93%;}
    .presidentmessage .message .name {margin-top: 27px;}
    .presidentmessage p {line-height: 1.866666666666667; font-size: 15px;}

    .presidentmessage .quality {padding-top: 77vw; margin: 50px auto 0; align-items: center;}
    .presidentmessage .quality .image {width: 109vw; height: auto; aspect-ratio: 408.51 / 226.94; left: -18%; top: 0;}
    .presidentmessage .quality .text {padding: 0 30px; width: 100%;}
    .presidentmessage .quality li {line-height: 1.866666666666667; font-size: 15px;}
}

/* =================================================================
company
=================================================================*/
.company .page-title {margin-bottom: 61px;}
.company .intro {position: relative; width: 100%; max-width: 1200px; margin: auto; padding: 81px 0 224px;}
.company .intro:before {content: ""; display: block; width: 1089.09px; height: 537.91px; background: url(../img/page/company/intro_bg.svg); background-size: cover; position: absolute; top: 0; left: -292px; z-index: -1;}

.company .intro .text {height: 457px; position: relative; z-index: 10;}
.company .intro h2 {font-size: 50px; font-weight: bold; line-height: 1.44; margin-bottom: 28px;}
.company .intro ul {display: flex; flex-direction: column; gap: 10px;}
.company .intro li {font-size: 18px; color: #fff; background: #3C3C3C; height: 50px; max-width: 694px; width: 100%; display: flex; align-items: center; padding-left: 21px; letter-spacing: -0.06em;}
.company .intro .image {width: 1172.62px; height: 575.91px; position: absolute; right: -266px; top: 273px; z-index: 9;}

.company .overview {width: 100%; max-width: 1200px; margin: auto; background: #fff; position: relative; z-index: 0; padding: 171px 150px 114px; display: flex; flex-direction: column; gap: 47px;}
.company .overview .box {padding-bottom: 43px; border-bottom: 1px solid #DCDCDC;}
.company .overview .box:last-child {border-bottom: 0;}
.company .overview h3 {font-size: 28px; font-weight: bold; margin-bottom: 19px; display: flex; align-items: center; gap: 38px;}
.company .overview p {font-size: 18px; line-height: 2.222222222222222;}
.company .overview p + p {margin-top: 24px;}
.company .overview .nakaguro {color: #B4B4B4;}
.company .overview a {display: flex; justify-content: center; align-items: center; background-image: url(../img/page/company/button.svg); background-size: cover; font-weight: bold; font-size: 15px; height: 28px; width: 98px; color: #fff;}
.company .overview .flex {display: flex; flex-wrap: wrap; gap: 8px 0;}
.company .overview .flex .item {width: 100%; max-width: 450px;}

.company .history {background: #3C3C3C; color: #fff; padding: 265px 0 260px; margin-top: -195px;}
.company .history .inner {padding-left: 455px; position: relative;}
.company .history .inner:before {content: ""; display: block; width: 630.54px; height: 364.03px; background: url(../img/page/company/history_img01.png); background-size: cover; position: absolute; top: 0; left: -237px;}
.company .history .inner:after {content: ""; display: block; width: 630.54px; height: 364.03px; background: url(../img/page/company/history_img02.png); background-size: cover; position: absolute; top: 386px; left: -237px;}
.company .history h3 {font-size: 28px; font-weight: bold; margin-bottom: 27px; padding-top: 50px;}
.company .history ul {font-size: 18px; line-height: 36px;}
.company .history li {display: flex; align-items: flex-start; gap: 15px; }
.company .history li .date {width: 116px;}

@media screen and (max-width: 1199px) {
    .company .page-title {margin-bottom: 36px;}
    .company .intro {padding: 30px 0 297px;}
    .company .intro:before {width: 642.09px; height: 307.91px; left: -192px;}
    .company .intro h2 {font-size: 28px;}
    .company .intro .text {padding: 0 30px;}
    .company .intro li {font-size: 16px; line-height: 1.5625; padding: 14px 26px 15px 50px; height: auto; text-indent: -2em;}
    .company .intro .image {width: 100%; height: auto; right: -84px; top: 428px; aspect-ratio: 375 / 211;}

    .company .overview {padding: 45px 30px; margin-right: 0; float: right; width: 92%; gap: 30px; margin-bottom: -126px; position: relative; z-index: 10;}
    .company .overview .box {padding-bottom: 36px;}
    .company .overview h3 {font-size: 24px; margin-bottom: 22px; justify-content: space-between;}
    .company .overview p {font-size: 15px; line-height: 1.8;}
    .company .overview p .indent {display: block; padding-left: 1em; text-indent: -1em;}
    .company .overview p .small {font-size: 12px;}

    .company .overview .flex {flex-direction: column; gap: 41px;}
    .company .overview .flex .item {}

    .company .history {clear: both; margin-top: 0; padding: 175px 0 0px;}
    .company .history .inner {display: flex; flex-direction: column; align-items: center; padding: 0;}
    .company .history .inner h3 {order: 1; padding-top: 0px; margin-bottom: 20px; text-align: left;}
    .company .history .inner ul {order: 2; display: flex; flex-direction: column; gap: 20px; padding: 0 30px 74px;}
    .company .history .inner li {font-size: 15px; flex-direction: column; gap: 10px; line-height: 1.666666666666667;}
    .company .history .inner:before {position: static; order: 3; background-image: url(../img/page/company/history_img01_sp.png); width: 100%; height: auto; aspect-ratio: 375 / 211;}
    .company .history .inner:after {position: static; order: 4; background-image: url(../img/page/company/history_img02_sp.png); width: 100%; height: auto; aspect-ratio: 375 / 211;}
}


/* =================================================================
businesslocation
=================================================================*/
.businesslocation {padding-bottom: 150px; position: relative;}
.businesslocation .page-title {margin-bottom: 46px;}
.businesslocation .bg-wrap {position: relative;}
.businesslocation .bg-wrap:before {content: ""; display: block; width: 58vw; max-width: 928px; height: auto; aspect-ratio: 928/ 1178; background-image: url(../img/page/businesslocation/bg_left.svg); background-size: cover; position: absolute; left: -464px; top: 1164px; z-index: -1;}
.businesslocation .bg-wrap:after {content: ""; display: block; width: 58vw; max-width: 928px; height: auto; aspect-ratio: 928/ 1178; background-image: url(../img/page/businesslocation/bg_right.svg); background-size: cover; position: absolute; right: -464px; top: 1801px; z-index: -1;}
.businesslocation .list {position: relative;}
.businesslocation .list:before {position: absolute; content: ""; display: block; max-width: 1217.62px; height: 505.16px; width: 100%; background: url(../img/page/businesslocation/businesslocation_page-header_bg.svg); background-size: cover; z-index: -1; left: 128px; top: 21px;}
.businesslocation .box {display: flex; align-items: flex-start; justify-content: space-between; max-width: 1600px; gap: 6%;}
.businesslocation .box .text {max-width: 704px; width: 100%;}
.businesslocation .box .image {width: 100%; max-width: 800px; padding-left: 12.5%;}
.businesslocation .box iframe {display: block; width: 100%; max-width: 704px; aspect-ratio: 704 / 556;}



.businesslocation h2 {font-size: 28px; letter-spacing: -0.025em; font-weight: bold; line-height: 1.428571428571429; display: flex; align-items: center; gap: 21px; margin-bottom: 35px;}
.businesslocation h2 a {display: flex; justify-content: center; align-items: center; background-image: url(../img/page/company/button.svg); background-size: cover; font-weight: bold; font-size: 15px; height: 28px; width: 98px; color: #fff;}
.businesslocation p {line-height: 2.111111111111111; margin-bottom: 52px;}
.businesslocation .box.wide {max-width: 1600px; margin: 0 auto 135px; display: block;}
.businesslocation .box.wide .image {display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 66px; max-width: 100%; padding-left: 0;}
.businesslocation .box.wide .image img {max-width: 640px; width: 41vw;}
.businesslocation .box.wide .text {max-width: 100%; width: 100%; margin: auto;}
.businesslocation .box.wide h2 {display: block;}
.businesslocation .box.wide p {margin-bottom: 0;}
.businesslocation .box.wide .pc-flex {display: flex;}
.businesslocation .box.wide .content {max-width: 940px; padding: 0 20px; margin: auto; display: flex; gap: 65px;}
.businesslocation .box.wide a {margin-top: 18px;}
.businesslocation .box.wide iframe {max-width: 1480px; aspect-ratio: 1480 / 584; margin: 63px auto 0; }

.businesslocation .box:nth-of-type(2) {margin-bottom: 172px;}
/* .businesslocation .box:nth-of-type(3) {flex-direction: row-reverse; margin-bottom: 169px;}
.businesslocation .box:nth-of-type(3) .text {padding-left: 60px; max-width: 764px;}
.businesslocation .box:nth-of-type(3) .text h2 {padding-left: 19.887%;}
.businesslocation .box:nth-of-type(3) .text p {padding-left: 19.887%;}
.businesslocation .box:nth-of-type(3) .image {max-width: 741px; padding-left: 0px;} */

.businesslocation .box.hokkai {max-width: 1200px; margin: auto;}

@media screen and (max-width: 1199px) {
    .businesslocation {padding-bottom: 100px;}
    .businesslocation .page-title {margin-bottom: 20px;}
    .page.businesslocation:before {height: 498px;}
    .businesslocation .list:before {display: none;}
    .businesslocation .box.wide {margin-bottom: 85px;}
    .businesslocation .box.wide .image {flex-direction: column; padding: 0 30px; gap: 17px; margin-bottom: 51px;}
    .businesslocation .box.wide .image img {width: 100%; max-width: 100%;}
    .businesslocation .box.wide h2 {display: flex; align-items: center; gap: 19px; margin-bottom: 21px;}
    .businesslocation .box.wide a {margin-top: 0;}
    .businesslocation .box.wide .text {padding: 0 30px;}
    .businesslocation .box.wide .content {flex-direction: column; padding: 0 0px; gap: 0;}
    .businesslocation .box.wide iframe {margin-top: 26px; aspect-ratio: 315 / 315;}
    .businesslocation h2 {margin-bottom: 20px;}
    .businesslocation p {font-size: 15px; margin-bottom: 26px;}
    .businesslocation .box {flex-direction: column;}
    .businesslocation .box .image {padding: 0 30px; margin-bottom: 25px; max-width: 100%;}
    .businesslocation .box .text {padding: 0 30px; max-width: 100%;}
    .businesslocation .box iframe {aspect-ratio: 315 / 315; max-width: 100%;}

    .businesslocation .box:nth-of-type(2) {margin-bottom: 85px;}
    .businesslocation .box:nth-of-type(3) {flex-direction: column; margin-bottom: 85px;}
    .businesslocation .box:nth-of-type(3) .image {padding: 0 30px; max-width: 100%;}
    .businesslocation .box:nth-of-type(3) .text {padding: 0 30px; max-width: 100%;}
    .businesslocation .box:nth-of-type(3) .text h2 {padding: 0;}
    .businesslocation .box:nth-of-type(3) .text p {padding: 0;}
}

/* =================================================================
order
=================================================================*/
.order {padding-bottom: 169px;}
.order .page-title {margin-bottom: 76px;}
.order .intro {max-width: 1480px; margin: auto; height: 350px; background-image: url(../img/page/order/order_bg.jpg); background-size: cover; margin-bottom: 87px;}
.order .intro .inner {display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 79px 0 0;}
.order .intro .en {font-size: 20px; color: #fff; font-weight: bold; margin-bottom: 20px;}
.order .intro h2 {font-size: 50px; letter-spacing: -0.025em; font-weight: bold; color: #2FFFF7; margin-bottom: 30px;}
.order .intro h2 span { font-weight: bold; letter-spacing: -0.08em; color: #2FFFF7;}
.order .intro p {font-size: 16px; letter-spacing: -0.025em; color: #fff;}
.order .intro a {width: 237px; height: 45px; background-image: url(../img/page/order/button_bg_blue_w.svg); background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; letter-spacing: -0.025em; margin-top: 29px; color: #3C3C3C;}

.order .download-area {width: 100%; max-width: 1400px; height: 534px; margin: auto; position: relative; background-color: #3D3D3D; overflow: hidden; padding: 84px 0 107px; margin-bottom: 109px;}
.order .download-area::before {content: ""; display: block; width: 402px; height: 425px; background-image: url(../img/page/order/download_bg.svg); background-size: cover; position: absolute; left: -201px; bottom: -119px;}
.order .download-area::after {content: ""; display: block; width: 402px; height: 425px; background-image: url(../img/page/order/download_bg.svg); background-size: cover; position: absolute; right: -201px; bottom: -119px;}
.order .download-area h2 {font-weight: bold; font-size: 32px; color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-bottom: 40px;}
.order .download-area h2 .en {font-weight: bold; color: #FFFFFF; font-size: 22px;}
.order .download-area ul {display: flex; justify-content: center; position: relative; z-index: 2;}
.order .download-area ul li {height: 221px; padding-left: 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4px;}
.order .download-area ul li:nth-child(1) {border-right: 1px solid #000000; padding-right: 35px; padding-left: 0;}
.order .download-area ul li h3 {font-size: 18px; color: #2FFFF7; font-weight: bold; padding-top: 17px}
.order .download-area ul li a {width: 380px; height: 70px; background-image: url(../img/page/order/button_bg_blue.svg); background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-top: 26px;}

.order .contact-area h2 {font-weight: bold; font-size: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px;}
.order .contact-area h2 .en {font-weight: bold; font-size: 22px;}
.order .contact-area h2 + p {margin-bottom: 43px; text-align: center;}
.order .contact-area .list {display: flex; justify-content: center; align-items: center; gap: 20px; padding: 0 20px;}
.order .contact-area .item {width: 100%; max-width: 590px; height: 403px; background: #3C3C3C; display: flex; justify-content: flex-start; align-items: center; flex-direction: column;}
.order .contact-area .item h3 {font-size: 28px; color: #fff; font-weight: bold;}

.order .contact-area .item:nth-child(1) {padding-top: 53px;}
.order .contact-area .item:nth-child(1) h3 {padding-top: 18px; margin-bottom: 25px;}
.order .contact-area .item:nth-child(1) ul {max-width: 360px; width: 100%;}
.order .contact-area .item:nth-child(1) ul li {display: flex; align-items: center; justify-content: space-between; color: #2FFFF7; font-size: 41px;}
.order .contact-area .item:nth-child(1) ul li div {font-weight: bold; line-height: 1.170731707317073;}

.order .contact-area .item:nth-child(2) {padding-top: 73px;}
.order .contact-area .item:nth-child(2) h3 {padding-top: 35px; margin-bottom: 25px; text-align: center;}
.order .contact-area .item:nth-child(2) h3 span {display: block; font-size: 16px; margin-top: 4px;}
.order .contact-area .item:nth-child(2) a {width: 380px; height: 70px; background-image: url(../img/page/order/button_bg_blue.svg); background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-top: 26px;}

@media screen and (max-width: 1199px) {
    .order {padding-bottom: 87px;}
    .order .page-title {margin-bottom: 56px;}
    .order .intro {height: 494px; width: 100%; margin-bottom: 0; background-image: url(../img/top/order_bg_sp.jpg);}
    .order .intro .inner {padding-top: 62px;}
    .order .intro h2 {display: flex; flex-direction: column; align-items: center; font-size: 39px; gap: 10px;}
    .order .intro .en {margin-bottom: 15px;}
    .order .intro p {line-height: 1.625; text-align: center;}
    .order .intro a {margin-top: 78px;}

    .order .download-area {height: 638px; margin-bottom: 63px;}
    .order .download-area::before,
    .order .download-area::after {width: 240px; height: 254px; bottom: -122px;}
    .order .download-area::before {left: -120px;}
    .order .download-area::after {right: -120px;}
    .order .download-area ul {flex-direction: column; padding: 0 30px;}
    .order .download-area ul li {padding: 0 0; height: auto;}
    .order .download-area ul li:nth-child(1) {padding: 0 0; border-right: 0; border-bottom: 1px solid #000; padding-bottom: 39px;}
    .order .download-area ul li:nth-child(1) img {width: 49px;}
    .order .download-area ul li:nth-child(2) {padding: 0 0; padding-top: 30px;}
    .order .download-area ul li:nth-child(2) img {width: 47px;}
    .order .download-area ul li a {width: 229px; height: 45px; background: #2FFFF7; position: relative; font-size: 16px; margin-top: 14px;}
    .order .download-area ul li a:before {content: ""; width: 0; height: 0; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 14px solid #2ffff7; border-left: 0; position: absolute; left: -14px;}
    .order .download-area ul li a:after {content: ""; width: 0; height: 0; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 14px solid #2ffff7; border-right: 0; position: absolute; right: -14px;}
    .order .download-area h2 {font-size: 24px; text-align: center; margin-bottom: 31px;}
    .order .download-area h2 .en {font-size: 15px;}

    .order .contact-area h2 {font-size: 24px;}
    .order .contact-area h2 .en {font-size: 15px;}
    .order .contact-area h2 + p {font-size: 15px;}
    .order .contact-area .list {flex-direction: column;}
    .order .contact-area .item {height: auto;}

    .order .contact-area .item:nth-child(1) {padding: 28px 0;}
    .order .contact-area .item:nth-child(1) img {width: 53px;}
    .order .contact-area .item:nth-child(1) ul {max-width: 185px;}
    .order .contact-area .item:nth-child(1) ul li {font-size: 21px;}
    .order .contact-area .item:nth-child(2) {padding: 32px 0 42px;}
    .order .contact-area .item:nth-child(2) img {width: 47px;}
    .order .contact-area .item h3 {font-size: 15px;}
    .order .contact-area .item:nth-child(2) h3 {padding-top: 23px; margin-bottom: 0;}
    .order .contact-area .item:nth-child(2) h3 span {margin-top: 7px;}
    .order .contact-area .item:nth-child(2) a {margin-top: 18px; padding: 0 47px; width: auto; height: 45px; background: #2FFFF7; position: relative; font-size: 16px;}
    .order .contact-area .item:nth-child(2) a:before {content: ""; width: 0; height: 0; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 14px solid #2ffff7; border-left: 0; position: absolute; left: -14px;}
    .order .contact-area .item:nth-child(2) a:after {content: ""; width: 0; height: 0; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 14px solid #2ffff7; border-right: 0; position: absolute; right: -14px;}
}

/* =================================================================
contact
=================================================================*/
.contact {padding-bottom: 173px;}
.contact .page-title {margin-bottom: 62px;}
.contact .form-area .inner {background: #fff; padding: 63px 150px 81px;}
.contact .form-area h2 {margin-bottom: 56px; text-align: center; font-size: 20px; font-weight: bold; line-height: 1.8;}
.contact .form-area .number {font-size: 20px;}
.contact .form-area .number strong {font-size: 27px; font-weight: bold; display: inline-block; margin-left: 0.5em;}
.contact .form-area table {width: 100%;}
.contact .form-area table th {font-size: 16px; font-weight: bold; text-align: left; width: 190px; white-space: nowrap; padding-top: 11px;}
.contact .form-area .hissu {color: #66E0DB; font-weight: bold;}
.contact .form-area table td {padding-bottom: 30px; width: auto; max-width: 710px; vertical-align: top; line-height: 1.5;}
.contact .form-area input {border: 0; background: #F4F4F4; width: 100%; height: 45px; padding: 0 23px; font-size: 16px;}
.contact .form-area textarea {border: 0; background: #F4F4F4; width: 100%; height: 199px; padding: 16px 23px; font-size: 16px; line-height: 1.5;}
.contact .form-area select {background: #F4F4F4; width: 100%; height: 45px; padding: 0 23px; font-size: 16px;}

.contact input::placeholder,
.contact textarea::placeholder {color: #969696; opacity: 1;}
.contact select {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 8px 30px 8px 10px; cursor: pointer; border: 1px solid #B4B4B4;}
.contact .custom-select-wrapper {position: relative;}
.contact .custom-select-wrapper::after {content: url(../img/page/contact/arrow-down.svg); position: absolute; top: 28%; right: 30px; transform: translateY(-50%); pointer-events: none;}

.contact .form-area .submit-button input {display: block; margin: 28px auto 0; width: 268px; height: 60px; color: #2FFFF7; font-weight: bold; background: none; display: block; cursor: pointer; background: url(../img/page/contact/button_bg.svg); background-size: cover;}

.contact .form-area.confirm tr {display: block; margin-bottom: 30px;}
.contact .form-area.confirm td {padding-bottom: 0px; padding-top: 8px;}
.contact .form-area.confirm .custom-select-wrapper::after {display: none;}

.contact .form-area.result p {text-align: center; line-height: 1.5; margin-bottom: 40px; font-size: 18px;}
.contact .form-area.result .button {margin: auto;}

@media screen and (max-width: 1199px) {
    .contact {padding-bottom: 91px;}
    .page.contact:before {height: 617px;}
    .contact .form-area {padding: 0 30px;}
    .contact .form-area h2 {font-size: 16px; font-weight: normal; margin-bottom: 0;}
    .contact .form-area h2 + p {margin-top: 21px; text-align: center; font-size: 20px; margin-bottom: 14px;}
    .contact .form-area h2 + p strong {font-size: 25px; margin-left: 0; font-weight: bold;}
    .contact .form-area .hissu-info {font-size: 14px; text-align: right;}
    .contact .form-area .inner {padding: 45px 30px 67px;}
    .contact .form-area table th,
    .contact .form-area table td {width: 100%; display: block; padding: 0;}
    .contact .form-area table th {padding-bottom: 8px; font-size: 15px;}
    .contact .form-area table td {padding-bottom: 23px; font-size: 15px; max-width: 100%;}

    .contact .form-area input {padding: 0 18px;}
    .contact .form-area textarea {padding: 10px 18px; height: 151px;}
    .contact .form-area select {padding: 10px 18px;}

    .contact .custom-select-wrapper::after {top: 31%; right: 14px;}
    .contact .form-area .submit-button input {width: 217px; height: 45px; margin-top: 29px;}
    .contact .form-area.result p {text-align: left; line-height: 1.5; margin-bottom: 40px; font-size: 15px;}
}

/* =================================================================
casestudy
=================================================================*/
.casestudy {padding-bottom: 201px;}
.casestudy .page-title {margin-bottom: 62px;}
.casestudy .edition {color: #fff; font-size: 14px; margin-bottom: 22px;}
.casestudy .bg-wrap {position: relative;}
.casestudy .bg-wrap:before {content: ""; display: block; width: 29vw; max-width: 464px; height: auto; aspect-ratio: 464 / 3534; background-image: url(../img/page/casestudy/bg_left.svg); background-size: cover; position: absolute; left: 0; top: 612px; z-index: -1;}
.casestudy .bg-wrap:after {content: ""; display: block; width: 29vw; max-width: 464px; height: auto; aspect-ratio: 464 / 1178; background-image: url(../img/page/casestudy/bg_right.svg); background-size: cover; position: absolute; right: 0; top: 1790px; z-index: -1;}
.casestudy .list {width: 100%; max-width: 1200px; margin: 0 auto 135px; position: relative;}
.casestudy .title {width: 100%; height: 70px; background: #464646; border: 1px solid #6C6C6C; display: flex; align-items: center; padding: 0 22px; cursor: pointer; position: relative;}
.casestudy .title:after {content: ""; display: block; width: 17px; height: 15px; background-image: url(../img/page/casestudy/arrow_down.svg); background-size: cover; position: absolute; right: 37px; transform:rotate(180deg);}
.casestudy .title.is-open:after {transform:rotate(0deg);}
.casestudy .title p {color: #fff; display: flex; align-items: center; font-size: 18px;}
.casestudy .title .number {font-size: 30px; font-weight: bold; color: #2FFFF7; margin-right: 25px; display: inline-block;}
.casestudy .list .content {padding: 0 10px; display: none;}
.casestudy .list .inner {background: #fff; padding: 37px 64px 61px; display: flex; gap: 72px;}
.casestudy .list .date {line-height: 2;}
.casestudy .list .date a {display: block; font-size: 18px;}
.casestudy .list .date strong {font-size: 22px; color: #EBA762; font-weight: bold; display: inline-block; margin-right: 8px;}

.casestudy .if-error h2 {font-size: 28px; color: #3C3C3C; text-align: center; margin-bottom: 30px; font-weight: bold;}
.casestudy .if-error h2 + p {font-size: 18px; max-width: 1043px; margin: 0 auto 65px; line-height: 2.111111111111111;}

.casestudy .if-error .box {display: flex; align-items: center; max-width: 1200px; margin: auto; gap: 49px; padding-bottom: 50px; border-bottom: 1px solid #C8C8C8;}
.casestudy .if-error .box:nth-of-type(even) {flex-direction: row-reverse;}
.casestudy .if-error .box:nth-child(n + 2) {margin-top: 50px;}
.casestudy .if-error .box:last-child {border-bottom: 0;}
.casestudy .if-error .box .text {width: 50%; max-width: 600px;}
.casestudy .if-error .box .image {width: 50%; max-width: 600px;}
.casestudy .if-error .box .image h3 {display: none;}
.casestudy .if-error .box h3 {font-size: 42px; font-weight: bold; width: 103px; height: 87px; background-image: url(../img/page/casestudy/casestudy_number_bg.svg); background-size: cover; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;}
.casestudy .if-error .box p {font-size: 18px; line-height: 2.11;}
.casestudy .if-error .button {margin: 35px auto 0; background-image: url(../img/page/casestudy/button_bg.svg); width: 313px; height: 60px; color: #2FFFF7;}

@media screen and (max-width: 1199px) {
    .casestudy {padding-bottom: 114px;}
    .casestudy .bg-wrap:before {aspect-ratio: 163 / 1970; background-image: url(../img/page/casestudy/bg_left_sp.svg); top: 1002px; width: 43vw;}
    .casestudy .bg-wrap:after {aspect-ratio: 163 / 414; background-image: url(../img/page/casestudy/bg_right_sp.svg); top: 1729px; width: 43vw;}
    .casestudy .list {padding: 0 30px; margin-bottom: 52px;}
    .casestudy .title {padding: 0 30px 0 10px;}
    .casestudy .title:after {right: 13px; width: 12px; height: 11px;}
    .casestudy .title p {align-items: flex-start; font-size: 15px; line-height: 1.4;}
    .casestudy .title .number {font-size: 22px; margin-right: 9px;}
    .casestudy .list .inner {padding: 25px 30px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 0px;}
    .casestudy .list .inner .date:nth-child(1) {grid-area: 1 / 1 / 2 / 3;}
    .casestudy .list .inner .date:nth-child(2) {grid-area: 2 / 1 / 3 / 2; }
    .casestudy .list .inner .date:nth-child(3) {grid-area: 2 / 2 / 3 / 3;}
    .casestudy .list .date a {font-size: 15px;}

    .casestudy .if-error {padding: 0 30px;}
    .casestudy .if-error h2 {font-size: 20px; letter-spacing: -0.025em;}
    .casestudy .if-error h2 + p {font-size: 15px; line-height: 1.733333333333333; margin-bottom: 41px;}
    .casestudy .if-error .box {flex-direction: column; gap: 18px; padding-bottom: 26px;}
    .casestudy .if-error .box:nth-of-type(even) {flex-direction: column; gap: 18px; padding-bottom: 26px;}
    .casestudy .if-error .box:nth-child(n + 2) {margin-top: 30px;}
    .casestudy .if-error .box .image {width: 100%; max-width: 100%;}
    .casestudy .if-error .box .image h3 {font-size: 26px; width: 66px; height: 56px; display: flex; margin-bottom: 9px;}
    .casestudy .if-error .box .text {width: 100%; max-width: 100%;}
    .casestudy .if-error .box .text h3 {display: none;}
    .casestudy .if-error .box p {font-size: 15px; line-height: 1.733333333333333;}
    .casestudy .if-error .button-area {display: flex; align-items: center;}
    .casestudy .if-error .button {margin-top: 18px; padding: 0 20px; width: auto; height: 45px; background: #3D3D3D; position: relative; font-size: 16px; color: #2FFFF7; display: inline-block; line-height: 44px; margin: auto; text-align: center;}
    .casestudy .if-error .button:before {content: ""; width: 0; height: 0; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 14px solid #3D3D3D; border-left: 0; position: absolute; left: -14px;}
    .casestudy .if-error .button:after {content: ""; width: 0; height: 0; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 14px solid #3D3D3D; border-right: 0; position: absolute; right: -14px;}
}

/* =================================================================
製品カタログ共通
=================================================================*/
.page.product:before {height: 438px;}
.product .page-header {min-height: 338px; padding: 0 30px;}
.product .page-header-inner {display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1200px; margin: auto;}
.product .page-header-inner .page-title {padding: 0 30px 0 0;}
.product .page-header-inner .catalog {flex-shrink: 0; padding: 0 18px; width: auto; height: 54px; background: #FF4D4D; position: relative; font-size: 17px; color: #fff; display: flex; align-items: center; line-height: 52px; text-align: center; margin-top: 2px;}
.product .page-header-inner .catalog:before {content: ""; width: 0; height: 0; border-style: solid; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-right: 16px solid #FF4D4D; border-left: 0; position: absolute; left: -16px;}
.product .page-header-inner .catalog:after {content: ""; width: 0; height: 0; border-style: solid; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-left: 16px solid #FF4D4D; border-right: 0; position: absolute; right: -16px;}
.product .page-header-inner .catalog span {display: inline-block; margin-right: 12px; width: 22.27px; height: 27.59px; background-image: url(../img/page/product/icon-catalog.svg); background-size: cover;}
.product .page-header-inner .product-info .link-list {display: flex; align-items: center; gap: 50px; margin-top: 26px;}
.product .page-header-inner .product-info a {font-weight: bold; color: #fff; padding: 0 16px; width: auto; height: 54px; background: #2FFFF7; position: relative; font-size: 17px; color: #3C3C3C; display: inline-block; line-height: 52px; text-align: center;}
.product .page-header-inner .product-info a:before {content: ""; width: 0; height: 0; border-style: solid; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-right: 16px solid #2FFFF7; border-left: 0; position: absolute; left: -16px;}
.product .page-header-inner .product-info a:after {content: ""; width: 0; height: 0; border-style: solid; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-left: 16px solid #2FFFF7; border-right: 0; position: absolute; right: -16px;}
.product .page-header-inner .product-info p {font-size: 26px; font-weight: bold; color: #fff; margin-top: 19px;}

.product .bg-wrap {position: relative; padding: 0 30px;}
.product .bg-wrap:before {position: absolute; z-index: -1; content: ""; display: block; width: 1159.09px; height: 537.91px; background-image: url(../img/page/product/bg.svg); background-size: cover; top: 0; left: -84px;}

.product .product-detail {width: 100%; max-width: 1200px; margin: auto; padding-top: 91px;}
.product.sub .product-detail {padding-bottom: 236px;}
.product .product-detail .text:nth-of-type(1) h2 {margin-top: 0;}
.product .product-detail p {font-size: 16px; margin-bottom: 20px; line-height: 1.3;}
.product .product-detail table {width: 100%; margin-bottom: 20px; white-space: nowrap; max-width: 1200px;}
.product .product-detail table tr th,
.product .product-detail table tr td {background: #FFFFFF; border-right: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; padding: 12px 17px; height: 46px; vertical-align: middle; text-align: center;}
.product .product-detail table tr th img {display: inline;}
.product .product-detail table tr td img {margin: auto;}
.product .product-detail table tr td:last-child {border-right: 0;}
.product .product-detail table tr:first-child td {background-color: #3C3C3C; color: #fff; text-align: center; padding: 18px 15px; border-right: 1px solid #F0F0F0; height: 60px;}
.product .product-detail table tr:first-child td:nth-child(2) {text-align: center;}
.product .product-detail table tr:first-child td:nth-child(2) {text-align: center;}
.product .product-detail table tr td:nth-child(2) {text-align: left;}
.product .product-detail table.all-center tr td:nth-child(2) {text-align: center;}
.product .product-detail table.small-table {width: auto;}
.product .product-detail table.small-table tr:first-child td {background: #fff; color: #3C3C3C; height: 46px; padding: 12px 17px;}
.product .product-detail table.small-table.no-padding tr:first-child td {padding: 0;}
.product .product-detail table.small-table table {margin-bottom: 0;}
.product .product-detail table.small-table.no-padding table tr td {padding: 18px 15px !important;}

.product .product-detail table tr.second td {background-color: #3C3C3C; color: #fff; text-align: center;  border-right:1px solid #F0F0F0;}
.product .product-detail table tr.haiban td {background-color: #999999;}
.product .product-detail table tr.no-bg td {background-color: #fff; color: #3C3C3C;}

.product .product-detail h2 {font-size: 27px; font-weight: bold; padding: 18px 0; border-top: 1px solid #505050; border-bottom: 1px solid #505050; margin-bottom: 43px; margin-top: 90px;}
.product .product-detail h3 {font-size: 24px; font-weight: bold; margin-bottom: 23px; margin-top: 40px;}
.product .product-detail h3 a {display: inline-block;}
.product .product-detail h4 {font-size: 22px; font-weight: bold; margin-bottom: 23px;}
.product .product-detail p a {display: inline-block;}
.product .product-detail ol {list-style: decimal; padding-left: 1em; line-height: 1.5; margin-bottom: 20px;}
.product .product-detail .new {color: #ff0000; font-weight: bold; display: inline-block; margin-right: 10px;}
.product .product-detail .important {color: #ff0000; font-weight: bold;}
.product .product-detail .important.green {color: green;}
.product .product-detail .text.flex {display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px;}
.product .product-detail .text.flex.flex-bottom {align-items: flex-end;}
.product .product-detail .text.flex.flex-bottom div {display: flex; flex-direction: column; justify-content: space-between; height: 310px;}
.product .product-detail .text.flex.flex-bottom h2 {margin-top: 0;}
.product .product-detail .image {margin-bottom: 20px;}
.product .product-detail .image img + img {margin-top: 20px;}
.product .product-detail .image img + p {margin-top: 20px;}
.product .product-detail .image.flex {display: flex; align-items: flex-end; gap: 10px;}
.product .product-detail .image.flex img {max-width: 500px;}
.product .product-detail .image.flex img + img {margin-top: 0;}
.product .product-detail .image-tate {max-height: 620px;}
.product .scroll {padding-bottom: 20px; padding-left: 0px;}
.product .simplebar-scrollbar.simplebar-visible:before {border-radius: 9999px; top: 0; left: 0; right: 0; height: 11px; background: #66E0DB; opacity: 1;}
.product .simplebar-track.simplebar-horizontal {left: 0px; display: block;}
.product .simplebar-track.simplebar-horizontal:before {content: ""; width: 100%; height: 1px; background: #C8C8C8; display: block; position: absolute; top: 5px;}

@media screen and (max-width: 1199px) {
    .page.product:before {height: 630px;}
    .product .bg-wrap {padding: 0 0px;}
    .product .bg-wrap:before {width: 100%; height: 100vh; background-color: #F0F0F0; left: 0px; z-index: 1; background-image: none; background-size: contain; background-position: left; background-repeat: no-repeat;}
    .product .page-header {min-height: 258px; padding: 0 0px;}
    .product .page-header.short {min-height: 158px;}
    .product .page-header:after {display: none;}
    .product .page-header-inner .page-title {padding: 0 0px 0 0;}
    .product .page-header-inner {flex-direction: column; padding: 0 30px 30px;}
     .product .page-header-inner .catalog {margin-top: 23px; margin-left: 14px; font-size: 16px; height: 45px; line-height: 44px;}
     .product .page-header-inner .catalog:before {left: -14px; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 14px solid #FF4D4D;}
     .product .page-header-inner .catalog:after {right: -14px; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 14px solid #FF4D4D;}
    /* .product .page-header-inner .catalog {background: none; color: #fff; padding: 0; margin-top: 23px;} */
/*     .product .page-header-inner .catalog:before,
    .product .page-header-inner .catalog:after {display: none;} */
    .product .page-header-inner .product-info .link-list {flex-direction: column; padding: 0 14px; gap: 20px; align-items: flex-start;}
    .product .page-header-inner .product-info a {font-size: 16px; letter-spacing: -0.025em; padding: 0 10px; height: 45px; line-height: 44px;}
    .product .page-header-inner .product-info a:before {left: -14px; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 14px solid #2FFFF7;}
    .product .page-header-inner .product-info a:after {right: -14px; border-style: solid; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 14px solid #2FFFF7;}
    .product .page-header-inner .product-info p {font-size: 15px;}

    .product .product-detail {padding-top: 64px; position: relative; z-index: 1;}
    .product .product-detail .text,
    .product .product-detail .image {padding: 0 30px;}
    .product .product-detail .image.flex {flex-direction: column; align-items: center;}
    .product .product-detail .image.flex img {max-width: 100%;}
    .product .product-detail .scroll .text,
    .product .product-detail .scroll .image {padding: 0;}

    .product .product-detail .text.flex {flex-direction: column;}
    .product .product-detail .text.flex.flex-bottom {align-items: flex-start; gap: 40px;}
    .product .product-detail .text.flex.flex-bottom div {height: auto;}
    .product .product-detail .image-tate {max-height: 350px;}

    .product .product-detail h2 {font-size: 18px; padding: 14px 0; margin-bottom: 38px;}
    .product .product-detail .new {display: block; margin-bottom: 5px;}
    .product .product-detail table {min-width: 800px;}
    .product .simplebar-track.simplebar-horizontal {left: 30px;}
    .product .scroll {padding-bottom: 20px; padding-left: 30px; margin-bottom: 30px;}

    .product .product-detail table.small-table {width: auto; min-width: auto;}
    .product .product-detail table.small-table tr:nth-of-type(1) td {background: #fff; color: #3C3C3C;}
    .product .product-detail table.small-table.no-padding tr:nth-of-type(1) td {padding: 0;}
    .product .product-detail table.small-table table {margin-bottom: 0; width: auto; min-width: auto;}
    .product .product-detail table.small-table.no-padding table tr td {padding: 18px 15px;}

}

/* =================================================================
order
=================================================================*/
.product .order {margin: auto; overflow: hidden; display: flex; justify-content: center; margin-top: 119px; padding-bottom: 90px;}
.product .order .inner {max-width: 1480px; height: 300px; background: url(../img/top/order_bg.jpg); background-size: cover; background-position: center; margin: auto; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding-top: 83px;}
.product .order h2 {font-weight: bold; text-align: center; display: flex; flex-direction: row; font-size: 91px; font-family: "Titillium Web", sans-serif; color: #66E0DB; letter-spacing: -0.025em;}
.product .order h2 strong {font-weight: bold;}
.product .order h2 svg {display: block; margin-top: -37px;}
.product .order .button {width: 177px; height: 45px; background-image: url(../img/top/llink-button_bg_blue.svg); background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; letter-spacing: -0.025em; margin-top: 29px; color: #3C3C3C;}

@media screen and (max-width: 729px) {
    .product .order {margin-top: 72px;}
    .product .order .inner {height: 375px; background: url(../img/top/order_bg_sp.jpg); background-size: cover; padding-top: 63px;}
    .product .order h2 {flex-direction: column; font-size: 32px;}
    .product .order h2 strong {font-size: 69px;}
    .product .order .button {margin-top: 124px;}
}

/* =================================================================
calender
=================================================================*/
.product .calender-inner {max-width: 1400px; margin: auto; box-shadow: 0px 0px 10px #00000029; background: #fff; width: 100%; max-width: 1200px; margin: 0 auto 236px;}
.product .calender h2 {height: 105px; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex-direction: row; font-size: 24px; font-weight: bold; color: #3C3C3C; padding: 0px 40px 0 63px;}
.product .calender h2:after {content: ""; display: block; width: 46px; height: 46px; background: url(../img/top/icon-plus.png); background-size: cover;}
.product .calender .content {display: none;}
.product .calender .content .inner {padding: 63px;}

@media screen and (max-width: 1199px) {
    .product .calender {padding: 0 30px;}
    .product .calender-inner {margin-bottom: 52px;}
    .product .calender h2 {font-size: 20px; padding: 0 9px 0 22px; height: 60px;}
    .product .calender h2:after {width: 27px; height: 27px; background: url(../img/top/icon-plus_sp.png); background-size: cover;}
    .product .calender .content .inner {padding: 10px;}
}

/* =================================================================
catalog
=================================================================*/
.catalog {padding-bottom: 160px;}
.catalog .page-header {margin-bottom: 47px;}
.catalog.search .page-header {margin-bottom: 100px;}
.catalog .index {width: 100%; max-width: 1200px; margin: auto; display: flex; justify-content: center; gap: 20px;}
.catalog .index a {font-weight: bold; color: #505050; font-size: 18px; display: flex; justify-content: center; width: 285px; height: 98px; background-color: #F2F2F2; padding-top: 28px; position: relative;}
.catalog .index a:after {content: ""; display: block; width: 16px; height: 9px; background-size: cover; background-image: url('../img/page/catalog/icon-arrow_down.svg'); position: absolute; left: 0; right: 0; bottom: 20px; margin: auto;}
.catalog .content {width: 100%; max-width: 1300px; margin: auto; background-color: #fff; margin-top: -53px; padding-top: 152px; padding-bottom: 99px;}

.catalog .box {padding: 0 100px; margin-bottom: 143px;}
.catalog .box h2 {font-size: 32px; font-weight: bold; margin-bottom: 27px;}
.catalog .box .en {color: #66E0DB; font-size: 20px; display: block; margin-bottom: 2px; line-height: 2;}

.catalog .box .list {display: flex; flex-wrap: wrap; gap: 36px 28px;}
.catalog.search .box .list {display: flex; flex-wrap: wrap; flex-direction: column; gap: 10px;}

.catalog .box .list h3 {text-align: left; margin-top: 17px; font-size: 20px; line-height: 1.5;}
.catalog .box .list .item {width: calc((100% - 28px*2)/3); max-width: 348px;}
.catalog.search .box .list .item {width: 100%; max-width: 100%;}

.catalog #list-other {margin-bottom: 0;}
.catalog .box .list.pdf {gap: 20px 28px;}
.catalog .box .list.pdf a {display: flex; align-items: center; width: 348px; height: 76px; border: 1px solid #DCDCDC; padding: 0 22px;}
.catalog .box .list.pdf a h3 {margin-top: 0; font-weight: bold;}
.catalog .box .list.pdf a h3 span {font-size: 14px; font-weight: normal}
.catalog .box .list.pdf a:before {flex-shrink: 0; content: ""; display: block; width: 28.03px; height: 34.76px; background-size: cover; background-image: url('../img/page/catalog/icon-pdf.svg'); margin-right: 14px;}


@media screen and (max-width: 1199px) {
    .page.catalog:before {height: 389px;}
    .catalog {padding-bottom: 0px;}
    .catalog .index {flex-direction: column; align-items: center; gap: 5px; padding: 0 30px;}
    .catalog .index a {justify-content: space-between; align-items: center; padding: 0 12px 0 20px; width: 100%; height: 46px; font-size: 15px;}
    .catalog .index a:after {position: static; margin: 0;}
    .catalog .content {margin-top: -74px; padding-top: 120px;}
    .catalog .box {padding: 0 30px; margin-bottom: 93px;}
    .catalog .box h2 {font-size: 24px; margin-bottom: 22px;}
    .catalog .box .en {font-size: 15px;}
    .catalog .box .list {gap: 22px 11px;}
    .catalog .box .list .item {width: calc((100% - 11px)/2); max-width: 348px;}
    .catalog .box .list h3 {font-size: 15px; margin-top: 8px;}

    .catalog .box .list.pdf {gap: 5px;}
    .catalog .box .list.pdf a {font-size: 15px; height: 45px; padding: 0 18px; background: #F8F8F8;}
    .catalog .box .list.pdf a:before {width: 20.97px; height: 26px; margin-right: 10px;}
}

/* =================================================================
recruit
=================================================================*/
body.recruit {background: #fff;}
.recruit h2 .jp {letter-spacing: 0;}
.recruit .fv {height: 693px; background-image: url('../img/page/recruit/fv.png'); background-position: center; background-size: 1755.63px; background-repeat: no-repeat; margin-top: -36px; margin-bottom: 106px;}
.recruit .fv .text-wrap {width: 100%; max-width: 1200px; margin: auto; display: flex; align-items: flex-start; justify-content: space-between; padding: 288px 68px 0;}
.recruit .fv .title {display: flex; align-items: center; font-size: 90px; font-weight: bold; color: #fff; gap: 18px;}
.recruit .fv .title span {writing-mode: vertical-rl;  text-orientation: mixed;}
.recruit .fv .title img {width: 34px; height: 34px;}
.recruit .fv .text {padding-left: 62px;}
.recruit .fv .text h2 {color: #fff; font-size: 28px; line-height: 1.714285714285714; font-weight: bold;}
.recruit .fv .text p {color: #fff; font-size: 16px; margin-top: 24px; line-height: 2;}

.recruit .intro {margin-bottom: 107px;}
.recruit .intro h2 {font-weight: bold; color: #505050; font-size: 47px; text-align: center; margin-bottom: 23px;}
.recruit .intro h2 strong {font-weight: bold; color: #505050; font-size: 67px;}
.recruit .intro p { color: #505050; font-size: 16px; max-width: 1200px; margin: auto; line-height: 2;}

.recruit .message {position: relative; background-image: url('../img/page/recruit/message_bg.png'); background-size: cover; background-position: center; min-width: 1143px; aspect-ratio: 1600 / 1143; margin: 0 auto 164px; max-width: 1600px;}
.recruit .message .text-wrap {width: 100%; max-width: 1200px; margin: auto; display: flex; justify-content: flex-end; padding-top: 18%;}
.recruit .message .text {max-width: 600px;}
.recruit .message h2 {font-size: 36px; color: #FFFFFF; font-weight: bold; margin-bottom: 42px;}
.recruit .message p {font-size: 16px; color: #FFFFFF; line-height: 2;}
.recruit .message p + p {margin-top: 22px; margin-bottom: 33px;}
.recruit .message h3 {font-size: 43px; color: #FFFFFF; line-height: 1;}
.recruit .message h3 span {display: block; font-weight: bold; line-height: 1;}
.recruit .message h3 span + span {margin-top: 24px;}

.recruit .interview {padding-bottom: 136px;}
.recruit .interview h2 {font-size: 100px; color: #DCDCDC; font-weight: bold; padding-left: 9.46%; max-width: 1600px; margin: 0 auto -43px;}
.recruit .interview h2 .jp {font-size: 26px; color: #000000; font-weight: bold; display: block; margin-top: 20px;}
.recruit .interview .title-wrap {padding: 0 60px; max-width: 1600px; margin: auto;}
.recruit .interview .box .box-inner {padding: 0 60px; max-width: 1600px; margin: auto;}
.recruit .interview .box:nth-of-type(2) {margin-top: 123px;}
.recruit .interview .title {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 73px;}
.recruit .interview .title img {max-width: 740px; height: auto; width: 47vw;}
.recruit .interview .title .text {padding-left: 9.46%; padding-right: 16px; padding-top: 119px; color: #505050; max-width: 740px;}
.recruit .interview .title h3 {font-weight: bold; font-size: 46px; line-height: 1.434782608695652; margin-bottom: 25px;}
.recruit .interview .title p {font-size: 16px;}
.recruit .interview .title .name {margin-bottom: 47px;}
.recruit .interview .content {padding: 0 140px; width: 100%; max-width: 1600px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px 50px;}
.recruit .interview .content .item {width: calc((100% - 50px)/2);}
.recruit .interview .item h3 {font-size: 24px; font-weight: bold; margin-bottom: 20px;}
.recruit .interview .item p {max-width: 575px; line-height: 2;}
.recruit .interview .box:nth-of-type(2) {background: #F0F0F0; padding-bottom: 97px; position: relative;}
.recruit .interview .box:nth-of-type(2):before {content: ""; display: block; width: 127px; height: 321px; background-image: url('../img/page/recruit/interview_bg.svg'); background-size: cover; position: absolute; right: 0; top: 0;}
.recruit .interview .box:nth-of-type(2) .title {flex-direction: row-reverse;}
.recruit .interview .box:nth-of-type(2) .title .text {padding-left: 45px;}

.recruit .welfare-benefits {background: #F0F0F0; margin-bottom: 216px; padding-bottom: 160px; position: relative;}
.recruit .welfare-benefits:before {content: ""; display: block; width: 137px; height: 345px; background-image: url('../img/page/recruit/welfare-benefits_bg_left.svg'); position: absolute; top: 0; left: 0;}
.recruit .welfare-benefits:after {content: ""; display: block; width: 244px; height: 614px; background-image: url('../img/page/recruit/welfare-benefits_bg_right.svg'); position: absolute; bottom: 0; right: 0;}
.recruit .welfare-benefits h2 {font-size: 100px; font-weight: bold; color: #66E0DB; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom: 49px; position: absolute; top: 159px; letter-spacing: -0.025em; line-height: 1.1;}
.recruit .welfare-benefits h2 .jp {font-size: 22px; font-weight: bold; color: #000000; display: block; margin-top: 29px;}
.recruit .welfare-benefits .inner {padding-top: 149px; position: relative;}
.recruit .welfare-benefits .list {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 50px 105px; padding-right: 86px; position: relative; z-index: 1;}
.recruit .welfare-benefits .list .item {width: 178px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 19px;}
.recruit .welfare-benefits .list .item h3 {font-size: 18px; text-align: center; font-size: 18px; font-weight: bold; line-height: 1.555555555555556;}
.recruit .welfare-benefits .list .item h3 span {font-size: 16px;}
.recruit .welfare-benefits .list .item:nth-child(1) {margin-left: calc((178px * 2) + (105px * 2));}
.recruit .welfare-benefits .list .item:nth-child(3) {margin-left: calc((178px * 1) + (105px * 1));}

.recruit .reportmovie h2 {font-size: 100px; font-weight: bold; color: #66E0DB; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 49px;}
.recruit .reportmovie h2 .jp {font-size: 22px; font-weight: bold; color: #000000; display: block; margin-top: 18px;}

.recruit .faq {}
.recruit .faq .inner {max-width: 100%; background: #F0F0F0; padding: 143px 0 150px; margin-top: -135px;}
.recruit .faq h2 {font-size: 100px; font-weight: bold; color: #66E0DB; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 49px; position: relative; z-index: 1;}
.recruit .faq h2 .jp {font-size: 22px; font-weight: bold; color: #000000; display: block; margin-top: 24px;}
.recruit .faq .faq-content {max-width: 1000px; width: 100%; background: #fff; margin: auto;}
.recruit .faq .faq-content + .faq-content {margin-top: 5px;}
.recruit .faq .faq-question__title {height: 70px; display: flex; align-items: center; padding: 0 20px; font-size: 18px; font-weight: bold; position: relative;}
.recruit .faq .faq-question__title:before {content: "Q"; font-family: "Titillium Web", sans-serif; font-weight: bold; font-size: 36px; color: #66E0DB; margin-right: 18px;}
.recruit .faq .faq-question__title:after {content: ""; display: block; width: 16px; height: 9px; background-size: cover; background-image: url('../img/page/catalog/icon-arrow_down.svg'); position: absolute; right: 30px; bottom: 0; top: 0; margin: auto;}
.recruit .faq .faq-question.is-open .faq-question__title:after {transform:rotate(180deg);}
.recruit .faq .faq-answer {display: none; }
.recruit .faq .faq-answer .faq-answer__wrap {background: #EDFFFE; display: flex; align-items: center; padding: 0 48px; min-height: 75px;}
.recruit .faq .faq-answer .faq-answer__wrap:before {content: "A"; font-family: "Titillium Web", sans-serif; font-weight: bold; font-size: 36px; color: #66E0DB; margin-right: 18px;}

.recruit .entry {padding: 153px 0 160px;}
.recruit .entry .inner {background: url('../img/page/recruit/entry_bg.png'); background-position: center; max-width: 1600px; height: 515px; background-size: cover; position: relative; padding: 80px 0 0; overflow: hidden;}
.recruit .entry .inner:before,
.recruit .entry .inner:after {content: ""; width: 452px; height: 440px; display: block; background-size: cover; position: absolute;}
.recruit .entry .inner:before {background-image: url('../img/page/recruit/entry_bg_right.svg'); bottom: -106px; left: -226px;}
.recruit .entry .inner:after {background-image: url('../img/page/recruit/entry_bg_left.svg'); bottom: -106px; right: -226px;}
.recruit .entry h2 {color: #2FFFF7; font-weight: bold; font-size: 40px; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.recruit .entry h2 strong {font-size: 154px; font-weight: bold; margin-bottom: 13px;}
.recruit .entry p {color: #fff; font-size: 16px; text-align: center; margin-top: 30px; font-weight: bold;}
.recruit .entry .button {margin: auto; color: #3C3C3C; position: relative; width: 209px; margin-top: 44px;}

.recruit .data h2 {position: relative; font-size: 154px; font-weight: bold; color: #66E0DB; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto 49px;}
.recruit .data h2 .jp {font-size: 22px; font-weight: bold; color: #000000; display: block; margin-top: 20px;}
.recruit .data h2 .date {position: absolute; right: 1px; bottom: 3px; color: #505050; font-size: 16px; font-family: "Noto Sans JP", serif; letter-spacing: 0.07em;}
.recruit .data .inner {background: #F0F0F0; max-width: 100%; margin-top: -161px; padding: 241px 0 182px;}
.recruit .data p.date {max-width: 900px; margin: 40px auto 0;}

.recruit .data .list {display: flex; flex-wrap: wrap; gap: 24px 22px; max-width: 900px; margin: auto;}
.recruit .data .list .item {width: 285px; height: 285px; padding-top: 70px; background: #505050; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.recruit .data .list .item p {font-size: 22px; font-weight: bold;}
.recruit .data .list .item h3 {font-size: 80px; display: flex; flex-direction: column; align-items: center; gap: 13px;}
.recruit .data .list .item h3 span {font-weight: bold;}
.recruit .data .list .item h3 .en {letter-spacing: 0;}
.recruit .data .list .item h3 .colon {font-size: 49px; position: relative; top: 14px;}

.recruit .data .list .item:nth-child(1) h3 .value {font-size: 18px; font-weight: normal;}
.recruit .data .list .item:nth-child(2) h3 {flex-direction: row; align-items: flex-start;}
.recruit .data .list .item:nth-child(2) h3 .seibetu {display: flex; flex-direction: column; align-items: center;}
.recruit .data .list .item:nth-child(2) h3 .value {font-size: 18px; margin-top: 13px; font-weight: normal;}
.recruit .data .list .item:nth-child(3) h3 {flex-direction: row; align-items: flex-start;}
.recruit .data .list .item:nth-child(3) h3 .age {font-size: 70px; display: flex; align-items: center; flex-direction: column; margin-top: 13px;}
.recruit .data .list .item:nth-child(3) h3 .percent {font-size: 50px;}
.recruit .data .list .item:nth-child(3) h3 .value {font-size: 18px; margin-top: 13px; font-weight: normal;}
.recruit .data .list .item:nth-child(4) h3 {font-weight: bold;}
.recruit .data .list .item:nth-child(4) h3 .value {font-size: 18px; font-weight: normal;}
.recruit .data .list .item:nth-child(5) h3 .value {font-size: 18px; font-weight: normal;}
.recruit .data .list .item:nth-child(5) h3 .month {font-size: 25px; display: flex; align-items: flex-end; padding-bottom: 12px;}
.recruit .data .list .item:nth-child(5) h3 .month span {font-weight: normal;}
.recruit .data .list .item:nth-child(5) h3 .month span + span {margin-left: 5px;}
.recruit .data .list .item:nth-child(5) h3 .main {display: flex; align-items: flex-end;}
/* .recruit .data .list .item:nth-child(6) h3 {flex-direction: row; align-items: flex-end;}
.recruit .data .list .item:nth-child(6) h3 .value {font-size: 20px; display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px;} */
.recruit .data .list .item:nth-child(6) h3 {font-weight: bold;}
.recruit .data .list .item:nth-child(6) h3 .value {font-size: 18px; font-weight: normal;}
.recruit .data .list .item:nth-child(7) {position: relative;}
.recruit .data .list .item:nth-child(7) h3 {font-weight: bold;}
.recruit .data .list .item:nth-child(7) h3 .value {font-size: 18px; font-weight: normal;}
.recruit .data .list .item:nth-child(7) .date {position: absolute; bottom: 15px; right: 15px; font-weight: normal; font-size: 16px;}

.recruit .gallery {padding-bottom: 100px; padding-top: 144px; position: relative; overflow: hidden;}
.recruit .gallery:before {content: ""; display: block; width: 100%; height: 770px; background: #505050; position: absolute; top: 0;}
.recruit .gallery:after {content: ""; display: block; width: 452px; height: 440px; background-image: url('../img/page/recruit/gallery_bg.svg'); background-size: cover; position: absolute; top: 0px; left: -226px}
.recruit .gallery h2 {font-size: 154px; font-weight: bold; color: #66E0DB; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 61px; position: relative; z-index: 1;}
.recruit .gallery h2 .jp {font-size: 22px; font-weight: bold; color: #fff; display: block; margin-top: 14px;}
.recruit .gallery .swiper {max-width: 1600px; overflow: visible;}


@media (max-width: 1199px) and (min-width: 750px) {
    .recruit .fv .title {font-size: 50px;}
    .recruit .fv .title img {width: 20px; height: 20px;}
    .recruit .fv .text-wrap {padding: 288px 60px 0;}
    
    .recruit .fv .text {padding-left: 20px; display: block !important;}
    .recruit .fv .text h2 {font-size: 22px;}

    .recruit .intro {padding: 0 30px;}
    .recruit .intro .top {margin-bottom: 36px; display: none !important;}
    .recruit .intro .top h2 {line-height: 1.727272727272727;}
    .recruit .intro .top p {text-align: center;}

    .recruit .message {min-width: 100%; aspect-ratio: auto; background: none; margin-bottom: 60px;}
    .recruit .message h2 {font-size: 28px; line-height: 1.571428571428571;}
    .recruit .message img {width: 100%; margin-bottom: -351px;}
    .recruit .message .text {padding: 376px 30px 71px; max-width: 100%;}
    .recruit .message .text-wrap {display: block; background: #505050; padding-top: 0;}
    .recruit .message h3 {font-size: 31px;}
    .recruit .message h3 span {line-height: 1.419354838709677;}
    .recruit .message h3 span + span {margin-top: 0px;}

    .recruit .interview .title-wrap {padding: 0 30px; margin-bottom: 41px;}
    .recruit .interview h2 {padding-left: 0; margin-bottom: 0; font-size: 65px;}
    .recruit .interview .box + .box {margin-top: 88px;}
    .recruit .interview .box .box-inner {padding: 0 0px;}
    .recruit .interview .title {display: block; margin-bottom: 38px;}
    .recruit .interview .title h3 {font-size: 40px; padding: 0 30px;}
    .recruit .interview .title p {padding: 0 30px;}
    .recruit .interview .title img {width: 100%; max-width: 100%; margin-bottom: 28px;}
    .recruit .interview .title .text {padding-left: 0; max-width: 100%; padding-right: 0; padding-top: 0;}
    .recruit .interview .content {padding: 0 30px; flex-direction: column; gap: 38px;}
    .recruit .interview .content .item {width: 100%;}
    .recruit .interview .item h3 {font-size: 24px; line-height: 1.666666666666667;}
    .recruit .interview .item p {max-width: 100%; font-size: 16px;}
    .recruit .interview .box:nth-of-type(2) {padding-top: 71px;}
    .recruit .interview .box:nth-of-type(2) .title .text {padding-left: 0;}
    .recruit .interview .box:nth-of-type(2):before {display: none;}

    .recruit .welfare-benefits {padding-bottom: 91px;}
    .recruit .welfare-benefits .inner {padding: 30px 0 0;}
    .recruit .welfare-benefits:before {background-image: url('../img/page/recruit/welfare-benefits_bg_left_sp.svg'); width: 103.5px; height: 263px;}
    .recruit .welfare-benefits:after {background-image: url('../img/page/recruit/welfare-benefits_bg_right_sp.svg'); width: 103.5px; height: 263px;}
    .recruit .welfare-benefits h2 {position: static; font-size: 65px; padding: 0 0 0 30px;}
    .recruit .welfare-benefits .list {justify-content: flex-start; gap: 31px 20px; padding: 0 30px; margin: auto;}
    .recruit .welfare-benefits .list .item {width: calc((100% - 20px*2)/3);}
    .recruit .welfare-benefits .list .item h3 {font-size: 16px;}
    .recruit .welfare-benefits .list .item:nth-child(1) {margin-left: 0;}
    .recruit .welfare-benefits .list .item:nth-child(3) {margin-left: 0;}

    .recruit .data .list {max-width: 592px;}
}

@media screen and (max-width: 749px) {
    .recruit .fv {margin-bottom: 25px; margin-top: 26px;}
    .recruit .fv {height: auto; width: 100%; background-image: url('../img/page/recruit/fv_sp.png'); background-size: cover; aspect-ratio: 375 / 344;}
    .recruit .fv .text-wrap {flex-direction: column; padding: 46% 0 0; justify-content: center; align-items: center;}
    .recruit .fv .title {font-size: 57px; gap: 10px; justify-content: center;}
    .recruit .fv .title img {width: 22px; height: 22px;}

    .recruit .intro {margin-bottom: 47px;}
    .recruit .intro h2 {font-size: 28px;}
    .recruit .intro h2 strong {font-size: 41px;}
    .recruit .intro p {letter-spacing: -0.025em;}
    
    .recruit .intro .top {padding: 0 0 0 30px; margin-bottom: 40px;}
    .recruit .intro .top h2 {text-align: left; font-size: 22px; line-height: 1.727272727272727; margin-bottom: 13px;}
    .recruit .intro .top p {padding-right: 30px;}
    .recruit .intro .bottom {padding: 0 30px;}


    .recruit .message {min-width: 100%; aspect-ratio: auto; background: none; margin-bottom: 60px;}
    .recruit .message h2 {font-size: 28px; line-height: 1.571428571428571; margin-bottom: 19px;}
    .recruit .message img {width: 100%; margin-bottom: -351px;}
    .recruit .message .text {padding: 373px 30px 71px;}
    .recruit .message .text-wrap {display: block; background: #505050; padding-top: 0;}
    .recruit .message h3 {font-size: 31px;}
    .recruit .message h3 span {line-height: 1.419354838709677;}
    .recruit .message h3 span + span {margin-top: 0px;}
    .recruit .message p + p {margin-bottom: 22px;}

    .recruit .interview .title-wrap {padding: 0 30px; margin-bottom: 41px;}
    .recruit .interview h2 {padding-left: 0; margin-bottom: 0; font-size: 65px;}
    .recruit .interview h2 .jp {font-size: 22px; margin-top: 8px;}
    .recruit .interview .box + .box {margin-top: 88px;}
    .recruit .interview .box .box-inner {padding: 0 0px;}
    .recruit .interview .title {display: block; margin-bottom: 38px;}
    .recruit .interview .title h3 {font-size: 40px; padding: 0 30px; margin-bottom: 14px;}
    .recruit .interview .title p {padding: 0 30px; margin-bottom: 38px;}
    .recruit .interview .title img {width: 100%; margin-bottom: 28px;}
    .recruit .interview .title .text {padding-left: 0; max-width: 100%; padding-right: 0; padding-top: 0;}
    .recruit .interview .content {padding: 0 30px; flex-direction: column; gap: 38px;}
    .recruit .interview .content .item {width: 100%;}
    .recruit .interview .item h3 {font-size: 24px; line-height: 1.666666666666667;}
    .recruit .interview .item p {max-width: 100%; font-size: 16px;}
    .recruit .interview .box:nth-of-type(2) {padding-top: 71px;}
    .recruit .interview .box:nth-of-type(2) .title .text {padding-left: 0;}
    .recruit .interview .box:nth-of-type(2):before {display: none;}

    .recruit .welfare-benefits {padding-bottom: 91px; margin-bottom: 79px;}
    .recruit .welfare-benefits .inner {padding: 44px 0 0;}
    .recruit .welfare-benefits:before {background-image: url('../img/page/recruit/welfare-benefits_bg_left_sp.svg'); width: 103.5px; height: 263px;}
    .recruit .welfare-benefits:after {background-image: url('../img/page/recruit/welfare-benefits_bg_right_sp.svg'); width: 103.5px; height: 263px;}
    .recruit .welfare-benefits h2 {position: static; font-size: 65px; padding: 0 0 0 30px; margin-bottom: 65px;}
    .recruit .welfare-benefits h2 .jp {margin-top: 19px;}
    .recruit .welfare-benefits .list {justify-content: flex-start; gap: 31px 20px; padding: 0 40px;}
    .recruit .welfare-benefits .list .item {width: calc((100% - 20px)/2); gap: 9px;}
    .recruit .welfare-benefits .list .item h3 {font-size: 15px;}
    .recruit .welfare-benefits .list .item:nth-child(1) {margin-left: 0;}
    .recruit .welfare-benefits .list .item:nth-child(3) {margin-left: 0;}

    .recruit .reportmovie h2 {font-size: 65px;}
    .recruit .reportmovie h2 .jp {margin-top: 29px;}

    .recruit .faq h2 {font-size: 65px; margin-bottom: -128px;}
    .recruit .faq .inner {padding: 112px 30px 56px; margin-top: 50px;}
    .recruit .faq .faq-question__title {font-size: 15px; padding: 16px 37px 16px 16px; align-items: flex-start; height: auto;}
    .recruit .faq .faq-question__title:before {font-size: 24px; margin-right: 17px; position: relative; top: -6px;}
    .recruit .faq .faq-question__title:after {right: 10px; top: 20px; bottom: auto;}
    .recruit .faq .faq-answer .faq-answer__wrap {padding: 16px 16px 16px 16px; align-items: flex-start; font-size: 15px; line-height: 1.666666666666667;}
    .recruit .faq .faq-answer .faq-answer__wrap:before {font-size: 24px; margin-right: 17px; position: relative; top: -6px;}

    .recruit .entry {padding-top: 66px; padding-bottom: 84px;}
    .recruit .entry .inner {padding: 111px 0 0;}
    .recruit .entry .inner:before,
    .recruit .entry .inner:after {display: none;}
    .recruit .entry h2 {font-size: 26px;}
    .recruit .entry h2 strong {font-size: 100px;}
    .recruit .entry p {font-size: 15px; margin-top: 34px;}
    .recruit .entry .button {margin-top: 54px;}

    .recruit .data h2 {font-size: 65px;}
    .recruit .data h2 .jp {font-size: 22px;}
    .recruit .data h2 .date {position: static; font-size: 15px; margin-top: 23px;}
    .recruit .data .inner {padding: 135px 0 202px; background-image: url('../img/page/recruit/data_bg_sp.svg'); background-position: top center; background-repeat: no-repeat; background-color: #F0F0F0;}
    .recruit .data .list {flex-direction: column; align-items: center; padding: 0 30px; gap: 10px;}
    .recruit .data .list .item {height: 210px; width: 100%; padding-top: 47px; gap: 0;}

    .recruit .gallery {padding-top: 90px; padding-bottom: 66px;}
    .recruit .gallery h2 {font-size: 65px; margin-bottom: 30px;}
    .recruit .gallery h2 .jp {font-size: 22px;}
    .recruit .gallery:before {height: 338.55px;}
    .recruit .gallery:after {width: 131.96px; height: 128.46px; background-size: cover; background-image: url('../img/page/recruit/gallery_bg_sp.svg'); left: -65.98px;}
}