@charset "UTF-8";
/* bw ----------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
}

#bw01_trial * {
	box-sizing: border-box;
}

#bw01_trial {
  width: 100%;
  margin: 0 auto;
	overflow: hidden;
}

/* common */
#bw01_trial .caution {
	font-size: 10px;
	font-weight: normal;
	line-height: 1.5;
	text-align: center;
}

#bw01_trial .caution a {
	text-decoration: underline;
}

#bw01_trial .text {
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
}

#bw01_trial .aco_q {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
}

#bw01_trial .aco_a {
	color: #FF8700;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: calc(10 /390 * 100vw);
}

#bw01_trial .u-orange {
	color: #FF8700;
}

#bw01_trial .u-bold {
	font-weight: bold!important;
}

#bw01_trial p {
	font-family: "Noto Sans JP", sans-serif!important;
}

#bw01_trial section {
  width: 100%;
  box-sizing: border-box;
}

#bw01_trial img {
  width: 100%;
  height: auto;
  display: block;
}

#bw01_trial {
	position: relative;
  margin: 0 auto;
  display: block;
}

#bw01_trial .bg {
  background-image: url(../img/bw_bg2.webp);
  background-size: contain;
  background-repeat: repeat-y;
  width: 100%;
  margin: 0 auto;
}

/*  block01 */
#bw01_trial .block01 {
}

#bw01_trial .mv {
	position: relative;
	height: calc(564 / 390 * 100vw);
	z-index: 1;
}

#bw01_trial .mv::after {
	background-image: url(../img/bw_bg.webp);
  background-size:cover;
	background-repeat: no-repeat;
  width: 100%;
	height: calc(534 / 390 * 100vw);
	z-index: -1;
}

#bw01_trial .mv::after,
#bw01_trial .mv_title,
#bw01_trial .mv_ph {
	width:  calc(390 / 390 * 100vw);
	position: absolute;
	display: block;
	content: '';
	left: 50%;
	transform: translateX(-50%);
}

#bw01_trial .mv_ph {
	/* 上部文言に被らないようにオフセットを追加 */
	/*top:  calc(0 / 390 * 100vw);*/
	top:  calc(0 / 390 * 100vw + 5px);
	z-index: 0;
}

#bw01_trial .mv_title.title1 {
	top: 0;
}

#bw01_trial .mv_title.title2 {
	top: calc(417 / 390 * 100vw);
}

#bw01_trial .mv_title.title2 .caution {
	margin-top: calc(-10 / 390 * 100vw);
}

#bw01_trial .block01_lead {
	position: relative;
	margin:	calc(8 / 390 * 100vw) auto 0;
	width: calc(350 / 390 * 100vw);
	z-index: 3;
}

#bw01_trial .block01_list {
	position: relative;
	width: calc(350 / 390 * 100vw);
	margin: 0 auto;
	margin-top: calc(16 / 390 * 100vw);
	display: flex;
	flex-direction: column;
	gap: calc(16 / 390 * 100vw);
	z-index: 1;
}

#bw01_trial .block01_list-item {
	text-align: center;
	background-color: #fff;
	border-radius: calc(8 / 390 * 100vw);
	padding: calc(20 / 390 * 100vw) calc(10 / 390 * 100vw);
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.20);
}

#bw01_trial .block01_list-headings {
	width: calc(330 / 390 * 100vw);
}

#bw01_trial .block01_list .text {
	margin: calc(16 / 390 * 100vw) 0 calc(8 / 390 * 100vw);
}

#bw01_trial .block01_list .text .u-orange {
	font-weight: bold;
}


/*  block02 */
#bw01_trial .block02 {
	padding-top: calc(40 / 390 * 100vw);
}

#bw01_trial .block02_headings {
	width: calc(365 / 390 * 100vw);
	margin: 0 auto;
}

#bw01_trial .block02_ph {
	width: calc(383 / 390 * 100vw);
	margin: 0 auto;
}

#bw01_trial .block02_book {
	overflow: hidden;
	width: 100%;
}

#bw01_trial .block02_book_wrap {
  display: flex;
  width: fit-content;
  animation: marquee 20s linear infinite;
}

