@charset "utf-8";

/* 共通項 あ */

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:700,900&display=swap);

html {
    margin: 0;
}

:root {
    --color-theme:     #32307f;
    --fg-color:        #333;
    --bg-color-body:   #fafafa;
    --color-white:     #fff;
    --color-lightgray: #f0f0f0;
    --font-gothic: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    --font-mincho: 'Noto Serif JP', "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

* {
    box-sizing: border-box;
}

img {
    display: block;
    margin: 0 auto;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--fg-color);
    text-decoration: none;
    transition: 0.5s;
}

@media ( hover: hover ) {
    a:hover {
        opacity: 0.5;
    }
}

ul, p {
    margin: 1.5em 0;
    line-height: 1.5;
}

.big {
    font-size: 1.2rem;
}

.small {
    font-size: 0.8rem;
}

.bold {
    font-weight: 900;
}

.theme {
    color: var(--color-theme);
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.red {
    color: #d60000;
}

.pc {
    display: none;
}

.sp {
    display: block;
}

@media ( min-width: 768px ) {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
}


/* スクロールアニメーション */
.ws-scroll-fadeIn {
    opacity: 0.0;
    transform: scale( 0.5, 0.5 );
    transition: 1.0s;
}
.ws-scroll-fadeIn.ws-scroll-show {
    opacity: 1.0;
    transform: scale( 1.0, 1.0 );
}

.ws-scroll-fadeIn-l {
    opacity: 0.0;
    transform: translateX( -200px );
    transition: 1.0s;
}
.ws-scroll-fadeIn-r {
    opacity: 0.0;
    transform: translateX( 200px );
    transition: 1.0s;
}
.ws-scroll-fadeIn-l.ws-scroll-show,
.ws-scroll-fadeIn-r.ws-scroll-show {
    opacity: 1.0;
    transform: translateX( 0 );
}

.ws-scroll-fadeIn-u {
    opacity: 0.0;
    transform: translateY( -200px ) scale( 0.8, 0.8 );
    transition: 1.0s;
}
.ws-scroll-fadeIn-d {
    opacity: 0.0;
    transform: translateY( 200px ) scale( 0.8, 0.8 );
    transition: 1.0s;
}
.ws-scroll-fadeIn-u.ws-scroll-show,
.ws-scroll-fadeIn-d.ws-scroll-show {
    opacity: 1.0;
    transform: translateY( 0 )  scale( 1.0, 1.0 );
}

.ws-goto-top {
    position: fixed;
    z-index: 20;
    margin: 0;
    padding: 0 0 2px;
    top: auto;
    bottom: 10px;
    left: auto;
    right: 10px;
    width: clamp( 30px, 5.0vw, 60px );
    height: clamp( 30px, 5.0vw, 60px );
    background: var(--color-theme);
    font-size: clamp( 15px, 2.5vw, 30px );;
    color: #ffffff;
    text-decoration: none;
    border: 2px solid #ffffff;
    border-radius: clamp( 15px, 2.5vw, 30px );;;
    opacity: 0.0;
    transform-origin: right bottom;
    transform: scale( 0.01, 0.01 );
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1.0s;
}
.ws-goto-top.ws-scroll-show {
    transform: scale( 1.0, 1.0 );
    opacity: 0.9;
}
@media ( hover: hover ) {
    .ws-goto-top:hover {
        opacity: 0.5;
    }
}

.ws-scroll-top-menu {
    opacity: 0.0;
    transform: translateY( -150px );
    transition: 0.5s;
}
.ws-scroll-top-menu.ws-scroll-show {
    opacity: 1.0;
    transform: translateY( 0 );
}



/* 以下サイトごと */

html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: min( 18px, 3.0vw );
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: var(--fg-color);
    line-height: 1.5;
    background-color: var(--bg-color-body);
    overflow-x: hidden;
    opacity: 1.0;
}

body.font-load {
    font-family: var(--font-gothic);
}


header {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1440px;
    background: var(--color-white);
    z-index: 10;
}

header h1 {    
    position: relative;
    margin: 0;
    padding: 0;
}

header h1 .mv {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
}

header h1 .ctabtn {
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    margin: auto;
    width: 73%;
}

header h1::after {
    content: "";
    background: url(../images/deco.png) no-repeat center / contain;
    position: absolute;
    width: 15.3cqw;
    height: 26.2cqw;
    top: 47%;
    left: 6%;
    z-index: 5;
}

