@charset "utf-8";
/*===========================================
 reset 触らない
========================================== */
*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

progress {
    display: inline-block;
}

small {
    font-size: 80%;
    font-size: .8em;
}

[hidden] {
    display: none;
}

[unselectable] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    text-decoration: none;
}

button, input, select, textarea {
    background-color: transparent;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type="submit"], input[type="button"] {
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
    display: none;
}

input[type="submit"]::focus, input[type="button"]::focus {
    outline-offset: -2px;
    outline-offset: -0.125rem;
}

button, input, select, textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
}

nav ol, nav ul {
    list-style: none;
}

select::-ms-expand {
    display: none;
}

select::-ms-value {
    color: currentColor;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*===========================================
 base プロジェクトによって編集可
========================================== */
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium"), local("YuGothic-Medium");
}

@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Bold"), local("YuGothic-Bold");
    font-weight: bold;
}

html {
    font-size: 100%;
}

@media (max-width: 414px) {
    html {
        font-size: calc((100vw - 320px) / 94 * 3.7 + 12.3px);
    }
}

@media (min-width: 414px) and (max-width: 899.98px) {
    html {
        font-size: calc((100vw - 414px) / 352 * 6 + 16px);
    }
}

@media (min-width: 900px) {
    html {
        font-size: 22px;
    }
}

body {
    color: var(--color__txt);
    font-family: 'Noto Sans JP', sans-serif;
    word-break: break-all;
}

p {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.75;
    /* -webkit-font-smoothing: antialiased; */
}

a {
    color: #f75e29;
}

p a {
    font-weight: bold;
    text-decoration: underline;
}

a > * {
}

a img {
    transition: all 0.6s cubic-bezier(0.12, 1.07, 0.15, 1.11);
}

a img:hover {
    /*  opacity: .7; */
}

em {
    font-style: normal;
    font-weight: bold;
}

img {
    vertical-align: middle;
    max-width: 100%;
    width: 100%;
    display: block;
    height: auto;
    margin-top: -0.49px;
    margin-top: -0.030625rem;
    margin-bottom: -0.49px;
    margin-bottom: -0.030625rem;
}

picture {
    display: block;
    line-height: 0;
    font-size: 0;
}

picture > img {
    font-size: 0px;
    font-size: 0rem;
}

::placeholder {
    color: rgba(0, 0, 0, 0.2);
}

*:focus {
    outline: none;
}

form input, form textarea {
    /* -webkit-appearance: none; */
}

h1, h2, h3 {
    /* font-family: var(--font-family__mincho); */
    /* color: #fff; */
}

.is-show {
    opacity: 1 !important;
}

.is-hide {
    opacity: 0 !important;
}

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

    .pc--inline {
        display: inline;
    }

    .sp {
        display: none !important;
    }

    .sp--inline {
        display: none !important;
    }
}

@media (max-width: 899.98px) {
    .pc {
        display: none !important;
        pointer-events: none;
    }

    .pc--inline {
        display: none !important;
    }

    .sp {
        display: block;
    }

    .sp--inline {
        display: inline;
    }
}

@media (max-width: 767.98px) {
    p {
        line-height: 1.75;
        font-size: 16px;
        font-size: 1rem;
    }
}

/*===========================================
 Project ここから独自CSS記載
========================================== */
.bz {
    background-color: #FFFEED;
}

.top-header {
    width: 95%;
    margin: auto;
    padding: 8px 0;
    padding: 0.5rem 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    width: 152px;
    width: 13.5rem;
}

.header-logo img {
}

.header-inner a {
    width: 160px;
    width: 10rem;
}

.header-inner a img {
}

.top-content {
    background-color: #F1F0DE;
}

.top-fv {
}

.top-fv img {
}

.top-s1 {
    /* width: 90%; */
    padding: 0 calc((100% - min(90% , 1000px))/2);
    margin: auto;
    margin-top: -70px;
    margin-top: -4.375rem;
    position: relative;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
}

.top-shindan {
    position: relative;
}

.top-shindan-head {
    background-color: #57852A;
    border-radius: 10px 10px 0 0;
    border-radius: 0.625rem 0.625rem 0 0;
    padding: 10px 0 4px;
    padding: 0.625rem 0 0.25rem;
}

.top-shindan-head img {
    width: 70%;
    margin: auto;
}