#bw01_trial .block02_book_wrap:nth-of-type(1) {
 animation: slide-right 20s linear infinite;
}

#bw01_trial .block02_book_wrap:nth-of-type(2) {
  animation: slide-left 20s linear infinite;
}

@keyframes slide-right {
	0% { transform: translateX(-1133.28px); }
  100% { transform: translateX(0); }
}

@keyframes slide-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-1133.28px); }
}


#bw01_trial .block02_booklist li:last-child {
  margin-right: calc(12 / 390 * 100vw);
}

#bw01_trial .block02_booklist {
  display: flex;
  gap: calc(12 / 390 * 100vw);
  margin: calc(40 / 390 * 100vw) 0 0;
  padding: 0;
  list-style: none;
	animation-timing-function: linear;
	backface-visibility: hidden;
  transform: translateZ(0);
}

#bw01_trial .block02_booklist.list_bottom {
  margin-top: calc(12 / 390 * 100vw);
}

#bw01_trial .block02_booklist img {
  height: calc(152 / 390 * 100vw);
  width: auto;
  display: block;
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.20);
}


/*  block03 */
#bw01_trial .block03 {
	margin: calc(40 / 390 * 100vw) auto;
}

#bw01_trial .block03_inner {
  margin: 0 auto;
  width: calc(350 / 390 * 100vw);
  padding: calc(32 / 390 * 100vw) calc(16 / 390 * 100vw);
  border-radius: calc(16 / 390 * 100vw);
  background: #FFF;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

#bw01_trial .block03_headings {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}

#bw01_trial .block03_list {
	margin: calc(22 / 390 * 100vw) auto calc(20 / 390 * 100vw);
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}

#bw01_trial .block03_list-item {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #000;
	padding: calc(12 / 390 * 100vw) 0;
	display: grid;
  grid-template-columns: calc(108 / 390 * 100vw) calc(80 / 390 * 100vw) auto;
  align-items: center;
}

#bw01_trial .block03_list-item:last-child {
	border: none;
}

#bw01_trial .block03_list-title {
	font-family: "Noto Sans JP", sans-serif!important;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
	text-align: center;
}

#bw01_trial .block03_list-title span {
	font-size: 16px;
	font-weight: normal;
}

#bw01_trial .block03_list-text span {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}

#bw01_trial .block03_list-lead {
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
}

#bw01_trial .block03_list-icon {
	font-family: "Overpass", sans-serif!important;
	font-size: 41px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	flex-direction: column;
  align-items: center;
  display: flex;
}

#bw01_trial .block03_list-icon.u-circle {
	font-family: "Overpass", sans-serif!important;
	font-size: 30px;
	font-weight: normal;
	line-height: 1;
}

#bw01_trial .block03_list-icon.u-triangle {
	font-family: "Overpass", sans-serif!important;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.3;
}

#bw01_trial .block03_list-text {
	font-family: "Noto Sans JP", sans-serif!important;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}


#bw01_trial .block03 .u-small {
	font-size: 10px;
	font-weight: normal!important;
	line-height: 1;
}

#bw01_trial .block03 .u-small.u-orange {
	font-weight: normal;
}

#bw01_trial .block03_list-flex {
	position: relative;
}

#bw01_trial .block03_list-wrap {
	content: '';
	display: block;
	position: absolute;
	width: calc(60 / 390 * 100vw);
	height: calc(58 / 390 * 100vw);
	top: calc(-25 / 390 * 100vw);
	right: calc(-25 / 390 * 100vw);
	z-index: 1;
	background-image: url(../img/icon_catch.webp);
	background-size: cover;
}

#bw01_trial .block03_list-catch {
	position: relative;
	color: #fff;
	font-size: 10px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	padding: calc(18 / 390 * 100vw) 0 0 calc(3 / 390 * 100vw);

}

#bw01_trial .block03_list-item:nth-child(3) .block03_list-catch {
	padding: calc(24 / 390 * 100vw) 0 0 calc(4 / 390 * 100vw);
}

#bw01_trial .block03_list-item:nth-child(4) .block03_list-catch {
	padding: calc(16 / 390 * 100vw) 0 0 calc(3 / 390 * 100vw);
	line-height: 1.1;
}

