@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/*css変数定義*/
:root {
  --bk: #3A3A3A;/*黒*/
  --red: #FF5353;/*赤*/
  --pink: #FFACAC;/*濃いピンク*/
  --pink02: #FFD5D5;/*中間ピンク*/
  --pink03: #FFF8F8;/*薄ピンク*/
}


body{
	font-family: "Noto Sans JP", sans-serif,"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Yu Gothic", "Yu Gothic medium", "Arial", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	color: var(--bk);
	margin: 0 auto;/*MV中央揃え*/
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

a{	
	text-decoration: none;
	color: inherit;
}
a:hover{
	color: inherit;
}
a:link, a:visited, a:hover, a:active, a:focus{
	text-decoration: none;
	outline: none;
}

h1,
h2,
h3,
h4,
ul,
ol,
dl,
dt,
dd,
p,
figure{
	margin:0;
	padding:0;
}

ul,
ol{
	list-style-type: none;
}

button:focus {
	outline: none;
}
		

/*---------------------------------
	共通パーツ
----------------------------------*/
body > article{
	max-width: 1920px;
    margin: auto;
}

.roboto{
	font-family: "Roboto Condensed", sans-serif;
}

.red{
	color: var(--red);
}

/*リスト*/
.dot-list li{
	position: relative;
	padding-left: 15px;
}

/*リストの「・」*/
.dot-list li:before{
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

.ng-list li{
	position: relative;
	padding-left: 1.5rem;
}
/*アイコン*/
.ng-list li:before{
	content: "\f05e";
    font-family: "Font Awesome 5 Free";
    position: absolute;
	top: 0;
	left: 0;
    font-weight: 900;
    font-size: 16px;
    color: var(--red);
}

@media(min-width: 1200px){
	.container{
		padding-right: 0;
		padding-left: 0;
	}
}


/*  見出し
-------------------------------*/
/*h2*/
.title-lg-wrap{
	text-align: center;
	margin-bottom: 40px;
}
.c-title-lg{
	font-size: 32px;
	font-weight: bold;
}

/*h3*/
.title-md-wrap{
	margin-bottom: 40px;
}
.c-title-md{
	font-size: 24px;
	font-weight: bold;
}

/*h4*/
.title-sm-wrap{
	margin-bottom: 40px;
}

@media (max-width:767px) {
	/*h2*/
	.title-lg-wrap{
		margin-bottom: 25px;
	}
	.c-title-lg{
		font-size: 24px;
	}
	
	/*h3*/
	.title-md-wrap{
		margin-bottom: 25px;
	}
	.c-title-md{
		font-size: 18px;
	}
	
	/*h4*/
	.title-sm-wrap{
		margin-bottom: 25px;
	}
}


/*---------------------------------
	MV
----------------------------------*/
.mv-wrap{
	position: relative;
}

h1.mv-area {
	width: 100%;
	text-align: center;
	margin: auto;
}

h1.mv-area img {
  max-width: 100%;
  object-fit: cover;
  object-position: top center;
  margin: auto;
}

header{
	z-index: 11;
}

.container{
	position: relative;
	z-index: 2;
}

/* 親要素（固定を維持させたいエリア） */
.bg-wrap {
  position: relative;
  width: 100%;
}

/* sticky固定用 */
.sticky-hand-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;/* 高さを消して下の要素を押し下げない */
  z-index: 1;
}

/* 手のイラスト表示 */
.bg-hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  pointer-events: none;
  background: url(/static/img/willer-ad/cheering/img-hand-pc.webp) center top no-repeat;
  background-size: 100%;
  background-position: center -6vw;
}

@media (max-width: 767px) {
  .bg-hand {
	  background: url(/static/img/willer-ad/cheering/img-hand-sp.webp) center top no-repeat;
      background-size: 100%;
	  background-position: center -13vw;
  }
}

/*---------------------------------
	アニメーション
----------------------------------*/
/* 最初（非表示）の状態 */
.js-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* クラスが付与された状態 */
.js-fade-in.is-active {
  opacity: 1;
  transform: translateY(0);
}

/*---------------------------------
	about（「会いに行く」WILLERから～）
----------------------------------*/
#about{
	z-index: 1;
    position: relative;
}

.about__text-wrap p{
	font-weight: bold;
	font-size: 20px;
	line-height: 1.6;
	background: rgba(255, 255, 255, 0.5);
	width: fit-content;
	margin: auto;
	border-radius: 50px;
}

