@charset "utf-8";
/* CSS Document */


/*-----------------------------------------

Last update:    2021-8-25

---------------------------------------*/


/*=============================
common
=============================*/
#mainarea{
    margin-top:0em;
}

#mainimg{
    background:url(../../about/img/mainimg.jpg) no-repeat center bottom;
    background-size:cover;
}
@media screen and (max-width:768px){
    #mainimg{
        background:url(../../about/img/mainimg.jpg) no-repeat center bottom;
        background-size:100% auto ;
    }
}

@media screen and (max-width:480px){
    #mainimg{
        background:url(../../about/img/mainimg.jpg) no-repeat center bottom;
        background-size:120% auto ;
    }
}



/*=============================
point_area
=============================*/

#point_area .point_block{
    margin-bottom:3em;
}

#point_area .ico_point{
    float:left;
    width:30%;
}
#point_area .ico_point img{
    width:120px;
    margin:0.75em auto 0;
}

#point_area dl{
    float:right;
    width:70%;
}

#point_area dt{
    font-weight:bolder;
    font-size:120%;
    border-bottom:1px solid #444;
    padding-bottom:0.5em;
}

#point_area dd{
    padding-top:1em;
}



@media screen and (max-width:480px){
    #point_area .ico_point{
        float:none;
        width:40%;
        margin:0 auto 1em;
    }
    #point_area dl{
        float:none;
        width:100%;
    }
    #point_area dt{
        text-align:center;
    }
}


/*=============================
howto_area
=============================*/
#howto_area{
}
.howto_block li{
    display:block;
    float:left;
    width:calc( 90% / 3 );
    box-sizing:border-box;
    text-align:center;
    font-weight:bolder;
    margin-right:5%;
    margin-bottom:3em;
}

.howto_block li:nth-of-type(3n){
    margin-right:0;
}

.howto_block li img{
    width:70%;
    margin:0 auto 0.5em;
}

.howto_block li span br{
    display:none;
}
.howto_txt{
    clear:both;
    color:#5db400;
    font-size:130%;
    font-weight:bolder;
    text-align:center;
}


@media screen and (max-width:480px){
    .howto_block li{
        width:calc( 95% / 2 );
        margin-right:0;
        margin-bottom:2em;
    }
    
    .howto_block li:nth-of-type(2n+1){
        margin-right:5%;
    }
    .howto_block li span br{
        display:block;
    }
}




/*=============================
flow_area
=============================*/
#flow_area{
}

.flow_lead{
    clear:both;
    font-size:120%;
    font-weight:bolder;
    text-align:center;
    margin-bottom:2em;
}
.flow_lead span{
    display:inline-block;
}

#flow_area .flow_block{
    display:block;
    float:left;
    width:calc( 90% / 3 );
    border:4px solid #ddd;
    box-sizing:border-box;
    margin-right:5%;
    padding:1em;
    margin-bottom:2em;
}

#flow_area .flow_block:nth-of-type(3n){
    margin-right:0;
}

#flow_area .flow_block dt{
}
#flow_area .flow_block dt img{
    width:60px;
    margin:0 auto 1em;
}

#flow_area .flow_block dd{
}

#flow_area .arrow01{
    clear:both;
    width:200px;
    margin:0 auto 2em;
}

#flow_area .flow_waku{
    border:10px solid #8cd340;
    text-align:center;
    color:#5db400;
    font-size:120%;
    font-weight:bolder;
    padding:1.5em 3em;
}
#flow_area .flow_waku span{
    display:inline-block;
}



@media screen and (max-width:480px){
    #flow_area .flow_block{
        float:none;
        width:100%;
        margin-right:0;
        margin-bottom:2em;
    }
    .flow_lead{
        font-size:110%;
        text-align:left;
        margin-bottom:2em;
    }
    .flow_lead span{
        display:inline;
    }
    
    #flow_area .arrow01{
        width:180px;
    }
    #flow_area .flow_waku{
        text-align:left;
        font-size:120%;
        padding:1em 1em;
    }
    #flow_area .flow_waku span{
        display:inline;
    }
}



/*=============================
plan_area
=============================*/
#plan_area{
}
#plan_area .plan_block{
    display:block;
    float:left;
    width:calc( 90% / 3 );
    box-sizing:border-box;
    border-radius: 10px;
    text-align: center;
    line-height: 1.4;
    padding:1em;
    margin-right:5%;
    margin-bottom:2em;
}
#plan_area .plan_block{
    background: url("../img/bg_clover.png") #fffbde no-repeat right bottom;
    background-size: auto 80%;
}
/*#plan_area #plan01.plan_block{
    background: url("../img/bg_clover.png") #dcf5f9 no-repeat right bottom;
    background-size: 40% auto;
}
#plan_area #plan02.plan_block{
    background: url("../img/bg_clover.png") #fff1e7 no-repeat right bottom;
    background-size: 40% auto;
}
#plan_area #plan03.plan_block{
    background: url("../img/bg_clover.png") #fffbde no-repeat right bottom;
    background-size: 40% auto;
}*/

