@charset "UTF-8";

/* 全般 
------------------------- */
body {
    background-color: #f0f0f0;
    color: #1a384a;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    letter-spacing: .1em;
}

.wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 3%;
    text-align: center;
}

.NEWline {
    display: inline-block;
}

.font-24 {
    font-size: 1.5em;
}

.font-36 {
    font-size: 2.25em;
}

.font-28 {
    font-size: 1.75em;
}

.font-48 {
    font-size: 3em;
}

.font-60 {
    font-size: 3.75em;
}

.font-Thin {
    font-weight: 300;
}

.font-Medium {
    font-weight: 500;
}

.font-Bold {
    font-weight: 700;
}

.font-Black {
    font-weight: 900;
}

.font-Blue {
    color: #5f8fb9;
}

.fadeIn-contents {
    opacity: 0;
    transform: translateY(-64px);
}

.fadeIn-animation {
    opacity: 0;
    transform: translateY(0px);
    transition: opacity .4s ease, transform .4s ease;
}

@media screen and (max-width:768px) {
    .wrapper {
        padding: 0 5%;
    }

    .font-24 {
        font-size: 1.2em;
    }

    .font-36 {
        font-size: 2.25em;
    }

    .font-48 {
        font-size: 2.1em;
    }

    .font-60 {
        font-size: 2.6em;
    }
}

@media screen and (max-width:425px) {
    .font-24 {
        font-size: 1.1em;
    }

    .font-36,
    .font-28 {
        font-size: 1.2em;
    }

    .font-48 {
        font-size: 1.4em;
    }

    .font-60 {
        font-size: 1.8em;
    }
}

/* <header id="header"> 
------------------------- */
#header {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    padding: 0 3%;
    z-index: 99;
}

#header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 1em;
}

#header .logo-PC,
#header .logo-SP {
    z-index: 1;
}

#header .logo-PC {
    width: 65px;
}

#header .logo-SP {
    display: none;
    width: 200px;
}

#header .menuBtn-container {
    position: relative;
    width: 65px;
    height: 65px;
    cursor: pointer;
    z-index: 99;
}

#header .menuBtn-container span {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background-color: #1a384a;
    transition: all .4s;
}

#header .menuBtn-container span:nth-of-type(1) {
    top: 0;
}

#header .menuBtn-container span:nth-of-type(2) {
    top: 29px;
}

#header .menuBtn-container span:nth-of-type(3) {
    top: 58px;
}

#header.active .menuBtn-container span {
    background-color: #f0f0f0;
}

#header.active .menuBtn-container span:nth-of-type(1) {
    transform: translateY(31px) rotate(135deg);
}

#header.active .menuBtn-container span:nth-of-type(2) {
    opacity: 0;
}

#header.active .menuBtn-container span:nth-of-type(3) {
    transform: translateY(-27px) rotate(-135deg);
}

#header .nav-container {
    display: none;
    /* 20240131修正 
    padding: 210px 3% 100px; 
    */
    padding: 142px 3% 100px;
    position: fixed;
    top: 0;
    /* 20240131修正 
    left: calc(100% - 750px);
    width: 750px; */
    left: calc(100% - 600px);
    width: 600px;
    height: 100%;
    background-color: rgba(26, 26, 26, .8);
    animation: slidein .4s;
    z-index: 90;
    overflow-y: auto;
    /* FireFox向け */
    scrollbar-width: thin;
    scrollbar-color: #fff #1a384a;
    direction: rtl;
}

#header .nav-container::-webkit-scrollbar {
    background-color: #1a384a;
    width: 8px;
    height: 8px;
}

#header .nav-container::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    border-radius: 8px;
}

#header .nav-container ul {
    direction: ltr;
}

#header.active .nav-container {
    display: flex;
    justify-content: center;
}

#header .nav-container li {
    margin-bottom: 1em;
    color: #f0f0f0;
}

#header .nav-container li:hover {
    opacity: .7;
}

#header .nav-container li:nth-last-child(3) {
    margin-bottom: 32px;
}

#header .nav-container li:nth-last-child(2) {
    margin-bottom: 48px;
}

#header .nav-container li:nth-last-child(1) {
    padding-bottom: 100px;
}