@media(max-width: 767px){
	.about__text-wrap p{
		font-size: 18px;
	}
}

/*---------------------------------
	nav
----------------------------------*/
.nav-wrap {
    position: relative;
    z-index: 2;
	margin-top: 160px;
	margin-bottom: 80px;
}

.page-nav {
    display: flex;
    justify-content: center;
    gap: 20px; /* ボタン同士の隙間 */
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* 各ボタン全体 */
.page-nav__item {
    position: relative;/*影の親*/
    width: calc((100% - 40px) / 3);
    max-width: 320px;
    margin-bottom: 15px;
}

/* ボタンのデザイン */
.page-nav__btn {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: 0.2s ease;
    border-radius: 100px;
    background: #fff;
    border: solid 3px var(--bk);
    color: var(--bk);
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    padding: 18px 30px;
	line-height: 1.3;
}

/* 下に重ねるボタン背景 */
.page-nav__btn-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--pink);
    top: 7px; /* 下にずらす距離 */
    left: 0;
    right: 0;
    z-index: 0;
    border: solid 3px var(--bk);
    border-radius: 50px; /* ボタン本体と同じ丸み */
    box-sizing: border-box;
}

/* ホバー時 */
.page-nav__btn:hover {
    opacity: 1;
    transform: translateY(7px); /* 影のズレ幅（7px）と同じ分だけ下に移動 */
}


@media(max-width: 767px){
	.nav-wrap {
		margin-top: 80px;
		margin-bottom: 30px;
		padding: 0 10px;
	}

	.page-nav {
		gap: 6px; /* ボタン同士の隙間 */
	}
	.page-nav__item{
		width:calc((100% - 12px) / 3);
	}
	.page-nav__btn{
		font-size: 15px;
		padding: 10px 0;
		border-width: 2px;
	}
	.page-nav__btn-bg{
		border-width: 2px;
	}
}


/*---------------------------------
	プラン
----------------------------------*/
.section-plan{
	position: relative;
	background: var(--pink03);
	padding: 90px 0 150px;
	overflow: hidden;
/*	z-index: 2;*/
}

/*背景 上*/
.section-plan:before{
	content: "";
    display: block;
    position: absolute;
    top: 0;
	left: calc(50% - 960px);
    background: url(/static/img/willer-ad/cheering/bg-line01.svg) center top no-repeat;
    width: 1920px;
    height: 195px;
	z-index: 0;
}

/*背景 下*/
.section-plan:after{
	content: "";
    display: block;
    position: absolute;
    bottom: 0;
	left: calc(50% - 960px);
    background: url(/static/img/willer-ad/cheering/bg-line02.svg) center top no-repeat;
    width: 1920px;
    height: 260px;
	z-index: 0;
}

.section-plan > .container{
	position: relative;
    z-index: 1;
}

/*見出し 吹き出し*/
.title-catch{
	position: relative;
    height: 75px;
    width: 206px;
    background: url(/static/img/willer-ad/cheering/title-bubble.svg) center top no-repeat;
	margin: 0 auto 10px;
	padding: 20px;
}

.catch-text{
	font-size: 16px;
    font-weight: bold;
}

.catch-price{
	font-size: 19px;
    font-weight: 500;
}

/*カード全体
----------------------------*/
.plan__card-wrap{
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	gap: 15px;
	margin: auto;
}

/*各カード
----------------------------*/
.plan__card-item{
	width: 100%;
    max-width: 369px;
    border: solid 3px var(--bk);
    border-radius: 10px;
	background: #fff;
}

.plan__card-item:nth-of-type(3n){
	margin-right: 0;
}

/* タイトルとMAPボタン
----------------------------------*/
.plan__card-title-wrap {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 10px;
  text-align: center;
}

/* ターミナル名などのタイトル */
.plan__card-title {
  font-weight: bold;
  font-size: 18px;
  width: 100%;
}

/* MAPボタンの外枠 */
.plan__map-btn-wrap {
  margin-left: 10px;
}

/* MAPボタン本体 */
.plan__map-btn {
  position: relative;
  display: block;
  background-color: var(--bk);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 1.2rem 2px 0.8rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
}

/* MAPボタン アイコン */
.plan__map-btn:before{
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	top: 50%;
	right: 0.6em;
	transform: translate(0, -50%);
	font-weight: 900;
	font-size: 10px;
	color: #fff;
}

