@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */


/* =====================================================================
*    共通・大枠
* =================================================================== */

html {
    font-size: calc(10 / 750 * 100vw);
    overflow-x: hidden;
}

.gDef-wrapper {
    padding: 0;
}

.gDef-top-banner {
    background-color: #fffbb8;
    position: relative;
    z-index: 3;
    padding-top: 50px;
}

.gDef-contents {
    background: #fff;
    color: #000000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    line-height: 2;
    letter-spacing: .05em;
}

.set1,
.set1 * {
    position: relative;
}

.set1 img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.inner {
    width: calc(720 / 750 * 100%);
    margin: 0 auto;
    z-index: 1;
    padding: calc(120 / 750 * 100%) 0;
}

svg {
    width: 100%;
    height: auto;
}

.marL {
    margin-left: calc(30 / 750 * 100%);
}

.marR {
    margin-right: calc(30 / 750 * 100%);
}

.marB100 {
    margin-bottom: calc(100 / 750 * 100%);
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: calc(10 / 1400 * 100vw);
    }
    .gDef-contents {
        font-size: 1.6rem;
    }
    .inner {
        width: 100%;
        max-width: 1024px;
        padding: calc(120 / 1920 * 100%) calc(30 / 1400 * 100%);
        box-sizing: border-box;
    }
    .sp {
        display: none !important;
    }
    .marL {
        margin-left: calc(30 / 1440 * 100%);
    }
    .marR {
        margin-right: calc(30 / 1440 * 100%);
    }
    .marB100 {
        margin-bottom: calc(100 / 1856 * 100%);
    }
}

@media screen and (min-width: 1400px) {
    html {
        font-size: 10px;
    }
    .news ul.news_list li a .txt_block:after {
        font-size: 12px;
        line-height: 2;
        bottom: 0.4em;
    }
}


/*-----------  yellow_tab  ----------------------------*/

.yellow_tab {
    position: relative;
}

.yellow_tab:before,
.yellow_tab:after {
    content: "";
    position: absolute;
    display: block;
    width: 35%;
    height: 2.4em;
    background: #fccb02;
}

.yellow_tab:before {
    border-radius: 0 1.2em 0 0;
    top: -1.2em;
    left: 0;
}

.yellow_tab:after {
    border-radius: 0 0 0 1.2em;
    bottom: -1.2em;
    right: 0;
}


/*-----------  h2  ----------------------------*/

h2.tit {
    font-family: "Roboto", sans-serif;
    font-size: 6rem;
    line-height: 1;
    text-align: center;
    margin-bottom: 6rem;
}

@media screen and (min-width: 768px) {
    h2.tit {
        font-size: 4.5rem;
    }
}

h2.tit span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    display: block;
}

@media screen and (min-width: 768px) {
    h2.tit span {
        font-size: 1.5rem;
    }
}

h2.tit:after {
    content: "";
    display: block;
    width: 30px;
    height: 10px;
    background: url(../images/common/img_dotted_orange.svg) no-repeat bottom center/contain;
    position: absolute;
    bottom: -0.5em;
    left: calc(50% - 15px);
}


/*-----------  btn  ----------------------------*/

a.btn {
    display: block;
    background: #fff;
    color: #ff8c00;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 1em 0;
    text-align: center;
    border-radius: 3em;
    width: calc(480 / 750 * 100%);
    margin: auto;
}

@media screen and (min-width: 768px) {
    a.btn {
        font-size: 1.8rem;
        width: calc(360 / 1000 * 100%);
    }
}

a.btn:after {
    content: "";
    display: block;
    width: 9px;
    height: 14px;
    background: url(../images/common/icon_arrow_o.svg) no-repeat center center/contain;
    position: absolute;
    top: calc(50% - 0.5em);
    right: 24px;
    transition: all .3s;
}

a.btn:hover:after {
    right: 15px;
}


/* =====================================================================
*    header
* =================================================================== */

header .inner {
    padding: calc(25 / 720 * 100%) 0;
}

@media screen and (min-width: 768px) {
    header .inner {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        max-width: 930px;
        padding: calc(40 / 1920 * 100%) 0;
    }
}

header h1.header_logo {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 1em;
}