#plan_area .plan_block:nth-of-type(3n){
    margin-right:0;
}

#plan_area .plan_block dt{
    font-size: 120%;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75em;
}
/*#plan_area #plan01 dt{
    color: #2ac1d7;
}
#plan_area #plan02 dt{
    color: #f5a466;
}
#plan_area #plan03 dt{
    color: #f1cf49;
}*/

#plan_area .plan_block dd{
    line-height: 1.4;
    text-align: center;
}
#plan_area .plan_block dd span{
    display: inline-block;
}

/*#plan_area .plan_block dd .plan_copy01{
    border: 1px solid #333;
    font-weight: 700;
    display: inline-block;
    padding: 0.25em 0.5em;
    margin: 0 auto 0.75em;
}

#plan_area .plan_block dd .plan_txt01{
    text-align: left;
}*/

@media screen and (max-width:600px){
    #plan_area .plan_block{
        float:none;
        width:100%;
        margin-right:0;
        margin-bottom:2em;
    }
    /*#plan_area #plan01.plan_block{
        background: url("../img/bg_clover.png") #dcf5f9 no-repeat right bottom;
        background-size: auto 50%;
    }
    #plan_area #plan02.plan_block{
        background: url("../img/bg_clover.png") #fff1e7 no-repeat right bottom;
        background-size: auto 50%;
    }
    #plan_area #plan03.plan_block{
        background: url("../img/bg_clover.png") #fffbde no-repeat right bottom;
        background-size: auto 50%;
    }*/
}






/*
#plan_area table{
    width:100%;
	border:none;
    line-height: 1.4;
    margin-bottom:1em;
}
#plan_area table tr{
}

#plan_area table th{
    vertical-align:top;
    border:1px solid #ccc;
    font-weight: 700;
    padding:0.7em 0 0.85em 0;
}
#plan_area table thead th{
    background:#fffbde;
    text-align: center;
    border-left: none;
}
#plan_area table thead .td04{
    border-right: none;
}
#plan_area table tbody th{
    border-left: none;
    padding-left:2em ;
}

#plan_area table td{
    vertical-align:top;
    border:1px solid #ccc;
    padding:1em 2em 1em 1em;
}
#plan_area table tr.bgcolor th,
#plan_area table tr.bgcolor td{
    background: #fbfff8;
}
#plan_area table .td01{
}
#plan_area table tbody td{
    width: 23%;
}

#plan_area table tbody .td02{
    text-align: right;
}
#plan_area table tbody .td03{
    text-align: right;
}
#plan_area table tbody .td04{
    text-align: right;
    border-right: none;
}

#plan_area table span{
    display: inline-block;
}

@media screen and (max-width:768px){
#plan_area table tbody th{
    padding-left:1em ;
}
#plan_area table td{
    padding:1em 1em 1em 0em;
}
}

@media screen and (max-width:480px){
#plan_area table tbody th{
    padding-left:0.5em ;
}
#plan_area table td{
    padding:1em 0.5em 1em 0em;
}
}*/


/*=============================
access_area
=============================*/
#access_area{
}

#access_area .add_area{
    float:left;
    width:43%;
    box-sizing:border-box;
}
#access_area .add_area dt{
    font-weight:bolder;
    font-size:110%;
}
#access_area .map_area{
    float:right;
    width:55%;
    box-sizing:border-box;
    position: relative;
    height:0;
    padding-top: 39.38%;
}
#access_area .map_area iframe{
    position: absolute;
    top: 0;
    right: 0;
    width:100%;
    height:100%;
}
@media screen and (max-width:768px){
    #access_area .add_area{
        float:none;
        width:100%;
        padding-left:1em;
        margin-bottom:2em
    }
    #access_area .map_area{
        float:none;
        width: 100%;
        padding-top: 56.25%;
    }
}






/*=============================
online_area
=============================*/
#online_area{
}

#online_area .online_txtarea{
    float:left;
    width:55%;
    box-sizing:border-box;
}
#online_area .online_imgarea{
    float:right;
    width:40%;
    box-sizing:border-box;
}
@media screen and (max-width:480px){
    #online_area .online_txtarea{
        float:none;
        width:100%;
        margin-bottom:2em
    }
    #online_area .online_imgarea{
        float:none;
        width: 100%;
    }
}