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

/* ボディー */
body {
    margin: 0;
    font-family:  "IBM Plex Sans JP", Meiryo, sans-serif;
    font-weight: 400;
    background-color: #F5F5F5;
    color: #333;
}
/* 英字フォント */
.en {
    font-family:  Jost, Meiryo, sans-serif;
}
/* リンク */
a {
    color: #333;
}
/* セクション共通 */
section {
    text-align: center;
    margin-top: 104px;
}
section h2 {
    font-size: 56px;
    margin-bottom: 48px;
    color: #095AA7;
    font-weight: 500;
}
section h3 {
    font-size: 40px;
    font-weight: 400;
}
section p {
    font-size: 20px;
    line-height: 2em;
}
/* ボタン */
.btn {
    background-color: #F2913D;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 24px;
    color: #FFF;
    text-decoration: none;
    filter: drop-shadow(8px 8px 8px #333);
    margin-bottom: 104px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}
/* ヘッダー */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
}
header a {
    text-decoration: none;
}
header p {
    font-weight: 400;
    font-size: 48px;
    margin: 0px;
}
header ul {
    display: flex;
    list-style: none;
    margin: 0px;
    gap: 72px;
    font-size: 24px;
}
@media screen and (max-width: 767px) {
    header {
        padding: 20px 16px;
    }
    header ul {
        display: none;
    }
}
/* メインビジュアル */
.mv {
    display: flex;
}
.mv-text {
    flex: 0 0 45%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #095AA7;
    color: #fff;
}
.text-wrap {
    display: inline-block;
}
.mv p {
    font-size: 48px;
    font-weight: 500;
}
.mv h1 {
    font-size: 42px;
    font-weight: 400;
}
.mv h1 span {
    font-weight: 700;
}
.mv img {
    width: 55%;
}
.sp {
    display: none;
}
.lg {
    display: block;
}
@media screen and (max-width: 1280px) {
    .mv {
        flex-direction: column;
    }
    .mv-text .text-wrap {
        padding: 64px 0;
    }
    .mv-text .text-wrap h1 {
        margin: 0;
    }
    .mv-text .text-wrap p {
        margin: 0 0 42px 0;
    }
    .lg {
        display: none;
    }
    .mv img {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .sp {
        display: block;
    }
    .mv-text {
        padding: 0 16px;
    }
    .mv h1 {
        font-size: 36px;
    }
}
/* About */
.about img {
    margin: 32px 0 48px 0;
}
.about ul {
    width:fit-content;
    margin: 0 auto 80px auto;
    text-align: left;
}
.about ul li {
    font-size: 20px;
    line-height: 2em;
}
@media screen and (max-width: 767px) {
    .about p {
        padding: 0 16px;
    }
}
/* Works */
.works > div {
    display: flex;
    margin: 0 80px 64px 80px;
    gap: 80px;
    text-align: left;
    flex-wrap: wrap;
    justify-content: center;
}
.work-item {
    width: 28%;
}
.work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.work-item .img-wrapper {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.work-item p {
    font-size: 20px;
    margin: 24px 0;
}
.work-item ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 16px;
}
.work-item ul li {
    color: #095AA7;
    font-size: 16px;
    padding: 8px 16px;
    border: 1px solid #095AA7;
    border-radius: 8px;
}
@media screen and (max-width: 959px) {
    .work-item {
        width: 40%;
    }
}
@media screen and (max-width: 767px) {
    .works > div {
        flex-direction: column;
        align-items: center;
        gap: 54px;
    }
    .work-item {
        width: 100%;
    }
    .works > div {
        margin: 0 24px 64px 24px;
    }
}
/* TOPページ（Contact） */
.contact {
    margin-bottom: 140px;
}
.contact .contact-list {
    margin: 0 0 64px 0;
    display: flex;
    justify-content: center;
    list-style: none;
}
.contact .contact-list li::after {
    content: "|";
    padding: 0 0.5em;
    font-size: 32px;
}
.contact .contact-list li:last-of-type::after {
    content: "";
}
.contact .contact-list li a {
    font-size: 32px;
    color: #333;
}
@media screen and (max-width: 767px) {
    .contact .contact-list {
        display: block;
        width: fit-content;
        text-align: left;
        margin: 0 auto 64px auto;
    }
    .contact .contact-list li::after {
        content: "";
    }
    .contact .contact-list li a {
        font-size: 32px;
        color: #333;
    }
    .contact .contact-list li {
        line-height: 4em;
    }
}
/* フッター */
footer {
    text-align: center;
    border-top: 1px solid #333;
}
footer p {
    margin: 80px 0;
}
footer ul {
    display: none;
}
@media screen and (max-width: 767px) {
    footer ul {
        display: block;
        width: fit-content;
        list-style: none;
        text-align: center;
        margin: 40px auto 0 auto;
        padding: 0;
    }
    footer ul li {
        line-height: 3em;
    }
    footer ul li a {
        font-size: 24px;
        text-decoration: none;
    }
    footer p {
        margin: 40px 0;
    }
}
/* 下層ページ ページタイトル */
main > .page-title {
    background-color: #095AA7;
    padding: 104px 0 104px 80px;
    margin: 0 0 104px 0;
    text-align: left;
}
.page-title h1 {
    color: #fff;
    font-size: 80px;
    padding: 0;
    margin: 0;
    font-weight: 400;
}
@media screen and (max-width: 767px) {
    main > .page-title {
        text-align: center;
        padding: 104px 0;
    }
}
/* 下層ページ パンくず */
.nav {
    display: flex;
    list-style: none;
    padding:0;
    margin: 0 0 64px 80px;
    font-size: 20px;
}
.nav li::after {
    content: ">";
    padding: 0 0.5em;
    font-size: 20px;
}
.nav li:last-of-type::after {
    content: "";
}
@media screen and (max-width: 767px) {
    .nav {
        margin: 0 0 64px 16px;
    }
}
/* Works一覧ページ */
.works-tag-list {
    margin: 0 0 64px 80px;
    display: flex;
    list-style: none;
    padding: 0;
}
.works-tag-list li {
    font-size: 32px;
}
.works-tag-list li::after {
    content: "|";
    padding: 0 0.5em;
    font-size: 32px;
}
.works-tag-list li:last-of-type::after {
    content: "";
}
@media screen and (max-width: 767px) {
    .works-tag-list {
        margin: 0 0 40px 16px;
        flex-direction: column;
        align-items: center;
    }
    .works-tag-list li {
        line-height: 2em;
        font-size: 24px;
    }
    .works-tag-list li::after {
        content: "";
    }
}
/* Works詳細ページ */
.works-detail {
    text-align: center;
}
.works-detail h2 {
    font-size: 64px;
}
.works-detail div ul {
    width: 959px;
    margin: 0 auto;
    margin-inline: auto;
    padding: 0;
}
.works-detail img {
    margin: 54px 0 54px 0;
    max-width: 100%;
}
.works-detail .work-single-img {
    max-width: 959px;
}
.works-detail .description {
    text-align: left;
    margin: 0 80px;
    line-height: 2em;
}
.works-detail .btn {
    display: inline-block;
    margin: 96px 0 104px 0px;
}
@media screen and (max-width: 959px) {
    .works-detail .work-single-img {
        max-width: 80%;
    }
}
@media screen and (max-width: 767px) {
    .works-detail .description {
        margin: 0 16px;
    }
    .works-detail h2 {
        font-size: 48px;
    }
}
/* お問い合わせページ */
.contact .error-message {
    font-size: 24px;
    padding: 16px 24px;
    margin: 0 160px 64px 160px;
    border: 1px red solid;
    color: red;
}
.contact .error-message p {
    padding: 0;
    margin: 0;
}
.contact form {
    margin: 0 160px;
}
.contact form div {
    margin-bottom: 80px;
}
.contact form label {
    display: flex;
    font-size: 24px;
    margin-bottom: 16px;
    align-items: center;
}
.contact form input {
    font-family:  "IBM Plex Sans JP", Meiryo, sans-serif;
    font-weight: 300;
    font-size: 24px;
    width: 100%;
    height: 2em;
    border: 1px solid #8D8D8D;
    padding-left: 1em;
    box-sizing: border-box;
}
.contact form textarea {
    font-family:  "IBM Plex Sans JP", Meiryo, sans-serif;
    font-weight: 300;
    font-size: 24px;
    width: 100%;
    border: 1px solid #8D8D8D;
    padding: 1em 0 0 1em;
    box-sizing: border-box;
}
.contact form .privacy-policy {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0;
    gap: 24px;
}
.contact form input[type=checkbox] {
    display: inline;
    appearance: none;
    -webkit-appearance: none;

    width: 32px;
    height: 32px;

    border: 1px solid #8D8D8D;
    border-radius: 4px;

    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.contact form input[type="checkbox"]:checked {
    background: #095AA7;
    border-color: #095AA7;
}
.contact form input[type="checkbox"]:checked::before {
    content: "✓";
    display: block;
    text-align: center;
    color: #fff;
    line-height: 32px;
}
.contact form .privacy-policy-label {
    display: inline;
    margin: 0;
}
.contact form .btn-wrapper {
    text-align: center;
}
.contact form button {
    margin-bottom: 0px;
}
.contact .form-confirm {
    font-size: 24px;
    margin: 0 160px;
}
.contact .form-confirm .row {
    border-bottom: 1px solid #8D8D8D;
}
.contact .form-confirm .label {
    font-weight: 700;
    display: flex;
    align-items: center;
}
.contact .form-confirm .row p {
    margin: 24px 0;
}
.contact .form-confirm .btn-wrapper {
    margin-top: 80px;
    text-align: center;
}
.contact .form-confirm button {
    margin-bottom: 0px;
}
.contact .required {
    padding: 4px 16px;
    font-size: 16px;
    font-weight: 400;
    background-color: #095AA7;
    color: #fff;
    display: inline-block;
    margin-left: 16px;
    border-radius: 8px;
}
.contact .form-confirm .btn-wrapper .form-back-btn {
    background-color: #8D8D8D;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 24px;
    color: #FFF;
    text-decoration: none;
    filter: drop-shadow(8px 8px 8px #333);
    margin: 0 0 0 32px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}
.contact .form-send {
    margin: 0 160px;
}
.contact .form-send .heading {
    font-size: 32px;
    font-weight: 700;
}
.contact .form-send .message {
    font-size: 24px;
    line-height: 2em;
}
.contact .form-send .btn-wrapper {
    margin-top: 80px;
    text-align: center;
}
.contact .form-send .btn-wrapper .btn {
    margin-bottom: 0;
}
@media screen and (max-width: 959px) {
    .contact form {
        margin: 0 80px;
    }
    .contact .form-confirm {
        margin: 0 80px;
    }
    .contact .form-send {
        margin: 0 80px;
    }
}
@media screen and (max-width: 767px) {
    .contact form {
        margin: 0 16px;
    }
    .contact .form-confirm {
        margin: 0 16px;
    }
    .contact .form-send {
        margin: 0 16px;
    }
}
/* プライバシーポリシー */
.privacy-policy .text-wrap {
    margin: 0 160px 104px 160px;
}
.privacy-policy h2 {
    font-size: 48px;
    margin: 0 0 16px 0;
    font-weight: 400;
}
.privacy-policy h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 32px 0 0 0;
    color: #095AA7;
}
.privacy-policy p {
    font-size: 20px;
    line-height: 2em;
}
@media screen and (max-width: 959px) {
    .privacy-policy .text-wrap {
        margin: 0 80px 104px 80px;
    }
}
@media screen and (max-width: 767px) {
    .privacy-policy .text-wrap {
        margin: 0 16px 104px 16px;
    }
}
/* Slick */
.slick-prev::before {
    font-size: 32px;
    color: #095AA7;
}
.slick-next::before {
    font-size: 32px;
    color: #095AA7;
}
.slick-prev {
    left: -75px;
}
.slick-next {
    right: -50px;
}
@media screen and (max-width: 959px) {
    .works-detail .work-single-img {
        max-width: 80%;
    }
    .works-detail div .slick {
        width: 60%;
    }
    .slick-prev {
        left: -50px;
    }
    .slick-next {
        right: -40px;
    }
    .works-detail div .slick-dots {
        width: 100%;
        bottom: 25px;
    }
}