@charset "UTF-8";
@import url("grid.css");

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #666;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0 0 0;
}

.header__photo{
    display: block;
}

.header__photo img{
    display: block;
    width: 300px;
    height: 60px;
}


.header__logo{
    display: block;
}

.header__logo img{
    display: block;
    width: 100%;
    height:auto;

}

.free-dial{
    display: block;
}

.free-dial__text{
    margin-bottom: 0;
}

.free-dial__number{    
    display: inline-block;
    font-size: 38px;
    font-weight: 700;
}

.free-dial img{
    display: inline-block;
    margin-top: 8px;
    margin-right: 8px;
    width: auto;
    height: 32px;
}

nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: #CCEDD8;    
}
nav a {
    padding: 0.5rem;
}

@media screen and (min-width: 769px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}

.header__photo{
    display: none;
}

.header__logo img{
    display: block;
    width: 80%;
    height:auto;

}

.free-dial{
    display: none;
}


nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    
/*メイン画像
-------------------------------------*/

.mainimg{
    width: 100vw;
    height: 60vh;
    position: relative;
    background-image: url("../img/mainimg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
}


@media screen and (max-width: 768px){
    .mainimg{
        width: 100vw;
        height: 160px;
        position: relative;
        background-image: url("../img/mainimg.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
    }
}


/*メインコンテンツ
-------------------------------------*/
.under {
    padding:0 0 1rem 0;
}

.center {
	text-align: center;
	margin-bottom: 4rem;
}


/*法人の目的
-------------------------------------*/
.purpose {
	background-color: #fffeee;
    margin: 0 0 5rem 0;
	padding: 3rem 0;
}

.purpose__heading2{
    font-weight: 700;
    color: #00A0E9;
}
.purpose__under{
    border-bottom: 4px solid #00A0E9;
}

.purpose__text{
    font-size: 14px;
    line-height: 2.3;
}


/*特定非営利活動法人の具体的種類
-------------------------------------*/
.business-content{
    margin: 5rem 0;
	padding: 3rem 0;
}

.business-content__heading2{
    font-weight: 700;
color: #E5004F;
}

.business-content__under{
    border-bottom: 4px solid #E5004F;
}


.business-content__heading3{
    color:#E5004F;
}

.business-content__text{
    font-size: 14px;
    line-height: 2.3;
    margin-bottom: 8%;
}

.business-content__photo{
    display: block;
    margin-top: -8%;
    margin-bottom: 8%;
}

.business-content__photo img{
    display: block;
    width: auto;
    height: auto;
}


/*活動実績
-------------------------------------*/
.activity {
	background-color: #fffeee;
    margin: 5rem 0;
	padding: 3rem 0;
}

.activity__heading2{
    color: #6FBA2C;
}

.activity__under{
    border-bottom: 4px solid #6FBA2C;
}

.activity__item{
    border-bottom: 1px solid #6FBA2C;
    padding-top: 4%;
    padding-bottom: 4%;
}

.activity__heading3{
    color: #6FBA2C;
    text-align: left;
}


.activity__text{
    font-size: 14px;
    line-height: 2.3;
    margin-bottom: 1.5em; 
    text-align: left;   
}

.situation{
    color: #00A0E9;
}

.solution{
    color: #E6002D;
}

/*桜の植樹
-------------------------------------*/

.sakura__heading2{
    text-align: center;
    display: inline-block;
    color: #D46574;
    padding-bottom: 1rem;
    border-bottom: 4px solid #D46574;
}

/* .sakura__under {
    border-bottom: 4px solid #D46574;
} */

.sakura__banner{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sakura__banner img{
    width: 100%;
    height: auto;
}


.sakura__free-dial{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sakura__free-dial__text{
    margin-bottom: 0;
}

.sakura__free-dial__number{    
    display: inline-block;
    font-size: 38px;
    font-weight: 700;
}

.sakura__free-dial img{
    display: inline-block;
    margin-top: 8px;
    margin-right: 8px;
    width: auto;
    height: 32px;
}


.sakura__heading3{
    display: block;
    text-align: left;
    width: 100%;
    color: #D46574;
}

.sakura__icon{
    display: inline-block;
    width:24px;
    margin-right: 8px;
    margin-top: 8px;
}

.sakura__photo{
    display: block;
    margin-bottom: 4%;
}

.sakura__photo img{
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px){

}


/*ご寄付のお願い
-------------------------------------*/
.donation{
    background-color: #fffeee;
    margin-top: 5rem;
    padding: 3rem 0;
}

.donation__heading2{
    color:#D46574;
}

.donation__under{
    border-bottom: 4px solid #D46574;
}

.donation__heading3{
    color:#D46574;
}
.donation__text{
    font-size: 14px;
    line-height: 2.3;
    margin-bottom: 1.5em; 
    text-align: left;  
}


.donation__heading4{
    color: #D46574;
    padding-left: 8px;
    border-left: 4px solid #D46574 ;
}

.donation-table {
	border-collapse: collapse; 
    margin-bottom: 1.5em
}

.donation-table__th,
.donation-table__td {
  padding: 1em;
  text-align: left;
}

.donation-table__tr{
  border-bottom: 4px solid #fff; 
}

.donation-table__th{
    width: 30%;
    background-color: #e3dac5;
}

.donation-table__td{
    width: 70%;
    background-color: #f2eee4;
}

.donation__text a{
    display: inline-block;
}

@media screen and (max-width: 768px){
	
    .donation-table{
        width: 100%;
    }
    .donation-table__th,
    .donation-table__td
    {
        display: block;
        width: 100%;
    }

    }

/*法人概要
-------------------------------------*/
.company{
    margin-top: 5rem;
    padding: 3rem 0;
}

.company__heading2{
    font-weight: 700;
    color:#f39700;
}

.company__under{
    border-bottom: 4px solid #f39700;
}

.flow.row {
	margin-bottom: 3rem;
}

.company-table {
	border-collapse: collapse; 
    border:1px solid #E1E1E1;
}
.company-table__th,
.company-table__td {
  padding: 1em;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; 
}

.company-table__th{
    width: 30%;
    background-color: #f5f5f5;
}

.company-table__td{
    width: 70%;
}

/*スマホ用フッター電話
-------------------------------------*/
.sp-footer{
    width: 100%;
    padding: 0.5em;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color:#f4f4f4;
    z-index: 10000;
    text-align: center;
    box-shadow: 0 -6px 3px -3px rgba(0, 0, 0, .18);
}

.sp-footer__text{
display: block;
color: #333;

}

.sp-footer img{
    width: auto;
    height: 16px;
}

.sp-footer__number{
    color: #333;
    font-size: 24px;
}

@media screen and (min-width: 769px){
    /* PC時は非表示 */
    .sp-footer{
display: none !important;
    }
    }

/*フッター
-------------------------------------*/
footer {
    background-color: #00A73C;
    padding: 5rem 0;
}

.footer__heading4{
    color:#fff;
}

.footer__text{
    color:#fff;
}

.footer__navi{
    color: #fff;
}

.footer__navi ul{
    list-style-type: none;
    color: #fff;
}

.footer__navi li{
    color: #fff;
}

.footer__navi a{
    color: #fff;
}

/* footer h4 {
    border-bottom: 3px solid #ccc;
} */

/*お問い合わせ
-------------------------------------*/
/* .contact-box {
	border: 1px solid #ccc;
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 4rem 0;
}
.table th {
	width: 250px;
} */

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #00A73C;
}
.copyright a {
    color: #fff;
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: #000;
    color: #fff;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: #666;
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	
/*法人概要
-------------------------------------*/
.company-table__th{
    display: block;
    width: 100%;
}

.company-table__td{
    display: block;
    width: 100%;
}


#pagetop{
    display: none !important;
}
}