#bw01_trial .block03_list-item:nth-child(4) .block03_list-lead {
	line-height: 1.4;
}

#bw01_trial .block03_list-item:nth-child(5) {
	align-items: flex-start;
}

#bw01_trial .block03_list-item:nth-child(5) .block03_list-flex {
	width: calc(125 / 390 * 100vw);
}

#bw01_trial .block03_list-catch span {
	color: #fff;
	font-size: 8px;
	font-weight: bold;
	line-height: 1.4;
}

#bw01_trial .block03_list-item .u-caution {
	display: block;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.4;
	padding-top: calc(5 / 390 * 100vw);
}

#bw01_trial .block03 .caution {
	text-align: left;
}

/* block_introduce-plus */
#bw01_trial .block_introduce-plus {
	margin-top: calc(40 / 390 * 100vw);
}
#bw01_trial .block_introduce-plus_inner {
	background: #FFF;
    border-radius: 16px;
	margin: 0 auto;
	width: calc(350 / 390 * 100vw);
}
#bw01_trial .block_introduce-plus_description {
	padding: calc(20 / 390 * 100vw) calc(10 / 390 * 100vw);
	text-align: center;
	/* wbrによる改行用 */
	word-break: keep-all;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}
#bw01_trial .block_introduce-plus_description .caution {
	margin-top: calc(30 / 390 * 100vw);
	text-align: left;
}
#bw01_trial .block_introduce-plus_description .u-orange {
	font-weight: bold;;
}

/* block_coin-usage */
#bw01_trial .block_coin-usage {
	margin-top: calc(20 / 390 * 100vw);
	margin-bottom: calc(40 / 390 * 100vw);
}
#bw01_trial .block_coin-usage_list {
	position: relative;
	width: calc(350 / 390 * 100vw);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: calc(16 / 390 * 100vw);
	z-index: 1;
}
#bw01_trial .block_coin-usage_list .text {
	margin: calc(16 / 390 * 100vw) 0 calc(8 / 390 * 100vw);
}
#bw01_trial .block_coin-usage_list-item {
	text-align: center;
	background-color: #fff;
	border-radius: calc(8 / 390 * 100vw);
	padding: calc(20 / 390 * 100vw) calc(10 / 390 * 100vw);
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.20);
}
#bw01_trial .block_coin-usage_list-item a {
	text-decoration: underline;
}

/*  block04 */
#bw01_trial .block04_inner {
	margin: 0 auto;
	width: calc(350 /390 * 100vw);
	padding: calc(40 /390 * 100vw) calc(16 /390 * 100vw);
	border-radius: calc(16 /390 * 100vw);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 12px 0 rgba(255, 123, 41, 0.20), 0 0 40px 0 rgba(252, 130, 11, 0.50);
}

#bw01_trial .block04_headings {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	margin-bottom: calc(30 /390 * 100vw);
}

#bw01_trial .block04_aco-inner {
	display: none;
}

#bw01_trial .block04_aco-item.open .block04_aco-inner {
	display: block;
}

#bw01_trial .block04_aco-item {
	margin-bottom: calc(48 /390 * 100vw);
}

#bw01_trial .block04_aco-item:last-child {
	margin-bottom: 0;
}

#bw01_trial .block04_aco-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid #000;
	padding-left: calc(5 /390 * 100vw);
	padding-bottom: calc(5 /390 * 100vw);
}

#bw01_trial .block04_aco-inner {
	padding: calc(16 /390 * 100vw) calc(8 /390 * 100vw) 0;
}

#bw01_trial .block04_aco-question img {
	width:  calc(20 /390 * 100vw);
	height:  calc(12 /390 * 100vw);
	margin: 0 calc(10 /390 * 100vw);
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

#bw01_trial .block04_aco-item.open .block04_aco-question img {
  transform: rotate(180deg);
}

#bw01_trial .block04_aco-text {
	font-size: 13px;
	font-weight: normal;
	line-height: 1.8;
	margin-top: calc(10 /390 * 100vw);
}

#bw01_trial .block04_aco-ph {
	width: calc(350 /390 * 100vw);
	margin-left: calc(-24 /390 * 100vw);
}

#bw01_trial .block04_aco .caution {
	margin-top: calc(10 /390 * 100vw);
	text-align: left!important;
}