#header .nav-container .navLink {
    position: relative;
    padding-left: 1em;
}

#header .nav-container .navLink::before {
    position: absolute;
    top: calc(50% + 0.09em);
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    content: "";
    height: 0.18em;
    width: 0.49em;
    background-color: #f0f0f0;
    margin-right: .42em;
}

#header .nav-container .navLink-contact {
    padding: 8px 16px;
    border: 1px solid #f0f0f0;
}

@keyframes slidein {
    0% {
        opacity: 0;
        transform: translateX(40%);
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@media screen and (max-width:768px) {
    #header .nav-container {
        padding: 120px 5% 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #header {
        top: 30px;
        padding: 0 3%;
    }

    #header .logo-PC {
        display: none;
    }

    #header .logo-SP {
        display: block;
    }

    #header .menuBtn-container {
        width: 40px;
        height: 40px;
    }

    #header .menuBtn-container span {
        height: 4px;
    }

    #header .menuBtn-container span:nth-of-type(2) {
        top: 18px;
    }

    #header .menuBtn-container span:nth-of-type(3) {
        top: 36px;
    }

    #header.active .menuBtn-container span:nth-of-type(1) {
        transform: translateY(18px) rotate(135deg);
    }

    #header.active .menuBtn-container span:nth-of-type(3) {
        transform: translateY(-18px) rotate(-135deg);
    }
}

@media screen and (max-width:375px) {
    #header .nav-container li:nth-last-child(1) a {
        font-size: 0.8em;
    }

    #header .nav-container li:nth-last-child(1) .navLink-contact {
        padding: 16px;
    }
}

/* <div id="mainVisual">
------------------------- */
#mainVisual {
    position: relative;
}

#mainVisual .mv-PC,
#mainVisual .mv-SP {
    width: 100%;
    z-index: 1;
}

#mainVisual .mv-SP {
    display: none;
}

#mainVisual .siteTitle-container {
    position: absolute;
    top: 43%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 0;
}

#mainVisual .site-title {
    text-align: center;
}

#mainVisual .site-title img {
    width: 45.8%;
}

@media screen and (max-width:768px) {
    #mainVisual .mv-PC {
        display: none;
    }

    #mainVisual .mv-SP {
        display: block;
    }

    #mainVisual .siteTitle-container {
        top: 30%;
        left: 50%;
    }

    #mainVisual .site-title img {
        width: 90%;
    }
}

@media screen and (max-width:425px) {
    #mainVisual .siteTitle-container {
        top: 35%;
    }
}

/* <main id="main"> 全般
------------------------- */
#sec02,
#sec03,
#sec04,
#sec05,
#sec06,
#sec07 {
    padding-top: 150px;
}

.contents-title {
    position: relative;
    display: inline-block;
    padding: 0 2em;
}

.contents-title:before,
.contents-title:after {
    position: absolute;
    top: 50%;
    display: inline-block;
    content: '';
    width: 2em;
    height: 2px;
    background-color: #1a384a;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.contents-title:before {
    left: 0;
}

.contents-title:after {
    right: 0;
}

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

    #sec02,
    #sec03,
    #sec04,
    #sec05,
    #sec06,
    #sec07 {
        padding-top: 75px;
    }

    .contents-title {
        position: relative;
        display: inline-block;
        padding: 0 1em;
    }

    .contents-title:before,
    .contents-title:after {
        width: 1em;
    }
}

/* <section id="sec01">
------------------------- */
/* 採用費用だけが嵩んでませんか？ */
#sec01 .sec01Lead-container {
    padding-top: 150px;
    background-color: #5f8fb9;
    color: #fff;
    text-align: center;
    overflow-x: hidden;
    z-index: -1;
}

#sec01 .questionWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sec01 .questionContainer {
    margin-bottom: 150px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    justify-content: space-around;
    row-gap: 150px;
    width: 100%;
    text-align: left;
}

#sec01 .questionText {
    padding-left: 50px;
    position: relative;
    font-size: 48px;
    font-weight: 600;
    z-index: 1;
}

#sec01 .questionText::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 200px;
    height: 200px;
    background: url("../img/sec01deco.png") center center no-repeat;
    background-size: contain;
    z-index: -1;
}

