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


.wrapper{
    }




/*****　メインイメージ　*****/

.home-title {
    width: 1118px;
    padding-top: 120px;
    margin: 0 auto 30px;
    }
    
.logo-area {
    border-left: solid 20px #f4ec44;
    padding: 5px 0 5px 25px;
    margin-bottom: 10px;
    }
.logo-area img {
    height: 50px;
    margin: 5px 0;
    }
.logo-area + h1 {
    font-size: 14px;
    line-height: 160%;
    color: #07586a;
    margin: 0 0 30px 45px;
    }
.summary {
    background-image: url("../contents/home/main_photo_bg.jpg");
    background-size: 1118px;
    padding: 30px;
    }
.summary p {
    color: #07586a;
    font-size: 16px;
    margin: 0;
    }
.summary p + p {margin-top: 10px;}

/*****　メニュー　*****/

.grid-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    rule: dashed 1px #aaa;
    margin-bottom: 60px;
    }
.grid-menu .refill {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    }
.grid-menu .binder,
.grid-menu .refill {
    padding: 30px;
    }

.grid-menu h2 {
    font-size: 22px;
    color: #07586a;
    line-height: 120%;
    border-left: solid 10px #07586a;
    padding: 0 0 0 10px;
    margin: 0 0 20px;
    }
.grid-menu h2 span {
    display: block;
    font-size: 16px;
    color: #38758c;
    margin-top: 5px;
    }

.grid-menu p.menu-btn {
    width: 230px;
    text-align: center;
    line-height: 100%;
    margin: auto;
    }
.grid-menu p.menu-btn a {
    display: block;
    background-color: #bad9d3;
    border-radius: 20px;
    background-image:url("../contents/images/arrow_black.png");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 24px;
    padding: 12px 0;
    }
    
.grid-binder,
.grid-refill {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 auto 20px;
    /*background-color: #ccc;*/
    }
.grid-binder p {
    text-align: center;
    font-size: 13px;
    padding: 0 10px;
    margin: 10px auto 0;
    }
.grid-refill {
    margin: 20px auto 30px;
    }

.grid-refill-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    }
.grid-refill-inner p {
    background-color: #07586a;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 13px;
    padding: 9px;
    margin: 10px auto 0;
    }
.grid-refill-inner p span {
    display: block;
    font-weight: bold;
    font-size: 15px;
    margin: 0 auto 5px;
    }


/******************************************************************************/


@media (min-width: 1500px) {

/*****　メインイメージ　*****/



}

/******************************************************************************/


@media (max-width: 1118px) {


/*****　メインイメージ　*****/

.home-title {width: 96%;}

.summary {background-size: 100%;}


/*****　メニュー　*****/



}


/******************************************************************************/


@media (max-width: 840px) {


/*****　メインイメージ　*****/

.home-title {padding-top: 100px;}

.logo-area {
    border-left: solid 15px #f4ec44;
    padding: 5px 0 5px 20px;
    }
.logo-area img {height: 40px;}
.logo-area + h1 {margin: 0 0 30px 35px;}
    

/*****　メニュー　*****/
    
.grid-menu .binder,
.grid-menu .refill {padding: 20px;}

.grid-menu h2 {border-left: solid 8px #07586a;}

.grid-menu p.menu-btn {width: 200px;}


}


/******************************************************************************/


@media (max-width: 600px) {


/*****　メインイメージ　*****/

.home-title {padding-top: 90px;}

.logo-area {
    border-left: solid 12px #f4ec44;
    padding: 5px 0 5px 20px;
    }
.logo-area img {height: 35px;}
.logo-area + h1 {margin: 0 0 20px 32px;}

.summary {padding: 20px;}
.summary p {font-size: 14px;}


/*****　メニュー　*****/

.grid-menu {
    grid-template-columns: 1fr;
    margin-bottom: 30px;
    }
.grid-menu .refill {
    grid-column: auto;
    grid-row: auto;
    }
.grid-menu .binder,
.grid-menu .refill { padding: 30px 30px;}

.grid-refill {grid-template-columns: 1fr;}

}


/******************************************************************************/


@media (max-width: 480px) {


/*****　メインイメージ　*****/

.logo-area {
    border-left: solid 10px #f4ec44;
    padding: 5px 0 5px 15px;
    }
.logo-area img {height: 30px;}
.logo-area + h1 {
    font-size: 12px;
    margin: 0 0 20px 25px;
    }


/*****　メニュー　*****/

.grid-menu .binder,
.grid-menu .refill { padding: 30px 15px;}

.grid-menu h2 {
    font-size: 20px;
    border-left: solid 6px #07586a;
    margin: 0 0 15px;
    }
.grid-menu h2 span {font-size: 15px;}

.grid-menu p.menu-btn {width: 180px;}


}


/******************************************************************************/


@media (max-width: 390px) {


/*****　メインイメージ　*****/




}