/* 使いまわし可能なパーツ */

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* input password (パスワード入力ボックス) */
input[type="password"] {
    border: none;
    border-bottom: solid #081D18;
    width: 100%;
    height: 10.7vw;
    margin-top: 2.1vw;
    margin-bottom: 3.2vw;
    font: inherit;
    padding-left: 2.1vw;
    box-sizing: border-box;
}

/* input textbox (テキスト入力ボックス) */
.input-text {
    width: 80.8vw;
    display: flex;
    flex-direction: column;
    font-size: 1.15em;
}

input[type="text"] {
    border: none;
    border-bottom: solid #081D18;
    width: 100%;
    height: 10.7vw;
    margin-top: 2.1vw;
    margin-bottom: 3.2vw;
    font: inherit;
    padding-left: 2.1vw;
    box-sizing: border-box;
}

::placeholder {
    color: #081D18;
    opacity: .3;
}

/* input checkbox (チェックボックス) */
input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    box-sizing: border-box;
    padding: 1.3vw 5.3vw;
    margin-left: 5.3vw;
    position: relative;
    width: auto;
}

input[type=checkbox] + label::before {
    position: absolute;
    top: 50%;
    left: 0.3vw;
    display: block;
    margin-top: -2.1vw;
    width: 3.7vw;
    height: 3.7vw;
    content: "";
    background: white;
    border-radius: 1.1vw;
    border: .27vw solid #081D18;
}

input[type=checkbox] + label::after {
    position: absolute;
    border-right: .5vw solid #081D18;
    border-bottom:  .5vw solid #081D18;
    content: "";
    display: block;
    height: 1.9vw;
    left: 1.5vw;
    margin-top: -2.1vw;
    top: 55%;
    transform: rotate(45deg);
    width: 1.3vw;
    opacity: 0;
}

input[type=checkbox]:checked {
    display: none;
}

input[type=checkbox]:checked + label {
    box-sizing: border-box;
    padding: 1.3vw 5.3vw;
    position: relative;
    width: auto;
}

input[type=checkbox]:checked + label::before {
    position: absolute;
    top: 50%;
    left: 0.3vw;
    display: block;
    margin-top: -2.1vw;
    width: 3.7vw;
    height: 3.7vw;
    content: "";
    background: white;
    border-radius: 1.1vw;
    border: .27vw solid #081D18;
}

input[type=checkbox]:checked + label::after {
    position: absolute;
    border-right: .5vw solid #081D18;
    border-bottom:  .5vw solid #081D18;
    content: "";
    display: block;
    height: 1.9vw;
    left: 1.5vw;
    margin-top: -2.1vw;
    top: 55%;
    transform: rotate(45deg);
    width: 1.3vw;
    opacity: 1;
}

/* セレクトボックス */
.select {
    appearance: none;
    border: none;
    border-bottom: solid #081D18;
    height: 10.7vw;
    margin-top: 2.1vw;
    margin-bottom: 3.2vw;
    font: inherit;
    padding-left: 2.1vw;
}