#sec01 .exampleText li {
    font-size: 32px;
    font-weight: 500;
}

#sec01 .exampleText li::before {
    content: "□";
    margin-right: .5em;
}

@media screen and (max-width:768px) {
    #sec01 .questionContainer {
        margin-bottom: 0px;
        grid-template-columns: auto;
        justify-content: center;
        row-gap: 0px;
    }

    #sec01 .questionText {
        padding-left: 50px;
        position: relative;
        font-size: 48px;
        font-weight: 600;
        z-index: 1;
    }

    #sec01 .questionText {
        margin-bottom: 32px;
        padding-left: 50px;
        font-size: 28px;
    }

    #sec01 .questionText::before {
        width: 100px;
        height: 100px;
    }

    #sec01 .exampleContainer {
        margin-bottom: 50px;
        display: flex;
        justify-content: center;
    }

    #sec01 .exampleContainer:nth-last-of-type(1) {
        margin-bottom: 0px;
    }

    #sec01 .exampleText li {
        font-size: 16px;
    }

    #sec01 .sec01Lead-deco02 {
        margin-top: 75px;
    }

}

#sec01 .sec01Lead-strongText02 {
    padding-bottom: 150px;
    position: relative;
}

#sec01 .sec01Lead-strongText02::before,
#sec01 .sec01Lead-strongText02::after {
    position: absolute;
    bottom: 0;
    content: "";
    width: 234px;
    height: 385px;
}

#sec01 .sec01Lead-strongText02::before {
    left: 5%;
    transform: translateX(-50%);
    background: url("../img/sec01-decoL.png") no-repeat;
    background-size: cover;
}

#sec01 .sec01Lead-strongText02::after {
    right: 5%;
    transform: translateX(50%);
    background: url("../img/sec01-decoR.png") no-repeat;
    background-size: cover;
}

#sec01 .sec01Lead-deco02 {
    color: #ffd475;
}

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

    #sec01 .sec01Lead-strongText02::before,
    #sec01 .sec01Lead-strongText02::after {
        width: 150px;
        height: 246px;
    }
}

@media screen and (max-width:767px) {
    #sec01 .sec01Lead-container {
        padding-top: 75px;
    }

    #sec01 .sec01Lead-container .sec01Lead-worriesContainer,
    #sec01 .sec01Lead-deco02 {
        margin-top: 50px;
    }

    #sec01 .sec01Lead-strongText01 {
        padding: 0;
        background-color: inherit;
        line-height: 1.5;
    }

    #sec01 .sec01Lead-strongText01 span {
        padding: 0 0 0 .3em;
        background-color: #ffffff;
        line-height: 1;
    }

    #sec01 .sec01Lead-worriesContainer {
        grid-template-columns: auto;
        justify-content: center;
        column-gap: 0;
        font-size: 1.2em;
    }

    #sec01 .sec01Lead-strongText02::before,
    #sec01 .sec01Lead-strongText02::after {
        width: 100px;
        height: 164px;
    }
}

/* コンテンツ・リクルーティングとは？ */
#sec01 .sec01Main-container {
    position: relative;
    padding-top: 200px;
    text-align: center;
}

#sec01 .sec01Main-container::before {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 2px;
    height: 200px;
    background-color: #ffd475;
}

#sec01 .sec01Main-container::after {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 30px;
    height: 30px;
    border: 2px solid #ffd475;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}

#sec01 .sec01Main-container h2 {
    position: relative;
}

#sec01 .sec01Main-container h2::after {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "Contents Recruiting";
    font-size: 8vw;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    color: #ffd475;
    z-index: -1;
}

#sec01 .sec01Main-imageContainer {
    margin-top: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#sec01 .sec01Main-image {
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
}

#sec01 .sec01Main-textContainer01 {
    margin-top: 100px;
    text-align: center;
}

@media screen and (max-width:1023px) {
    #sec01 .sec01Main-container h2::after {
        font-size: 15vw;
        white-space: inherit;
    }

    #sec01 .sec01Main-image {
        width: calc(33% - 16px);
    }
}

@media screen and (max-width:767px) {
    #sec01 .sec01Main-container h2::after {
        top: 30%;
    }

    #sec01 .sec01Main-imageContainer {
        margin-top: 100px;
    }

    #sec01 .sec01Main-textContainer01 {
        margin-top: 50px;
    }

}

