@charset "utf-8";

body{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    max-width: 980px;
    margin: auto;
}

/*１品目 商品を選ぶボタン*/
.box4{
    width: 980px;
    height: 140px;
}

.box4 img{
    width: 980px;
}

.box4 a{
    word-break: break-all;
}

/*2品目 商品を選ぶボタン*/
.box10{
    width: 980px;
    height: 150px;
}

.box10 img{
    width: 980px;
}

.box10 a{
    word-break: break-all;
}



/*↓モーダルウィンドウ */
.modal-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    }

/* .modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
} */
.modal-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

/* .modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;
} */
.modal-wrapper.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
    height: 100%;
}

.modal-wrapper .modal-window{
    z-index: 10;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: 100%;
    border-radius: 40px;
    max-width: 87vw;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 100%;
    background-color: rgba(16, 63, 60, 0.628);
}

.modal-wrapper {
    z-index: 20;
    font-size: 100px;
    color:#fff;
    text-decoration: none;
}

.modal-close{
    margin: 0 0 0 760px;
    color:#fff;
    position: relative;
    z-index: 11;
    border: 7px solid #fff;
    border-radius: 50%;
    font-size: 80px;   /* ×の大きさ */
    display: inline-block;  /* ← 必須！ */
    width: 70px;
    height: 70px;
    line-height: 70px;
}



/*↓モーダルウィンドウの中身 */
.modal-window .container {
    box-sizing: border-box;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    padding: 40px;
    background-color: #fff;
}
.modal-window .container .item {
    width: calc(50% - 15px);
    cursor: pointer;
}
.modal-window .container p {
    margin: 0;
}
.modal-window .container img {
    display: block;
    width: 100%;
    max-width: 100%;
}


.container {
    display: grid;
    grid-template-areas:
        "div1 div1"
        "div2 div2"
        "div3 div3"
        "div4 div4"
        "div5a div5a"
        "div5 div5"
        "div6 div6"
        "div7 div7"
        "div8 div8"
        "div9 div9"
        "div10 div10"
        "div11a div11a"
        "div11 div11"
        "div12 div12"
        "div13 div13"
        "div14 div14"
        "div15 div15"
        "div16 div16"
        "div17 div17"
        "div18 div18"
        "div19 div19"
        "div20 div20"
        "div21 div21"
        "div22 div22"
        "div23 div23"
        "div24 div24"
        "div25 div25"
        "div26 div26"
        "div27 div27"
        "div28 div28";
    gap: 0px;
    padding: 0px;
    width: 100%;
    margin:0 auto;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.box img {
    display: block; 
}


img {
	width:980px;
	height: auto;/*高さ自動*/
    object-fit: cover;
}



#div1 { grid-area: div1; }
#div2 { grid-area: div2; }
#div3 { grid-area: div3; }
#div4 { grid-area: div4; }
#div5a { grid-area: div5a; }
#div5 { grid-area: div5; }
#div6 { grid-area: div6; position: relative; }
#div7 { grid-area: div7; }
#div8 { grid-area: div8; position: relative; }
#div9 { grid-area: div9; }
#div10 { grid-area: div10; }
#div11a { grid-area: div11a; }
#div11 { grid-area: div11; }
#div12 { grid-area: div12; position: relative; }
#div13 { grid-area: div13; }
#div14 { grid-area: div14; position: relative; }
#div15 { grid-area: div15; }
#div16 { grid-area: div16; }
#div17 { grid-area: div17; }
#div18 { grid-area: div18; position: relative; }
#div19 { grid-area: div19; }
#div20 { grid-area: div20; position: relative; }
#div21 { grid-area: div21; }
#div22 { grid-area: div22; }
#div23 { grid-area: div23; position: relative; }
#div24 { grid-area: div24; }
#div25 { grid-area: div25; }
#div26 { grid-area: div26; }
#div27 { grid-area: div27; }
#div28 { grid-area: div28; position: relative; }

.result_btn{
    cursor: pointer;
}

.quantity1 {
    position: absolute;
    background-color: #fff;
    padding:  0px;
    top: 15%;
    left: 35%;
    width: 30%;
    height: 30%;
}

.price1 {
    position: absolute;
    background-color: #fff;
    padding:  0px;
    top: 15%;
    left: 35%;
    width: 30%;
    height: 25%;
}

.quantity2 {
    position: absolute;
    background-color: #fff;
    padding:  0px;
    top: 15%;
    left: 35%;
    width: 30%;
    height: 30%;
}

.price2 {
    position: absolute;
    background-color: #fff;
    padding:  0px;
    top: 15%;
    left: 35%;
    width: 30%;
    height: 25%;
}

.unitPrice {
    position: absolute;
    padding:  0px;
    top: 22%;
    left: 22%;
    width: 57%;
    height: 50%;
}

#unitPrice1 {
    position: absolute;
    width: 30%;
    left: 1%;
    margin: 0;
}

#unitPrice2 {
    position: absolute;
    width: 30%;
    left: 69%;
    margin: 0;
}

.yearlyCost {
    position: absolute;
    padding:  0px;
    top: 25%;
    left: 22%;
    width: 57%;
    height: 50%;
}

#yearlyCost1 {
    position: absolute;
    padding:  0px;
    top: -5%;
    left: 0%;
    width: 31%;
    height: 100%;
    margin: 0;
}

#yearlyCost2 {
    position: absolute;
    padding:  0px;
    top: -5%;
    left: 68%;
    width: 31%;
    height: 100%;
    margin: 0;
}

.yearlyChart {
    position: absolute;
    padding:  0px;
    top: 8%;
    left: 10%;
    width: 80%;
    height: 300px;
}

#yearlyCostChart {
    background-color: #ffffff;
    position: absolute;
    padding:  0px;
    height: 300px;
}

.ratingArea {
    position: absolute;
    bottom: 52%;
    width: 100%;
    height: 50%;
    margin: 0;
}

#rating {
    position: absolute;
    width: 100%;
    margin: 0;
    text-align: center;
        display: flex;
    justify-content: center;
    gap: 30px;
}

#message { 
    position: absolute;
    top: 180px;
    left: 350px;
    margin: auto;
    font-weight: bolder;
}

input {
    height: 200%;
    width: 100%;
    text-align: center;
    font-size: 40px;
}

p {
    text-align: center;
    font-size: 3em;
}

canvas {
    height: auto;
    width: 750px;
    height: 300px;
    display: block;
}

.star {
    font-size: 7.5em;
    cursor: pointer;
    color: #c8c8c9;
}
.star.selected,
.star.hover {
    color: gold;
}