header a.cta {
position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    top: 47.8%;
    left: 50%;
    max-width: 73%;
    width: 100%;
    height: 13.6cqw;
    aspect-ratio: 908 / 160;
    background: var(--color-theme);
    border-radius: 0.8cqw;
    transform: translateX(-50%);
    opacity: 0.01;
    transition: 0.5s;
    z-index: 1;
}

@media ( hover: hover ) {
    header a.cta:hover {
        opacity: 0.5;
    }
}    


a.cta-fix {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    bottom: 20px;
    left: 50%;
    width: 80%;
    text-align: center;
    aspect-ratio: 5 / 1;
    max-width: 500px;
    background: #00b900;
    border-radius: 1.0cqw;
    box-shadow: 0 8px 0 #009000;
    transform: translateX(-50%);
    z-index: 20;
    container: ws-cta-fix / inline-size;
}

a.cta-fix div {
    font-size: 3cqw;
}

a.cta-fix div span {
    font-size: 3cqw;
    display: block;
}

@container ws-cta-fix ( min-width: 0px ) {
    a.cta-fix img {
        margin: 0;
        padding: 0;
        width: 15%;
        aspect-ratio: 1 / 1;
    }
    a.cta-fix {
        max-width: 71%;
    }
    a.cta-fix div {
        margin: 0;
        padding: 0;
        color: var(--color-white);
        font-size: 6.4cqw;
        font-weight: 700;
        white-space: nowrap;
    }

    a.cta-fix div span {
    font-size: 4cqw;
}
}

a.cta2x {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90.8cqw;
    width: 72%;
    background: #00b900;
    border-radius: 10.0cqw;
    box-shadow: 0 3px 0 #009000;
    text-align: center;
    container: ws-cta-2x / inline-size;
}

@container ws-cta-2x ( min-width: 0px ) {
    a.cta2x img {
        margin: 0;
        padding: 0;
        width: 12%;
        aspect-ratio: 1 / 1;
    }
    a.cta2x div {
        margin: 0;
        padding: 0;
        color: var(--color-white);
        font-size: 6cqw;
        font-weight: 700;
        line-height: 7.4cqw;
        white-space: nowrap;
        
    }
a.cta2x div::after {
        content: "";
        background: url(../images/deco.png) no-repeat center / contain;
        position: absolute;
        width: 18.3cqw;
        height: 26.2cqw;
        transform: rotate(41deg);
        top: -30%;
        right: -8%;
        z-index: 5;
}

     a.cta2x div span {
        font-size: 4cqw;
        line-height: 1;
        display: block;
     }
}


main {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1440px;
    box-shadow: 0 0 8px lightgray;
    z-index: 0;
    container: ws-main / inline-size;
}