@media screen and (max-width:375px) {
    #sec01 .sec01Main-container {
        padding-top: 150px;
    }

    #sec01 .sec01Main-imageContainer {
        margin-top: 50px;
    }
}

/* <section id="sec02">
------------------------- */
/* なぜいま、コンテンツが必要なのか？ */
#sec02 .sec02-reasonContainer,
#sec02 .sec02-reasonTitleContainer {
    display: flex;
    flex-direction: row-reverse;
    text-align: left;
    column-gap: 25px;
}

#sec02 .sec02-reasonTitleContainer {
    color: #5f8fb9;
}

#sec02 .sec02-title,
#sec02 .sec02-reasonTitleContainer p {
    writing-mode: vertical-rl;
    line-height: 1.2;
}

#sec02 .sec02-title {
    font-size: 100px;
    letter-spacing: .2em;
}

#sec02 .sec02-textContainer li {
    margin-bottom: 50px;
}

#sec02 .sec02-subtitle {
    margin-bottom: 25px;
    padding: 0 0.3em .1em;
    display: inline-block;
    background-color: #ffffff;
    line-height: 1;
}

@media screen and (max-width:768px) {
    #sec02 .sec02-reasonContainer {
        flex-direction: column;
        justify-content: center;
        column-gap: 0px;
        row-gap: 50px;
    }

    #sec02 .sec02-title {
        letter-spacing: 0em;
    }
}

@media screen and (max-width:767px) {
    #sec02 .sec02-title {
        font-size: 60px;
        letter-spacing: 0em;
    }

    #sec02 .sec02-subtitle {
        margin-bottom: 13px;
    }

    #sec02 .sec02-textContainer li {
        margin-bottom: 25px;
    }
}

/* 従来の方法では… */
#sec02 .sec01Main-examplesContainer {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 100px;
    max-width: 1300px;
    border-radius: 50px;
    background-color: #ffffff;
    color: #5f8fb9;
    text-align: left;
}

#sec02 .sec01Main-examples {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2em;
}

#sec02 .sec01Main-examplesItem {
    display: grid;
    grid-template-columns: auto minmax(120px, 40%);
    grid-template-rows: auto;
    justify-content: center;
    align-items: center;
    text-align: left;
    color: #1a384a;
}

#sec02 .sec01Main-examplesItem img,
#sec02 .sec01Main-solutionContainer img {
    width: 100%;
}

#sec02 .sec01Main-solutionContainer {
    margin-top: 100px;
    position: relative;
    display: grid;
    grid-template-columns: auto 280px;
    column-gap: 1em;
    align-items: center;
}

#sec02 .sec01Main-solutionContainer::before {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: 50px;
    height: 50px;
    background-color: #5f8fb9;
}

#sec02 .sec01Main-solutionContainer::after {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    content: "";
    height: calc(80px / 2);
    width: 80px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: #5f8fb9;
}

#sec02 .sec01Main-annotationContainer {
    margin-top: -25px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    display: flex;
    justify-content: center;
}

#sec02 .sec01Main-annotation {
    padding: 25px 50px;
    display: flex;
    column-gap: 50px;
    width: 90%;
    color: #ffffff;
    background-color: #5f8fb9;
    text-align: left;
}

#sec02 .sec01Main-annotation img {
    width: 100px;
    height: 100px;
}

@media screen and (max-width:1439px) {
    #sec02 .sec01Main-examplesContainer {
        border-radius: 0;
        padding: 50px 5%;
        background-color: #ffffff;
        color: #5f8fb9;
        text-align: center;
    }

    #sec02 .sec01Main-examplesItem {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto);
        row-gap: 1em;
        text-align: center;
    }

    #sec02 .sec01Main-solutionContainer {
        text-align: left;
    }

    #sec02 .sec01Main-annotation {
        margin-top: -25px;
        width: 100%;
        padding: 25px 5%;
        z-index: 10;
    }
}