/* ホバー時 */
.plan__map-btn:hover {
  opacity: 0.7;
  color: #fff;
}

/* slider 
----------------------------------*/
.wrap-slider{
	padding: 20px 0 30px;
	border-top: 3px solid var(--bk);
	border-bottom: 3px solid var(--bk);
}

.slider-item{
/*	max-width: 300px;*/
	margin: 0 7px;
	border-radius: 10px;
}
.slick-slider{
	margin-bottom: 0;
}
.slick-slide img{
	width: 100%;
	max-width: 211px;
	height: 211px;
	object-fit: cover;
}
.slide-text{
	font-size: 14px;
}

/* ドット */
.slick-dots{
	bottom: 5px;
}
.slick-dots li{
	width: 10px;
}

.slick-dots li button:before{
	font-size: 8px;
	opacity: 0.15;
}
.slick-dots li.slick-active button:before{
	color: var(--pink);
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before{
	opacity: 0.15;
}

/* 詳細全体 
----------------------------------*/
.plan__card-detail-wrap {
	padding: 16px 16px 20px;
}

/* 各詳細 */
.plan__card-detail{
	margin-bottom: 20px;
}
.plan__card-detail:last-of-type{
	margin-bottom: 0;
}

/* 各詳細ヘッダー部分*/
.card-detail__header {
  margin-bottom: 13px;
}
/* タイトル */
.card-detail__header-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	margin-right: 1rem;
}
/*サイズ・期間など全体*/
.card-detail__header-detail{
	margin-top: 5px;
}
/*期間*/
.card-detail__header-term {
  font-size: 15px;
  margin: 0;
  color: #555;
}

/* 右側：設置場所はこちらボタン */
.plan__detail-btn {
	position: relative;
	display: inline-block;
	background-color: var(--bk);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	padding: 4px 1.2rem 4px 0.8rem;
	border-radius: 100px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s;
}
/* アイコン */
.plan__detail-btn:before{
	content: "\f24d";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	top: 50%;
	right: 0.7em;
	transform: translate(0, -50%);
	font-weight: 900;
	font-size: 10px;
	color: #fff;
}
.plan__detail-btn:hover {
  opacity: 0.7;
  color: #fff;
}

/* ボディ部分（価格リスト） */
.card-detail__body {
  width: 100%;
}

/* 価格リスト全体の枠（左側の縦線） */
.price-list-wrap {
  border-left: 2px solid var(--bk);
  padding-left: 6px;
  display: flex;
  flex-direction: column;
  max-width: 299px;
}

/* 1枠ずつの行（dl） */
.price-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.price-item:last-of-type {
	margin-bottom: 0;
}

/* 「1枠」「5枠」のグレー背景ラベル（dt） */
.price-label {
	background-color: #e9e9e9;
	width: 100%;
	max-width: 145px;
	text-align: center;
	font-size: 15px;
	padding: 0;
	border-radius: 4px;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
}

/* 金額（dd） */
.price-value {
	color: var(--red);
	font-size: 22px;
	font-weight: 500;
	font-family: "Roboto Condensed", sans-serif;
	line-height: 1;
}
.price-value .tax {
	color: var(--bk);
	font-size: 12px;
}


@media(max-width: 767px){
	.section-plan{
		padding: 15vw 0 14vw;
		z-index: 2;/*手のイラストより上に*/
	}
	.section-plan:before{
		left: 0;
		background-size: 100%;
		width: 100%;
		height: 13vw;
		background-image: url("/static/img/willer-ad/cheering/bg-line01-sp.svg");
	}
	.section-plan:after{
		left: 0;
		background-size: 100%;
		width: 100%;
		height: 16vw;
		background-image: url("/static/img/willer-ad/cheering/bg-line02-sp.svg");
	}
	.plan__detail-btn{
		font-size: 13px;
	}
	.price-label{
		margin-right: 20px;
	}
}

@media(max-width: 991px){
	.plan__card-wrap{
		flex-direction: column;
	   	align-items: center;
	}
	.plan__card-item{
		margin-right: 0;
	}
}

@media(max-width: 1199px){
	.plan__card-wrap{
		max-width: 753px;
	}
}



/*---------------------------------
	広告の流れ
----------------------------------*/
.section-flow{
	padding: 10px 0 60px;
}

/* カード全体を横並びにする親要素のスタイル（必要に応じて） */
.flow-item-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 16px;
}