@media screen and (max-width: 767px) {
    header h1.header_logo img {
        width: calc(670 / 720 * 100%);
        margin: auto;
    }
}

@media screen and (min-width: 768px) {
    header h1.header_logo {
        width: calc(500 / 1000 * 100%);
        max-width: 500px;
        margin: auto calc(100 / 1000 * 100%) auto calc(20 / 1000 * 100%);
        padding-bottom: 0;
        border-bottom: none;
    }
}

header div.border {
    width: 100%;
    height: 2px;
    background: #f2f2f2;
    margin-bottom: 1em;
}

@media screen and (min-width: 768px) {
    header div.border {
        display: none;
    }
}

header p.header_time {
    width: calc(344 / 720 * 100%);
    margin: auto;
}

@media screen and (min-width: 768px) {
    header p.header_time {
        width: calc(344 / 1000 * 100%);
        max-width: 344px;
    }
}


/* =====================================================================
*    footer
* =================================================================== */

.footer {
    background: #fccb02;
    position: relative;
}

.footer .inner {
    padding: calc(70 / 750 * 100%) 0;
}

@media screen and (min-width: 768px) {
    .footer .inner {
        padding: calc(70 / 1920 * 100%) 0;
    }
}

.footer:after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff0000+0,ffcc00+50,008837+100 */
    background: #ff0000;
    /* Old browsers */
    background: -moz-linear-gradient(left, #ff0000 0%, #ffcc00 50%, #008837 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ff0000 0%, #ffcc00 50%, #008837 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ff0000 0%, #ffcc00 50%, #008837 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#008837', GradientType=1);
    /* IE6-9 */
}

@media screen and (min-width: 768px) {
    .footer:after {
        height: 8px;
    }
}

.pagetop {
    position: absolute;
    right: 0;
    top: -25px;
    z-index: 999;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: top;
    margin-right: calc(15 / 750 * 100%);
    transition: all .3s;
}

.pagetop:hover {
    top: -35px;
    height: 60px;
}

.pagetop img {
    width: 40%;
    margin: 10px auto 0;
    transform: rotate(-90deg);
}

@media screen and (min-width: 768px) {
    .pagetop {
        width: 60px;
        height: 60px;
    }
    .pagetop:hover {
        top: -35px;
        height: 70px;
    }
}

.copyright p {
    font-size: 1.6rem;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .copyright p {
        font-size: 1.2rem;
    }
}


/* =====================================================================
*   mainImg slider
* =================================================================== */

.mainImg {
    padding-bottom: 30px;
}

.mainImg:after {
    content: "";
    display: block;
    width: 100%;
    height: 30%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fccb02;
    z-index: 0;
}

.mainImg ul.slider {
    width: 100%;
    margin: 0 auto;
    z-index: 1;
}

.mainImg ul.slider li {
    padding: 0 10px;
}

.mainImg ul.slider li img {
    border-radius: 30px;
}

@media screen and (min-width: 768px) {
    .mainImg ul.slider li img {
        border-radius: 60px;
    }
}

.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    background: white url(../images/common/icon_arrow.svg) no-repeat center center/40%;
    font-size: 0px;
    position: absolute;
    top: calc(50% - 25px);
    border-radius: 15px 0 0 15px;
    z-index: 10;
}

.slick-prev {
    left: 0;
    transform: scale(-1, -1);
}

.slick-next {
    right: 0;
}

@media screen and (min-width: 768px) {
    .slick-prev,
    .slick-next {
        width: 80px;
        height: 80px;
        border-radius: 30px;
        top: calc(50% - 40px);
    }
    .slick-prev {
        left: calc(20% - 40px);
    }
    .slick-next {
        right: calc(20% - 40px);
    }
    .slick-dotted.slick-slider {
        margin-bottom: 30px;
    }
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0px;
    font-size: 0px;
    color: transparent;
    padding: 5px;
    cursor: pointer;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "●";
    width: 20px;
    height: 20px;
    font-size: 6px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    opacity: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    color: #008837;
    opacity: 1;
}


/* =====================================================================
*   btn_area
* =================================================================== */

.btn_area {
    background: #fccb02;
    padding-top: 0;
}