@media screen and (max-width:767px) {
    #sec02 .sec01Main-examplesContainer {
        margin-top: 50px;
    }

    #sec02 .sec01Main-examples {
        margin-top: 25px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        column-gap: 0;
        row-gap: 1em;
    }

    #sec02 .sec01Main-examplesItem {
        display: grid;
        grid-template-columns: auto 100px;
        grid-template-rows: auto;
        justify-content: center;
        column-gap: 1em;
        text-align: left;
    }

    #sec02 .sec01Main-examplesItem img {
        width: 100px;
        height: 100px;
        max-height: 100px;
        border-radius: 50%;
        object-position: 0 0;
        object-fit: cover;
        border: 1px solid #1a384a;
    }

    #sec02 .sec01Main-solutionContainer {
        padding-top: 1em;
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);
        column-gap: 0;
        row-gap: 1em;
        text-align: center;
    }

    #sec02 .sec01Main-annotation {
        display: flex;
        flex-direction: column;
        align-items: center;
        column-gap: 0;
        row-gap: 1em;
        text-align: center;
    }

    #sec02 .sec01Main-annotation img {
        width: 50px;
        height: 50px;
    }
}

/* <section id="sec03">
------------------------- */
#sec03 .sec03Title-container {
    display: grid;
    grid-template-columns: 60% 30%;
    justify-content: space-between;
    align-items: center;
}

#sec03 .sec03Title-container img {
    width: 100%;
}

#sec03 .sec03Lead-container {
    margin-top: 100px;
    display: grid;
    grid-template-columns: minmax(360px, 30%) minmax(auto, calc(70% - 32px));
    justify-content: space-between;
    align-items: center;
    column-gap: 32px;
    text-align: left;
}

#sec03 .sec03Lead-textContainer {
    display: grid;
    grid-template-columns: auto;
    row-gap: 16px;
}

#sec03 .sec03Lead-strongText01 {
    padding-right: 16px;
    border-right: 60px solid #ffffff;
}

#sec03 .sec03Lead-strongText02 {
    padding-left: 16px;
    border-left: 60px solid #ffffff;
}

#sec03 .sec03Lead-imageContainer img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#sec03 .sec03Text01-container {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    justify-content: center;
    column-gap: 50px;
}

#sec03 .sec03Text01 {
    padding: 50px;
    position: relative;
    border-radius: 25px;
    background-color: #ffffff;
    color: #ffd475;
    text-align: left;
    line-height: 1.2;
    z-index: 1;
}

#sec03 .sec03Text01:nth-child(3) {
    background-color: #ffd475;
    color: #ffffff;
}

#sec03 .sec03Text01:nth-child(1):after,
#sec03 .sec03Text01:nth-child(2):after {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    transform: translate(-50%, -50%) rotate(90deg);
    content: "";
    width: 50px;
    height: calc(50px / 2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: #ffffff;
    z-index: 0;
}

#sec03 .sec03Flow-container {
    margin-top: 100px;
    padding-bottom: 50px;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-bottom: 2px solid #ffd475;
}

#sec03 .sec03Flow-container::before {
    position: absolute;
    top: calc(100% - 12px);
    left: 0%;
    transform: translateY(-50%);
    content: "";
    width: 50px;
    height: calc(50px / 2);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background-color: #ffd475;
}

#sec03 .sec03Flow-item {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#sec03 .sec03Flow-item:nth-child(even) {
    padding-top: .5em;
}

#sec03 .sec03Text02-container {
    margin-top: 100px;
}

#sec03 .sec03Solution-container {
    margin-top: 100px;
    padding: 100px 0;
    background-color: #ffd475;
    color: #ffffff;
    overflow-x: hidden;
}

#sec03 .sec03Solution-decoContainer {
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    height: 300px;
    background: url("../img/sec02-deco03.png") center center no-repeat;
    background-size: contain;
}

#sec03 .sec03Solution-textContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    column-gap: 500px;
    text-align: left;
}

#sec03 .sec03Solution-text {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #ffd475;
    line-height: 1.2;
    letter-spacing: 0;
}

#sec03 .sec03Solution-text:nth-child(1):before,
#sec03 .sec03Solution-text:nth-child(2):before {
    position: absolute;
    top: 260px;
    content: "";
    width: 50px;
    height: 50px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: #ffffff;
}

#sec03 .sec03Solution-text:nth-child(1):before {
    left: 280px;
    transform: translate(-50%, -50%) rotate(130deg);
}