/* 1つのカード枠 */
.flow-item {
	position: relative;
	width: calc((100% - 32px) / 3);
	max-width: 369px;
	min-height: 356px;
	background-color: #fff;
	border: 3px solid var(--bk);
	border-radius: 12px;
	padding: 10px 16px 20px;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	flex-direction: column;/*縦並び*/
	justify-content: space-around;
}

/* 矢印 */
.flow-item:before{
	content: "\f0da";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translate(0, -50%);
    font-weight: 900;
    font-size: 29px;
    color: var(--bk);
}

.flow-item:nth-of-type(3n):before{
	display: none;
}
.flow-item:last-of-type:before{
	display: none!important;
}

/*上部の「期間」がないカード*/
.flow-item.flexend {
	justify-content: flex-end;/*下揃え*/
}

/*番号、期間、画像*/
.flow-item__header {
    padding: 0 10px 0 30px;
}

/* 左上の数字アイコン */
.flow-item__num {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  top: 6px;
  left: 6px;
  width: 48px;
  height: 48px;
  border: 3px solid var(--bk);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 900;
  font-size: 22px;
  /*数字*/
  background: #ffb7b7 center no-repeat;
  background-image: url(/static/img/willer-ad/cheering/flow-num01.svg);
  background-size: 30%;
}

.flow-item:nth-of-type(2) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num02.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(3) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num03.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(4) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num04.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(5) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num05.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(6) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num06.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(7) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num07.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(8) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num08.svg);
  background-size: 40%;
}
.flow-item:nth-of-type(9) .flow-item__num{
  background-image: url(/static/img/willer-ad/cheering/flow-num09.svg);
  background-size: 40%;
}

/* 期間 */
.flow-item__term {
  margin: 0 0 0 auto;
  width: 90%;
  background-color: var(--pink02);
  border-radius: 20px;
  padding: 2px 12px;
}

.flow-item__term p {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
}

/* 画像エリア */
.flow-item__img {
  margin: 16px auto 20px;
}

.flow-item__img img {
  max-width: 100%;
  height: auto;
}

/* 見出し（タイトル） */
.flow-item__title {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 8px 0;
}

/* 説明テキスト */
.flow-item__text{
	padding: 0 10px;
}
.flow-item__text p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

@media(max-width: 991px){
	.flow-item{
		width: 100%;
		min-height: inherit;
	}
	.flow-item::before{
		display: none!important;
	}
}

@media(max-width: 767px){
	.section-flow{
		padding: 40px 0 20px;
	}
	
	.flow-item-wrap {
	  justify-content: center;
	  gap: 20px 0;
	}
	.flow-item__num{
	  width: 38px;
	  height: 38px;
	  border: 2px solid var(--bk);
		border-radius: 10px;
	}
	.flow-item__text p{
		font-size: 14px;
	}
	.flow-item__term {
		width: 97%;
		padding: 2px 5px;
	}
}


/*---------------------------------
	申込ルール
----------------------------------*/
.section-rule{
	overflow: hidden;
	position: relative;
	background: var(--pink03);
	padding: 160px 0 90px;
}

/*背景 上*/
.section-rule:before{
	content: "";
    display: block;
    position: absolute;
    top: 0;
	left: calc(50% - 960px);
    background: url(/static/img/willer-ad/cheering/bg-line03.svg) center top no-repeat;
    width: 1920px;
    height: 195px;
	z-index: 0;
}

@media(max-width: 767px){
	.section-rule{
		padding: 22vw 0 50px;
	}
	.section-rule:before{
		left: 0;
		background-size: 100%;
		width: 100%;
		height: 16vw;
		background-image: url("/static/img/willer-ad/cheering/bg-line03-sp.svg");
	}
}
	
/*-------------------------------------------------
	申込ルールのアコーディオン
--------------------------------------------------*/
/* アイコン設定（閉じてる時：+ / 開いている時：-）
-------------------------------------------- */
/* 横線（プラス・マイナス共通） */
.rule__accordion-title:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 14px;       /* アイコンの横幅 */
  height: 2px;       /* 線の太さ */
  background-color: #F17255;
  transition: transform 0.3s ease;
}

/* 縦線（プラスにするための2本目の線） */
.rule__accordion-title:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%) rotate(90deg);
  width: 14px;
  height: 2px;
  background-color: #F17255;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 開いてる時（縦線を消して「-」にする） */