.btn_area .inner {
    padding: calc(33 / 750 * 100%) 0;
}

@media screen and (min-width: 768px) {
    .btn_area .inner {
        padding: calc(35 / 1920 * 100%) 0;
    }
}

.btn_area ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.btn_area ul li {
    width: 31%;
    background: #fff;
    border-radius: 20px;
    margin: 0 1% 1em;
}

@media screen and (min-width: 768px) {
    .btn_area ul li {
        width: 19%;
        margin: 0 0.5%;
    }
}

.btn_area ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em 0 2em;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.2;
}

.btn_area ul li a:after {
    content: "";
    width: 60%;
    height: 0.7em;
    display: block;
    background: #5bc750;
    position: absolute;
    bottom: 0;
    left: 20%;
    border-radius: 1em 1em 0 0;
    transition: all .3s;
}

.btn_area ul li a:hover:after {
    height: 1.2em;
}

@media screen and (min-width: 768px) {
    .btn_area ul li a {
        font-size: 1.6rem;
    }
}

.btn_area ul li.program a:after {
    background: #ff8c00;
}


/* =====================================================================
*   btn_area2
* =================================================================== */

.btn_area2 {
    background: #fff7d9;
}

.btn_area2 .inner {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .btn_area2 .inner {
        padding: 0;
        margin: 0;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .btn_area2 .inner {
        padding: calc(35 / 1920 * 100%) 0;
    }
}

.btn_area2 .inner div {
    width: 50%;
}

@media screen and (min-width: 768px) {
    .btn_area2 .inner div {
        width: calc(280 / 1000 * 100%);
    }
}

.btn_area2 .inner div a {
    display: block;
    background: #ff8c00;
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 2em 0;
    text-align: center;
}

.btn_area2 .inner div a:after {
    content: "";
    display: block;
    width: 9px;
    height: 14px;
    background: url(../images/common/icon_arrow_w.svg) no-repeat center center/contain;
    position: absolute;
    top: calc(50% - 0.5em);
    right: 24px;
    transition: all .3s;
}

.btn_area2 .inner div a:hover:after {
    right: 15px;
}

.btn_area2 .inner div.donation a {
    background: #00ddd5;
}

@media screen and (min-width: 768px) {
    .btn_area2 .inner div a {
        border-radius: 3em;
        padding: 1em 0;
        font-size: 1.8rem;
    }
    .btn_area2 .inner div.donation {
        margin-left: calc(30 / 1000 * 100%);
    }
}


/* =====================================================================
*   banner_area
* =================================================================== */

.banner_area .inner {
    padding: calc(33 / 750 * 100%) 0;
}

@media screen and (min-width: 768px) {
    .banner_area .inner {
        padding: calc(35 / 1920 * 100%) 0;
    }
}

.banner_area ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.banner_area ul li {
    width: 100%;
    margin-bottom: 1em;
}

@media screen and (min-width: 768px) {
    .banner_area ul li {
        width: 48%;
        margin: 0 1% 1em;
    }
}

.banner_area ul li a img {
    border-radius: 15px;
}


/* =====================================================================
*   news
* =================================================================== */

.news {
    background: #fccb02;
}

@media screen and (max-width: 767px) {
    .news.yellow_tab:before {
        display: none;
    }
    .news .inner {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
}

.news ul.news_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5em;
}

.news ul.news_list li {
    background: #fff;
    width: 100%;
    padding: 1.5em;
    border-bottom: 2px solid #fccb02;
}

@media screen and (min-width: 768px) {
    .news ul.news_list li {
        width: 30%;
        padding: 0;
        margin: 0 1.5% 1em;
        border-bottom: none;
        border-radius: 15px;
        overflow: hidden;
    }
}

.news ul.news_list li a {
    display: flex;
    justify-content: space-between;
}

@media screen and (min-width: 768px) {
    .news ul.news_list li a {
        flex-wrap: wrap;
    }
    .news ul.news_list li a:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        transition: all .3s;
    }
    .news ul.news_list li a:hover:before {
        border: 10px solid #fff;
        border-radius: 15px;
    }
}

.news ul.news_list li a .news_img {
    width: calc(240 / 680 * 100%);
}

