@charset "utf-8";


body {
	width:100%;
	margin: 0 auto;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	color: #202020;
	overflow-x:clip;
  text-align: center;
}

.container {
	max-width: 750px;
	margin: 0 auto;
}

.footer{
	width:100%;
	background-color: #D8DDDF;
	padding: 10px 0;
	color:#9A9A9A;
	font-size: 11px;
	line-height: 16px;
    text-align:center;
}

.footer a{
	color:#9A9A9A;
}
	

@media screen and (min-width: 750px) {
  h1 {
    font-size: 2.5em;
  }
}

@media screen and (max-width: 749px) {
	
.container {
	width: 96%;
	margin: 0 auto;
 }	
  h1 {
    font-size: 1.5em;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ボックス
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.box01{
width:100%;
margin: 0 0 20px 0;
}

.box01_l{
width: 50%;
float:none;
margin:0 auto;
text-align:center;
}

.box01 img{
width: 100%;
}

.box01_r{
width:100%;
float:none;
}

.textbox01{
  font-size: clamp(1.125rem, 1.095rem + 0.13vw, 1.25rem);
  line-height: 180%;
	margin:10px 0;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
画像
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.ph01{
	width: 100%;
	margin:0px auto;
	text-align:center;
	padding: 20px 0 20px 0;
}

.im01{
	width: 25px;
  height: auto;
}

img{
	width: 100%;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フォント
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.f24 {font-size: 24px;}
.f28 {font-size: 28px;}
.f29 {font-size: 29px;}
.f40 {font-size: 40px;}
.f70 {font-size: 70px;}

@media screen and (max-width: 749px) {

/* ビューポート 最大値750px-最小値350px */
.f24 {font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);}/* 最大24px-最小20px */
.f28 {font-size: clamp(1.438rem, 1.324rem + 0.57vw, 1.75rem);}/* 最大28px-最小23px */
.f40 {font-size: clamp(1.125rem, 1.324rem + 0.57vw, 2.5rem);}/* 最大40px-最小18px */
.f70 {font-size: clamp(1.875rem, -0.625rem + 10.667vw, 4.375rem);} /* 最大70px-最小30px */
	
}

.fs_10{font-size:10%; }
.fs_20{ font-size:20%; }
.fs_30{ font-size:30%; }
.fs_40{ font-size:40%; }
.fs_50{ font-size:50%; }
.fs_60{ font-size:60%; }
.fs_70{ font-size:70%; }
.fs_80{ font-size:80%; }
.fs_90{ font-size:90%; }
.fs_110{ font-size:110%; }
.fs_120{ font-size:120%; }
.fs_130{ font-size:130%; }
.fs_140{ font-size:140%; }
.fs_150{ font-size:150%; }
.fs_160{ font-size:160%; }
.fs_170{ font-size:170%; }
.fs_180{ font-size:180%; }
.fs_190{ font-size:190%; }
.fs_200{ font-size:200%; }
.fs_210{ font-size:210%; }
.fs_220{ font-size:220%; }
.fs_230{ font-size:230%; }
.fs_240{ font-size:240%; }
.fs_250{ font-size:250%; }
.fs_260{ font-size:260%; }
.fs_270{ font-size:270%; }
.fs_280{ font-size:280%; }
.fs_290{ font-size:290%; }
.fs_300{ font-size:300%; }

.fw_b{ font-weight:bold;}
.fw600{ font-weight:600;}
.fw700{ font-weight:700;}
.fw900{ font-weight:900;}

.lh120{ line-height: 120%;}
.lh130{ line-height: 130%;}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
カラー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.y01{color:#FFCA00;}
.y02{color:#ffff00;}
.y02{color:#FFFF55;}
.w01{color:#FFFFFF;}
.r01{color:#FF0004;}
.pk01{color:#F06666}
.dpk01{color:#ff1493;}
.gre01{color:#339933}
.bl01{color:#4169E1}
.pur01{color:#9C50B5}
.pur02{color:#2C075E}
.gr01{color: #666666}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
装飾
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line01{
	padding: 5px;
	border: #CC3366 solid 3px;
}

.underline_solid-y {
	background:linear-gradient(transparent 60%,#fafa00 40%,#FFF600 100%)
}

.underline_solid-blue {
	background:linear-gradient(transparent 60%,#3399FF 40%,#3399FF 100%)
}

.underline_bouble-blue {
	border-bottom: double 6px #3399FF;
}

.underline_bouble-red {
	border-bottom: double 6px #FF0004;
}

.marker-y{
	background-color: #FFF600;
}

.marker-pur{
	background-color: #9C50B5;
}

.taL{text-align: left;}

.italic-text {
  font-style: italic;
}

.voice_bg {
  width: 80%;
  border: 2px solid #f8494e;
  border-radius: 3px;
  padding: 30px;
  margin:0 auto 40px auto;
  box-sizing: border-box;
  }

@media screen and (max-width: 760px){
  .voice_bg {
    width: 100%;
    padding: 20px;
  }
  
}

/***　ボタン　*******************************************/

a.bt01,
a.bt01:hover,
a.bt01:visited{
  display: block;
  height: auto;
  width: 80%;
  padding:10px;
  margin: 0 auto;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  font-size:140%;
  text-shadow: 0px 1px 0px #fafafa;
  background: #339966;
  background: -webkit-gradient(linear, left top, left bottom, from(#339966), to(#66CC33));
  background: -moz-linear-gradient(top,  #339966,  #66CC33);
  background: -o-linear-gradient(top,  #339966,  #66CC33);
  background: -ms-linear-gradient(top,  #339966,  #66CC33);
  background: linear-gradient(top,  #339966,  #66CC33);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  -webkit-box-shadow:  0 0 1px #c7c5c1;
  -moz-box-shadow:  0 0 1px #c7c5c1;
  box-shadow:  0 0 1px #c7c5c1;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;
  border-radius: 5px;
}
 
a.bt01:hover { /*マウスホバー時*/
  color:#ffffff;
  background: #66CC33;
}

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

.updown {
animation-name:updown1;   /* アニメーション名の指定 */
animation-delay:0s;   /* アニメーションの開始時間指定 */
animation-duration: 2s;   /* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite; 
}
@keyframes updown1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

@media screen and (max-width: 760px) {
  .br-sp {
    display: none;
  }/* スマホでは改行しない */
  .br-pc {
    display: block;
  }/* スマホの時だけ改行する */
}


/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/***　離脱防止ポップアップ　*******************************************/

.exit-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  display: none; 
}

/* ポップアップが表示されたときだけflex（表示）にする */
.exit-popup-overlay.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}
  .exit-popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
  }
  .exit-popup-content {
    background: #fff;
    border-radius: 8px;
    max-width: 480px;
    width:100%;
	margin: 0 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }
  .exit-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
  }
  .exit-popup-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 22px;
  }
  .exit-popup-content p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .exit-popup-btn {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }
  .exit-popup-btn:hover {
  }

/* マージン------------------------------*/
.mt00 {
  margin-top: 0 !important;
}
.mt05 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt35 {
  margin-top: 35px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt45 {
  margin-top: 45px !important;
}
.mt50 {
  margin-top: 50px !important;
}
.mt55 {
  margin-top: 55px !important;
}
.mt60 {
  margin-top: 60px !important;
}
.mt65 {
  margin-top: 65px !important;
}
.mt70 {
  margin-top: 60px !important;
}
.mt75 {
  margin-top: 75px !important;
}
.mt80 {
  margin-top: 80px !important;
}
.mt85 {
  margin-top: 85px !important;
}
.mt90 {
  margin-top: 90px !important;
}
.mt95 {
  margin-top: 95px !important;
}
.mt100 {
  margin-top: 100px !important;
}
.mr00 {
  margin-right: 0 !important;
}
.mr05 {
  margin-right: 5px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr15 {
  margin-right: 15px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.mr25 {
  margin-right: 25px !important;
}
.mr30 {
  margin-right: 30px !important;
}
.mr35 {
  margin-right: 35px !important;
}
.mr40 {
  margin-right: 40px !important;
}
.mr45 {
  margin-right: 45px !important;
}
.mr50 {
  margin-right: 50px !important;
}
.mr55 {
  margin-right: 55px !important;
}
.mr60 {
  margin-right: 60px !important;
}
.mr65 {
  margin-right: 65px !important;
}
.mr70 {
  margin-right: 70px !important;
}
.mr75 {
  margin-right: 75px !important;
}
.mr80 {
  margin-right: 80px !important;
}
.mr85 {
  margin-right: 85px !important;
}
.mr90 {
  margin-right: 90px !important;
}
.mr95 {
  margin-right: 95px !important;
}
.mr100 {
  margin-right: 100px !important;
}
.mb00 {
  margin-bottom: 0 !important;
}
.mb05 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb15 {
  margin-bottom: 15px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb25 {
  margin-bottom: 25px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb35 {
  margin-bottom: 35px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb45 {
  margin-bottom: 45px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.mb55 {
  margin-bottom: 55px !important;
}
.mb60 {
  margin-bottom: 60px !important;
}
.mb65 {
  margin-bottom: 65px !important;
}
.mb70 {
  margin-bottom: 70px !important;
}
.mb75 {
  margin-bottom: 75px !important;
}
.mb80 {
  margin-bottom: 80px !important;
}
.mb85 {
  margin-bottom: 85px !important;
}
.mb90 {
  margin-bottom: 90px !important;
}
.mb95 {
  margin-bottom: 95px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}
.ml00 {
  margin-left: 0 !important;
}
.ml05 {
  margin-left: 5px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml15 {
  margin-left: 15px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.ml25 {
  margin-left: 25px !important;
}
.ml30 {
  margin-left: 30px !important;
}
.ml35 {
  margin-left: 35px !important;
}
.ml40 {
  margin-left: 40px !important;
}
.ml45 {
  margin-left: 45px !important;
}
.ml50 {
  margin-left: 50px !important;
}
.ml55 {
  margin-left: 55px !important;
}
.ml60 {
  margin-left: 60px !important;
}
.ml65 {
  margin-left: 65px !important;
}
.ml70 {
  margin-left: 60px !important;
}
.ml75 {
  margin-left: 75px !important;
}
.ml80 {
  margin-left: 80px !important;
}
.ml85 {
  margin-left: 85px !important;
}
.ml90 {
  margin-left: 90px !important;
}
.ml95 {
  margin-left: 95px !important;
}
.ml100 {
  margin-left: 100px !important;
}
/* パディング------------------------------*/
.pt00 {
  padding-top: 0 !important;
}
.pt05 {
  padding-top: 5px !important;
}
.pt10 {
  padding-top: 10px !important;
}
.pt15 {
  padding-top: 15px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt25 {
  padding-top: 25px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt35 {
  padding-top: 35px !important;
}
.pt40 {
  padding-top: 40px !important;
}
.pt45 {
  padding-top: 45px !important;
}
.pt50 {
  padding-top: 50px !important;
}
.pt55 {
  padding-top: 55px !important;
}
.pt60 {
  padding-top: 60px !important;
}
.pt65 {
  padding-top: 65px !important;
}
.pt70 {
  padding-top: 70px !important;
}
.pt75 {
  padding-top: 75px !important;
}
.pt80 {
  padding-top: 80px !important;
}
.pt85 {
  padding-top: 85px !important;
}
.pt90 {
  padding-top: 90px !important;
}
.pt95 {
  padding-top: 95px !important;
}
.pt100 {
  padding-top: 100px !important;
}
.pr00 {
  padding-right: 0 !important;
}
.pr05 {
  padding-right: 5px !important;
}
.pr10 {
  padding-right: 10px !important;
}
.pr15 {
  padding-right: 15px !important;
}
.pr20 {
  padding-right: 20px !important;
}
.pr25 {
  padding-right: 25px !important;
}
.pr30 {
  padding-right: 30px !important;
}
.pr35 {
  padding-right: 35px !important;
}
.pr40 {
  padding-right: 40px !important;
}
.pr45 {
  padding-right: 45px !important;
}
.pr50 {
  padding-right: 50px !important;
}
.pr55 {
  padding-right: 55px !important;
}
.pr60 {
  padding-right: 60px !important;
}
.pr65 {
  padding-right: 65px !important;
}
.pr70 {
  padding-right: 70px !important;
}
.pr75 {
  padding-right: 75px !important;
}
.pr80 {
  padding-right: 80px !important;
}
.pr85 {
  padding-right: 85px !important;
}
.pr90 {
  padding-right: 90px !important;
}
.pr95 {
  padding-right: 95px !important;
}
.pr100 {
  padding-right: 100px !important;
}
.pb00 {
  padding-bottom: 0 !important;
}
.pb05 {
  padding-bottom: 5px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pb15 {
  padding-bottom: 15px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb25 {
  padding-bottom: 25px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb35 {
  padding-bottom: 35px !important;
}
.pb40 {
  padding-bottom: 40px !important;
}
.pb45 {
  padding-bottom: 45px !important;
}
.pb50 {
  padding-bottom: 50px !important;
}
.pb55 {
  padding-bottom: 55px !important;
}
.pb60 {
  padding-bottom: 60px !important;
}
.pb65 {
  padding-bottom: 65px !important;
}
.pb70 {
  padding-bottom: 70px !important;
}
.pb75 {
  padding-bottom: 75px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pb85 {
  padding-bottom: 85px !important;
}
.pb90 {
  padding-bottom: 90px !important;
}
.pb95 {
  padding-bottom: 95px !important;
}
.pb100 {
  padding-bottom: 100px !important;
}
.pl00 {
  padding-left: 0 !important;
}
.pl05 {
  padding-left: 5px !important;
}
.pl10 {
  padding-left: 10px !important;
}
.pl15 {
  padding-left: 15px !important;
}
.pl20 {
  padding-left: 20px !important;
}
.pl25 {
  padding-left: 25px !important;
}
.pl30 {
  padding-left: 30px !important;
}
.pl35 {
  padding-left: 35px !important;
}
.pl40 {
  padding-left: 40px !important;
}
.pl45 {
  padding-left: 45px !important;
}
.pl50 {
  padding-left: 50px !important;
}
.pl55 {
  padding-left: 55px !important;
}
.pl60 {
  padding-left: 60px !important;
}
.pl65 {
  padding-left: 65px !important;
}
.pl70 {
  padding-left: 70px !important;
}
.pl75 {
  padding-left: 75px !important;
}
.pl80 {
  padding-left: 80px !important;
}
.pl85 {
  padding-left: 85px !important;
}
.pl90 {
  padding-left: 90px !important;
}
.pl95 {
  padding-left: 95px !important;
}
.pl100 {
  padding-left: 100px !important;
}


/* --- CTA --- */
.cta-container {
  max-width: 700px; /* LPのコンテンツ幅に合わせて調整してください */
  margin: 40px auto;
  padding: 30px 20px;
  background-color: #fffaf0; /* 柔らかなボタニカル・ナチュラル系の背景色 */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  box-sizing: border-box;
}

/* --- 上部テキスト（キャッチコピー） --- */
.cta-catch {
  font-size: 20px;
  font-weight: 700;
  color: #4a3c31; /* 落ち着いたダークブラウン */
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* --- ボタンの並び（PC時は横並び、スマホ時は縦並びで順序逆転） --- */
.cta-btn-wrap {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* --- ボタンの共通ベーススタイル --- */
.cta-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 64px;
  text-decoration: none;
  border-radius: 50px; /* 丸みのあるボタン */
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.cta-btn2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 64px;
  text-decoration: none;
  border-radius: 50px; /* 丸みのあるボタン */
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* --- ボタンごとの幅指定（PC時：40% / 60%） --- */
.btn-secondary {
  width: 40%;
  background-color: #ffffff;
  color: #eb9b6f;
  border: 2px solid #f9c89b;
  font-size: 18px;
  font-weight: 700;
}
.btn-secondary:hover {
  background-color: #faebd7;
  transform: translateY(-2px);
}

/* --- 矢印のスタイル定義 --- */
.btn-text-with-arrow {
  position: relative;
  padding-right: 16px; /* 矢印が入るスペースを確保 */
}
.btn-text-with-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 2px solid #eb9b6f; /* ボタンの文字色と合わせる */
  border-right: 2px solid #eb9b6f;
}

.btn-primary {
  width: 60%;
  background: linear-gradient(135deg, #e9546b 0%, #feb47b 100%); /* 葡萄や果実の瑞々しさをイメージしたグラデーション */
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(254, 131, 100, 0.4);
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(254, 131, 100, 0.6);
}

/* --- メインボタン内のテキストスタイル --- */
.btn-sub-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
  opacity: 0.9;
}
.btn-main-text {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

/* --- 目立たせるための波紋・拡大アニメーション --- */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.pulse-animation {
  animation: pulse 2s infinite ease-in-out;
}

/* --- スマートフォン用の表示調整（画面幅767px以下） --- */
@media screen and (max-width: 767px) {
  .cta-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 15px 10px;
    background-color: #fffaf0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    box-sizing: border-box;
}
  .cta-catch {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .cta-btn-wrap {
    flex-direction: column-reverse; /* スマホでは縦並びにし、下のボタン（今すぐ試してみる）を上に配置 */
    gap: 12px;
  }
  .cta-btn {
    width: 60% !important; /* 横幅いっぱいに広げる */
    height: 45px;
  }
  .cta-btn2 {
    width: 100% !important; /* 横幅いっぱいに広げる */
    height: 80px;
}
  .btn-secondary {
    font-size: 16px;
  }
  .btn-sub-text {
    font-size: 1.0em;
  }
  .btn-main-text {
    font-size: 1.8em;
  }
  /* スマホ縦並び時は、アニメーションによるズレを防ぐためhover時の縦移動をなしに */
  .cta-btn:hover {
    transform: none;
  }
}


/* --- 改行 --- */

.br-sp {
    display: none;
}

@media (max-width: 500px) {
    .br-sp {
        display: block;
    }
}