.rule__accordion-title:not(.collapsed):after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.rule__accordion-body {
  padding: 0 30px;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
	.rule__accordion-title {
		padding: 12px 30px 12px 25px;
	}
	.rule__accordion-title:before,
	.rule__accordion-title:after {
		left: 3px;
		width: 12px;
	}
	.rule__accordion-body {
		padding: 0 10px;
	}
}

/* アコーディオン全体
----------------------------------*/
/*各項目*/
.rule__accordion-item {
	margin: 0 auto;
	padding-left: 20px;
	border-bottom: 1px solid var(--bk); /* 下線 */
}
.rule__accordion-item:last-of-type{
	border-bottom: none;
}

/* ヘッダー・ボタン部 */
.rule__accordion-header {
  position: relative;
  padding: 0;
}

.rule__accordion-title {
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 15px 10px 15px 30px;
  display: block;
}

/* 見出しテキスト */
.rule__title {
  display: block;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
  color: var(--bk);
}

/*accordion内部
----------------------------------*/
.rule__text-wrap {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
}

.rule__attention{
	color: var(--red);
	font-weight: bold;
	font-size: 18px;
}

.rule__item + .rule__item{
	margin-top: 30px;
}

.rule__item p:not(.rule__title, .rule__lead){
	font-size: 14px;
}

.rule__item > .rule__list > li{
	margin-top: 15px;
}
.rule__item > .rule__list > li:first-of-type{
	margin-top: 0;
}

.rule__list li{
	margin-top: 6px;
	font-size: 14px;
}

/* liのタイトル */
.rule__label {
	font-weight: bold;
}

/* 改行 ＋ 字下げ */
.rule__desc {
  display: block;
  margin-left: 1.2em;
}

#rule__accordion-item08 li ol.rule__list{
	padding-left: 1rem;
}


@media(max-width: 767px){
	/*各項目*/
	.rule__accordion-item {
		padding-left: 0;
	}

	.rule__title {
		font-size: 15px;
	}
	
	.rule__text-wrap{
		padding: 20px;
	}
	.rule__attention{
		font-size: 16px;
	}

	.rule__item p{
		font-size: 14px;
	}
	.rule__list li{
		font-size: 14px;
	}
}

/*---------------------------------
	モーダル
----------------------------------*/
.modal__title{
	font-size: 18px;
	font-weight: bold;
}

/*各アイテム*/
.modal__item-title{
	font-size: 16px;
	font-weight: bold;
	margin-left: -10px;
	margin-bottom: 8px;
}

.modal__item-detail{
	line-height: 1.4;
}
.modal__item-detail p{
	font-size: 15px
}
    
.modal__item-detail p.note{
	font-size: 14px
}

.btn-close{
	color: var(--bk);
	border-radius: 100px;
    padding: 5px 15px;
	background: #e9e9e9;
	font-size: 14px;
}
 
/* テーブル */
.item-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.item-detail-table th,
.item-detail-table td {
  padding: 10px 12px;
  border-top: solid 1px #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  font-size: 14px;
}

.item-detail-table th {
  width: 35%;
  background-color: #e9e9e9;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .item-detail-table th {
    width: 38%;
    font-size: 14px;
    padding: 8px;
    white-space: normal;/* 自動折り返し */
  }

  .item-detail-table td {
    width: 62%;
    font-size: 14px;
    padding: 8px;
    word-break: break-word;/* 長い単語や数値の溢れを防止 */
  }

	.modal__title{
		font-size: 18px;
	}
	.modal__item-title{
		font-size: 16px;
	}
	.modal__item-detail p.note{
		font-size: 14px;
	}
}

/*---------------------------------
	固定ボタン
----------------------------------*/
.follow-btn-wrap{
	position: fixed;
	bottom: 0;
	right: 15px;
	z-index: 10;
	width: 100%;
/*    max-width: 353px;*/
    max-width: 210px;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease; 
	pointer-events: none;
	opacity: 0;/*最初非表示*/
	margin-bottom: 70px;
}

/*jsでクラス名付与されたら、表示*/
.follow-btn-wrap.show{
	pointer-events: all; 
	opacity: 1; 
}

/*ボタン*/
.follow-btn{
	position: relative;
    display: block;
    padding: 20px 25px 20px 15px;
    border-radius: 100px;
    border: solid 3px var(--bk);
	text-align: center;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 10px;
}

/* 矢印 */
.follow-btn:before{
	content: "\f0da";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translate(0, -50%);
    font-weight: 900;
    font-size: 29px;
    color: var(--bk);
}