.top-shindan-body {
    background-color: white;
    border: 3px solid #57852A;
    border: 0.1875rem solid #57852A;
    padding: 14px 20px;
    padding: 0.875rem 1.25rem;
    border-radius: 0 0 20px 20px;
    border-radius: 0 0 1.25rem 1.25rem;
}

.top-shindan-1 {
    width: 93%;
    margin: auto;
    margin-bottom: 11px;
    margin-bottom: 0.6875rem;
    animation: float 1s ease-in-out infinite;
    max-width: 370px;
}

.top-shindan-1 img {
}

.top-shindan-2 {
}

.image-grid {
}

#shindanForm {
}

.image-item {
}

.hidden-checkbox {
}

.image-item label {
}

.image-item label img {
}

.checkmark {
}

.next-button {
}

.next-button img {
}

.top-s2 {
}

.top-s2 img {
}

.top-s3 {
}

.top-s3 img {
}

.top-s4 {
}

.top-s4 img {
}

.top-s5 {
}

.top-s5 img {
}

.top-s6 {
    background-color: #88b22a;
    padding: 0 calc((100% - min(90% , 1000px))/2);
}

.top-s6-txt {
    color: white;
    font-size: 22.4px;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .1em;
    margin-bottom: 12.8px;
    margin-bottom: 0.8rem;
}

.top-pc__shindan .top-s6-txt {
    color: #57852a;
    font-size: 27px;
    font-size: 1.6875rem;
}

.top-shindan-label {
    position: absolute;
    width: 73px;
    width: 4.5625rem;
    top: -30px;
    top: -1.875rem;
    left: -14px;
    left: -0.875rem;
}

.top-shindan-label img {
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0px);
    }
}

.top-s6 {
}

.top-s6 img {
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    justify-content: center;
    gap: 1%;
}

.image-item {
    position: relative;
    width: 49.5%;
    margin-bottom: 1%;
    font-size: 0;
}

.top-pc__shindan .image-item {
    width: 32.1%;
}

.top-pc__shindan .top-shindan-1 {
    width: 67%;
}

.top-pc__shindan .next-button {
    width: 71%;
    margin-top: 16px;
    margin-bottom: 10px;
}

.hidden-checkbox {
    display: none;
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
}

.checkmark {
    position: absolute;
    top: 10px;
    top: 0.625rem;
    left: 10px;
    left: 0.625rem;
    width: 24px;
    width: 1.5rem;
    height: 24px;
    height: 1.5rem;
    border: 2px solid white;
    border: 0.125rem solid white;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkmark::after {
    content: '';
    width: 18px;
    height: 18px;
    background-color: #57852A;
    border-radius: 50%;
    display: none;
}

.image-item label::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(87 133 42 / 40%);
    border: 2px solid #57852A;
    border: 0.125rem solid #57852A;
    display: none;
}

.hidden-checkbox:checked + label::before, .hidden-checkbox:checked + label .checkmark::after {
    display: block;
}

.next-button {
    display: block;
    margin: 20px auto;
    margin: 1.25rem auto;
    cursor: pointer;
    border: none;
    width: 90%;
    max-width: 380px;
}

.image-item label {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 23px;
    height: 23px;
    border: 1px solid #000;
    background-color: rgb(255 255 255 / 68%);
    border-radius: 50%;
    /* display: none; */
}

.sn {
    background-color: #F1F0DE;
    color: #65441A;
    padding-bottom: 45px;
    padding-bottom: 2.8125rem;
    margin: auto;
}

.sn-header {
    padding: 13px 0;
    padding: 0.8125rem 0;
    width: 93%;
    margin: auto;
}

.sn-header h1 {
    width: 170px;
    width: 14.625rem;
}

.sn-header h1 img {
}

.sn-step {
}

.sn-step img {
}

.sn-content {
    padding: 0 calc((100% - min(90% , 1000px))/2);
    padding-top: 20px;
    padding-top: 1.25rem;
}

.sn-bar {
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
}

.sn-bar img {
}

.sn-content form {
}

.sn-q {
    margin-bottom: 35px;
    margin-bottom: 2.1875rem;
}

.sn-q__heading {
}

.sn-q__ttl {
}

.sn-q__txt {
}

.sn-q__pic {
    position: absolute;
    /* top: 8px; */
    /* top: 0.5rem; */
    right: 0;
    width: 30.4%;
    top: 50%;
    transform: translate(0%, -50%);
}

.sn-q__pic img {
}

.sn-q-list {
}

.sn-q-list__item {
}

