/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */


/*html { font-size: 100%; /* 1 */
/*	-webkit-text-size-adjust: 100%; /* 2 */
/*-ms-text-size-adjust: 100%; /* 2 */ }
html {font-size: 10px;}

html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
section, button, input, select, textarea {     font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;}
html body {font-family: "Noto Sans JP", sans-serif;}

/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; overflow-x:visible!important;}

/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
 
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.5em; margin: 0.83em 0; font-weight: bold!important;}
h3 { font-size: 1.17em; margin: 1em 0; font-weight: bold!important;}
h4 { font-size: 1em; margin: 1.33em 0; font-weight: bold!important;}
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
strong { font-weight: bold; }
/* * Addresses margins set differently in IE 6/7. */
section p { margin: 1em 0; color: #333;}

/* ==========================================================================
Lists
========================================================================== */
/* * Addresses margins set differently in IE 6/7. */
ul { margin: 1em 0; }


/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
 
img { border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */ }
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }

/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
 
figure { margin: 0; }



/* ==========================================================================
Global Styles
========================================================================== */
section p { line-height: 1.5; font-size: 16px; font-weight: 500; }
h2 { font-size: 25px; color: #84BD00; font-weight: bold; }
.section-padding { padding: 40px 0 40px }
.section-green {  background-color: #f2faed;}
.wrapper { height: 650px; }
.inner { padding-top: 170px; }

/*PCでは無効（改行しない）*/
.sp{ display: none; }
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) { .sp{ display: block; }}

/*PCのみ改行*/
.pc { display: block; }
@media screen and (max-width:768px) { .pc{ display: none; }}
  

p.english {
  font-size: 0.8em;
  color: #35AAFF;
  font-weight: bold;
  margin-bottom: 0;
  text-align: center;
}
p.english + h2 {
  margin-top: 0;
  text-align: center;
  font-weight: bold;
}

/*青囲みのボックス*/
.blue-box{
  background-color: #edf6fa;
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 15px;
}

/*白抜きのボックス*/
.white-box{
  background-color: #ffffff;
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 15px;
}
/*薄緑のボックス*/
.green-box{
  background-color: #f2faed;
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 15px;
}

/******************************
CTAボタン
******************************/
a.voice-cta {
  font-weight: bold;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #ff9b00;
  border-bottom: 5px solid #b46e03;
  font-size: 17px;
  position: relative;
  padding: 10px 40px 7px 25px;
  border-radius: 100vh;
  margin-top: 0;
}
a.voice-cta:before {
	font-family: 'Font Awesome 5 Free';
	font-size: 18px;
	line-height: 1;
	position: absolute;
	top: calc(45% - .5rem);
	right: 1rem;
	margin: 0;
	padding: 0;
	content: '\f054';
}
  
a.voice-cta:hover {
  color: #fff;
  background: #fab651;
  border-bottom: 5px solid #d49029;
}

p.btn-copy {
	font-size: 15px;
	text-align: center;
	line-height: 1.1em;
	margin-bottom: 5px;
}


/* ==========================================================================
タイトルエリア
========================================================================== */
.contents-title {
  line-height: 1.2;
  padding: 13px 0 13px 25px;
}
.contents-title h1 {
  color: #fff;
  font-size: 1.5rem; /* 15px */
  font-weight: bold;
  line-height: 1.5;
}
.contents-title-green {
  background-color: #007a45;
}
.contents-title-red {
  background-color: #d10101;
}
        .contents-title-area {
            width: 100%;
            /* 上下の余白を広げてバランスをとる */
            padding: 13px 9px;
            background-color: #007a4d; /* ベースカラー */
            display: flex;
            align-items: center;
            position: relative;
            font-family: Meryo, "メイリオ", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
        }

        /* コンテンツラッパー（PC幅に合わせるため） */
        .contents-title-area .container {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .contents-title-content {
            text-align: left;
            color: #fff;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5px; /* 各要素の間隔 */
        }

        /* 親カテゴリー名（タイトルの上） */
        .contents-title-category {
            display: none;
        }

        /* ページタイトル */
        .wrap-contents .contents-title-jp {
            font-size: 19px;
            font-weight: bold;
            margin: 0;
            line-height: 1.2;
        }
        /* パンくずリスト（タイトルの上） */
        .wrap-contents .contents-breadcrumbs {
/*          display: none;*/
            font-size: 9px;
            color:#d3ebe1;
        }

        .wrap-contents .contents-breadcrumbs a {
          color:#d3ebe1;
          text-decoration: none;
          margin: 0 4px;
        }

        @media (min-width: 960px) {
            .contents-title-area {
                padding: 30px 0;
                background-color: #e5f1ec;
            }
            .contents-title-content {
              color: #333;
            }
            .contents-title-area .container {
              padding: 0;
              max-width: 960px;
            }
            .wrap-contents .contents-title-jp {
                font-size: 22px; 
            }
            .contents-title-category {
              display: block;
              font-size: 12px;
              font-weight: bold;
              opacity: 0.9;
              letter-spacing: 0.05em;
            }
            .wrap-contents .contents-breadcrumbs {
              display: block;
              font-size: 10px;
              opacity: 0.8;
              margin-top: 4px;
              color: #333;
            }
            .wrap-contents .contents-breadcrumbs a {
              color: #333;
/*              text-decoration: underline;*/
              margin: 0 4px;
            }
            .contents-breadcrumbs a:first-child {
                margin-left: 0;
            }
            .contents-breadcrumbs span {
                margin-left: 4px;
            }

        }





/* ==========================================================================
ファーストビュー
========================================================================== */
section.hero {text-align: center;}

#first_view { 
  background: url('../../_img/voice/fv.jpg') no-repeat center center; 
  background-size:contain; 
  height:80vw;
}
@media screen and (min-width:768px) {
	#first_view { 
    background: url('../../_img/voice/fv_pc.jpg') no-repeat center center; 
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 
    padding: 35px 0 170px 0;
    height: 31.25vw; 
    margin: 0;
  }
}