#sec03 .sec03Solution-text:nth-child(2):before {
    left: 20px;
    transform: translate(-50%, -50%) rotate(-130deg);
}

#sec03 .sec03Solution-text p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#sec03 .sec03Solution-image {
    display: none;
    width: 100%;
}

@media screen and (max-width:1439px) {
    #sec03 .sec03Text01-container {
        margin-top: 50px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        column-gap: 0px;
        row-gap: 40px;
    }

    #sec03 .sec03Text01 {
        padding: 25px;
        text-align: center;
    }

    #sec03 .sec03Text01:nth-child(1):after,
    #sec03 .sec03Text01:nth-child(2):after {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translate(-50%, -50%) rotate(180deg);
    }

    #sec03 .sec03Flow-container {
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #ffd475;
    }

    #sec03 .sec03Flow-item:nth-child(even) {
        padding-top: 0em;
    }

    #sec03 .sec03Flow-item:nth-child(1) {
        order: 6;
    }

    #sec03 .sec03Flow-item:nth-child(2) {
        order: 5;
        padding-top: 1em;
    }

    #sec03 .sec03Flow-item:nth-child(3) {
        order: 4;
    }

    #sec03 .sec03Flow-item:nth-child(4) {
        order: 3;
        padding-top: 1em;
    }

    #sec03 .sec03Flow-item:nth-child(5) {
        order: 2;
    }

    #sec03 .sec03Flow-item:nth-child(6) {
        order: 1;
        padding-top: 1em;
    }

    #sec03 .sec03Flow-item:nth-child(7) {
        order: 12;
    }

    #sec03 .sec03Flow-item:nth-child(8) {
        order: 11;
        padding-top: 1em;
    }

    #sec03 .sec03Flow-item:nth-child(9) {
        order: 10;
    }

    #sec03 .sec03Flow-item:nth-child(10) {
        order: 9;
        padding-top: 1em;
    }

    #sec03 .sec03Flow-item:nth-child(11) {
        order: 8;
    }

    #sec03 .sec03Flow-item:nth-child(12) {
        order: 7;
        padding-top: 1em;
    }

    #sec03 .sec03Text02-container {
        margin-top: 50px;
    }
}

@media screen and (max-width:1023px) {
    #sec03 .sec03Solution-container p.font-60:nth-child(1) {
        font-size: 3.75em;
        letter-spacing: .3em;
        padding-left: .3em;
    }

    #sec03 .sec03Solution-image {
        display: inline-block;
        margin-bottom: 50px;
    }

    #sec03 .sec03Solution-decoContainer {
        margin-top: 50px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
        position: inherit;
        height: auto;
        background: none;
    }

    #sec03 .sec03Solution-textContainer {
        display: flex;
        justify-content: center;
        position: inherit;
        top: 0;
        left: 0;
        transform: none;
        display: flex;
        column-gap: 32px;
    }

    #sec03 .sec03Solution-text:nth-child(1):before,
    #sec03 .sec03Solution-text:nth-child(2):before {
        position: absolute;
        top: 90%;
        left: 90%;
    }

    #sec03 .sec03Solution-text:nth-child(2):before {
        left: 10%;
    }
}

@media screen and (max-width:768px) {
    #sec03 .sec03Solution-container {
        margin-top: 50px;
        padding: 50px 0;
    }

    #sec03 .sec03Title-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto);
        justify-content: center;
        justify-items: center;
        row-gap: 50px;
    }

    #sec03 .sec03Title-container img:nth-child(2) {
        width: 50%;
    }

    #sec03 .sec03Lead-container {
        margin-top: 50px;
        grid-template-columns: auto;
        column-gap: 0px;
        row-gap: 32px;
        justify-content: center;
    }

    #sec03 .sec03Flow-container,
    #sec03 .sec03Text02-container {
        margin-top: 50px;
    }

    #sec03 .sec03Text02-container {
        text-align: left;
    }

}