#bw01_trial .block04_aco a {
	text-decoration: underline;
}

/*  block05 */
#bw01_trial .block05 {
	padding: calc(48 /390 * 100vw) 0 calc(115 /390 * 100vw);
}

#bw01_trial .block05_headings {
	width: calc(374 /390 * 100vw);
	margin: 0 auto;
}

#bw01_trial .copyright {
	font-size: 10px;
	font-weight: normal;
	line-height: 1.5;
	text-align: center;
	margin-top: calc(40 /390 * 100vw);
}

#bw01_trial .fixed_text {
	font-size: 12px;
}

#bw01_trial .fixed_caution {
	font-size: 10px;
	margin-top: calc(-25 /390 * 100vw);
}

#bw01_trial .fixed_caution a {
	text-decoration: underline;
}

#bw01_trial .fixed_btn {
	margin-top: calc(-25 /390 * 100vw);
	font-size: 20px;
	font-weight: bold;
	display: flex;
	width: calc(379 /390 * 100vw);
	height: calc(139 /390 * 100vw);
	padding: calc(10 /390 * 100vw) 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image:  url(../img/btn_fllow.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#bw01_trial .fixed_btn span {
	font-size: 11px;
	font-weight: normal;
}

/* 注意事項用スタイルここから */
/* 既存スタイルから移植しているが、独自に追加・削除したスタイルがある */
#bw01_trial .box_out {
	margin: 0 auto calc(24 /390 * 100vw);
	padding: calc(20 /390 * 100vw) calc(16 /390 * 100vw);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 12px 0 rgba(255, 123, 41, 0.20), 0 0 40px 0 rgba(252, 130, 11, 0.50);
}

#bw01_trial .box_chui {
	color: #4d4d4d;
	font-size: 12px;
	line-height: 1.8;
	margin: 0 auto;
}

#bw01_trial .h1_chui {
	margin: 0 0 calc(14 /390 * 100vw);
	padding: 0;
	background: transparent;
	color: #FF8700;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.08em;
}

#bw01_trial .h1_chui + br {
	display: none;
}

#bw01_trial .attention {
	margin: 0;
	padding-left: 1.5em;
}

#bw01_trial .attention li {
	list-style: disc;
	margin-left: 0;
	line-height: 1.8;
}
/* 注意事項用スタイルここまで */

