/* common */
html { scroll-behavior: smooth; }

body {
	width: 100%;
	min-width: unset;
}
  @media screen and (min-width: 769px) {
		body {
			min-width: 1280px;
			overflow-x: hidden;
			}
  }

.inner {
    width: 82.93%;
    display: block;
    margin: auto;
}
section a:hover, section button:hover {
    opacity: .7;
    transition: all 0.6s ease;
}
h2, p {
    font-family: "Zen Maru Gothic", sans-serif;
}
.ttl_section {
    text-align: center;
    font-size: 28px;
    color: #13A13F;
    font-weight: 900;
    /* text-shadow: 1px 1px #13A13F; */
}
.cap {
    font-size: 2.67vw;
    color: #5F3C13;
    text-align: center;
}

.pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  
  @media screen and (min-width: 769px) {
    .pc {
      display: block !important;
    }
    .sp {
        display: none !important;
      }
	  .cap {
		  font-size: 10px;
	  }
  }

.ttl_section img {
	width: 100%;
	height: auto;
	display: block;
	margin: auto;
}
  


/* pc */


.l_fixed_bg {
    position: absolute;
    top: 39.2%;
    left: 13.9%;
    width: 9.7%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: calc((100% - 460px) / 2);
    height: 100%;
}

.l_fixed_bg div {
    position: absolute;
    inset: 0px;
}

.l_fixed_bg div img {
    position: absolute;
    width: 186px;
    inset: 0px;
    margin: 90px auto auto auto;
}

.r_fixed_bg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    max-width: calc((100% - 354px) / 2);
    height: 100%;
    margin: auto auto auto auto;
}

.txt_qr {
    position: absolute;
    width: 332px;
    inset: 0px;
    margin: 370px auto auto auto;
}

.img_qr {
    position: absolute;
    width: 358px;
    inset: 0px;
    margin: auto auto auto auto;
}

.r_fixed_bg p {
    position: absolute;
    top: 62.6%;
    right: 15.2%;
    width: 358px;
    position: absolute;
    inset: 0px;
    line-height: 1.3;
    margin: 670px auto auto auto;
}

.fixed_square {
	width: 100% !important;
	max-width: 400px;
	height: auto;
}
.l_fixed_list {
	margin: 150px auto auto auto;
	display: block;
	width: 100px;
	position: relative;
}
.l_fixed_item {
	white-space: nowrap;
	font-family: 'Zen Maru Gothic';
	font-weight: 900;
}
.l_fixed_link {
	font-size: 20px;
}
.fixed_menu_bottom_img {
	display: block;
	height: auto;
	width: 88% !important;
	position: static !important;
	margin: 114px auto auto 50px !important;
}
.r_fixed_heta {
	position: absolute;
	height: auto;
	width: 106px !important;
	margin: auto;
	display: block;
	left: 0;
	right: 0;
}
.r_fixed_btn {
	display: flex;
	width: 100%;
	height: auto;
	margin: auto;
	justify-content: center;
}
.r_fixed_btn:hover, .r_fixed_heta:hover {
	opacity: .7;
	transition: all 0.6s ease;
}
.r_fixed_btn img {
	width: 224px;
	height: auto;
}


/* ラジオボタンは非表示 */
.l_fixed_list input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  /* クリック可能範囲（a全体） */
  .l_fixed_list label {
    display: block;
  }
  .l_fixed_list a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 3px;
                     /* 非選択＝黒 */
    transition: color .2s, background-color .2s;
  }
  .l_fixed_list a:hover {
    /* background: #f5f7ff; */
  }
  
  /* アイコンの二枚重ね（default/activeを切替） */
  .icon {
    position: relative;
    width: 28px;
    height: 28px;      /* ←高さ必須 */
    flex: 0 0 20px;
  }
	.text {
		line-height: 1.25;
		"Zen Maru Gothic", font-family: sans-serif;
	}
  .l_fixed_list .icon img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .15s ease;
  }
  .icon--active { opacity: 0; }  /* 初期は非表示 */
  .icon--default { opacity: 1; }
  
  /* ---------- 選択中の見た目（色＆アイコン切替） ---------- */
  /* m-◯◯ が checked の時、直後の label 内の a にスタイル適用 */
  .l_fixed_list input[type="radio"]:checked + label a {
    color: #E93423;              /* お好みで */
    /* background: #eef4ff; */
    font-weight: 600;
  }
  .l_fixed_list input[type="radio"]:checked + label a .icon--active {
    opacity: 1;
  }
  .l_fixed_list input[type="radio"]:checked + label a .icon--default {
    opacity: 0;
  }
  .l_fixed_list img {
	  position: unset !important;
	  width: unset !important;
	  inset: unset !important;
	  margin: unset !important;
	 }