@media screen and (max-width:767px) {
    #sec03 .sec03Solution-decoContainer {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    #sec03 .sec03Lead-strongText01 {
        border-right: 30px solid #ffffff;
    }

    #sec03 .sec03Lead-strongText02 {
        border-left: 30px solid #ffffff;
    }

    #sec03 .sec03Solution-text:nth-child(1):before,
    #sec03 .sec03Solution-text:nth-child(2):before {
        width: 30px;
        height: 30px;
    }

    #sec03 .sec03Solution-text {
        width: 163px;
        height: 163px;
    }

    #sec03 .sec03Solution-image {
        margin-bottom: 25px;
    }
}

/* <section id="sec04">
------------------------- */
#sec04 {
    padding-bottom: 150px;
}

#sec04 .sec04Case-container {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 3%;
    max-width: 1300px;
    text-align: center;
}

#sec04 .sec04Case-container ul {
    margin-top: 100px;
    text-align: left;
}

#sec04 .sec04Case {
    margin-bottom: 100px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(2, auto);
    row-gap: 50px;
}

#sec04 .sec04Case:nth-child(3) {
    margin-bottom: 0px;
}

#sec04 .sec04Case img {
    width: 150px;
}

#sec04 .sec04Case-worryContainer {
    display: flex;
    column-gap: 30px;
    align-items: center;
}

#sec04 .sec04worry-text {
    position: relative;
    padding: 25px;
    border-radius: 13px;
    background-color: #ffffff;
}

#sec04 .sec04worry-text::before {
    position: absolute;
    top: 50%;
    left: -7px;
    content: "";
    width: 30px;
    height: calc(30px / 2);
    transform: translate(-50%, -50%) rotate(270deg);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: #ffffff;
}

#sec04 .sec04Case-solutionContainer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 30px;
}

#sec04 .sec04Case-solutionText {
    position: relative;
    padding: 25px;
    display: grid;
    grid-template-rows: repeat(3, auto);
    row-gap: 25px;
    border-radius: 13px;
    background-color: #fff;
}

#sec04 .sec04Case-solutionText::before {
    position: absolute;
    top: 50%;
    left: calc(100% + 7px);
    content: "";
    width: 30px;
    height: calc(30px / 2);
    transform: translate(-50%, -50%) rotate(90deg);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: #fff;
}

#sec04 .sec04Case-solutionText .text03 span {
    background: linear-gradient(transparent 60%, #ffd475 40%);
}

@media screen and (max-width:768px) {
    #sec04 {
        padding-bottom: 75px;
    }

    #sec04 .sec04Contents-container {
        flex-direction: column;
        justify-content: center;
        column-gap: 0px;
        row-gap: 50px;
    }
}

@media screen and (max-width:767px) {
    #sec04 .sec04Case {
        row-gap: 25px;
    }

    #sec04 .sec04Case img {
        width: 100px;
    }

    #sec04 .sec04Case-worryContainer,
    #sec04 .sec04Case-solutionContainer {
        flex-direction: column;
        column-gap: 0px;
        row-gap: 25px;
    }

    #sec04 .sec04worry-text::before,
    #sec04 .sec04Case-solutionText::before {
        top: -7px;
        left: 50%;
        content: "";
        width: 30px;
        height: calc(30px / 2);
        transform: translate(-50%, -50%) rotate(0deg);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        background-color: #ffffff;
    }

    #sec04 .sec04Case-solutionText .text01 {
        text-align: center;
    }

}

/* <section id="sec05">
------------------------- */
/* 制作フロー  */
#sec05 {
    padding-bottom: 150px;
    background-color: #1a384a;
    color: #ffffff;
}

#sec05 .contents-title:before,
#sec05 .contents-title:after {
    background-color: #ffffff;
}

#sec05 .sec05Contents-container {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    row-gap: 50px;
}

#sec05 .sec05Content {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    column-gap: 25px;
    text-align: left;
}

#sec05 .sec05Content:nth-child(1) {
    order: 1;
}

#sec05 .sec05Content:nth-child(2) {
    order: 3;
}

#sec05 .sec05Content:nth-child(3) {
    order: 5;
}

#sec05 .sec05Content:nth-child(4) {
    order: 2;
}

#sec05 .sec05Content:nth-child(5) {
    order: 4;
}

#sec05 .sec05Deco-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #1a384a;
}

#sec05 .sec05Deco-container img {
    width: 80px;
}

#sec05 .sec05title-SP {
    display: none;
    font-weight: 700;
}