/* ボタン */
.btn {
    background: linear-gradient(270deg, #57D896, #99F06C, #ADF761);
    border: none;
    border-radius: 4vw;
    font: inherit;
    font-size: 1.23em;
    width: 100%;
    height: 12.8vw;
    box-shadow: 0 0 8vw rgba(0, 0, 0, .2);
}

.btns {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.btn.small {
    width: 47.2%;
}

.btn.medium {
    width: 56.8vw;
}

.btn.circle {
    background: none;
    box-shadow: none;
    width: 12.8vw;
}

.btn.cancel {
    background: #081D18;
    color: white;
}

.btn.warning {
    background: #FF6D6D;
    color: white;
}

/* リンク */
a {
    color: inherit;
}

/* 説明テキスト */
.text {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    text-align: left;
    font-size: 1.15rem;
}

.text .title {
    font-size: 1.54rem;
    margin-bottom: 8vw;
}

.text .text-body {    
    text-align: left;
}

.text-body p {
    margin-bottom: 5.3vw;
    width: 100%;
}

.text-body p:nth-child(2) {
    font-weight: 300;
    font-size: 1rem;
}

/* カルーセル */
.carousel {
    position: relative;
    width: 100%;
    height: 88.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel .carousel-body {
    position: absolute;
    height: 88.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 500ms;
}

.carousel .carousel-body.isHidden {
    opacity: 0;
}

.carousel p {
    flex: 0;
}

.carousel-img {
    position: relative;
    min-height: 0;
    width: 100%;
    flex: 1;
}

.carousel img {
    position: absolute;
    height: 100%;
}

.carousel-indicator {
    display: flex;
    justify-content: center;
    margin-top: 8.5vw;
}

.carousel-indicator .dot {
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    width: 4.2vw;
    height: 4.2vw;
    border: .27vw solid #57D896;
    border-radius: 2.4vw;
    margin-right: 8.5vw;
}

.carousel-indicator .dot:last-child {
    margin-right: 0;
}

.carousel-indicator .dot.isActive {
    background: #57D896;
}

/* エラーメッセージ */
.error {
    position: absolute;
    color: #FF6D6D;
    text-align: center;
    opacity: 0;
}

.error.active {
    opacity: 1;
}

/* モーダル */
.modal-back {
    width: 100%;
    height: 100vh;
    background: rgba(8, 29, 24, .8);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;

    /* 表示部分 */
    opacity: 0;
    visibility: hidden;
}

.modal-back.open {
    opacity: 1;
    visibility: inherit;
}

.modal {
    width: 87.2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    box-shadow: 0 1.1vw 5.3vw rgba(0, 0, 0, .14);
    border-radius: 4.2vw;
    background: white linear-gradient(265.92deg, rgba(87, 216, 150, .5) 8.33%, rgba(153, 240, 108, .5) 57.26%, rgba(173, 247, 97, .5) 103.22%);
}

.modal.hidden {
    display: none;
}

.modal-title {
    margin-top: 6.93vw;
    margin-bottom: 4.53vw;
    width: 90.2%;
    height: 11.2vw;
    border-bottom: solid #081D18 .27vw;
    text-align: center;
    font-size: 1.23rem;
}

.modal-body {
    width: 90.8%;
    max-height: 84vw;
    font-size: 1.15rem;
    overflow-y: scroll;
}

.modal-text {
    width: 90.8%;
    font-size: 1.15rem;
}

.modal-btn {
    width: 65.1%;
    height: 11.7vw;
    background: #081D18;
    color: white;
    font: inherit;
    border-radius: 2.9vw;
}

.modal-btns {
    width: 87.8%;
    margin-bottom: 8.27vw;
}

/* グリーンプロジェクトカード */
.card {
    width: 100%;
    height: 64vw;
    background: white linear-gradient(180deg, rgba(87, 216, 150, .4) 0%, rgba(153, 240, 108, .4) 51.56%, rgba(173, 247, 97, .4) 100%);
    border-radius: 4.27vw;
    margin-bottom: 6.4vw;
    box-shadow: 0 1.1vw 4.3vw rgba(0, 0, 0, .14);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.card:nth-child(2n+1) {
    margin-left: 4vw;
    align-items: flex-start;
}

.card:nth-child(2n) {
    margin-right: 4vw;
    align-items: flex-end;
}

.card:nth-child(2n+1) .card-items {
    margin-left: 2.7vw;
}

.card:nth-child(2n) .card-items {
    margin-right: 2.7vw;
}

.card-items {
    width: fit-content;
    height: 100%;
    margin-top: 2.9vw;
    margin-bottom: 7.4vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card img {
    width: 88.8vw;
    height: 45.3vw;
    object-fit: cover;
    border-radius: 3.2vw;
}

.card p {
    
}

/* スクロールバー */
::-webkit-scrollbar {
    width: 1.6vw;
}

::-webkit-scrollbar-track {
    background: #57D896; 
    border-radius: .8vw;
    border: .67vw solid rgba(0, 0, 0, 0);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb {
    background: #00684E; 
    border-radius: .8vw;
}