@container ws-main ( min-width: 0px ) {
    section.contents {
        padding: 8.0cqw 0;
        background: var(--color-white);
    }
    section.contents.yellow {
        background: #fffff5;
    }
    section.contents.navy-stripe {
        background: repeating-linear-gradient( 135deg, #32307f 0px, #32307f 20px, #413f89 20px, #413f89 26px );
    }
    section.contents.navy {
        padding: 0 0 5.0cqw;
        background: #32307f;
    }
    section.contents div.balloon-y {
        position: relative;
        margin: 6.0cqw auto 2.0cqw;
        padding: 1.5cqw 8.0cqw 2.0cqw;
        width: max-content;
        font-size: 2.5cqw;
        font-weight: 900;
        background: #f5fc4f;
        border-radius: 20.0cqw;
    }
    section.contents div.balloon-y .strong {
        display: inline-block;
        font-size: 4.0cqw;
        border-bottom: 4px solid var(--fg-color);
        line-height: 1.4;
    }
    section.contents div.balloon-y::after {
        position: absolute;
        content: "";
        margin: 0;
        padding: 0;
        top: 100%;
        left: calc( 50% - 2.0cqw );
        width: 4.0cqw;
        height: 2.0cqw;
        background: #f5fc4f;
        clip-path: polygon( 0% 0%, 100% 0%, 50% 100% );
    }
    section.contents div.head1 {
        position: relative;
        margin: 6.0cqw auto 3.0cqw;
        padding: 0;
        font-size: 4.5cqw;
        font-weight: 900;
        text-align: center;
    }
    section.contents div.head1::after {
        position: absolute;
        content: "";
        margin: 0;
        padding: 0;
        top: 110%;
        left: 20%;
        width: 60%;
        height: 4px;
        background: var(--fg-color);
    }
    section.contents p.small {
        margin: 1.0cqw auto;
        padding: 0;
        font-size: 1.8cqw;
        font-weight: 700;
        text-align: center;
    }
    section.contents div.head2 {
        position: relative;
        margin: 8.0cqw auto 3.0cqw;
        padding: 0;
        color: #f5fc4f;
        font-size: 5.6cqw;
        font-weight: 900;
        text-align: center;
        line-height: 1.2;
    }
    section.contents div.head2::before {
        position: absolute;
        white-space: pre;
        content: "当てはまった\a方は";
        margin: 0;
        padding: 0.5cqw 0.5cqw 0;
        top: -12.0cqw;
        left: 2.0cqw;
        width: 18.0cqw;
        height: 18.0cqw;
        border-radius: 18.0cqw;
        color: #f99746;
        background: var(--color-white);
        font-size: 2.4cqw;
        font-weight: 700;
        text-align: center;
        line-height: 1.5;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate( -20deg );
    }
    section.contents div.head2::after {
        position: absolute;
        content: "";
        width: 3.0cqw;
        height: 3.0cqw;
        background: var(--color-white);
        top: 2.0cqw;
        left: 18cqw;
        clip-path: polygon( 0% 0%, 100% 0%, 50% 100% );
        transform: rotate( -50deg );
    }
    section.contents a.cta2 {
        display: block;
        margin: 5.0cqw auto;
        padding: 2.5cqw 5.0cqw;
        width: 80%;
        background: #00b900;
        border-radius: 10.0cqw;
        box-shadow: 0 3cqw 0 #009000;
    }
    section.contents a.cta2 img {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    section.contents a.cta2x {
        margin: 5.0cqw auto;
        padding: 2cqw 0;
    }
    section.contents div.merit-title {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: max-content;
        font-size: 2.2cqw;
        font-weight: 900;
        text-align: center;
        line-height: 1.2;
    }
    section.contents div.merit-title::before {
        position: absolute;
        content: "";
        margin: 0;
        padding: 0;
        bottom: 10%;
        right: 102%;
        width: 6.0cqw;
        height: 7.0cqw;
        background: var(--fg-color);
        clip-path: polygon( 0% 0%, 20% 0%, 100% 100% );
    }
    section.contents div.merit-title::after {
        position: absolute;
        content: "";
        margin: 0;
        padding: 0;
        bottom: 10%;
        left: 102%;
        width: 6.0cqw;
        height: 7.0cqw;
        background: var(--fg-color);
        clip-path: polygon( 100% 0%, 80% 0%, 0% 100% );
    }
    section.contents div.merit-flex {
        margin: 0 auto;
        padding: 6.0cqw 0;
        width: 95%;
        display: flex;
        align-items: center;
    }
    section.contents div.merit-flex + div.merit-flex {
        border-top: 4px dashed #ccc;
    }
    section.contents div.merit-icon {
        margin: 0;
        padding: 0;
        width: 20%;
        aspect-ratio: 1 / 1;
        background: linear-gradient( 135deg, #444293 50%, #32307f 50% );
        border-radius: 100%;
        color: #f5fc4f;
        font-size: 8.0cqw;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section.contents div.merit-info {
        margin: 0;
        padding: 0 0 0 4.0cqw;
        width: 80%;
        color: var(--fg-color);
        font-size: 4.6cqw;
        font-weight: 900;
        line-height: 1.4;
    }
    section.contents div.reason-box {
        position: relative;
        margin: 4.0cqw auto;
        padding: 0;
        width: 96%;
        aspect-ratio: 15 / 5;
        background: linear-gradient( 20deg, #e2b768 0%, #cf993c 20%, #fde1a5 60%, #e2b768 100%);
        border-radius: 2.0cqw;
    }
    section.contents div.reason-border1 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: calc( 100% - 2.0cqw );
        height: calc( 100% - 2.0cqw );
        top: 0.8cqw;
        left: 0.8cqw;
        border: 3px solid #a77c33;
        border-radius: 2.0cqw;
    }
    section.contents div.reason-border2 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: calc( 100% - 2.0cqw );
        height: calc( 100% - 2.0cqw );
        top: 1.4cqw;
        left: 1.4cqw;
        border: 3px solid #a77c33;
        border-radius: 2.0cqw;
    }
    section.contents div.reason-light1 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.8cqw;
        height: 10.0cqw;
        top: 0.5cqw;
        left: 5.1cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
    }
    section.contents div.reason-light2 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.8cqw;
        height: 10.0cqw;
        top: 0.5cqw;
        left: 5.1cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
        transform: rotate( 90deg );
    }
    section.contents div.reason-light3 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.6cqw;
        height: 6.0cqw;
        top: 2.5cqw;
        left: 5.2cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
        transform: rotate( 45deg );
    }
    section.contents div.reason-light4 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.6cqw;
        height: 6.0cqw;
        top: 2.5cqw;
        left: 5.2cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
        transform: rotate( -45deg );
    }
    section.contents div.reason-light5 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.8cqw;
        height: 10.0cqw;
        bottom: 0.5cqw;
        right: 5.1cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
    }
    section.contents div.reason-light6 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.8cqw;
        height: 10.0cqw;
        bottom: 0.5cqw;
        right: 5.1cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
        transform: rotate( 90deg );
    }
    section.contents div.reason-light7 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.6cqw;
        height: 6.0cqw;
        bottom: 2.5cqw;
        right: 5.2cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
        transform: rotate( 45deg );
    }
    section.contents div.reason-light8 {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 0.6cqw;
        height: 6.0cqw;
        bottom: 2.5cqw;
        right: 5.2cqw;
        background: radial-gradient( circle, rgb( 255 255 255 / 1.0 ) 0%,  rgb( 255 255 255 / 0.2 ) 50%, transparent 100% ); /* #fffc; */
        border-radius: 100%;
        filter: blur( 0.1cqw );
        transform: rotate( -45deg );
    }
    section.contents div.reason-title {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        bottom: 60%;
        left: 0;
        color: #572c0d;
        font-size: 5.0cqw;
        font-weight: 900;
        text-align: center;
        text-shadow: 0 0 32px #fff,
                     0 0 32px #fff;
    }
    section.contents div.reason-box hr {
        position: absolute;
        top: 40%;
        left: 10%;
        width: 80%;
        height: 3px;
        border: 0;
        background: #a77c33;
    }
    section.contents div.reason-body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        top: 50%;
        left: 0;
        color: #572c0d;
        font-size: 2.6cqw;
        font-weight: 700;
        text-align: center;
        text-shadow: 0 0 32px #fff,
                     0 0 32px #fff;
    }
    section.contents .bg-yellow {
        display: inline-block;
        background: linear-gradient( to bottom, transparent 5%, #f5fc4f 5%, #f5fc4f 95%, transparent 95% );
    }
    section.contents div.head-yellow {
        margin: 0 auto 3.0cqw;
        padding: 0;
        color: #f5fc4f;
        font-size: 5.6cqw;
        font-weight: 900;
        text-align: center;
        line-height: 1.2;
    }
    section.contents p.large {
        margin: 0 auto;
        padding: 0;
        font-size: 4.5cqw;
        font-weight: 900;
        text-align: center;
    }
    section.contents .navy {
        color: #32307f;
    }
    section.contents p {
        margin: 0 auto;
        padding: 0;
        font-size: 2.5cqw;
        font-weight: 700;
    }
    section.contents ul {
        margin: 0 0 0 3.0cqw;
        padding: 0;
        font-size: 2.5cqw;
        font-weight: 700;
    }
    section.contents .center {
        text-align: center;
    }
    section.contents div.graph-box {
        margin: 4.0cqw auto;
        padding: 4.0cqw;
        width: 90%;
        border: 2px solid #ccc;
        background: var(--color-white);
    }
    section.contents div.gray-circle {
        margin: 4.0cqw auto;
        padding: 0;
        width: 12.0cqw;
        height: 12.0cqw;;
        color: var(--color-white);
        font-size: 2.0cqw;
        font-weight: 700;
        background: #999;;
        border-radius: 12.0cqw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section.contents div.head-white {
        margin: 0 auto;
        padding: 0;
        color: var(--color-white);
        font-size: 4.5cqw;
        font-weight: 900;
        text-align: center;
    }
    section.contents div.voice-box {
        position: relative;
        margin: 8.0cqw auto 4.0cqw;
        padding: 6.0cqw 5.0cqw 4.0cqw;
        width: 96%;
        background: #fffff5;
        border-radius: 1.0cqw;
    }
    section.contents div.voice-box::after {
        position: absolute;
        content: "";
        margin: 0;
        padding: 0;
        top: calc( 100% - 2px );
        left: calc( 50% - 5.0cqw );
        width: 10.0cqw;
        height: 4.0cqw;
        background: #fffff5;
        clip-path: polygon( 0% 0%, 100% 0%, 50% 100% );
    }
    section.contents div.voice-case {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 14.0cqw;
        height: 14.0cqw;
        top: -9.0cqw;
        left: 1.0cqw;
        color: var(--fg-color);
        font-size: 2.2cqw;
        font-weight: 900;
        background: #f5fc4f;
        border-radius: 16.0cqw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section.contents div.voice-img {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 32.0cqw;
        top: -7.0cqw;
        right: 0;
    }
    section.contents div.voice-img img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    section.contents div.voice-title {
        margin: 0 auto;
        padding: 0;
        color: #32307f;
        font-size: 4.5cqw;
        font-weight: 700;
    }
    section.contents div.voice-cats {
        margin: 1.0cqw 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 2.0cqw;
    }
    section.contents div.voice-cat {
        margin: 0;
        padding: 0.8cqw 0;
        width: 28cqw;
        color: var(--color-white);
        font-size: 3.0cqw;
        font-weight: 700;
        text-align: center;
        background: #999;
        border-radius: 10.0cqw;
    }
    section.contents div.voice-text {
        margin: 2.0cqw auto;
        padding: 0;
        font-size: 2.4cqw;
        font-weight: 700;
    }
    section.contents div.orange {
        margin: 6.0cqw auto 2.0cqw;
        padding: 0;
        color: #f99746;
        font-size: 2.4cqw;
        font-weight: 700;
        text-align: center;
    }
    section.contents div.result {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: max-content;
        color: var(--color-white);
        font-size: 4.5cqw;
        font-weight: 900;
        text-align: center;
    }
    section.contents div.result .yellow {
        color: #f5fc4f;
    }
    section.contents div.result .light1 {
        position: absolute;
        margin: 0;
        padding: 0;
        top: 30%;
        left: 98%;
        width: 1.0cqw;
        height: 2.0cqw;
        background: #f5fc4f;
        clip-path: polygon( 0% 0%, 100% 0%, 50% 100% );
    }
    section.contents div.result .light2 {
        position: absolute;
        margin: 0;
        padding: 0;
        top: 30%;
        left: 98%;
        width: 1.0cqw;
        height: 2.0cqw;
        background: #f5fc4f;
        clip-path: polygon( 0% 0%, 100% 0%, 50% 100% );
        transform-origin: center bottom;
        transform: translate( 0.8cqw, 0.2cqw ) rotate( 30deg );
    }
    section.contents div.result .light3 {
        position: absolute;
        margin: 0;
        padding: 0;
        top: 30%;
        left: 98%;
        width: 1.0cqw;
        height: 2.0cqw;
        background: #f5fc4f;
        clip-path: polygon( 0% 0%, 100% 0%, 50% 100% );
        transform-origin: center bottom;
        transform: translate( 1.5cqw, 0.7cqw ) rotate( 60deg );
    }
    section.contents div.flow-box {
        margin: 0 auto;
        padding: 2.0cqw 0;
        width: 96%;
        background: #32307f;
        border-radius: 1.0cqw;
    }
    section.contents div.flow-box + div.flow-box {
        position: relative;
        margin-top: 6.0cqw;
    }
    section.contents div.flow-box + div.flow-box::before {
        position: absolute;
        content: "";
        margin: 0;
        padding: 0;
        bottom: 100%;
        left: 49.2%;
        width: 1.6%;
        height: 6.0cqw;
        background: #32307f;
    }
    section.contents div.flow-step {
        margin: 0 auto;
        color: #f5fc4f;
        font-size: 3.0cqw;
        font-weight: 900;
        text-align: center;
    }
    section.contents div.flow-text {
        margin: 0 auto;
        color: var(--color-white);
        font-size: 3.2cqw;
        font-weight: 900;
        text-align: center;
    }
    section.contents div.qa-box {
        margin: 0 auto;
        padding: 4.0cqw 0;
        width: 95%;
    }
    section.contents div.qa-box + div.qa-box {
        border-top: 4px dashed #ccc;
    }
    section.contents div.qa-flex {
        margin: 2.0cqw 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: start;
    }
    section.contents div.qa-icon {
        margin: 0;
        padding: 0;
        width: 10%;
    }
    section.contents div.qa-icon img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    section.contents div.qa-q-icon {
        margin: 0;
        padding: 0;
        width: 10%;
        aspect-ratio: 1 / 1;
        font-size: 5.0cqw;
        font-weight: 900;
        color: var(--color-white);
        background: #888;
        border-radius: 100%;
        line-height: 1.0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section.contents div.qa-a-icon {
        margin: 0;
        padding: 0;
        width: 10%;
        aspect-ratio: 1 / 1;
        font-size: 5.0cqw;
        font-weight: 900;
        color: #f5fc4f;
        background: #32307f;
        border-radius: 100%;
        line-height: 1.0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section.contents div.qa-text {
        margin: 0;
        padding: 2.0cqw 0 0 4.0cqw;
        width: 90%;
        font-size: 4.0cqw;
        font-weight: 900;
    }
    section.contents div.company-box {
        margin: 0 auto;
        padding: 6.0cqw 8.0cqw;
        width: 95%;
        background: #f1f1f1;
    }
    section.contents div.company-flex {
        margin: 0;
        padding: 4.0cqw 0;
        width: 100%;
        display: flex;
        align-items: start;
    }
    section.contents div.company-flex + div.company-flex {
        border-top: 2px solid #ccc;
    }
    section.contents div.company-head {
        margin: 0;
        padding: ;
        width: 30%;
        font-size: 2.8cqw;
        font-weight: 700;
    }
    section.contents div.company-body {
        margin: 0;
        padding: ;
        width: 70%;
        font-size: 2.8cqw;
        font-weight: 700;
    }
    section.contents h2 {
        margin: 5.0cqw auto 2.0cqw;
        padding: 0;
        color: #32307f;
        font-size: 4.0cqw;
        font-weight: 900;
    }
}

@container ws-main ( min-width: 900px ) {
    section.contents {
    }
}


img.pic050 {
    margin: 0 auto;
    padding: 0;
    width: 50%;
    height: auto;
}

img.pic060 {
    margin: 0 auto;
    padding: 0;
    width: 60%;
    height: auto;
}

img.pic080 {
    margin: 0 auto;
    padding: 0;
    width: 80%;
    height: auto;
}

img.pic098 {
    margin: 0 auto;
    padding: 0;
    width: 98%;
    height: auto;
}

div.yellow-arrow-d {
    margin: -2px 0 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 5 / 1;
    background: #fffff5;
    clip-path: polygon( 0% 0%, 100% 0%, 100% 1%, 50% 100%, 0% 1% );
}


.privacy-policy a {
    display: block;
    margin: 1.0rem 0;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.0rem;
}

.privacy-policy img {
    height: 1.5rem;
    width: auto;
}

.copyright {
    margin: 1.0rem 0;
    padding: 0 0 4.0rem;
    text-align: center;
    font-size: 1.0rem;
}


/* 追加 */
.contents.contact h2 {
    font-size: 7cqw;
    text-align: center;
    color: #222222;
    margin-bottom: 8.9cqw;
}

.contents.contact h2 .c-orange {
    font-size: 9cqw;
    color: #F99746;
}

.contents.contact h2 .line{
background: linear-gradient(transparent 60%, #F5FC4F 60%);
}

.contents.contact .contactform {
    max-width: 100.1cqw;
    width: 77%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 5cqw;

}

.contents.contact .contactform .item {
    display: flex;
    flex-direction: column;
    gap: 3.6cqw;
    align-items: flex-start;
}

.contents.contact .contactform .item .l-name {
    font-size: 3.8cqw;
    margin-right: auto;
    margin-left: 0;
}

.contents.contact .contactform .item .l-detail {
        margin-right: auto;
    margin-left: 0;
}

.contents.contact .contactform .item .l-detail input {
    height: 10cqw;
    background-color: #FCFCFC;
    border: 2px solid #CCCCCC;
    padding: 0.5cqw;
    font-size: 4cqw;
    width: 100%;
    border-radius: 0.7cqw;
}

.contents.contact .contactform .item .l-detail textarea {
    width: 100%;
    padding: 0.5cqw 1cqw;
    max-height: 30cqw;
    min-height: 30cqw;
    border-radius: 0.7cqw;
     font-size: 4cqw;
     line-height: 1.2;
}

.contents.contact .contactform .wpcf7-submit {
    background-color: #1F2183;
    border-radius: 6cqw;
    color: #FFF;
    text-align: center;
    height: 12cqw;
    margin: auto;
    width: 45cqw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 4cqw;
    
}