/*  PC */
/* もともと 768px だったが iPad mini でも固定幅表示にするため変更 */
@media (min-width: 744px) {
	#bw01_trial {
		max-width: 390px;
		width: 100%;
		margin: 0 auto;
	}

	#bw01_trial * {
		max-width: 100%;
  	box-sizing: border-box;
	}

	#bw01_trial img {
	  max-width: none;
	}

	#bw01_trial .mv::after {
		background-image: url(../img/bw_bg.webp);
	  background-size:cover;
		background-repeat: no-repeat;
	  width: 100%;
		height: 534px;
	}

  #bw01_trial .caution {
    font-size: 10px;
  }

  #bw01_trial .text,
  #bw01_trial .aco_q,
  #bw01_trial .aco_a {
    font-size: 16px;
  }

  #bw01_trial .aco_a {
    margin-bottom: 10px;
  }

  #bw01_trial .mv {
    height: 564px;
  }

  #bw01_trial .mv::after {
    height: 534px;
  }

  #bw01_trial .mv_ph {
    top: 70px;
  }

  #bw01_trial .mv_title.title2 {
    top: 417px;
  }

  #bw01_trial .mv_title.title2 .caution {
    margin-top: -10px;
  }

  #bw01_trial .block01_lead {
    margin: 8px auto 0;
		width: 350px;
  }

  #bw01_trial .block01_list {
    width: 350px;
    margin-top: 16px;
    gap: 16px;
  }

  #bw01_trial .block01_list-item {
    border-radius: 8px;
    padding: 20px 10px;
  }

  #bw01_trial .block01_list-headings {
    width: 330px;
  }

  #bw01_trial .block01_list .text {
    margin: 16px 0 8px;
  }

  /* block02 */
  #bw01_trial .block02 {
    padding-top: 40px;
  }

  #bw01_trial .block02_headings {
    width: 365px;
  }

  #bw01_trial .block02 {
    padding-top: 60px;
  }

  #bw01_trial .block02_headings {
    width: 365px;
    margin: 0 auto;
  }

  #bw01_trial .block02_ph {
    width: 383px;
    margin: 0 auto;
  }

	#bw01_trial .block02_book {
	  overflow: hidden;
	  width: 390px;
	  margin: 0 auto;
	}

	#bw01_trial .block02_book_wrap {
	  display: flex;
	  width: max-content;
	  max-width: none !important;
	}

	#bw01_trial .block02_book_wrap img {
	  max-width: none !important;
	  height: 152px;
	  width: auto;
	  display: block;
	  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.20);
	}

	#bw01_trial .block02_booklist {
	display: flex;
	gap: 12px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	flex-shrink: 0;
	}

	#bw01_trial .block02_booklist.list_bottom {
	  margin-top: 12px;
	}

	#bw01_trial .block02_booklist li:last-child {
	  margin-right: 12px;
	}

	/* #bw01_trial .block02_booklist img {
  height: 152px;
  width: auto;
  display: block;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.20);
	} */

  #bw01_trial .block03 {
    margin: 40px auto;
  }

  #bw01_trial .block03_inner {
    width: 350px;
    padding: 32px 16px;
    border-radius: 16px;
  }

  #bw01_trial .block03_list {
    margin: 22px auto 20px;
  }

  #bw01_trial .block03_list-item {
    padding: 12px 0;
    grid-template-columns: 108px 80px auto;
  }

  #bw01_trial .block03_list-wrap {
    width: 60px;
    height: 58px;
    top: -25px;
    right: -25px;
  }

  #bw01_trial .block03_list-catch {
    padding: 18px 0 0 3px;
  }

	#bw01_trial .block03_list-item:nth-child(3) .block03_list-catch {
	padding: 24px 0 0 4px;
}

#bw01_trial .block03_list-item:nth-child(4) .block03_list-catch {
	padding: 16px 0 0 3px;
	line-height: 1.1;
}

#bw01_trial .block03_list-item:nth-child(5) .block03_list-flex {
	width: 125px;
}

#bw01_trial .block_introduce-plus_inner {
    border-radius: 8px;
	width: 350px;
}
#bw01_trial .block_introduce-plus_description {
    padding: 20px 10px;
}
#bw01_trial .block_introduce-plus_inner .caution {
	margin: 16px 0 0;
}

#bw01_trial .block_coin-usage_list {
	width: 350px;
	margin: 0 auto;
}
#bw01_trial .block_coin-usage_list .text {
	margin: 16px 0 8px;
}
#bw01_trial .block_coin-usage_list-item {
	border-radius: 8px;
	padding: 20px 10px;
}

  #bw01_trial .block04_inner {
    width: 350px;
    padding: 40px 16px;
    border-radius: 16px;
  }

  #bw01_trial .block04_headings {
    margin-bottom: 30px;
  }

  #bw01_trial .block04_aco-item {
    margin-bottom: 48px;
  }

  #bw01_trial .block04_aco-question {
    padding-left: 5px;
    padding-bottom: 5px;
  }

  #bw01_trial .block04_aco-inner {
    padding: 16px 8px 0;
  }

  #bw01_trial .block04_aco-question img {
    width: 20px;
    height: 12px;
    margin: 0 10px;
  }

  #bw01_trial .block04_aco-text {
    margin-top: 10px;
  }

	#bw01_trial .block04_aco-ph {
	width: 350px;
	margin: 0 auto;
}

  #bw01_trial .block04_aco .caution {
    margin-top: 10px;
  }

  #bw01_trial .block05 {
    padding: 48px 0 115px;
  }

  #bw01_trial .block05_headings {
    width: 374px;
  }

  #bw01_trial .fixed_caution {
    margin-top: -25px;
  }

  #bw01_trial .fixed_btn {
    width: 379px;
    height: 139px;
    padding: 10px 0;
		margin: 0 auto;
		margin-top: -25px;
  }

	#bw01_trial .box_out {
		margin-bottom: 24px;
		padding: 40px 16px;
	}

	#bw01_trial .h1_chui {
		margin-bottom: 24px;
	}
}