@media (max-width: 1200px) and (min-width: 769px) {
.r_fixed_bg img {
    /* width: 18vw; */
    margin: auto;
}
.l_fixed_bg div img {
    width: 18vw;
}
}

@media all and (min-width: 769px) {
	.scroll_content {
		position: relative;
		width: 100%;
		max-width: 375px;
		margin: 0 auto 0;
		background-color: white;
		box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.4);
		z-index: 1;
	}
}

	.scroll_content {
		/* background-color: white; */
	}


.fixed_bg {
	position: fixed;
	inset: 0;
	z-index: 1;
	background-image: url(../img/bg_border.png);
	background-repeat: repeat;
	background-size: 78px;
	background-position: -12px 136px;
	min-width: 1280px;
}
.l_fixed_bg,
.r_fixed_bg {
    pointer-events: auto;
}
.r_fixed_bg > div {
    position: absolute;
    inset: 0px;
    width: 220px;
    margin: 299px auto auto auto;
}



/* mv */
#mv {

}
#mv img {
    width: 100%;
    height: auto;
    display: block;
}
#mv h1 {
    position: relative;
}
.mv_img {
    
}
.deco_item_mv {
    position: absolute;
    top: 0;
}
.deco_item_mv01 {width: 14.8% !important;left: 7.9%;top: 16.3%;}
.deco_item_mv02 {
    width: 15.8% !important;
    left: 0.3%;
    top: 60.4%;
}
.deco_item_mv03 {
    width: 15.8% !important;
    left: 15.6%;
    top: 72.8%;
}
.deco_item_mv04 {
    width: 11.8% !important;
    right: 27.3%;
    top: 82.2%;
}
.deco_item_mv05 {
    width: 12.8% !important;
    right: 3.8%;
    top: 19.8%;
}
.deco_item_mv06 {
    width: 15.8% !important;
    right: 15.6%;
    top: 3.7%;
}