/* ==========================================================================
イントロ　ボイス・サポーターとは
========================================================================== */
@media screen and (min-width:768px) {
  #intro img { width: 650px; }
}

/* ==========================================================================
ストーリー
========================================================================== */
#story {
  background-color: antiquewhite;
  text-align: justify;
  padding-top: 0;
}
#story .swiper p {
  text-align: justify;
}
@media screen and (min-width:768px) {
#story .swiper p:first-child {
  margin-top: 0;
}}

#story h4 {
  font-size: 18px;
  font-weight: bold;
}
#story .swiper-button-next1::after,
#story .swiper-button-prev1::after {
  font-weight: bold;
  color: #7a5700;
  font-size: 20px!important;
}
#story .swiper [class^="swiper-button-"]{
  width: 5px;
}
#story .swiper-slide .row {
  padding-left: 20px;
  padding-right: 20px;
}


/* ==========================================================================
支援活動
========================================================================== */
@media screen and (min-width:768px) {
  #activities_img {
    width: 300px;
  }
}

#activities .notice{
  font-size: 0.8em;
  text-align: justify;
  line-height: 1.3;
  padding-left: 0.8em;
  text-indent: -0.8em;
}
/*
#activities .swiper .row {
  background-color: #edf6fa;
  border-radius: 5px;
}*/
#activities .swiper .row p{
  margin-left:0px;
  margin-right: 0px;
  text-align: justify;
}
@media screen and (min-width:768px) {
  #activities .swiper .row p{
    margin-left:15px;
    margin-right: 15px;
    text-align: justify;
  }
}

#activities .swiper-button-next2::after,
#activities .swiper-button-prev2::after {
  font-weight: bold;
  color: #007A46;
  font-size: 20px!important;
}
#activities .swiper [class^="swiper-button-"]{
  width: 5px;
}
#activities .swiper-slide .row {
  padding-left: 20px;
  padding-right: 20px;
}
#activities .swiper-slide {
  height: auto;
}
#activities .swiper-slide .container{
  height: 100%;
}

#activities .swiper div.container{
  padding-top: 10px;
  padding-bottom: 10px;
}




