.section-cta .title-has-visual{
    background-image: url(../images/common/page-top/24.png);
    padding-bottom: 0;
}
.title-has-visual {
    background: center center / cover no-repeat;
    position: relative;
    padding: 30px 0 15px;
    color: #fff;
}
.title-has-visual::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.15);
    /* position: relative; */
}
.container {
    padding-left: 20px;
    padding-right: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1260px;
}
.ex-container {
    padding-top: 5%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1260px;
}
.section-header {
    margin-bottom: 30px;
}
.section-title {
    text-align: center;
    font-family: "Lato",-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 16px;
    color: #8cd0c5;
    position: relative;
}
.section-title::after {
    content: "";
    display: block;
    margin: 10px auto 0;
    width: 60px;
    height: 1px;
    background: #959499;
    opacity: 50%;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.title-01 {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 30px;
    position: relative;
}
.section-catch {
    text-align: center;
    margin: 30px 0 0;
}
/* .text-center {
    text-align: center
} */
/* .tab-menus li>a.active {
    padding-bottom: 1.5em;
} */
/* .tab-menus-lg li>a {
    font-size: 13px;
} */
/* .tab-menus li>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 1em;
    background: #8cd0c5;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-weight: bold;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
} */
/* .tab-menus li>a {
    margin: 0 5px;
    padding: 1.5em 1em;
    border-radius: 10px 10px 0 0;
} */
/* .tab-menus li>a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(135deg);
} */
.section-padding {
    padding: 5%;
}

.text-center {
    text-align: center;
}
/* .color-white {
    color: #fff;
} */
/* .title-03 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 10px;
} */
/* .tab-menus {
    display: flex;
    justify-content: space-evenly;
} */
/* .tab-menus-sm li a.active{
    padding-bottom: 1.5em;
    background: #fff;
    color: #000;
    padding-bottom: 1.5em;
} */
/* .tab-menus-green li>a {
    background: #2d9b86;
} */
/* .tab-menus-sm li>a {
    padding: 1em 1.5em;
    font-size: 12px;
} */
/* .tab-menus li>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 1em;
    background: #8cd0c5;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-weight: bold;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
} */
/* .tab-menus-sm li>a.active {
    padding-bottom: 1.5em;
    background: #fff;
    color: #000;
} */
/* .tab-menus li>a.active {
    padding-bottom: 1.5em;
} */
/* .tab-menus-green li>a {
    background: #2d9b86;
} */
/* .tab-menus-sm li>a {
    padding: 1em 1.5em;
    font-size: 12px;
} */
/* .tab-menus-sm li>a.active::after {
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
} */
/* .tab-menus li>a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
}  */
.tab-item .tab-item-content {
    padding: 30px 20px 20px;
    background: #fff;
}
.tab-item-content-04 {
    margin-top: 3%;
}
.section-cta p {
    margin-bottom: 20px;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.box-d {
    background: #fff;
    margin-bottom: 20px;
    padding: 20px 25px;
}
.section-cta p {
    margin-bottom: 20px;
}
.font-lg {
    font-size: x-large;
}
.button-payment {
    padding: 15px 5px;
    background: #fff56d;
    box-shadow: 0 4px #f3c265;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: 16px;
    position: relative;
}
.button-payment {
    /* font-size: 24px; */
    font-weight: bolder;
    margin-right: 0.05em;
}
.font-xl {
    font-size: 140%;
    line-height: 1.4;
}
.big-box1 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}
.big-box2 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}
input[type="submit"]:after, .form input[type="button"]:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-color: #fff56d;
    transition: all .2s;
}
/* .donation-amount-input {
    padding: 15px 20px;
    width: 20%;
    border: #e5e5e5 1px solid;
} */
.btn-d {
    color: #fff !important;
    background: #8cd0c5;
    display: inline-block;
    min-width: 70vw;
    padding: 1em 2em;
    text-align: center;
    position: relative;
    margin-bottom: 10px;
    box-shadow: 0 4px #5cb4a6;
    text-decoration: none;
    border-radius: 5px;
    position: relative;
    padding: 1em 2em;
    min-width: 30vw;
}
.col-sm-4 {
    width: 30%;
    padding-left: 15px;
    padding-right: 15px;
}
.balloon-item {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    font-size: 12px;
    filter: drop-shadow(2px 2px 2px #e5e5e5);
}
.balloon-item-bottom {
    margin-bottom: 20px;
}
.balloon-item:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
} 
.balloon-item:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #fff;
}
.balloon-item:after {
    border-width: 8px;
}

.input-yellow {
    color: #000 !important;
    background: #fff56d;
    box-shadow: 0 4px #d0c643;
    font-family: inherit;
    font-size: 16px;
    padding: 1em 2em;
    min-width: 30vw;
}
.input-yellow::after {
    content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        border: 7px solid transparent;
        border-top-width: 5px;
        border-bottom-width: 5px;
        border-left-color: #fff56d;
        transition: all .2s;
}


/* 新タブ設定 */

