@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* レンタル可能な容器の種類 start*/
.device-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.device-content{
    width: 70%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box2 box3";
    place-content: center;
    place-items: center;
    gap: 3%;
}
.device-content h2{
    font-size: 1.1rem;
    text-align: center;
    padding: 5px 20px 10px 20px;
}
.device-content p{
    margin: 20px;
    text-align: left;
}

.device-card1{
    gird-area: box1;
    background-color: #f5fbfe;
    height: stretch;
    text-align: center;
}
.device-card2{
    gird-area: box2;
    background-color: #f5fbfe;
    height: stretch;
    text-align: center;
}
.device-card3{
    gird-area: box3;
    background-color: #f5fbfe;
    height: stretch;
    text-align: center;
}
.device-card1 img, .device-card2 img, .device-card3 img{
    width: 80%;
    margin: auto;
}
/*レギュレータ　start*/
.regulator-content{
    width: 90%;
    margin: auto;
    max-width: 1000px;  
}
.regulator-item{
    width: 100%;
    margin: auto;
    gap: 2%;
    display: flex;
    flex-flow: row wrap;
    place-content: center;
    background-color: #ebfaff;
}
.regulator-item h3{
    text-align: center;
    margin: 50px;
    font-weight: 600;
}
.regulator-card{
    width: 15%;
    background-color: #0093d7;
    place-items: center;
    place-content: center;
    border-radius: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
}
.regulator-card p{
    color: white;
    display: block;
    font-weight: 600;
}
.r-content{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "r-1 r-2 r-3 r-4";
    place-content: center;
    place-items: center;
    gap: 3%;
}
.r-1{
    grid-area: r-1;
}
.r-2{
    grid-area: r-2;
}
.r-3{
    grid-area: r-3;
}
.r-4{
    grid-area: r-4;
}
.q-content{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "q-1 q-2 q-3";
    place-content: center;
    place-items: center;
    gap: 3%;
    background-color: #dceccd;
}
.q-content img{
    width: 90%;
    margin: 20px auto;
}
.q-1{
    grid-area: q-1;
}
.q-2{
    grid-area: q-2;
}
.q-3{
    grid-area: q-3;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* レンタル可能な容器の種類 start*/
.device-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.device-content{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box1 box2 box3";
    place-content: center;
    place-items: center;
    gap: 1%;
}
.device-content h2{
    font-size: 1.1rem;
    text-align: center;
    padding: 5px 20px 10px 20px;
}
.device-content p{
    margin: 20px;
    text-align: left;
}

.device-card1{
    gird-area: box1;
    background-color: #f5fbfe;
    height: stretch;
    text-align: center;
}
.device-card2{
    gird-area: box2;
    background-color: #f5fbfe;
    height: stretch;
    text-align: center;
}
.device-card3{
    gird-area: box3;
    background-color: #f5fbfe;
    height: stretch;
    text-align: center;
}
.device-card1 img, .device-card2 img, .device-card3 img{
    width: 80%;
    margin: auto;
}
/*レギュレータ　start*/
.regulator-content{
    width: 100%;
    margin: auto;
    max-width: 1000px;  
}
.regulator-item{
    width: 100%;
    margin: auto;
    gap: 3%;
    display: flex;
    flex-flow: row wrap;
    place-content: center;
    background-color: #ebfaff;
}
.regulator-item h3{
    width: 100%;
    text-align: center;
    font-weight: 600;
}
.regulator-card{
    width: 20%;
    background-color: #0093d7;
    place-items: center;
    place-content: center;
    border-radius: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
}
.regulator-card p{
    color: white;
    display: block;
    font-weight: 600;
}
.r-content{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "r-1 r-2"
    "r-3 r-4";
    place-content: center;
    place-items: center;
    gap: 1%;
}
.r-1{
    grid-area: r-1;
    width: 70%;
    max-width: 200px;
}
.r-2{
    grid-area: r-2;
}
.r-3{
    grid-area: r-3;
    width: 65%;
    max-width: 180px;
}
.r-4{
    grid-area: r-4;
    width: 65%;
    max-width: 180px;
}
.q-content{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "q-1 q-3"
    "q-2 q-2";
    place-content: center;
    place-items: center;
    gap: 3%;
    background-color: #dceccd;
}
.q-content img{
    width: 70%;
    margin: 20px auto;
}
.q-1{
    grid-area: q-1;
    text-align: right;
}
.q-2{
    grid-area: q-2;
}
.q-2 p{
    width: 90%;
    margin:  auto auto 50px auto;
}

.q-3{
    grid-area: q-3;
}
}
@media screen and (max-width: 480px){
/* レンタル可能な容器の種類 start*/
.device-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.device-content{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "box1"
    "box2"
    "box3";
    place-content: center;
    place-items: center;
    gap: 1%;
}
.device-content h2{
    font-size: 1.1rem;
    text-align: center;
    padding: 5px 20px 10px 20px;
}
.device-content p{
    margin: 20px;
    text-align: left;
}

.device-card1{
    gird-area: box1;
    background-color: #f5fbfe;
    text-align: center;
    width: 100%;
}
.device-card2{
    gird-area: box2;
    background-color: #f5fbfe;
    width: 100%;
    text-align: center;
}
.device-card3{
    gird-area: box3;
    background-color: #f5fbfe;
    width: 100%;
    text-align: center;
}
.device-card1 img, .device-card2 img, .device-card3 img{
    width: 95%;
    max-height: 220px;
    margin: auto;
}
/*レギュレータ　start*/
.regulator-content{
    width: 100%;
    margin: auto;
    max-width: 1000px;  
}
.regulator-item{
    width: 100%;
    margin: auto;
    gap: 3%;
    display: flex;
    flex-flow: row wrap;
    place-content: center;
    background-color: #ebfaff;
}
.regulator-item h3{
    width: 100%;
    text-align: center;
    font-weight: 600;
}
.regulator-card{
    width: 25%;
    background-color: #0093d7;
    place-items: center;
    place-content: center;
    border-radius: 50%;
    margin: 10px auto;
}
.regulator-card p{
    color: white;
    display: block;
    font-weight: 600;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.r-content{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "r-1 r-1"
    "r-2 r-2"
    "r-3 r-4";
    place-content: center;
    place-items: center;
    gap: 1%;
}
.r-1{
    grid-area: r-1;
    width: 50%;
    max-width: 200px;
}
.r-2{
    grid-area: r-2;
}
.r-3{
    grid-area: r-3;
    width: 90%;
    max-width: 180px;
}
.r-4{
    grid-area: r-4;
    width: 90%;
    max-width: 180px;
}
.q-content{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "q-1 q-3"
    "q-2 q-2";
    place-content: center;
    place-items: center;
    gap: 3%;
    background-color: #dceccd;
}
.q-content img{
    width: 70%;
    margin: 20px auto;
}
.q-1{
    grid-area: q-1;
    text-align: right;
}
.q-2{
    grid-area: q-2;
}
.q-2 p{
    width: 90%;
    margin:  auto auto 50px auto;
}

.q-3{
    grid-area: q-3;
}
}