@charset "utf-8";

/* ==========================================================================
   共通・モバイル用スタイル (Base Styles)
   ========================================================================== */

/* ------------------------------------------------
headerArea
------------------------------------------------    */
.headerNavDetailTrigger {
    display: inline;
    position: relative;
}

.headerNavDetailTrigger::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    margin-left: 8px;
    font-size: 14px;
    color: #555555;
}

.headerNavDetailTrigger:before {
    content: "";
    position: absolute;
    bottom: -16px;
    z-index: 2;
    width: 100%;
    height: 4px;
    background-color: #369ddc;
    transition: transform 0.3s ease;
    transform: scaleX(0);
}

.headerNavDetailTrigger.active:before {
    transform: scaleX(1);
}

.headerNavDetail {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.97);
}

.headerArea .headerNavDetail .secInner {
    justify-content: center;
}

.headerNavDetailBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.headerNavDetailBlock {
    margin: 0 40px;
}

.headerNavDetailBlock a {
    font-size: 14px;
    text-decoration: none;
}

/* ------------------------------------------------
mainVisualArea
------------------------------------------------    */
.mainVisualArea {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    z-index: 0;
    /* モバイル設定 */
    height: auto;
    background: url(../image/bg_fv.png) no-repeat;
    background-size: cover;
}

.mainVisualArea .secInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.mainVisualCatchcopy {
    /* モバイル設定 */
    margin: -16% auto 10%;
}

.mainVisualImg {
    /* モバイルのみ */
    margin: 0 -16px 0;
}

.mainVisualBottomImg {
    margin: 0 -16px 0;
    opacity: 0.8;
}

.greeting {
    margin-top: 8%;
}

.greetingBox {
    margin-top: 3%;
}

.greetingBlock {
    display: flex;
    justify-content: space-between;
    margin-top: 5%;
}

.greetingBlock:nth-of-type(even) {
    flex-direction: row-reverse;
}

.greetingBlockImg {
    position: relative;
    width: 40%;
    right: -10%;
    transform: scale(1.35);
    transform-origin: top;
    opacity: 0.8;
}

.greetingBlock:nth-of-type(even) .greetingBlockImg {
    right: auto;
    left: -10%;
}

.greetingBlockNote {
    margin-top: 3%;
    width: 60%;
}

.greetingMsg {
    margin: 12% -16px 0;
}


/* ------------------------------------------------
worryArea
------------------------------------------------    */
.worryArea {
    background: #f2f2f2;
}

.worryMainBlock {
    display: flex;
    justify-content: space-between;
    margin-top: 8%;
}

.worryMainBlockImg {
    width: 33%;
}

.worryMainBlockNote {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60%;
    padding: 0 5%;
    background: #ffffff;
    font-size: clamp(10px, 4vw, 16px);
    line-height: 1.5;
}

.worryMainBlockNote::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 16px;
    height: 14px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background: #ffffff;
}

.worrySubBox {
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.worrySubBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4%;
    width: 48%;
    padding: 5% 5%;
    background: #ffffff;
}

.worrySubBlockImg {
    width: 80%;
    margin: auto;
}

.worrySubBlockNote {
    flex-grow: 1;
    margin-top: 8%;
    font-size: clamp(10px, 4vw, 16px);
    line-height: 1.5;
}

.worryMsg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8%;
    padding: 5%;
    background: #f6f4e3;
}

.worryMsgNote {
    width: 65%;
    font-size: clamp(10px, 4.5vw, 18px);
    line-height: 1.5;
}

.worryMsgNote .largeTxt {
    font-size: 1.2em;
}

.worryMsgImg {
    width: 30%;
}


/* ------------------------------------------------
aboutArea
------------------------------------------------    */
.aboutArea {
    background: #ffffff;
}

.aboutIntroductionMsg {
    margin-top: -3%;
    margin-left: -16px;
}

.aboutIntroductionNote {
    margin-top: 5%;
}

.aboutIntroductionNote .largeTxt {
    font-size: 1.15em;
}

.aboutEitherHd {
    margin-top: 10%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 6.5vw, 40px);
}

.aboutEitherHdSub {
    margin-top: 7.5%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 6vw, 36px);
}

.aboutEitherFlow {
    margin-top: 5%;
}

.aboutEitherFlowNote {
    margin-top: 5%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 5.5vw, 36px);
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-style: normal;
}

.aboutEitherHdSubArrow {
    position: relative;
    margin: 10% 0;
    z-index: 1;
}

.aboutEitherHdSubArrow::after {
    content: "";
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 70%;
    height: 150%;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background: #fffccd;
}

.aboutMsg {
    margin: 12% -16px -40px;
}


/* ------------------------------------------------
flowArea
------------------------------------------------    */
.flowArea {
    background: url(../image/bg_flow.png) no-repeat;
    background-size: cover;
}

.flowIntroductionNote {
    margin-top: 5%;
}

.flowHd {
    margin-top: 10%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 6.5vw, 40px);
}

.flowContent {
    margin-top: 7.5%;
}

/* ------------------------------------------------
partnerArea
------------------------------------------------    */
.partnerArea {
    background: #ffffff;
}

.partnerNote {
    margin-top: 5%;
}

.partnerHd {
    margin-top: 10%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 6.5vw, 40px);
}

.partnerHdSub {
    margin-top: 7.5%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 6.5vw, 40px);
}

.partnerBox {
    margin-top: 5%
}

.partnerBlock {
    position: relative;
    padding: 0 7.5% 7.5%;
    z-index: 1;
}

.partnerBlock::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 65%;
    top: 35%;
    left: 0;
    background: #f5f5f5;
    z-index: -1;
}

.partnerBlockImg {
    position: relative;
}

.partnerBlockHd {
    margin-top: 6%;
    line-height: 1.4;
    text-align: center;
    font-size: clamp(10px, 5.5vw, 30px);
}

.partnerBlockDetail {
    margin-top: 3%;
    text-align: center;
}

/* ------------------------------------------------
companyArea
------------------------------------------------    */
.companyArea {
    background: #ffffff;
}

.companyProfile {
    margin-top: 5%;
    font-size: clamp(10px, 4.2vw, 16px);
}

.companyProfileTerm {
    margin-top: 5%;
}

.companyProfileDescription {
    padding-bottom: 5%;
    border-bottom: 1px solid #cccccc;
}


/* ==========================================================================
   PC用スタイル (Desktop Styles - min-width: 751px)
   ========================================================================== */

@media (min-width: 751px) {}