.news ul.news_list li a .news_img img {
    border-radius: 15px;
}

@media screen and (min-width: 768px) {
    .news ul.news_list li a .news_img {
        width: 100%;
    }
    .news ul.news_list li a .news_img img {
        border-radius: 15px 15px 0 0;
    }
}

.news ul.news_list li a .txt_block {
    width: calc(420 / 680 * 100%);
}

@media screen and (min-width: 768px) {
    .news ul.news_list li a .txt_block {
        width: 100%;
        padding: 1.5em;
    }
}

.news ul.news_list li a .txt_block p.txt {
    font-size: 2.4rem;
    line-height: 1.4;
    padding-bottom: 1em;
}

@media screen and (min-width: 768px) {
    .news ul.news_list li a .txt_block p.txt {
        font-size: 1.6rem;
    }
}

.news ul.news_list li a .txt_block p.date {
    line-height: 2;
}

.news ul.news_list li a .txt_block:after {
    content: "支援活動";
    display: block;
    background: #5bc750;
    color: #fff;
    line-height: 2;
    border-radius: 2em;
    box-sizing: border-box;
    width: 10em;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (min-width: 768px) {
    .news ul.news_list li a .txt_block:after {
        margin: 1.5em;
    }
}

.news ul.news_list li.program a .txt_block:after {
    content: "放送内容";
    background: #ff8c00;
}

.news ul.news_list li.bokin a .txt_block:after {
    content: "チャリティー募金";
    background: #5bc750;
}

.news ul.news_list li.volunteer a .txt_block:after {
    content: "ボランティア募集";
    background: #1d9bf0;
}

.news ul.news_list li.news a .txt_block:after {
    content: "お知らせ";
    background: #ff8c00;
}

.news ul.news_list li.news a .txt_block:after {
    content: "ボランティア募集";
    background: #ff8c00;
}

/* =====================================================================
*   twitter_area
* =================================================================== */

.twitter_area {
    padding: calc(120 / 750 * 100%) 0;
}

@media screen and (min-width: 768px) {
    .twitter_area {
        padding: calc(120 / 1920 * 100%) 0;
    }
}

.twitter_area h2.tit:after {
    content: "";
    background: url(../images/common/img_dotted_blue.svg) no-repeat bottom center/contain;
}

.twitter_area .tweetbox {
    background: #1d9bf0;
    width: 100%;
    padding: calc(75 / 750 * 100%) calc(30 / 750 * 100%) calc(120 / 750 * 100%);
}

@media screen and (min-width: 768px) {
    .twitter_area .tweetbox {
        width: 680px;
        margin: auto;
        padding: 40px;
        border-radius: 40px;
    }
}

.twitter_area .tweetbox>div {
    background: #fff;
    height: calc(930 / 750 * 100%);
}

/* =====================================================================
*   sns _ x_area
* =================================================================== */
.xbanner {
    width: calc(720 / 750* 100%);
    margin: 0 auto;
   }

@media screen and (min-width: 768px) {
.xbanner {
  width: 680px;
  margin:0 auto;
  background:url('../images/top/x_n.png');

 }
 .xbanner a img {
    transition: all .05s;

 }
 .xbanner a:hover img {
    visibility: hidden;
 }

.xbanner:hover {
  width: 680px;
  margin:0 auto;
  background:url('../images/top/x_h.png');
 }
.img pc { display: block !important;}
.img sp { display:none !important;}
}

.img pc { display: none !important;}
.img sp { display:block !important;}


/* =====================================================================
*   link_area
* =================================================================== */

.link_area {
    background: #fccb02;
}

.link_area ul li {
    width: 100%;
}

.link_area ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2em 0;
    background: #fff;
    border-radius: 15px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 2.4rem;
    line-height: 1.5;
    position: relative;
}

.link_area ul li a span {
    display: block;
    font-size: 4rem;
    color: #fccb02;
    background: -webkit-linear-gradient(left, #ff0000 0%, #ffcc00 50%, #008837 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.link_area ul li a .ico_arrow {
    width: calc(55 / 750 * 100%);
    padding-top: calc(55 / 750 * 100%);
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fccb02 url(../images/common/icon_arrow_w.svg) no-repeat center center/25%;
    border-radius: 10px 0 0 0;
    z-index: 1;
    transition: all .3s;
}

.link_area ul li a .ico_arrow:before,
.link_area ul li a .ico_arrow:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    background: url(../images/common/img_corner.svg) no-repeat center center/contain;
}

