@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* レンタル可能な容器の種類 start*/
.daicho-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.daicho-content1{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas:
    "image text";
    place-items: center;
}
.daicho-image{
    grid-area: image;
}
.daicho-text{
    gird-area: text;
}
.daicho-point{
    display: grid;
    grid-template-columns: 5% 20% 65%;
    grid-template-rows: auto;
    grid-template-areas:
    "boxA boxD boxD"
    "boxB boxC boxC";
    background-color: #f2f8fd; 
    gap: 3%;
}
.point-ore{
    grid-area: boxA;
}
.point-title{
    grid-area:boxD;
}
.point-title p{
    font-size: 1.8rem;
    font-weight: 800;
    color: #284c95;
}
.point-number{
    grid-area: boxB;
    text-align: right;
    align-items: center;
}
.point-number p{
    font-size: 1.8rem;
    font-weight: 600;
    color: #284c95;
 }
.point-text{
    grid-area: boxC;
    margin-bottom: 20px;
}
.daicho-content2{
    width: 80%;
    margin: auto;
}
.daicho-item2{
    background-color: #fbfde0;
}
.daicho-content2 h1{
    font-size:1.2rem;
    text-align: center;
}
.daicho-content3{

    width: calc( 100% -40px );
    /*place-items: center;*/
    padding: 20px;
}
.daicho-content3 h1{
    width: 90%;
    margin: auto auto 20px auto;
    font-size: 1.4rem;
}
.daicho-content3 h2{
    width: 90%;
    margin: auto;
    font-size: 1.1rem;
}
.daicho-content3 p{
    width: 90%;
    margin: auto;
}

}
@media screen and (min-width: 481px) and (max-width: 1024px){
/* レンタル可能な容器の種類 start*/
.daicho-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.daicho-content1{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "image"
    "text";
    place-items: center;
}
.daicho-image{
    grid-area: image;
    width: 40%;
}
.daicho-text{
    gird-area: text;
}
.daicho-point{
    display: grid;
    grid-template-columns: 5% 20% 65%;
    grid-template-rows: auto;
    grid-template-areas:
    "boxA boxD boxD"
    "boxB boxC boxC";
    background-color: #f2f8fd; 
    gap: 3%;
}
.point-ore{
    grid-area: boxA;
}
.point-title{
    grid-area:boxD;
}
.point-title p{
    font-size: 1.8rem;
    font-weight: 800;
    color: #284c95;
}
.point-number{
    grid-area: boxB;
    text-align: right;
    align-items: center;
}
.point-number p{
    font-size: 1.8rem;
    font-weight: 600;
    color: #284c95;
 }
.point-text{
    grid-area: boxC;
    margin-bottom: 20px;
}
.daicho-content2{
    width: 100%;
    margin: auto;
}
.daicho-item2{
    background-color: #fbfde0;
}
.daicho-content2 h1{
    font-size:1.2rem;
    text-align: center;
}
.daicho-content3{

    width: calc( 100% -40px );
    /*place-items: center;*/
    padding: 20px;
}
.daicho-content3 h1{
    width: 90%;
    margin: auto auto 20px auto;
    font-size: 1.4rem;
}
.daicho-content3 h2{
    width: 90%;
    margin: auto;
    font-size: 1.1rem;
}
.daicho-content3 p{
    width: 90%;
    margin: auto;
}
}
@media screen and (max-width: 480px){
/* レンタル可能な容器の種類 start*/
.daicho-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: 0px auto 50px auto;
}
.daicho-content1{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "image"
    "text";
    place-items: center;
}
.daicho-point{
    display: grid;
    grid-template-columns: 10% 20% 60%;
    grid-template-rows: auto;
    grid-template-areas:
    "boxA boxD boxD"
    "boxB boxC boxC";
    background-color: #f2f8fd; 
    gap: 3%;
}
.point-ore{
    grid-area: boxA;
    align-content: right;
}
.point-title{
    grid-area:boxD;
}
.point-title p{
    font-size: 1.8rem;
    font-weight: 800;
    color: #284c95;
}
.point-number{
    grid-area: boxB;
    text-align: right;
    align-items: center;
}
.point-number p{
    font-size: 1.8rem;
    font-weight: 600;
    color: #284c95;
 }
.point-text{
    grid-area: boxC;
    margin-bottom: 20px;
}
.point-text p{
    margin-left: 20px;
}
.daicho-image{
    grid-area: image;
    width: 40%;
}
.daicho-text{
    gird-area: text;
}
.daicho-content2{
    width: 100%;
    margin: auto;

}
.daicho-item2{
    background-color: #fbfde0;
}
.daicho-content2 h1{
    font-size:1.2rem;
    text-align: center;
}
.daicho-content3{
    width: calc( 100% -40px );
    /*place-items: center;*/
    padding: 20px;
}
.daicho-content3 h1{
    width: 90%;
    margin: auto auto 20px auto;
    font-size: 1.4rem;
}
.daicho-content3 h2{
    width: 90%;
    margin: auto;
    font-size: 1.1rem;
}
.daicho-content3 p{
    width: 90%;
    margin: auto;
}
}