.tab-area{
    width: 100%;
    margin: 0 auto;
    }
    .tab-btn{
    display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
    }
    .tab-list-wrap{
    padding:0; /*デフォルトの値をクリア*/
    margin: 0; /*デフォルトの値をクリア*/
    list-style-type:none; /*デフォルトの値をクリア*/
    display:flex; /*ボタンを横並びに*/
    justify-content:center; /*ボタンを横幅いっぱいに配置*/
    width: 100%;
    }
    .tab_list {
        width: 100%;
        text-align: -webkit-center;
    } 
    .tab-list{
    display:block;
    width: auto;
    padding: 8px 0;
    text-align:center;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd; 
    background: #fff;
    cursor:pointer; 
    }
   
     
    #tab-btn1:checked ~ .tab-list-wrap #tab-list1,
    #tab-btn2:checked ~ .tab-list-wrap #tab-list2
    {
    background:#ddd; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
    /* background:#ffffff;  */
    }
    .tab-content{
    padding:20px;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    display:none; /*初期状態を非表示に*/
    background: #ddd;
    /* background: #c5daff; */
    /* background: #ffffff; */
    }
    #tab-btn1:checked ~ .tab-content-wrap #tab-content1,
    #tab-btn2:checked ~ .tab-content-wrap #tab-content2
    {
    display: block;/*対応するボタンにチェックが入ったときに表示*/
    animation-name: displayAnime;   /*ふわっと表示させるためのアニメーション*/ 
    animation-duration: .4s;
    animation-fill-mode: forwards;
    }

/* footer（仮） */
.ex-footer {
    padding: 75px 0 100px;
    background-color: #fff;
}
.ex-footer-title {
    /* width: 550px; */
    font-size: 2.6em;
    font-weight: bold;
    line-height: 1.75;
}
.ex-sub-title {
    margin-top: 28px;
    font-size: 1.4em;
    line-height: 2;
    /* position: absolute; */
}
.ex-footer-flex {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 0 40px;
    margin-top: 55px;
}
.ex-section-header {
    z-index: 99;
    padding: 3% 5%;
    margin: 0 15%;
    background-color: #fff;
    opacity: 0.8;
    position: relative;
}

/* footerの寄付、ボランティアbutton */
.ex-volunteer-button {
    width: 100%;
    max-width: 480px;
    height:auto;
    display: block;
    position: relative;
    background: #ddecf7;
    border-top: 2px solid #2780c2;
    border-left: .5px solid #2780c2;
    border-right: .5px solid #2780c2;
    border-bottom: .5px solid #2780c2; 
    border-radius: 5px;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.39;
    padding-top: 24px;
    padding-bottom: 24px;
    color: #333;
}
.btn01,.btn02,.btn03{
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.btn01::after,.btn02::after,.btn03::after {
	position: absolute;
	content: '';
	top: -100%;
	width: 100%;
	height: 100%;
	z-index: -1;
	-webkit-transition: .4s;
	transition: .4s;
    left: 0;
}
.btn01:hover {
	color: #fff;
	border-color: #2780c2;
}
.btn02:hover {
    color: #fff;
	border-color: #5dc1ae;
}
.btn03:hover {
    color: #fff;
	border-color: #f3c265;
}
.btn01:hover::after {
	top: 0;
	background-color: #2780c2;
}
.btn02:hover::after {
    top: 0;
	background-color: #5dc1ae;
}
.btn03:hover::after {
    top: 0;
	background-color:#f3c265;
}
.ex-donation-button{
    border-top: 2px solid #5dc1ae;
    border-left: .5px solid #5dc1ae;
    border-right: .5px solid #5dc1ae;
    border-bottom: .5px solid #5dc1ae;
    background:#eafaf7
}
/* donation.php>donate>今回のみの寄付をする */
.sec_bdr-top:before {
    content: '';
    display: inline-block;
    width: 860px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -430px;
    border-top: 1px solid #eaeaea;
}
ul.img_clm3 li {
    display: inline-block;
    vertical-align: top;
    margin: 0 27px;
    width: 25%;
}
ul.img_clm3 {
    display: inline-flex;
    margin: 5% 0;
    justify-content: center;
}
ul.img_clm3 li p.price {
    margin: 0 0 20px 0;
    font-style: normal;
    font-weight: 700;
    font-size: 1em;
    line-height: 1;
    text-align: center;
}
ul.img_clm3 li p.price span.label_tab {
    display: inline-block;
    margin: 0 12px 0 0;
    color: #fff;
    background: #00ab8d;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 0.9em;
    position: relative;
    top: -5px;
}
ul.img_clm3 li p.price span.big {
    font-size: 2em;
}
ul.img_clm3 li p {
    margin: 20px 0 0 0;
    color: #000;
    font-style: normal;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.83;
}
.col-sm-4_tub {
    width: 100%;
    text-align: center;
}
@media screen and (max-width:800px){
ul.img_clm3 {
    display: inline-block;
    margin: 5% 0;
    justify-content: center;
}
ul.img_clm3 li {
    width: 100%;
    margin: 5% 0;
}
.col-sm-4_tub {
    width: 100%;
    margin: auto;
}
}
    @media screen and (max-width:520px){
        .section-padding {
            padding: 5% 0;
        }
    .row-d {
        display: block;
        justify-content: center;
    }
    .free-pay-box {
        padding: 0;
    }
}