.follow-btn__faq:before{
	color: #fff;
}

.follow-btn__contact{
	background: var(--pink);
}
.follow-btn__faq{
	background: var(--bk);
	color: #fff;
}

/*ホバー時*/
.follow-btn:hover{
	opacity: 0.7;
	transition: 0.3s;
}
.follow-btn__faq:hover{
	color: #fff;
}

@media (max-width : 767px) {
	/*全体*/
	.follow-btn-wrap {
		bottom: 0px;
		right: 0px;
		max-width: inherit;
		background: rgba(255,255,255,0.9);
		padding: 10px 5px;
		margin-bottom: 0px;
	}
	
	/*内枠*/
	.follow-btn-inner{
		display: flex;
		justify-content: center;
		gap : 5px;
	}
	
	/*ボタンデザイン*/	
	.follow-btn{
/*		padding: 7px 25px 7px 15px;*/
		padding: 7px 12px 7px 5px;
		font-size: 16px;
		margin-bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 60px;
	}
	.follow-btn:before{
		font-size: 16px;
		right: 0.4rem;
	}
	
	.follow-btn__contact{
		max-width: 214px;
	}
	.follow-btn__faq{
		max-width: 140px;
	}
	
	/*戻るボタン*/
	#pageup{
		bottom: 85px;
	}
}


/*-------------------------------------------------------------------
	faqページ
--------------------------------------------------------------------*/
/*---------------------------------
	backボタン
----------------------------------*/
article.faq-page{
	position: relative;
}
.back-btn__wrap{
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 10;
	width: 100%;
    max-width: 356px;
}

.back-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
	width: 100%;
    border-radius: 100px;
    border: solid 2px var(--bk);
	font-weight: bold;
	text-align: center;
	background: #fff;
    padding: 0 0 0 40px;
	font-size: 18px;
}

/* 矢印 */
.back-btn__back{
	position: relative;
	display: block;
    padding: 20px 25px 20px 15px;
    border-radius: 100px;
    text-align: center;
    background: var(--bk);
    color: #fff;
    width: 100%;
    max-width: 110px;
}

.back-btn__back:before{
	content: "\f0da";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translate(0, -50%);
    font-weight: 900;
    font-size: 26px;
    color: #fff;
}

/*ホバー時*/
.back-btn:hover{
	opacity: 0.7;
	transition: 0.3s;
}

@media (max-width : 767px) {
	.back-btn__wrap{
		top: 10px;
		left: -20px;
		max-width: 256px;
	}
	
	/*ボタンデザイン*/	
	.back-btn{
		font-size: 14px;
		padding: 0 0 0 30px;
	}
	.back-btn__back{
		padding: 7px 20px 7px 10px;
		max-width: 74px;
	}
	
	.back-btn__back:before{
		right: 0.4rem;
		font-size: 20px;
	}
}


/*---------------------------------
	faq
----------------------------------*/
.section-faq{
	padding: 60px 0;
}

/*タブ全体*/
#TabWrap{
	position: relative;
}

/*タブの中身全体*/
#TabContentsWrap{
	position: relative;
	overflow: hidden;
	padding: 130px 0 0;
	margin-top: 60px;
}
/*背景 上*/
#TabContentsWrap:before{
	content: "";
    display: block;
    position: absolute;
    top: 0;
	left: calc(50% - 960px);
    background: url(/static/img/willer-ad/cheering/bg-line04.svg) center top no-repeat;
    width: 1920px;
    height: 80px;
	z-index: 0;
}

/*タブのナビ全体*/
.tab-nav-wrap { 
  margin: 0 auto; 
  left: 0; 
  right: 0; 
  max-width: 1140px; 
} 

.tab-nav-wrap a{ 
  background: #fff; 
  border: solid;
} 

/*タブのナビ*/
ul.nav-area{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border: none;
	gap: 15px;
	margin: 0 auto;
}

/*各ナビ*/
li.nav-item{
	display: flex;
	flex-wrap: wrap;
	width: calc((100% - 15px) / 2);
    max-width: 270px;
	text-align: center;
}

/*選択外のタブのデザイン*/
.nav-area a.nav-link,
.nav-area > li.nav-item a.nav-link:hover{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
    border-radius: 10px;
	width: 100%;
	color: var(--bk);
    background: #fff;
	border: solid 3px var(--bk);
	font-size: 18px;
	padding: 15px;
	opacity: 1;
}