.link_area ul li a .ico_arrow:before {
    right: 0;
    top: -10px;
}

.link_area ul li a .ico_arrow:after {
    left: -10px;
    bottom: 0;
}

.link_area ul li a:hover .ico_arrow {
    background-position: center right 5px;
}

@media screen and (min-width: 768px) {
    .link_area ul {
        display: flex;
        justify-content: center;
    }
    .link_area ul li {
        width: 49%;
    }
    .link_area ul li:first-child {
        margin-right: 2%;
    }
    .link_area ul li a {
        font-size: 1.6rem;
    }
    .link_area ul li a span {
        font-size: 2.8rem;
    }
}


/* =====================================================================
*   contact_area
* =================================================================== */

.contact_area {
    background: #fff7d9;
}

.contact_area p.fontL {
    font-size: 3.6rem;
    line-height: 1.2;
    padding-bottom: 1em;
    color: #ff8c00;
    font-weight: bold;
    text-align: center;
    font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
    .contact_area p.fontL {
        font-size: 2.7rem;
    }
}

.contact_area p.txt {
    font-size: 2.4rem;
    line-height: 1.8;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .contact_area p.txt {
        font-size: 1.8rem;
    }
}

.contact_area p.txt span {
    font-size: 2rem;
}

@media screen and (min-width: 768px) {
    .contact_area p.txt span {
        font-size: 1.5rem;
    }
}


/* =====================================================================
*   support
* =================================================================== */

#support .btn_area.yellow_tab:before {
    display: none;
}

#support .support_area .inner {
    width: 90%;
    margin: auto;
}

#support .support_area h3 {
    font-size: 3.2rem;
    color: #ff8c00;
}

@media screen and (min-width: 768px) {
    #support .support_area h3 {
        font-size: 2rem;
    }
}

#support .support_area h3:after {
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background: #ff8c00;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
}

#support .support_area h3 span {
    display: inline-block;
    background: #fff;
    padding-right: 2em;
}

#support .support_area ul {
    padding-left: 2em;
    padding-bottom: 3em;
}

#support .support_area ul li {
    font-size: 2.4rem;
}

@media screen and (min-width: 768px) {
    #support .support_area ul li {
        font-size: 1.6rem;
    }
}

#support .support_area ul li:before {
    content: "ー　";
    color: #ff8c00;
}

#support .support_area .saigai h3,
#support .support_area .saigai ul li:before {
    color: #fccb02;
}

#support .support_area .saigai h3:after {
    background: #fccb02;
}

#support .support_area .others h3,
#support .support_area .others ul li:before {
    color: #1d9bf0;
}

#support .support_area .others h3:after {
    background: #1d9bf0;
}


#support .support_area .kankyo h3,
#support .support_area .kankyo ul li:before {
    color: #5bc750;
}

#support .support_area .kankyo h3:after {
    background: #5bc750;
}

@media screen and (min-width: 768px) {
    #support .half {
        display: flex;
        justify-content: space-between;
    }
    #support .half .left,
    #support .half .right {
        width: 47%;
    }
}


/* =====================================================================
*    注意書き　
* =================================================================== */

.attention {
    background-color: #fff7d9;
}

.attention .inner {
    padding: calc(60 / 750 * 100%) 0;
}

.attention p {
    background-color: #ffffff;
    border: 2px solid #000000;
    padding: 1em 2em;
    text-align: left;
}

.text_red {
    color: #ff0000;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .attention .inner {
        padding: calc(80 / 1920 * 100%) calc(30 / 1400 * 100%) calc(105 / 1920 * 100%);
    }
}


/* 画像ガード */

.s-cmn-protect {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}

.s-cmn-protect::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
}

@media print {
    .s-cmn-protect {
        display: none;
    }
    .slider .slick-slide img,
    .news_img img,
    .archive img,
    .hero-program-01 figure img,
    .photo1 img,
    .photo2 img {
        display: none;
    }
}