html {scroll-behavior: smooth;}

h2{
    text-align: left;
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.title {
    color: green;
}

.main{
    width: 100vw;
}

.head_region{
    display: flex; 
    justify-content: space-between;
    align-items: center;
    opacity: 70%;
    width: 100vw;
    height: 10vw;
    position: fixed;
    margin: 0 0 15px;
    background-color: #fff;
    /*
    width: min(95vw, 95vh * 0.75);
    height: min(95vh, 95vw / 0.75); 
*/
}

.img_region{
    width: 50vw;
    text-align: left;
}

.head_img{
    width: 50vw;   
}

/*
.menu_region{
    width: 40vw; 
    right: 0;
    text-align: right;
}
*/

.head_menu{
    flex-grow: 1;
    width: 40vw;   
    display: flex;
    right: 0;
    text-align: center;
}

.head_menu li {
    list-style:none;
    padding: 8px 10px;

    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.contents{
    width: 100vw;
    text-align: center;
}

.title{
    color: #bda590;
}

.brank{
    width: 100vw;
    height: 10vw;
}

.brank_h2{
    width: 100vw;
    height: 10vw;   
    background-color: #f2a7ca;
}

/*メインコンテンツ*/

.top_page{
    width: 100vw;
    text-align: center;
    margin: 0 0 0 0;
}

.top_page_img_region{
    background-color: #dff2f0;

}

.top_page_img{
    text-align: center;
    height: 30vw;
    width: 50vw;
    
    opacity: 1;
}

.page_menu {
    display: inline-flex;
    width: 90vw;   
    justify-content: space-around;
    text-align: center;   
    margin: 0;
}

.page_menu li{
    list-style:none;
    padding: 8px 10px;
    border-bottom: 1px solid #f2dceb;
    display:flex;
    align-items: center;
    
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.menu{
    color: #bda590;    
    text-decoration: none;
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;

}

.top_copy{
    height: 400px;
    width: 100vw;
        
    display: flex;
    justify-content: center;
    align-items: center;  
    
    animation :imgfade_copy 10s;
    opacity: 1;
    
    background-color: dff2f0;
}

.top_copy_p{
    height: 5vw;
    width: 100vw;
    
    display: flex;
    justify-content: center;
    align-items: center; 
    
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;    
    color: #f2a7ca;
    
        /*js用*/
/*    opacity: 0;
    visibility: hidden;
    transition: all is;
    transform: translateY(150px);*/
}

/*
.is-active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
*/

.copy_top_middle_bottom{
    width: 100vw;
    text-align: center;
    margin: 0 auto;
}

.copy_top p{
    font-size: 20px;
    color: #bda590;    
    text-align: left;
    
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.copy_middle p{
    font-size: 20px;
    color: #bda590;    
    text-align: center;
    
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.copy_bottom p{
    font-size: 20px;
    color: #bda590;    
    text-align: right;
    
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*サービスの特徴*/
.hr_img_region{
    height: 5vw;
    width: 100vw;
    align-items: center;
    text-align: center;
}

.hr_img{
width: 100vw;
}

.features_page{
    width: 100vw;
    height: 40vw;
    text-align: center;
    align-items: center;
    margin: auto;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0;
}

.grid-item{
    list-style: none;
    align-items: center;
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-bottom: 3px solid #f2dceb;
}

.grid-item dt{
    text-align: center;
}

.grid-item dd{
    text-align: center;
}

.grid-col-3 > .grid-item{
    width: 98%;   
}

.grid-col-6 > .grid-item{
    width: 16.66%;   
}


/*価格*/
.price_article{
    text-align: left;
}

.price_table{
    text-align: center;
}

.price{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

table , td, th {
    width: 90vw;
	border: 1px solid #f2a7ca;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	height: 25px;
}
th {
	background: #f0e6cc;
}

.unit{
     width: 15%;
}

.price_all{
    width: 15%;       
}

.price_user{
    width: 15%;   
}

.row_1{
    	background: #f2dceb;
}

.row_2{
    	background: #f2dceb;
}

.row_3{
	background: #dff2f0;    
}

.row_4{
    background: #dff2f0;
}

.row_5{
    background: #dff2f0;
}

.row_6{
    background: #dff2f0;
}

.row_7{
    background: #dff2f0;
}

.row_8{
    background: #dff2f0;
}

.even {
	background: #dff2f0;
}
.odd {
	background: #dff2f0;
}

.article_all{
    width: 30%;
}

.article_1{
     width: 200px;   
}

article_{
    text-align: left;
}

/*ご利用について*/
.about{
    height: 60vw;
    width: 100vw;
}

.about_img{
    height: 60%;
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;     
}

/*フッター*/
.footer
{
    width: 100vw;
    bottom: 0;    
    background-color: #b4d9d5;
    
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.footer p{
    text-align: center;
    top: auto;
    bottom:auto;
    
}

/*------------------------------------------------------------------------------------------------------------------------------*/
/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {
}

/*------------------------------------------------------------------------------------------------------------------------------*/
/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    html {scroll-behavior: smooth;}

    h2{
        text-align: left;
        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 15px;
    }

    .title {
        color: green;
    }

    .main{
        width: 100vw;
    }

    .head_region{
        display: flex;
        justify-content: space-between;
        align-items: center;
        opacity: 70%;
        width: 100vw;
        height: 10vw;
        position: fixed;
        margin: 0 0 15px;
        background-color: #fff;
    }

    .img_region{
        width: 50vw;
        text-align: left;
    }

    .head_img{
        width: 50vw;   
    }

    .head_menu{
        flex-grow: 1;
        width: 40vw;   
        display: flex;
        right: 0;
        text-align: center;
    /*    background-color: #000;*/
    }

    .head_menu li {
        list-style:none;
        padding: 8px 10px;
        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 8px;
    }

    .contents{
        width: 100vw;
        text-align: center;
    }

    .title{
        color: #bda590;
    }

    .brank{
        width: 100vw;
        height: 10vw;
    }

    .brank_h2{
        width: 100vw;
        height: 10vw;    
        background-color: #f2a7ca;
    }

    /*メインコンテンツ*/

    .top_page{
        width: 100vw;
        text-align: center;
        margin: 0 0 0 0;
    }

    .top_page_img_region{
        background-color: #dff2f0;

    }

    .top_page_img{
        text-align: center;
        height: 50vw;
        width: 80vw;

        opacity: 1;
    }

    .page_menu {
        display: inline-flex;
        width: 90vw;   
        justify-content: space-around;
        text-align: center;   
        margin: 0;
        padding: 0;
    }

    .page_menu li{
        list-style:none;
        padding: 8px 11px;
        border-bottom: 1px solid #f2dceb;
        display:flex;
        align-items: center;

        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 11px;
    }

    .menu{
        color: #bda590;    
        text-decoration: none;
        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;

    }

    .menu img{
        height: 15px;
        width: 15px;
    }
    /*キャッチコピー*/
    .top_copy{
        height: 200px;
        width: 100vw;

        display: flex;
        justify-content: center;
        align-items: center;  

        animation :imgfade_copy 10s ease-in-out;
        opacity: 1;
    }

    @keyframes imgfade_copy {
        0% {
            opacity: 0;
        }
        25% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }

        75% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }


    .top_copy_p{
        height: 5vw;
        width: 60vw;

        display: flex;
        justify-content: center;
        align-items: center; 

        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 24px;    
        color: #f2a7ca;
    }
    
    .copy_top_middle_bottom{
        width: 100vw;
        text-align: center;
        margin: 0 auto;
        
        animation :imgfade_copy 10s ease-in-out;
        opacity: 1;
    }

    .copy_top p{
        color: #bda590;    
        text-align: left;

        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 15px;
    }

    .copy_middle p{
        color: #bda590;    
        text-align: center;

        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 15px;
    }

    .copy_bottom p{
        color: #bda590;    
        text-align: right;

        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 15px;
    }

    /*サービスの特徴*/
    .hr_img_region{
        height: 5vw;
        width: 100vw;
        align-items: center;
        text-align: center;
    }

    .hr_img{
    width: 90vw;
    }

    .features_page{
        width: 100vw;
        height: 660px;
        text-align: center;
        align-items: center;
        margin: auto;
    }

    .grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0;
        column-gap: 10px;
        row-gap: 10px;
        margin: 0;
        
    }

    .grid-item{
        list-style: none;
        align-items: center;
        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 9px;
        padding: 0;
        border-bottom: 3px solid #f2dceb;
        
    }

    .grid-item dt{
        text-align: center;
    }

    .grid-item dd{
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .grid-col-3 > .grid-item{
        width: 100%;   
    }

    .grid-col-6 > .grid-item{
        width: 16.66%;   
    }


    /*価格*/    
    .price_article{
        text-align: left;
    }

    .price_table{
    /* display: none !important;*/
        margin-left: auto;
        margin-right: auto;
    }

    .price{
        text-align: center;
    }

    table , td, th {
        width: 100vw;
        border: 1px solid #fff;
        border-collapse: collapse;
        font-size:10px;
    }
    td, th {
        padding: 3px;
        height: 25px;
    }
    th {
        background: #f0e6cc;
    }

    .unit{
         width: 13%;
    }

    .price_all{
        width: 12%;       
    }

    .price_user{
        width: 15%;   
    }

    .row_1{
            background: #f2dceb;
    }

    .row_2{
            background: #f2dceb;
    }

    .row_3{
        background: #dff2f0;    
    }

    .row_4{
        background: #dff2f0;
    }

    .row_5{
        background: #dff2f0;
    }

    .row_6{
        background: #dff2f0;
    }

    .row_7{
        background: #dff2f0;
    }

    .row_8{
        background: #dff2f0;
    }

    .article_all{
        width: 30%;
        font-size: 9px;
    }
    
    .price_article{
        font-size: 10px;
    }
    
    /*ご利用について*/
    .about{
        height: 80vw;
        width: 100vw;
    }

    .about_img{
        height: 90%;
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;     
    }

    /*フッター*/
    .footer{
        width: 100vw;
        height: 50vw;

        background-color: #b4d9d5;

        font-family: "dnp-shuei-mgothic-std", sans-serif;
        font-weight: 400;
        font-style: normal;
        
        padding: 0;
    }

    .footer p{
        padding-top: 30px;
    }
}