/*アクティブ(選択中)のナビ*/
.nav-area > li.nav-item a.nav-link.active{
	background: var(--pink);
	border: solid 3px var(--bk);
	color: var(--bk);
}


/*よくある質問 共通
---------------------*/
.faq-wrap {
  max-width: 980px;
  margin: 0 auto;
}

/*角丸*/
.faq-wrap .card,
.faq-wrap .card-header,
.faq-wrap .card-header button{
  border-radius: 0px;
}

/*カード全体*/
.faq-wrap .card{
  background-color: transparent;
  border: none;
  border-bottom: solid 1px var(--bk);
}

.faq-wrap .card:last-of-type{
  margin-bottom: 0;
  border: none;
}

.faq-wrap .card-header{
  position: relative;
  background-color: transparent;
  border: none;
  padding: 0;
}

/*質問番号 質問・回答 共通*/
.faq-wrap .num-label{
  display: inline-block;
  width: fit-content;
  padding: 0;
  background: transparent;
  color: #F17255;
  font-family: "Roboto Condensed", sans-serif;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 18px;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  margin-right: 0;
  text-align: left;
  font-size: 22px;
}

/*質問（ボタン化と矢印アイコンの追加）
---------------------*/
.faq-wrap .card-header button{
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0 40px 0 0;
}

/* 右端の矢印アイコン（下向き▼） */
.faq-wrap .card-header button:before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  /* 三角形 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 7px 0 7px;
  border-color: #F17255 transparent transparent transparent;
}

/* 開いてる時（上向き▲に回転） */
.faq-wrap .card-header button:not(.collapsed):before {
  transform: translateY(-50%) rotate(180deg);
}

/*質問テキスト*/
.faq-wrap .card-header .faq-ttl{
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin-left: 0;
  padding: 15px 0 15px 1.8rem; /* Qの文字とかぶらないよう余白を調整 */
  color: #F17255;
}

/*回答
---------------------*/
.faq-wrap .card-body{
  position: relative;
  padding: 15px 20px 15px 40px;
  background: var(--pink03);
  font-weight: 500;
  margin: 0 0 15px;
}

/*回答番号*/
.faq-wrap .card-body .num-label{
  top: 18px;
  left: 1rem;
}

.faq-wrap .card-body p{
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  margin-left: 0;
  color: var(--bk);
  word-break: break-all;/*英語改行OKにする*/
  margin-bottom: 0;
}

.faq__link-text{
	text-decoration: underline!important;
}
.faq__link-text:hover{
	opacity: 0.7;
}

@media (max-width:767px) {
  .faq{
    padding: 40px 0 60px;
  }
  
  .faq-wrap{
    margin-top: 20px;
  }
  
  .faq-wrap .num-label{
    font-size: 20px;
  }
  
  /*質問テキスト*/
  .faq-wrap .card-header .faq-ttl{
    font-size: 16px;
	padding-left: 1.5rem;
  }
  
  /*回答テキスト*/
  .faq-wrap .card-body p{
    font-size: 14px;
  }

  /*スマホ用 矢印調整*/
	.faq-wrap .card-header button{
		padding: 0 20px 0 0;
	}
	.faq-wrap .card-header button:before{
		right: 5px;
		border-width: 8px 5px 0 5px;
	}
}


@media(min-width:992px) and (max-width:1199px) {
	ul.nav-area{
		max-width: 600px;
	}
}


@media(max-width:991px) {
	.section-faq{
		padding: 120px 0 40px;
	}
}

@media(max-width:767px) {
	.section-faq{
		padding: 80px 0 40px;
	}

	/*タブのナビ*/
	ul.nav-area{
		gap:10px;
	}
	li.nav-item{
		width: calc((100% - 10px) / 2);
	}
	
	.nav-area a.nav-link,
	.nav-area > li.nav-item a.nav-link:hover,
	.nav-area > li.nav-item a.nav-link.active{
		font-size: 15px;
		padding: 7px 5px;
		border-width: 2px;
		min-height: 63px;
	}
	
	/*タブのコンテンツ全体*/
	#TabContentsWrap{
		margin-top: 40px;
		padding: 15vw 0 0;
	}
	#TabContentsWrap:before{
		left: 0;
   		background: url(/static/img/willer-ad/cheering/bg-line04-sp.svg) center top no-repeat;
		background-size: 100%;
		width: 100%;
		height: 13vw;
	}
}