#activities h2 span.underline{
  padding-bottom: 5px;
  border-bottom: #84BD00 1px solid;
}


#activities .swiper2 h4{
  font-size: 1.3em;
  color: #007A46;
}

#activities p.example{
  margin-bottom: 5px;
}
#activities p.example + p{
  margin-top: 5px;
}
#activities p.example span{
  background-color: #007A46;
  color: white;
  padding: 4px;
  border-radius: 2px;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 0.8em;
}
#activities span.emp{
  font-size: 1.3em;
  font-weight: bold;
  color: #007A46;
}


/* ==========================================================================
特典 ボイスサポーターになると
========================================================================== */
@media screen and (min-width:768px) {
  #reward_img{
    width: 400px;
  }
}
#reward h2 .underline{
  padding-bottom: 5px;
  border-bottom: #84BD00 1px solid;
}


div#line > div{
  margin-top: 15px;
  border-radius: 3px;
  border: 1px solid #007A46;
}
@media screen and (min-width:768px) {
  div.reward-box {
    padding: 15px 10px;
    background-color: white;
    border-radius: 5px;
  }
}
iframe.yt {
  width: 70%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 5px auto 30px auto;
}


/* ==========================================================================
サポーターの口コミ
========================================================================== */
#comment #comment_heading {
  color: #007A46;
  font-size: 25px;
}
#face {
  width: 180px;
}
#comment .question {
  font-weight: bold;
  color: #84BD00;
}


#comment .swiper .row p{
  margin-left:0px;
  margin-right: 0px;
  text-align: justify;
}
@media screen and (min-width:768px) {
  #comment .swiper .row p{
    margin-left:15px;
    margin-right: 15px;
    text-align: justify;
  }
}

#comment .swiper-button-next3::after,
#comment .swiper-button-prev3::after {
  font-weight: bold;
  color: #007A46;
  font-size: 20px!important;
}
#comment .swiper [class^="swiper-button-"]{
  width: 5px;
}
#comment .swiper-slide .row {
  padding-left: 20px;
  padding-right: 20px;
}
#comment .swiper-slide {
  height: auto;
}
#comment .swiper-slide .container{
  height: 100%;
}
#comment .swiper div.container{
  padding-top: 10px;
  padding-bottom: 10px;
}


/* ==========================================================================
SNSで広げて
========================================================================== */
@media screen and (min-width:768px) {
  #supporter_img1{
    width: 450px;
  }
}
@media screen and (min-width:768px) {
  #supporter_img2{
    width: 450px;
  }
}




/* ==========================================================================
寄付の方法
========================================================================== */





/* ==========================================================================
寄付金控除
========================================================================== */
@media screen and (min-width:768px) {
  #deduction_img{
    width: 450px;
    margin: 0 auto;
  }
}



/* ==========================================================================
団体概要
========================================================================== */
section#organization{
	background-color: #f2faed;
	padding: 40px 0 50px 0;
}

/* ==========================================================================
Waypoints
========================================================================== */

.animate__animated { opacity: 0; }


/*フッター*/
footer .footer-menu-sub a{
  font-size: 14px;
}
footer dl dt{
  font-size: 13px;
}
footer dl dd{
  font-size: 12px;
}
footer p.copyright{
  font-size: 10px;
}



/* ==========================================================================
アニメーション
========================================================================== */

@-webkit-keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpSmall {
  -webkit-animation-name: fadeInUpSmall;
  animation-name: fadeInUpSmall;
}


/*左から右へフェードイン*/
@-webkit-keyframes fadeInLeftSmall {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftSmall {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftSmall {
  -webkit-animation-name: fadeInLeftSmall;
  animation-name: fadeInLeftSmall;
}


/*上からフェードイン*/
@-webkit-keyframes fadeInDownSmall {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownSmall {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownSmall {
  -webkit-animation-name: fadeInDownSmall;
  animation-name: fadeInDownSmall;
}

.wpoint1, .wpoint2, .wpoint3, .wpoint4, .wpoint5, .wpoint6, .wpoint7, .wpoint8, .wpoint9 { visibility: hidden; }
.fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }