@charset "UTF-8";
/* CSS Document */
*, *:before, *:after{margin:0;padding:0;border: 0;vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 124px;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size:15px;
line-height:1.8;
color:#000;
letter-spacing:0.03em;
width:100%;
max-width: 1920px;
margin: 0 auto;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
.sp,.u1000{display: none;}
ol, ul {
list-style: none;
list-style-type: none;
}
a:focus, *:focus { outline:none; }
a{
text-decoration: none;
color:#333;
}
a:hover{
opacity:0.7;
transition: .4s opacity;
}
img{
vertical-align:bottom;
}
img.w100{
width: 100%;
}
.open{
overflow-y: hidden;
}
.open main,
.open footer{
filter: brightness(.35);
transition: filter 0.6s;
}



.chase-box{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.chase-box-inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
position: relative;
}
.chase-box-inner .cloud-entry {
    position: absolute;
    width: calc(1300px * 0.135);
    right: -2%;
    top: 80px;
        transform: translateY(-300px);
    transition: transform 1.4s ease;
    z-index: 1000;
}



.chase-box-inner .cloud-entry.show{
    transform: translateY(0);
}



.tab-cont{
display: none;
}
.panel-item.is-active {
display: block;
animation: panel-show .6s ease-in-out forwards;
}
@keyframes panel-show {
from {opacity: 0;}
to {opacity: 1;}
}


main{
width: 100%;
max-width: 1600px;
margin: 0 auto;
overflow: hidden;
position: relative;
}

.cloud-entry{
position: absolute;
width: 13.5%;
right: -2.5%;
top: 52%;
}



.main-kv{
padding: 0;
background: #80d0f4 url("../images/main-foot.png") no-repeat center bottom;
background-size: 100% auto;
overflow: hidden;
position: relative;
}
.kv-oj{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.kv-oj img {
width: 100%;
max-width: 1380px;
height: auto;
object-fit: cover;
display: block;
margin: 0 auto;
}
/* スライダー全体のスタイル */
.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
/* 各スライド画像のスタイル */
.slideimg {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
animation: fadeInOut 9s infinite;
transition: opacity 1.5s ease-in-out;
}
/* 最初の画像だけ親要素の高さを確保させる */
.slideimg:nth-child(1) {
position: relative;
animation-delay: 0s;
}
/* 2枚目の画像のアニメーション遅延 */
.slideimg:nth-child(2) {
animation-delay: 3s;
}
.slideimg:nth-child(3) {
animation-delay: 6s;
}
/* フェードイン・アウトのアニメーション */
@keyframes fadeInOut {
0%   { opacity: 0; }
50%  { opacity: 1; }
100% { opacity: 0; }
}
/* 画像の表示調整 */
.slideimg img {
width: 100%;
max-width: 1480px;
height: auto;
object-fit: cover;
display: block;
margin: 0 auto;
}


.main-kv-inner{
width: 100%;
max-width: 1300px;
margin: auto;
position: relative;
padding: min(16.6%, 230px) 0 min(29.2%, 380px);
}
.main-kv-head{
position: absolute;
width: 121%;
top: 0;
left: -10.5%;
display: block;
}
.main-kv-ttl-en{
width: 66.8%;
margin: 0 auto 3%;
display: block;
line-height: 1;
}
.main-kv-inner h1{
width: 39%;
margin: 0 auto;
line-height: 1;
font-size: 10px;
}
.main-kv .logo{
position: absolute;
width: 11%;
top: 2.8%;
left: 2.6%;
}
.main-kv-inner .leaf{
position: absolute;
width: 5.8%;
top: 15%;
left: 0;
right: 0;
margin: auto;
}

.leaf{
position: absolute;
width: 5.8;
top: 12%;
left: 47.3%;
}
.c1{
position: absolute;
width: 4.1%;
left: 30.6%;
top: 4.4%;
animation: vertical1 8s ease-in-out infinite alternate;
animation-duration: 3s;
}
.c1 img{
animation: horizontal1 5.8s ease-in-out infinite alternate;
animation-duration: 3s;
}
@keyframes horizontal1 {
0% { transform:translateX( -24px); }
100% { transform:translateX(0px); }
}
@keyframes vertical1 {
0% { transform:translateY(-8px); }
100% { transform:translateY(6px); }
}
.c2{
position: absolute;
width: 6.1%;
left: 60%;
top: 9.7%;
animation: vertical2 1s ease-in-out infinite alternate;
animation-duration: 13s;
}
.c2 img{
animation: horizontal1 3.8s ease-in-out infinite alternate;
animation-duration: 5s;
}
@keyframes horizontal2 {
0% { transform:translateX( -24px); }
100% { transform:translateX(0px); }
}
@keyframes vertical2 {
0% { transform:translateY(-8px); }
100% { transform:translateY(18px); }
}
.c3{
position: absolute;
width: 9%;
left: 2%;
top: 25.7%;
animation: vertical3 5s ease-in-out infinite alternate;
animation-duration: 4s;
}
.c3 img{
animation: horizontal3 1.8s ease-in-out infinite alternate;
animation-duration: 4s;
}
@keyframes horizontal3 {
0% { transform:translateX( -20px); }
100% { transform:translateX(0px); }
}
@keyframes vertical3 {
0% { transform:translateY(-4px); }
100% { transform:translateY(12px); }
}
.c4{
position: absolute;
width: 9%;
left: 93%;
top: 28.7%;
animation: vertical4 8s ease-in-out infinite alternate;
animation-duration: 6s;
}
.c4 img{
animation: horizontal4 7.8s ease-in-out infinite alternate;
animation-duration: 9s;
}
@keyframes horizontal4 {
0% { transform:translateX( -4px); }
100% { transform:translateX(8px); }
}
@keyframes vertical4 {
0% { transform:translateY(-16px); }
100% { transform:translateY(2px); }
}
.c5{
position: absolute;
width: 14.3%;
left: -6%;
top: 57%;
animation: vertical5 5s ease-in-out infinite alternate;
animation-duration: 6s;
}
.c5 img{
animation: horizontal5 7.8s ease-in-out infinite alternate;
animation-duration: 2s;
}
@keyframes horizontal5 {
0% { transform:translateX( -14px); }
100% { transform:translateX(0px); }
}
@keyframes vertical5 {
0% { transform:translateY(-10px); }
100% { transform:translateY(20px); }
}
.baloon{
position: absolute;
width: 4%;
left: 85.6%;
top: 24%;
animation: vertical6 5s ease-in-out infinite alternate;
animation-duration: 5s;
}
.c5 img{
animation: horizontal6 4.8s ease-in-out infinite alternate;
animation-duration: 4s;
}
@keyframes horizontal6 {
0% { transform:translateX( -24px); }
100% { transform:translateX(0px); }
}
@keyframes vertical6 {
0% { transform:translateY(-14px); }
100% { transform:translateY(18px); }
}

.butter{
position: absolute;
width: 9.5%;
left: 9%;
top: 59.5%;
}
.milk{
position: absolute;
width: 7.3%;
left: 76.5%;
top: 56.7%;
}


.up-down01 {animation:up-down01 5.9s infinite ease-in-out;}
@keyframes up-down01 {
0% {transform:translate(0, 0) rotate(0deg);}
20% {transform:translate(0, 0) rotate(0deg);}
24% {transform:translate(0, 0) rotate(-3deg);}
28% {transform:translate(0, 0) rotate(3deg);}
32% {transform:translate(0, 0) rotate(-3deg);}
36% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
.swing01 {animation:swing01 4s infinite linear;}
@keyframes swing01 {
0% {transform:translate(0, 0) rotate(0deg);}
20% {transform:translate(0, 0) rotate(0deg);}
24% {transform:translate(0, 0) rotate(-6deg);}
28% {transform:translate(0, 0) rotate(6deg);}
32% {transform:translate(0, 0) rotate(-6deg);}
36% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
.swing03 {animation:swing03 5.7s infinite ease-in-out;}
@keyframes swing03 {
0% {transform:translate(0, 0) rotate(0deg);}
60% {transform:translate(0, 0) rotate(0deg);}
64% {transform:translate(0, 0) rotate(-8deg);}
68% {transform:translate(0, 0) rotate(9deg);}
72% {transform:translate(0, 0) rotate(-8deg);}
76% {transform:translate(0, 0) rotate(9deg);}
82% {transform:translate(0, 0) rotate(-9deg);}
86% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}


.message{
position: relative;
color: #fff;
padding: 30px 0 0;
background: #accfa2;
}
.message-inner{
max-width: 1200px;
margin: 0 auto;
}
.message p{
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 2;
margin: 0 0 18px;
position: relative;
}
.message-sec-ttl{
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 41px;
text-align: center;
margin: 0 0 min(3%, 30px);
line-height: 1.5;
position: relative;
}
.message-sec-ttl .cloud-cm{
position: absolute;
width: 60px;
top: 0;
left: 50%;
display: block;
margin: 14px 0 0 130px;
}
.cloud-cm2{
position: absolute;
width: 60px;
top: 0;
left: 50%;
display: block;
margin: 14px 0 0 410px;
}
.cloud-cm3{
position: absolute;
width: 42px;
top: 0;
left: 50%;
display: block;
margin: 120px 0 0 -440px;
}
.bird{
position: absolute;
width: 58px;
top: 0;
left: 50%;
display: block;
margin: 10px 0 0 -440px;
}
.message-ttl{
font-size: 36px;
font-weight: 700;
text-align: center;
margin: 0 0 min(3%, 30px);
line-height: 1.5;
}
.moving{
display: flex;
overflow: hidden;
width: 100%;
white-space: nowrap;
position: relative;
}
.scroll-container {
display: flex;
overflow: hidden;
width: 100%;
white-space: nowrap;
position: absolute;
left: 0;
bottom: -1px;
}
.scroll-content {
display: flex;
animation: scroll 75s linear infinite;
}

.item {
flex: 0 0 auto;
width: 390px;
margin: 0;
text-align: center;
font-size: 24px;
}
.scroll-content img {
width: 2600px;
}
.scroll-content .item img {
width: 100%;
}
@keyframes scroll {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}

.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

.sec-ttl{
font-weight: 700;
font-size: 35px;
color: #12853a;
text-align: center;
margin: 4% 0 3%;
padding: 24px 0;
background: url("../images/sec-ttl-bg.svg") no-repeat center center;
background-size: 162px auto;
}

.inner-t1{
max-width: 1000px;
margin: 0 auto;
}



.about{
padding: 0 4% 60px;
background: #f6ecd8;
overflow: hidden;
}
.about .sec-ttl {
margin: 12% 0 1%;
}
.about-once{
position: relative;
padding: 5% 3% 5% 4%;
}
.about-once .sd{
position: relative;
padding: 5% 4% 5% 3%;
}
.about-once-num{
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:106px;
position: absolute;
top: 0;
left: 0;
color: #12853a;
line-height: 1.15;
letter-spacing: -0.04em;
}
.sd .about-once-num{
left: auto;
right: 0;
z-index: 10;
}
.about-img-t1{
position: absolute;
width: 26%;
top: 0;
bottom: 0;
right: 3%;
margin: auto;
}
.sd .about-img-t1{
right: auto;
left: 3%;
}
.about-once-cont{
background: #fff;
width: 90%;
padding: 3% 21% 3% 9%;
border-radius: 18px;
position: relative;
z-index: 0;
}
.sd .about-once-cont{
padding: 3% 9% 3% 21%;
border-radius: 18px;
}
.about-once-cont p{
font-size: 16px;
font-weight: 500;
}
.sd .about-once-cont{
position: relative;
left: 10%;
}
.about-once-cont-ttl{
font-size: 26px;
font-weight: 700;
color: #12853a;
margin: 0 0 1.8%;
line-height: 1.6;
}
.sd .about-once-cont-ttl{
text-align: right;
}

.about-once .milk2{
position: absolute;
width: 9%;
left: 0;
bottom: 20%;
}
.about-once .leaf2{
position: absolute;
width: 9.5%;
right: -2.4%;
bottom: 20%;
}
.about-once .butter2{
position: absolute;
width: 12%;
left: -1%;
bottom: 7%;
}
.about-once-cont .cow01{
position: absolute;
width: 72px;
right: 16%;
top: -42px;
}
.about-once-cont .cow02{
position: absolute;
width: 72px;
left: 16%;
top: -42px;
}


.recommend{
position: relative;
background: #dcebd6 ;
background-size: 100% auto;
}
.recommend .inner-t1{
width: 92%;
max-width: 1000px;
margin: 0 auto;
}
.recommend .sec-ttl{
margin: 2% 0 -2%;
}
.recommend .inner-t1{
padding: 0 0 7%;
}
.col3-box{
display: flex;
justify-content: space-between;
}
.col3{
width: 30%;
}
.col3 img{
margin: 0 0 -30px;
}
.col3 p{
font-weight: 500;
}

.voice{
background: #e3f1f7;
position: relative;
}
.voice .sec-ttl{
margin: 2% 0 3%;
}


.voice-slider-box{
margin: 0 0 10%;
}
.voice-slider{
max-width: 1300px;
margin: 0 auto;
}
.voice-slider-once{
margin: 0 30px;
position: relative;
padding: 0 0 0 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.slider-cont-wrap{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prof-av{
position: absolute;
top: 0;
left: 0;
width: 37%;
}

.voice-slider-ini{
font-size: 40px;
font-weight: 600;
color: #12853a;
line-height: 1.5;
padding: 2% 0 0 38%;
}
.voice-slider-inner{
background: #fff;
border: 2px solid #12853a;
border-radius: 30px;
padding: 3% 6% 6%;
flex-grow: 1;
}
.voice-prof-box{
padding: 0 0 0 37%;
font-size: 14px;
min-height: 140px;
line-height: 1.6;
}
.voice-prof-div{
color: #12853a;
margin: 0 0 3%;
}
.voice-prof-box p{
}



.voice-slider-inner-ttl{
color: #12853a;
font-size: 20px;
font-weight: 700;
border-radius: 30px;
line-height: 1.5;
margin: 0 0 4%;
}







.outline{
background: #f6ecd8;
}
.outline-inner{
width: 92%;
max-width: 1000px;
margin: 0 auto;
padding: 6% 0 9%;
}

.tab-box{
width: 92%;
margin: 0 auto;
display: flex;
border-radius: 30px 30px 0 0;
overflow: hidden;
}
.tab-once{
width: 25%;
color: #fff;
font-weight: 700;
text-align: center;
padding: 14px 4px 12px;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
}
.tab-once:hover{
cursor: pointer;
background: #12853a!important; 
}
.tab-once:nth-child(odd){
background: #59aa75; 
}
.tab-once:nth-child(even){
background: #88c29c; 
}
.tab-once.is-active{
background: #12853a!important; 
}



.tab-cont-box{
background: #fff;
padding: 8% 0 10%;
border:2px solid #12853a; 
border-radius: 30px;
}
.tab-cont-inner{
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.tab-cont-ttl{
font-size: 35px;
font-weight: 700;
color:  #12853a; 
text-align: center;
}
.tab-cont-ttl-sub{
font-size: 20px;
font-weight: 700;
color:  #12853a; 
text-align: center;
margin: 0 0 4%;
}


.tag-box{
text-align: center;
margin: 0 0 5%;
}
.tag-sep-box{
margin: 0 0 2%;
}
.tag-sep-box.ajust{
margin: 8% 0 2%;
}

.tag-once{
background: #12853a; 
text-align: center;
color: #fff;
font-weight: 700;
line-height: 2.6;
display: inline-block;
width: 220px;
border-radius: 14px;
}
.tag-box .tag-once{
margin: 0 8px;
}


.tab-cont-img-box{
display: flex;
margin: 0 0 7%;
}
.tab-cont-img-box img{
width: 50%;
display: block;
}

.tab-list-cont{
display: flex;
flex-wrap: wrap;
border-top: 1px solid #12853a; 
}
.tab-list-cont dt{
width: 15%;
color:  #12853a;
font-weight: 700;
padding: 18px 0;
border-bottom: 1px solid #12853a; 
}
.tab-list-cont dd{
width: 85%;
font-weight: 500;
padding: 18px 0;
border-bottom: 1px solid #12853a; 
}

.att-box{
margin: 3% 0 0;
padding: 3% 0 0;
border-top:1px dotted #12853a;
}
.att-box p,
.tab-list-cont dd span{
font-size: 12px;
}



.flow{
background: #dcebd6;
padding: 0 0 94px;
}
.flow .sec-ttl{
margin: 0 auto 3%;
}
.flow-inner{
width: 92%;
max-width: 960px;
margin: 0 auto;
padding: 2% 0 5%;
}
.flow-ex{
font-size: 16px;
font-weight: 500;
text-align: center;
margin: 0 0 4%;
}
.flow-t1{
text-align: center;
background: #fff;
color: #12853a;font-size: 20px;
font-weight: 700;
padding: 20px 12px;
border: 2px solid #12853a;
border-radius: 30px;
line-height: 1.5;
}
.flow-t2{
text-align: center;
background: #12853a;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 20px 12px;
border-radius: 30px;
line-height: 1.5;
}
.flow-arrow{
width: 24px;
display: block;
margin: 1.5% auto;
}
.flow-entry-block{
background: #12853a;
position: relative;
}
.flow-inner2{
width: 92%;
max-width: 960px;
margin: 0 auto;
padding: 4% 0 5%;
}
.flow-entry-ttl{
color: #fff;
text-align: center;
font-size: 25px;
font-weight: 700;
padding: 0 0 2%;
}
.flow-entry-btn{
max-width: 538px;
margin: 0 auto;
}
.flow-entry-btn a{
display: block;
text-align: center;
background: #ff7a00;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 20px 14px;
border-radius: 30px;
}



.faq{
background: #e3f1f7;
padding: 0 0 94px;
}
.faq-inner{
width: 92%;
max-width: 960px;
margin: 0 auto;
}

.qa-once{
margin: 0 0 3.5%;
}
.qa-q{
background: #12853a;
color: #fff;
}
.qa-q:hover{
opacity:0.7;
transition: .4s opacity;
cursor: pointer;
}
.qa-a{
display: none;
}

.qa-q{
position: relative;
padding: 14px 64px 14px 14px;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
}
.qa-q::after{
position: absolute;
width: 38px;
height: 38px;
content: '';
top: 50%;
right: 14px;
background: url("../images/icon-plus.svg") no-repeat center center;
background-size: 100% auto;
transform: translateY(-50%);
}
.qa-q.active::after{
background: url("../images/icon-minus.svg") no-repeat center center;
background-size: 100% auto;
}



.qa-q dl,
.qa-a dl{
display: flex;
}
.qa-q dt,
.qa-a dt{
width: 64px;
flex-shrink: 0;
}
.qa-q dd,
.qa-a dd{
display: flex;
align-items: center;
flex-grow: 1;
}
.qa-q span{
font-family: "Poppins", sans-serif;
font-size: 45px;
font-weight: 600;
color: #fff;
padding: 0 10px 0 0;
line-height: 1;
}
.qa-a{
padding: 20px 64px 20px 14px;
background: #fff;
}
.qa-a span{
font-family: "Poppins", sans-serif;
font-size: 45px;
font-weight: 600;
color: #12853a;
line-height: 1;
}




.entry{
background: #12853a;
position: relative;
padding: 48px 0 72px;
color: #fff;
}
.entry-sec-arrow{
position: absolute;
width: 32px;
height: auto;
left: 0;
right: 0;
top: 0;
margin: auto;
display: block;
}
.entry-ttl{
font-size: 25px;
font-weight: 700;
text-align: center;
padding: 0 0 20px;
}
.entry-btn{
width: 538px;
margin: 0 auto;
}
.entry-btn a{
display: block;
font-size: 20px;
font-weight: 700;
text-align: center;
line-height: 70px;
border-radius: 30px;
background: #ff7a00;
color: #fff;
}


footer{
position: relative;
background:#80d0f4 url("../images/footer-bg.png") no-repeat bottom center;
background-size: 100% auto;
}
.footer-inner{
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: min(14%, 168px) 0 min(18%, 280px);
}
footer h2 {
width: 33%;
margin: 0 auto;
line-height: 1;
font-size: 10px;
}
footer .main-kv-ttl-en {
width: 57%;
margin: 0 auto 2.6%;
display: block;
}

footer p{
position: absolute;
right: 2%;
bottom: 24px;
font-size: 12px;
color: #fff;
}
.footer-inner .logo{
position: absolute;
width: 11%;
left: 2.6%;
top: 22px;
}
.c1f{
position: absolute;
width: 4.1%;
left: 30.6%;
top: 4.4%;
}

.c2f{
position: absolute;
width: 6.1%;
left: 60%;
top: 9.7%;
}
.c3f{
position: absolute;
width: 9%;
left: 2%;
top: 25.7%;
}








.page-top{
position: fixed;
width: 52px;
height: 52px;
bottom: 64px;
right: 2%;
cursor: pointer;
display: none;
z-index: 90;
}





/*+++++++++++++++++++++++++↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑v++++++++++++++++++++++++++++++*/
@media only screen and (max-width : 1200px) {
.message-ttl {
font-size: 28px;
font-weight: 700;
text-align: center;
margin: 0 0 min(3%, 30px);
line-height: 1.5;
}
.message p {
font-size: 15px;
margin: 0 0 16px;
}
.scroll-content img {
width: 2000px;
}
.sec-ttl {
font-size: 28px;
margin: 4% 0 3%;
padding: 24px 0;
background-size: 140px auto;
}
.about-once-num {
font-size: 80px;
}
.about-once-cont-ttl {
font-size: 22px;
}


.voice-slider-inner-ttl {
color: #12853a;
font-size: 18px;
font-weight: 700;
margin: 0 0 4%;
}
.voice-slider-once {
margin: 0 20px;
}
.tab-cont-ttl {
font-size: 28px;
}

.message-sec-ttl .cloud-cm{
width: 60px;
top: 0;
left: 50%;
margin: 14px 0 0 130px;
}
.cloud-cm2{
width: 60px;
top: 0;
left: 50%;
margin: 14px 0 0 320px;
}
.cloud-cm3{
width: 42px;
top: 0;
left: 50%;
margin: 80px 0 0 -360px;
}
.bird{
width: 58px;
top: 0;
left: 50%;
margin: 10px 0 0 -370px;
}











}
@media only screen and (max-width : 1000px) {
.u1000{
display: block;
}
body {
font-size:14px;
line-height:1.7;
letter-spacing:0.01em;
}

.message-sec-ttl {
font-size: 30px;
}
.message-ttl {
font-size: 24px;
font-weight: 700;
text-align: center;
margin: 0 0 min(3%, 30px);
line-height: 1.5;
}
.about-once-num {
font-size: 70px;
}
.about-once {
position: relative;
padding: 5% 3% 5% 4%;
}
.about-once.sd {
position: relative;
padding: 5% 3% 5% 4%;
}
.about-img-t1 {
top: 0;
bottom: 0;
right: 0;
}
.sd .about-img-t1 {
left: 0;
}

.about-once-cont {
padding: 3% 18% 3% 9%;
}
.sd .about-once-cont {
padding: 3% 9% 3% 18%;
}
.item {
width: 280px;
}
.moving .scroll-content {
display: flex;
animation: scroll 45s linear infinite;
}
.tab-cont-ttl {
font-size: 22px;
margin: 0 0 1.5%;
}
.tab-cont-ttl-sub {
font-size: 16px;
margin: 0 0 4%;
}
.qa-q {
padding: 14px 64px 14px 14px;
font-size: 18px;
line-height: 1.6;
}
.qa-q span,
.qa-a span{
font-size: 34px;
}
.qa-q dt, .qa-a dt {
width: 50px;
flex-shrink: 0;
}
.qa-q::after {
width: 32px;
height: 32px;
right: 12px;
}
.prof-av {
width: 30%;
}
.voice-slider-ini {
font-size: 24px;
padding: 2% 0 0 30%;
}
.voice-prof-box {
padding: 0 0 5% 27%;
font-size: 14px;
min-height: 140px;
line-height: 1.6;
}
.sec-ttl {
font-size: 24px;
margin: 4% 0 3%;
padding: 24px 0;
background-size: 120px auto;
}
.about-once-cont-ttl {
font-size: 20px;
}
.about-once-cont p {
font-size: 14px;
}
.voice-slider-once {
margin: 0 40px;
}
.prof-av {
width: 22%;
}
.voice-slider-ini {
font-size: 24px;
padding: 2% 0 0 23%;
}
.voice-prof-box {
padding: 0 0 5% 19%;
font-size: 14px;
min-height: 140px;
line-height: 1.6;
}


.message-sec-ttl .cloud-cm{
width: 50px;
top: 0;
left: 50%;
margin: 10px 0 0 100px;
}
.cloud-cm2{
width: 50px;
top: 0;
left: 50%;
margin: 14px 0 0 280px;
}
.cloud-cm3{
width: 36px;
top: 0;
left: 50%;
margin: 80px 0 0 -320px;
}
.bird{
width: 48px;
top: -30px;
left: 50%;
margin: 10px 0 0 -270px;
}

}




@media (max-width: 767px) {

.pc{display: none;}
.sp{display: block;}
body {
line-height:1.6;
letter-spacing:0.01em;
}

.main-kv-inner {
width: 100%;
padding: 40% 0 50%;
}
.main-kv .logo {
width: 20%;
top: 4%;
left: 2.6%;
}
.main-kv-ttl-en {
width: 80%;
margin: 0 auto 3%;
}
.main-kv-inner h1 {
width: 72%;
margin: 0 auto;
line-height: 1;
}
.cloud-entry {
width: 29.5%;
right: -2.5%;
top: 66%;
}
.milk {
width: 13.3%;
left: 63%;
top: 58.7%;
}
.butter {
width: 18.5%;
left: 18%;
top: 65.5%;
}
.main-kv-inner .leaf {
width: 12.8%;
top: 21%;
}
.baloon {
width: 11%;
left: 85.6%;
top: 18%;
}
.c1 {
width: 7.1%;
left: 32.6%;
top: 7.4%;
}
.c2 {
width: 9.1%;
left: 62%;
top: 12.7%;

}
.c3 {
width: 14%;
left: 2%;
top: 22.7%;
}
.c4 {
width: 9%;
left: 93%;
top: 28.7%;
}
.c5 {
width: 23.3%;
left: -4%;
top: 74%;
}



.message-ttl {
font-size: 20px;
margin: 0 0 6%;
line-height: 1.5;
}
.message p {
font-size: 14px;
margin: 0 0 14px;
}
.scroll-content img {
width: 900px;
}
.scroll-content {
display: flex;
animation: scroll 45s linear infinite;
}
.sec-ttl {
font-size: 20px;
margin: 4% 0 3%;
padding: 24px 0;
background-size: 120px auto;
line-height: 1.6;
}
.about {
padding: 0 6% 7%;
}
.about-img-t1 {
position: relative;
width: 70%;
right: auto;
left: auto;
margin: auto;
display: block;
}
.about-once,
.about-once.sd{
position: relative;
padding: 12% 0 4%;
}
.about-once-cont,
.sd .about-once-cont{
width: 100%;
padding: 10% 5% 13%;
border-radius: 3vw;
left: auto;
margin: 0 0 -10%;
}
.about-once-cont-ttl,
.sd .about-once-cont-ttl{
font-size: 18px;
text-align: center;
margin: 0 0 3%;
}
.about-once-num {
font-size: 14vw;
top: 3vw;
left: 0;
width: 100%;
text-align: center;
}
.sd .about-once-num {
right: 0;
z-index: 10;
}
.about-once-cont .cow01 {
position: absolute;
width: 52px;
right: 7%;
top: -30px;
}
.about-once-cont .cow02 {
position: absolute;
width: 52px;
left: 7%;
top: -30px;
}
.about-once .milk2 {
width: 17%;
left: -3%;
bottom: 32%;
}
.about-once .leaf2 {
width: 16%;
right: -2.4%;
bottom: 40%;
}
.about-once .butter2 {
position: absolute;
width: 23%;
left: -5%;
bottom: 40%;
}

.col3-box {
display: block;
}
.col3 {
width: 100%;
padding: 6% 0 0;
}
.col3 img {
display: block;
width: 80%;
margin: 0 auto -8%;
}
.col3:nth-child(2),
.col3:nth-child(3){
margin: -12% auto 0;
}
.recommend .inner-t1 {
width: 88%;
}
.flow {
background: #dcebd6;
padding: 0 0 7%;
}
.flow-ex {
width: 88%;
font-size: 14px;
text-align: left;
margin: 0 auto 4%;
}
.flow .flow-ex {
width: 100%;
font-size: 14px;
text-align: left;
margin: 0 auto 7%;
}
.flow-t1 {
font-size: 16px;
padding: 14px 12px;
border: 2px solid #12853a;
border-radius: 5vw;
}
.flow-t2 {
font-size: 16px;
font-weight: 700;
padding: 14px 12px;
border-radius: 5vw;
line-height: 1.5;
}
.flow-entry-ttl {
font-size: 18px;
padding: 0 0 5%;
}
.flow-entry-btn a {
color: #fff;
font-size: 18px;
padding: 12px 10px;
border-radius: 5vw;
line-height: 1.5;
}
.faq {
padding: 0 0 12%;
}
.qa-q {
padding: 14px 40px 14px 14px;
font-size: 14px;
}
.qa-a {
padding: 20px 14px 20px 14px;
}
.qa-q span, .qa-a span {
font-size: 28px;
}

.qa-q dt, .qa-a dt {
width: 44px;
flex-shrink: 0;
}
.qa-q::after {
width: 24px;
height: 24px;
right: 10px;
}
.entry {
padding: 10% 6%;
}
.flow-inner2 {
padding: 10% 0 10%;
}


.entry-sec-arrow {
width: 28px;
}
.flow-inner {
padding: 4% 0 8%;
}
.item {
width: 180px;
}

.tab-cont-ttl {
font-size: 18px;
margin: 0 0 3%;
}
.tab-cont-ttl-sub {
font-size: 14px;
margin: 0 0 4%;
}
.tag-once {
line-height: 2.4;
display: inline-block;
width: 120px;
border-radius: 12px;
margin: 0 0 12px;
}
.tag-box .tag-once {
margin: 0 4px;
}
.tab-list-cont {
display: block;
}
.tab-list-cont dt {
width: 100%;
padding: 18px 0 10px;
border-bottom: none;
}
.tab-list-cont dd {
width: 100%;
font-weight: 500;
padding: 0 0 18px;
border-bottom: 1px solid #12853a;
}
.tab-cont-box {
background: #fff;
padding: 8% 0 10%;
border-radius: 0 0 3vw 3vw;
}
.sec-ttl {
margin: 4% 0 6%;
}

.voice-slider-once {
margin: 0 24px;
padding: 0 ;
}
.voice-slider-inner-ttl {
font-size: 16px;
margin: 0 0 6%;
}

.prof-av {
position: relative;
width: 40%;
margin: 0 auto;
display: block;
}

.voice-slider-ini {
font-size: 22px;
padding: 0 0 3%;
text-align: center;
}
.voice-prof-box {
padding: 0 0 7% 0;
font-size: 12px;
min-height: auto;
line-height: 1.6;
}
.voice-slider-inner {
border-radius: 5vw;
padding: 5% 6% 6%;
flex-grow: 1;
}

.tab-box {
width: 100%;
display: block;
border-radius: 3vw 3vw 0 0;
}
.tab-once {
position: relative;
width: 100%;
padding: 12px 4px 12px;
display: flex;
align-items: center;
justify-content: center;
}
.tab-once::after {
position: absolute;
content: '▼';
font-size: 12px;
color: #fff;
width: 14px;
height:auto;
top: 50%;
right: 12px;
transform: translateY(-50%);
}
.tab-once .u1000{
display: none;
}
.tag-sep-box {
margin: 0 0;
}
footer p{
position: relative;
height: 40px;
right: auto;
bottom: auto;
font-size: 10px;
color: #fff;
background: #adcfa2;
text-align: center;
padding:  0;
}
footer {
background: #80d0f4 url(../images/footer-bg.png) no-repeat bottom 38px center;
background-size: 100% auto;
}
.footer-inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 25% 0 ;
}
.footer-inner .logo {
position: absolute;
width: 20%;
top: 4%;
left: 2.6%;
}
footer .main-kv-ttl-en {
width: 70%;
margin: 0 auto 3%;
display: block;
}
footer h2 {
width: 57%;
margin: 0 auto;
line-height: 1;
}
.c3f {
position: absolute;
width: 12%;
left: -2%;
top: 40.7%;
}
.c2f {
width: 9.1%;
left: 66%;
top: 16.7%;
}
.c1f {
position: absolute;
width: 8.1%;
left: 34.6%;
top: 14.4%;
}

.message-sec-ttl .cloud-cm{
width: 40px;
top: 0;
left: 50%;
margin: 12px 0 0 90px;
}
.cloud-cm2{
width: 50px;
top: 0;
left: 50%;
margin: 50px 0 0 120px;
}
.cloud-cm3{
width: 36px;
top: 0;
left: 50%;
margin: 130px 0 0 -170px;
}
.bird{
width: 48px;
top: -22px;
left: 50%;
margin: 10px 0 0 -170px;
}
.chase-box-inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
position: relative;
}
.chase-box-inner .cloud-entry {
    position: absolute;
    width: 29.5%;
    right: -2.5%;
    top: 40px;
        transform: translateY(-200px);
    transition: transform 1.2s ease;
    z-index: 1000;
}



}


@media (max-width: 640px) {


}


@media print {
body {width:1000px;}
}