.sn-q-list__radio {
}

.sn-q-list__button {
}

.sn-q-list__number {
}

.sn-q-list__text {
}

.sn-q-list__select {
}

.sn-q-img-list {
}

.sn-q-img-list__item {
}

.sn-q-img-list__ttl {
}

.sn-q-img-list__radio {
}

.sn-q-img-list__content {
}

.sn-q-img-list__image {
}

.sn-submit-button {
    border: none;
    width: 80%;
    margin: auto;
    display: block;
    cursor: pointer;
}

.sn-submit-button img {
}

.sn-q__heading {
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    position: relative;
}

.sn-q__ttl {
    font-size: 19px;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    position: relative;
    padding-left: 29px;
    padding-left: 1.8125rem;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
    padding-bottom: 7px;
    padding-bottom: 0.4375rem;
    color: #57852A;
    border-bottom: 2px dashed #57852A;
    border-bottom: 0.125rem dashed #57852A;
    padding-right: 3.9rem;
}

.sn-q__ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    top: 0.1875rem;
    width: 22px;
    width: 1.375rem;
    height: 22px;
    height: 1.375rem;
    background-image: url('../img/s-11.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sn-q__txt {
    position: relative;
    background-color: white;
    border-radius: 10px;
    border-radius: 0.625rem;
    padding: 18px;
    padding: 1.125rem;
    margin-right: 20px;
    margin-right: 1.25rem;
    margin-bottom: 15px;
    margin-bottom: 0.9375rem;
    width: 70%;
}

.sn-q__txt::after {
    content: '';
    position: absolute;
    right: -15px;
    right: -0.9375rem;
    top: 16px;
    top: 1rem;
    border-left: 15px solid white;
    border-left: 0.9375rem solid white;
    border-top: 10px solid transparent;
    border-top: 0.625rem solid transparent;
    border-bottom: 10px solid transparent;
    border-bottom: 0.625rem solid transparent;
}

.sn-q-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    gap: 0.625rem;
}

.sn-q-list__item {
    position: relative;
}

.sn-q-list__radio {
    display: none;
}

.sn-q-list__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 20px;
    padding: 1.375rem 1.25rem;
    background-color: #fff;
    border: 2px solid #65441A;
    border: 0.125rem solid #65441A;
    border-radius: 16px;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sn-q-list__number {
    width: 20px;
    width: 1.25rem;
    height: 20px;
    height: 1.25rem;
    /* background-color: #65441A; */
    /* color: #fff; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 10px;
    margin-right: 0.625rem;
    border: 1px solid #65441A;
    border: 0.0625rem solid #65441A;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 1;
}

.sn-q-list__text {
    flex-grow: 1;
    text-align: left;
    font-weight: bold;
    color: #65441A;
    font-weight: 600;
    letter-spacing: .1em;
}

.sn-q-list__select {
    font-size: 0.8em;
    color: #65441A;
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.sn-q-list__radio:checked + .sn-q-list__button {
    background-color: #57852A;
    border-color: #57852A;
}

.sn-q-list__radio:checked + .sn-q-list__button .sn-q-list__number, .sn-q-list__radio:checked + .sn-q-list__button .sn-q-list__text, .sn-q-list__radio:checked + .sn-q-list__button .sn-q-list__select {
    color: #fff;
}

.sn-q-list__radio:checked + .sn-q-list__button .sn-q-list__number {
    background-color: #fff;
    color: #57852A;
    border: none;
}

.sn-q-img-list {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* gap: 10px;
    /* gap: 0.625rem; */
    /* justify-content: space-between; */
}

.sn-q-img-list__item {
    position: relative;
    margin-bottom: 18px;
    margin-bottom: 1.125rem;
    display: block;
}

.sn-q-img-list__radio {
    display: none;
}

.sn-q-img-list__ttl {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    margin-bottom: 0.3125rem;
    color: #65441A;
    letter-spacing: .1em;
}

.sn-q-img-list__content {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    border-radius: 0.625rem;
    overflow: hidden;
}

.sn-q-img-list__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border-radius: 0.625rem;
}

.sn-q-img-list__content::after {
    content: 'タップで選択';
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    padding: 0.3125rem 0.625rem;
    border-radius: 0;
    font-size: 15px;
    font-size: 0.9375rem;
    letter-spacing: .1em;
}