/* cp */
.area_cp {background: #F2FCF5;}
.cp {color: #13A13F;display: grid;grid-template-columns: auto 1fr; /* 左にdt、右にdd */gap: 0.2em 0.4em; /* 行間と列間 */align-items: center;justify-content: start;align-content: center;justify-items: stretch;width: 82.01vw;margin: auto;padding: 12px 0;}
.cp dt {font-size: 2.67vw;border: solid 1px #13A13F;display: flex;justify-content: center;align-items: center;border-radius: 4px;padding: 2px 4px;}
.cp dt.c_red {
	border: solid 1px #E93423;
}
.cp dd {font-size: 3.73vw;}
.fs_big {
	font-size: 5.87vw;
}

@media (min-width:769px) {
	.area_cp {background: #F2FCF5;}
.cp {color: #13A13F;display: grid;grid-template-columns: auto 1fr; /* 左にdt、右にdd */gap: 0.2em 0.4em; /* 行間と列間 */align-items: center;justify-content: start;align-content: center;justify-items: stretch;width: 79%;margin: auto;padding: 12px 0;font-family: 'Zen Maru Gothic', sans-serif;}
.cp dt {font-size: 10px;border: solid 1px #13A13F;display: flex;justify-content: center;align-items: center;border-radius: 4px;padding: 2px 4px;}
.cp dt.c_red {
	border: solid 1px #E93423;
}
.cp dd {font-size: 13.1px;}
	.fs_big {
	font-size: 1.2rem;
}
}


/* apply */
#apply {
    padding: 26px 0 0 0;
}
#apply .ttl_section {
    margin-bottom: 1rem;
}
#apply .ttl_section img {
	
width: 28%;
}
.apply_img01 {width: 87%;height: auto;display: block;margin: auto auto 1rem auto;}
.arrow {
    margin: 0 auto;
    display: block;
}
.txt_btn_top {
    color: #E93423;
    text-align: center;
    margin: 0 auto 3px;
    font-size: 5.33vw;
    position: relative;
    width: 43.6vw;
    font-weight: 900;
}
.txt_btn_top:before {
    content: "";
    background-image: url(../img/border01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    position: absolute;
    left: -5.33vw;
    bottom: 1.6vw;
}
.txt_btn_top:after {
    content: "";
    background-image: url(../img/border02.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    position: absolute;
    right: -5.33vw;
    bottom: 1.6vw;
}

@media (min-width:769px) {
	.txt_btn_top {
		font-size: 20px;
		width: 100%;
	}
	.txt_btn_top:after {
		right: 80px;
		bottom: 6px;
	}
	.txt_btn_top:before {
		left: 80px;
		bottom: 6px;
	}

}


.btn_apply_campaign {
    background: #E93423;
    border-radius: 58px;
    font-size: 4.8vw;
    color: #fff !important;
    display: flex;
    width: 70.4vw;
    max-width: unset;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 21px 0 22px 0;
    position: relative;
    box-shadow: -3px 6px 2px 0px #00000021;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
}
.deco_heta_btn_a_c {
    position: absolute;
    width: 100% !important;
    max-width: 44px !important;
    height: auto;
    left: 0;
    top: -11px;
    margin: auto !important;
}

.deco_heta_btn_a_c:after {
    content: "";
    position: absolute;
    width: 44px;
    max-width: 44px;
    height: 30px;
    left: 0;
    top: -11px;
    filter: drop-shadow(-5px 10px 1px #000000);
}
.cap_bottom_btn_apply {
    margin-top: 15px;
    margin-bottom: 31px;
}

.area_vl {background: url(../img/bg_border.png) repeat;width: 100%;height: 100%;border-radius: 32px;background-size: 100px;background-position: top left;z-index: -1;position: relative;margin: 70px auto 0;padding: 0 0 34px 0;}
.ttl_vl {position: relative;top: -50px;margin: auto;display: block;width: 100%;height: auto;}
.txt_vl {
    
color: #5F3C13;
    
font-size: 3.73vw;
    
text-align: center;
    
line-height: 2.2;
    
margin-top: -76px;
}

@media screen and (min-width: 769px) {
	.area_vl {
		z-index: 0;
	}
	.txt_vl {
		font-size: 14px;
	}
	.btn_apply_campaign {
		width: 100%;
	    max-width: 264px;
		font-size: 18px;
	}
}



/* prize  */
#prize {position: relative;padding-bottom: 63px;}
#prize .inner {
    padding: 55px 0 0 0;
}
#prize .ttl_section {
    margin-bottom: 28px;
}
.bg_prize {
    position: absolute;
    z-index: -1;
    top: -20px;
    left: 0;
    right: 0;
    display: block;
    margin: auto;
}
.bg_prize img {
    width: 100%;
    height: auto;
    display: block;
}
.txt_prize {text-align: center;font-size: 4.27vw;color: #5F3C13;line-height: 0.7;margin-bottom: 0.8rem;font-weight: bold;}
.txt_prize .fs_big {font-size: 2em;}
.txt_prize .fs_small {font-size: 0.625em;}
.c_red {
    color: #E93423;
}
.cap_prize {

margin-bottom: 17px;
}

@media screen and (min-width: 769px) {
	.txt_prize {
		font-size: 16px;
	}
}

/* tab */
.img_list_prize {
    width: 100%;
    height: auto;
    display: block;
}



/* --- 全体レイアウト --- */
.tabs {
    /* max-width: 500px; */
    margin: auto;
    width: 100%;
    /* font-family: sans-serif; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* --- ラジオボタンは非表示 --- */
  input[type="radio"] {
    display: none;
  }

  /* --- タブラベル --- */
  .tab-label {
    /* display: inline-block; */
    padding: 7px 0;
    background: #fff;
    border-radius: 20px;
    /* margin-right: 5px; */
    transition: background 0.3s;
    box-shadow: -2px 4px 1px 0px #00000021;
    display: inline-block;
    width: 31.3%;
    text-align: center;
    font-size: 3.73vw;
    color: #5F3C13;
  }
  .tab-label:hover {
    background: #ccc;
  }
.btn_prize_a {
    color: #E93423;
    border: solid 3px #E93423;
}
.btn_prize_b {
    color: #FC6C23;
    border: solid 3px #FC6C23;
}
.btn_prize_w {
    color: #5F3C13;
    border: solid 3px #5F3C13;
    font-family: "Zen Maru Gothic", sans-serif;
}

  /* --- 選択中のタブの見た目 --- */
  input[type="radio"]:checked + .tab-label {
    color: #fff;
  }
  input[type="radio"]:checked + .btn_prize_a {
    background: #E93423;
  }
  input[type="radio"]:checked + .btn_prize_b {
    background: #FC6C23;
  }
  input[type="radio"]:checked + .btn_prize_w {
    background: #5F3C13;
  }

  /* --- コンテンツ領域 --- */
  .tab-content {
    display: none;
    /* border: 1px solid #ddd; */
    border-top: none;
    text-align: center;
    margin: 15px auto 0;
  }

  /* --- チェックされたタブの中身だけ表示 --- */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3 {
    display: block;
  }

#content3 p {
	text-align: left;
	color: #5F3C13;
	font-size: 2.67vw;
	margin-top: 1rem;
}

@media screen and (min-width: 769px) {
	.tab-label {
	width: 30.4%;
		font-size: 14px;
	}
	.bg_prize {
		z-index: 0;
	}
	#content3 p {
	font-size: 10px;
	}
}

  

/* product */
#products {
    position: relative;
}
.img_product01 {
    width: 100%;
    height: auto;
    display: block;
}

/* apply02 */
#apply02 {
	
/* position: absolute; */
	
margin-bottom: 44px;
}

/* details */
#details {padding-bottom: 100px;}
#details .ttl_section {
    margin-bottom: 30px;
}
.list_details {

}
.item_list_details {

}
.ttl_details {background: #FCFBE8;margin-bottom: 12px;}
.ttl_details p {color: #5F3C13;text-align: center;font-size: 3.73vw;padding: 1rem 0;}
.txt_details {font-size: 2.67vw;color: #5F3C13;margin-bottom: 40px;line-height: 1.43;}

  @media screen and (min-width: 769px) {
	  .txt_details {
		  font-size: 10px;
	  }
	  .ttl_details p {
		  font-size: 14px;
	  }
  }



/* footer */

.list_footer {display: flex;background: #13A13F;justify-content: space-between;position: fixed;z-index: 9;bottom: 0;width: 100%;}
.list_footer_item {width: 20%;height: 52px;border-right: solid 1px #fff;}
.list_footer_item:first-child a {
    font-size: 10px;
    
}
.list_footer_item_link {color: #fff !important;font-size: 13px;display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;text-align: center;}
.list_footer_item.-btn_tomato {border-right: none;background: #E93423;position: relative;}
.deco_heta {
    position: absolute;
    max-width: 31px;
    top: -10px;
    right: 0;
    left: 0;
    display: block;
    margin: auto;
}


/* animetion */
/* カタカタ揺れるアニメーション */
@keyframes shake {
    0%   { transform: rotate(0deg); }
    5%   { transform: rotate(5deg); }
    10%  { transform: rotate(-5deg); }
    15%  { transform: rotate(5deg); }
    20%  { transform: rotate(-5deg); }
    25%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  
  /* 汎用クラス */
  .shake {
    display: inline-block; /* transformが効くように */
    animation: shake 0.7s ease-in-out infinite;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    /* 2〜3秒ごとに揺れる間隔を作る */
    animation-duration: 2s; /* 全体サイクル */
  }


  /* deco_item_mv01 は開始から0sで揺れる */
.deco_item_mv01.shake { animation-delay: 0s; }

/* deco_item_mv02 は開始から1s後に揺れる */
.deco_item_mv02.shake { animation-delay: 1s; }

/* deco_item_mv03 は開始から2s後に揺れる */
.deco_item_mv03.shake { animation-delay: 2s; }

/* deco_item_mv04 は1.5秒後 */
.deco_item_mv04.shake { animation-delay: 1.5s; }

/* deco_item_mv05 は0.5秒後 */
.deco_item_mv05.shake { animation-delay: 0.5s; }

/* deco_item_mv06 は2.5秒後 */
.deco_item_mv06.shake { animation-delay: 2.5s; }



/* popup */


#popup {
    display: none;
  }
  
  .popup-open {
    cursor: pointer;
  }
  
  .popup-overlay {
    display: none;
  }
  
  .popup-overlay.is-active {
    display: block;
    z-index: 2;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: auto;
    padding: 0 10px;
}
  
  .popup-overlay img {
    width: 70%;
    margin: 50px auto 50px;
    max-width: 560px;
  }
  
  .popup-close {
    cursor: pointer;
    position: absolute;
    top: -40px;
    right: 10px;
}
  
  @media screen and (min-width: 769px) {
    .popup-overlay img {
        width: 70%;
        margin: 130px auto 130px;
        max-width: 480px;
    }
  
    .popup-close {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: calc(50% - 310px);
        background: none;
        border: none;
    }
  }

  /* ===== Popup メニュー ===== */
.txt_popup {
	
color: #5F3C13;
	
font-size: 16px;
	
text-align: center;
}
.apply-menu-card{
    width: 100%;
    max-width: 480px;
    margin: auto;
    /* height: 100%; */
    transform: translate(0, 50%);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    padding: clamp(20px, 4.5vw, 36px);
    position: relative;
    font-family: "Zen Maru Gothic", sans-serif;
    z-index: 9999999999999999999999999999999999999;
  }
  @media (min-width:701px){
    .apply-menu-card{}
  }
  
  .apply-menu-title{
    margin: 0 0 22px;
    text-align: center;
    color:#5F3C13;
    font-size: clamp(18px, 4.5vw, 28px);
    font-weight: 900;
    line-height: 1.5;
  }

  .apply-menu-form{
    display: grid;
    gap: 16px;
  }
  
  /* 行 */
  .apply-field{
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 10px;
  }
  .apply-label{
    font-size: 14px;
    color:#000;
    font-weight: 700;
  }
  .apply-label.-muted{ color:#9a9a9a; }
  
  /* セレクト */
  .apply-select{
    position: relative;
  }
  .apply-select select{
    width: 100%;
    font-size: 14px;
    line-height: 1;
    padding: 16px 44px 16px 18px;
    border-radius: 28px;
    border: 1px solid #eee;
    background: #fff;
    color:#5f5f5f;
    appearance: none;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
  }
  .apply-select select:focus{
    border-color:#E93423;
    box-shadow: 0 0 0 3px rgba(233,52,35,.12);
  }

  .apply-select .chevron{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    background: none;            /* 既存の背景を消す */
  }
  .apply-select .chevron::before{
    content:"";
    position: absolute;
    inset: 0;
    background: center / contain no-repeat
      url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
    <path d='M4 8 L10 14 L16 8' fill='none' stroke='%23E93423' \
          stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
  }

  /* ボタン（初期は非活性） */
  .apply-submit{
    margin-top: 18px;
    width: 100%;
    border: 0;
    border-radius: 36px;
    padding: 22px 0 22px 0;
    font-size: 16px;
    font-weight: 800;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: -3px 6px 2px 0px #00000021;
    cursor: not-allowed;
    font-family: 'Zen Maru Gothic';
    position: relative;
  }

  .apply-submit .arrow{opacity:.9;position: absolute;right: 5%;}
  
  /* 葉っぱの飾り（左端） */
  .apply-menu-card .leaf{
    position:absolute;
    left: 28px;
    bottom: 51px;
    width: 48px;
    height: 48px;
    filter: drop-shadow(-3px 6px 2px rgba(0,0,0,.12));
    transform: rotate(-18deg);
    z-index: 999999999999999999;
  }
  
  /* --- CSSだけで活性化制御（:has） --- */
  /* どれかが未選択(:invalid)ならボタンはグレーのまま */
  .apply-menu-card:has(select:invalid) .apply-submit{
    background: #B2B2B2;
    opacity:1;
  }
  /* 2つとも選択済みなら活性（赤＆→を強調） */
  .apply-menu-card:has(#sel-area:valid):has(#sel-company:valid) .apply-submit{
    background:#E93423;
    cursor:pointer;
    box-shadow: -3px 6px 2px rgba(0,0,0,.13);
  }
  .apply-menu-card:has(#sel-area:valid):has(#sel-company:valid) .apply-submit:hover{
    opacity:.9;
  }

  
  /* 細部の色味など */
  .apply-select select:invalid{ color:#b5b5b5; }

.apply-submit > span {
	display: block;
	margin: auto;
}

.popup-overlay .deco_heta_btn_a_c  {
	position: static;
}

@media (min-width:769px) {
	.apply-menu-card .leaf {
		bottom: 62px;
	}
}

.red_underline {
  color: #E93423;
  text-decoration: underline;
}