@media screen and (max-width:768px) {
    #sec05 {
        padding-bottom: 75px;
    }

    #sec05 .sec05Contents-container {
        margin-top: 50px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        column-gap: 0px;
        row-gap: 25px;
    }

    #sec05 .sec05Content:nth-child(1) {
        order: 1;
    }

    #sec05 .sec05Content:nth-child(2) {
        order: 2;
    }

    #sec05 .sec05Content:nth-child(3) {
        order: 3;
    }

    #sec05 .sec05Content:nth-child(4) {
        order: 4;
    }

    #sec05 .sec05Content:nth-child(5) {
        order: 5;
    }

}

@media screen and (max-width:767px) {
    #sec05 .sec05Content {
        grid-template-columns: 50px auto;
        column-gap: 13px;
        align-items: flex-start;
    }

    #sec05 .sec05Deco-container {
        width: 50px;
        height: 50px;
    }

    #sec05 .sec05Deco-container img {
        width: 40px;
    }

    #sec05 .sec05Deco-container p {
        display: none;
    }

    #sec05 .sec05title-SP {
        display: block;
    }

    #sec05 .sec05Content span.NEWline {
        font-weight: 400;
    }
}

/* <section id="sec06">
------------------------- */
/* 制作実績 */
#sec06 {
    padding-bottom: 150px;
}

#sec06 .sec06Works-container {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 50px;
    row-gap: 100px;
}

#sec06 .sec06Work-link {
    display: block;
    position: relative;
    z-index: 1;
}

#sec06 .sec06Work-link:hover {
    opacity: .7;
}

#sec06 .sec06Work-link img {
    width: 100%;
}

#sec06 .sec06Work-link::after {
    content: "";
    position: absolute;
    right: -13px;
    bottom: 0;
    width: 100%;
    height: calc(100% - 13px);
    background-color: #ffd475;
    border-radius: 13px;
    z-index: -1;
}

#sec06 .sec06Work-text {
    margin-top: 25px;
}

#sec06 .sec06Work-request {
    margin-top: 1em;
}

#sec06 .sec06Work-request::before {
    margin-right: .5em;
    padding: 0 .5em;
    content: "ご要望";
    background-color: #1a384a;
    color: #ffffff;
}

@media screen and (max-width:768px) {
    #sec06 {
        padding-bottom: 75px;
    }

    #sec06 .sec06Works-container {
        margin-top: 50px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        column-gap: 0px;
        row-gap: 50px;
    }
}

/* <section id="sec07">
------------------------- */
/* お問い合わせ */
#sec07 {
    padding-bottom: 150px;
    background-color: #5f8fb9;
    color: #ffffff;
    text-align: center;
}

#sec07 .contents-title:before,
#sec07 .contents-title:after {
    background-color: #ffffff;
}

#sec07 .sec07Text-container {
    margin-top: 100px;
    margin-bottom: 50px;
}

#sec07 .sec07Contact-link {
    padding: 0 1em;
    position: relative;
    border-radius: 1em;
    background-color: #ffffff;
    color: #1a384a;
    z-index: 0;
}

#sec07 .sec07Contact-link:hover {
    background-color: #ffd475;
}

@media screen and (max-width:768px) {
    #sec07 {
        padding-bottom: 75px;
    }

    #sec07 .sec07Text-container {
        margin-top: 50px;
        margin-bottom: 25px;
    }

}

/* <footer id="footer">
------------------------- */
#footer {
    padding: 150px 3% 30px;
    background-color: #1a384a;
    color: #f0f0f0;
}

#footer .wrapper {
    text-align: left;
}

#footer .footer-deco {
    height: 80px;
}

#footer .info-container {
    margin-top: 100px;
    display: flex;
    column-gap: 100px;
}

#footer .link-container a {
    color: #ffd475;
}

#footer .link-container a:hover {
    opacity: .7;
}

#footer .link-child::before {
    margin-right: 8px;
    content: "┗";
}

#footer .copylight-container {
    padding: 7.81em 0 0;
    text-align: center;
}

@media screen and (max-width:767px) {
    #footer .info-container {
        flex-direction: column;
        justify-content: center;
        column-gap: 0;
        row-gap: 50px;
    }
}