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

#quotes .container{  overflow: hidden}
.quotesCwrap{  background: url(../img/about/bg_tube.png) repeat-y;background-size: 100% auto;width: 90%;max-width: 1100px;margin: 0 auto;padding-bottom: 10%}
.quotesCwrap > div{  display: flex;max-width: 980px;margin: 6.5% auto 0;width: 85%;align-items: flex-start;}
.quotesCwrap h3{ margin: 0;padding: 0;line-height: 0}
.quotesCwrap p{ margin: 0;padding: 0;line-height: 0}
.txlL{  text-align: left;}
.txlR{  text-align: right}
.qtBwrap{  justify-content: space-between;line-height: 0}
.qtBwrap img{  width: 100%}
.qtB01L{  width: 60%}
.qtB01L h3{  margin-bottom: 6%}
.qtB01R{  width: 21.4%;display: flex;flex-direction: row-reverse;align-items: flex-start;}
.qtB01R h3{  width: 21.5%;margin-left: 17%}
.qtB01R p{  width: 60%}
.qtB02L{  width: 29%;display: flex;flex-direction: row-reverse;align-items: flex-start;}
.qtB02L h3{ width: 16%;margin-left: 13%}
.qtB02L p{ width: 70%}
.qtB02R{  width: 61.4%;}
.qtB02R div:first-child h3{  width: 88%;display: inline-block}
.qtB02R div:first-child p{  width: 54%;display: inline-block;margin-top: 7.7%}
.qtB02R div:last-child h3{ width: 67%;margin-top: 13%}
.qtB02R div:last-child p{  width: 79%;margin-top: 7.7%}
.qtB03L{ width: 59%}
.qtB03L h3{  margin-bottom: 6%;width: 78.6%}
.qtB03R{ width: 29%;display: flex;flex-direction: row-reverse;align-items: flex-start;}
.qtB03R h3{  width: 16%;margin-left: 13%}
.qtB03R p{  width: 70%}
.qtB04L{  width: 30%;display: flex;flex-direction: row-reverse;align-items: flex-start;}
.qtB04L h3{ width: 55%;margin-left: 13%}
.qtB04L p{ width: 31%}
.qtB04R{  width: 60%;}
.qtB04R div:first-child h3{  width: 93%;display: inline-block}
.qtB04R div:first-child p{  width: 90%;display: inline-block;margin-top: 7.7%}
.qtB04R div:last-child h3{ width: 93%;margin-top: 13.5%}
.qtB04R div:last-child p{  width: 99%;margin-top: 7.7%}
.qtB05L{ width: 60%}
.qtB05L div:first-child h3{  margin-bottom: 6%;}
.qtB05L div:last-child h3{ width: 55%;margin-top: 13.5%}
.qtB05L div:last-child p{  width: 97%;margin-top: 7.7%}
.qtB05R{  width: 30%;display: flex;flex-direction: row-reverse;align-items: flex-start;}
.qtB05R h3{  width: 55%;margin-left: 13%}
.qtB05R p{  width: 31%}
.qtB06L{  width: 27%;display: flex;flex-direction: row-reverse;padding-left: 8%;align-items: flex-start;}
.qtB06L h3{ width: 40%;margin-left: 15.5%}
.qtB06L p{ width: 50%}
.qtB06R{  width: 60%;}
.qtB06R div:first-child h3{  width: 58%;display: inline-block}
.qtB06R div:first-child p{  width: 89%;display: inline-block;margin-top: 7.7%}
.qtB06R div:last-child h3{ width: 96%;margin-top: 13.5%}
.qtB06R div:last-child p{  width: 97%;margin-top: 7.7%}
.qtB07L{ width: 63%}
.qtB07L div:first-child h3{  margin-bottom: 6%;}
.qtB07L div:first-child p{  width: 93%;}
.qtB07L div:nth-child(2) h3{ width: 55%;margin-top: 10.5%}
.qtB07L div:nth-child(2) p{  width: 97%;margin-top: 7.7%}
.qtB07L div:last-child h3{ width: 55%;margin-top: 10.5%}
.qtB07L div:last-child p{  width: 97%;margin-top: 7.7%}
.qtB07R{  width: 32%;display: flex;flex-direction: row-reverse;align-items: flex-start;}
.qtB07R h3{  width: 32%;margin-left: 13%}
.qtB07R p{  width: 53%}
/* --- レスポンシブ対応 (958px以下) --- */
@media (max-width: 958px){  .quotesCwrap > div{  width: 100%;margin-bottom: 10%}
.qtB01R{  width: 28.6%;display: flex;flex-direction: row-reverse;}
.qtB01R h3{  width: 16.66%;margin-left: 13%}
.qtB01R p{  width: 70.4%}
.qtB02L{  width: 40%;display: flex;flex-direction: row-reverse;}
.qtB02L h3{ width: 16%;margin-left: 13%}
.qtB02L p{ width: 79.1%}
.qtB02R{  width: 53.82%;}
.qtB02R div:first-child h3{  width: 96.4%;display: inline-block}
.qtB02R div:first-child p{  width: 90%;display: inline-block;margin-top: 7.7%}
.qtB02R div:last-child h3{ width: 72.7%;margin-top: 13%}
.qtB02R div:last-child p{  width: 98.2%;margin-top: 7.7%}
.qtB03L{ width: 57.83%}
.qtB03L h3{  margin-bottom: 6%;width: 81.5%}
.qtB03R{ width: 34.4%;display: flex;flex-direction: row-reverse;}
.qtB03R h3{  width: 13.66%;margin-left: 13%}
.qtB03R p{  width: 75.2%}
.qtB04L{  width: 29.2%;display: flex;flex-direction: row-reverse;}
.qtB04L h3{ width: 37%;margin-left: 13%}
.qtB04L p{ width: 49%}
.qtB04R{  width: 61.5%;}
.qtB04R div:first-child h3{  width: 91.3%;display: inline-block}
.qtB04R div:first-child p{  width: 99.6%;display: inline-block;margin-top: 7.7%}
.qtB04R div:last-child h3{ width: 91.3%;margin-top: 13.5%}
.qtB04R div:last-child p{  width: 99.6%;margin-top: 7.7%}
.qtB05L{ width: 60%}
.qtB05L div:first-child h3{  margin-bottom: 6%;}
.qtB05L div:last-child h3{ width: 55%;margin-top: 13.5%}
.qtB05L div:last-child p{  width: 99.4%;margin-top: 7.7%}
.qtB05R{  width: 29.2%;display: flex;flex-direction: row-reverse;}
.qtB05R h3{  width: 37%;margin-left: 13%}
.qtB05R p{  width: 49%}
.qtB06L{  width: 29.2%;  display: flex; flex-direction: row-reverse; padding-left: 2%;}
.qtB06L h3{ width: 37%;margin-left: 15.5%}
.qtB06L p{ width: 49%}
.qtB06R{  width: 61.1;}
.qtB06R div:first-child h3{  width: 57.2%;display: inline-block}
.qtB06R div:first-child p{  width: 99%;display: inline-block;margin-top: 7.7%}
.qtB06R div:last-child h3{ width: 93.75%;margin-top: 13.5%}
.qtB06R div:last-child p{  width: 97.4%;margin-top: 7.7%}
.qtB07L{ width: 60.8%}
.qtB07L div:first-child h3{  margin-bottom: 6%;}
.qtB07L div:first-child p{  width: 98%;}
.qtB07L div:nth-child(2) h3{ width: 92.1%;margin-top: 10.5%}
.qtB07L div:nth-child(2) p{  width: 98.4%;margin-top: 7.7%}
.qtB07L div:last-child h3{ width: 79%;margin-top: 10.5%}
.qtB07L div:last-child p{  width: 98%;margin-top: 7.7%}
.qtB07R{  width: 28.8%;display: flex;flex-direction: row-reverse;}
.qtB07R h3{  width: 16.3%;margin-left: 13%}
.qtB07R p{  width: 69.5%}
}
/* ---------------------------------- */
/* アニメーションの初期状態とトランジション設定 */
/* ---------------------------------- */
/* すべての方向クラスに共通の初期設定を適用 */
.fade-in-bottom, .fade-in-right, .fade-in-left{  opacity: 0;/* 初期状態: 非表示 */ /* アニメーションの時間とイージング */ transition: opacity 0.3s ease-out, transform 0.6s ease-out;will-change: opacity, transform;}
/* ---------------------------------- */
/* 1. 出現方向のスタイル (初期位置) */
/* ---------------------------------- */

.fade-in-bottom{  transform: translateY(100px);/* 初期位置: 少し下に移動 */}
.fade-in-right{  transform: translateX(100px);/* 初期位置: 右に移動 */}
.fade-in-left{  transform: translateX(-100px);/* 初期位置: 左に移動 */}
/* ---------------------------------- */
/* 2. アニメーション実行時のスタイル */
/* ---------------------------------- */
/* JavaScriptで is-visible クラスが付与されると発火 */
.is-visible{  opacity: 1 !important;/* 最終状態: 表示 */ transform: translate(0, 0) !important;/* 最終状態: 元の位置に戻る */}
/* ---------------------------------- */
/* 3. 時間差のスタイル (transition-delay) */
/* ---------------------------------- */

.delay-1{  transition-delay: 0.2s;}
.delay-2{  transition-delay: 0.4s;}
.delay-3{  transition-delay: 0.6s;}