.sn-q-img-list__radio:checked + .sn-q-img-list__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(87, 133, 42, 0.3);
    border: 2px solid #57852A;
    border: 0.125rem solid #57852A;
    border-radius: 10px;
    border-radius: 0.625rem;
}

.sn-q-img-list__radio:checked + .sn-q-img-list__content::after {
    content: '選択中';
    background-color: #57852A;
}

.footer {
    background-color: #8CB238;
    color: white;
    padding: 40px 0;
    padding: 2.5rem 0;
    position: relative;
}

.footer__list {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
}

.footer__list a {
    color: white;
    margin: 0 10px;
    margin: 0 0.625rem;
}

.sn-submit-button {
    transition: opacity 0.3s ease;
}

#errorMessage {
    background-color: rgba(255, 0, 0, 0.1);
    padding: 10px;
    padding: 0.625rem;
    border-radius: 5px;
    border-radius: 0.3125rem;
    margin-bottom: 10px;
    margin-bottom: 0.625rem;
}

.sn-q-list-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sn-q-list-wrap__item {
    width: calc(50% - 4px);
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
}

.sn-q-list-wrap__radio {
    display: none;
}

.sn-q-list-wrap__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 67px;
    height: 4.1875rem;
    border: 2px solid #65441A;
    border: 0.125rem solid #65441A;
    border-radius: 8px;
    border-radius: 0.5rem;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 600;
}

.sn-q-list-wrap__text {
    font-size: 15px;
    font-size: 0.9375rem;
}

.sn-q-list-wrap__radio:checked + .sn-q-list-wrap__button {
    background-color: #57852a;
    border-color: #57852a;
}

.sn-q-list-wrap__radio:checked + .sn-q-list-wrap__button .sn-q-list-wrap__text {
    color: #fff;
}

.sn-q-list-select {
}

.sn-select {
    background-color: white;
    border: 2px solid #65441A;
    border: 0.125rem solid #65441A;
    padding: 17px;
    padding: 1.0625rem;
    border-radius: 8px;
    border-radius: 0.5rem;
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.sn-select option {
}

.sn-kekka {
    text-align: center;
    padding: 40px 0 10px;
    padding: 2.5rem 0 0.625rem;
}

.sn-kekka__ttl {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 27px;
    margin-bottom: 1.6875rem;
}

.sn-kekka__txt {
    line-height: 2;
    font-weight: 600;
    font-size: 17px;
    font-size: 1.0625rem;
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
}

.sn-kekka__btn {
    width: 90%;
    display: block;
    margin: auto;
}

.sn-kekka__btn img {
}

.ke {
    background-color: #FFFEED;
    margin: auto;
}

.sn-header {
}

.sn-header h1 {
}

.sn-header h1 img {
}

.ke-1 {
    width: 90%;
    margin: auto;
    margin-top: 30px;
    margin-top: 1.875rem;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
}

.ke-1 img {
}

.ke-2 {
}

.ke-2 img {
}

.ke-3 {
}

.ke-3 img {
}

.ke-4 {
    padding-top: 50px;
    padding-top: 3.125rem;
}

.ke-4 img {
}



.top-pc {
    margin-right: 4%;
    position: relative;
    width: min(480px,39%);
    z-index: 9;
}

.top-pc__shindan {
    position: sticky;
    width: 100%;
    top: 50%;
    transform: translate(0%, -50%);
}

@media only screen and (min-width: 900px) {

.top {
    display: flex;
    justify-content: center;
    padding: 0 calc((100% - min(94% , 1300px))/2);
}    
    .top-main {
    border-right: 5px solid;
    border-right: 0.3125rem solid;
    border-left: 5px solid;
    border-left: 0.3125rem solid;
    border-color: white;
    box-shadow: 0 0 25px rgb(0 0 0 / 10%);
    box-shadow: 0 0 1.5625rem rgb(0 0 0 / 10%);
    max-width: 700px;
    min-width: 0;
    flex: 1;
    position: relative;
}

.top:before {
    content: '';
    background-image: url(../img/pc-bg.png);
    background-repeat: repeat-x;
    background-size: 688px 80px;
    background-size: 43rem 5rem;
    background-position: bottom;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    pointer-events: none;
}

.top:after {
    content: '';
    background-image: url(../img/pc-light.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    width: 52px;
    width: 3.25rem;
    height: 80px;
    height: 5rem;
    position: fixed;
    top: 0;
    pointer-events: none;
    left: 30px;
    left: 1.875rem;
}
    
}