/************************************************************
* 覆蓋 Bootstrap 預設樣式
************************************************************/
:root {
	--primary: #9f9472;
	--secondary:  #12cada;
	--secondary-normal-font: 'Reimin Y30 Medium';
	--secondary-bold-font: 'Reimin Y30 bold';
	--primary-normal-font: 'Shin Go Regular';
	--primary-bold-font: 'Shin Go DeBold';
	/*font-size: calc((1vw + 1vh + 0.5vmin) / 2);*/
}

.bg-primary {
	background-color: var(--primary) !important;
}

.text-primary {
	color: var(--primary) !important;
	line-height:1.5;
	font-weight: bold;
}

.text-secondary {
	color: var(--secondary) !important;	
	line-height:1.5;
	font-weight: bold;
}



.badge-primary {
	padding: 0.6em 0.8em;
	color:var(--primary);
	background-color: #fff;
	border:var(--primary) 1px solid;
	font-size: 100%;
	
}

.badge-red {
	padding: 0.8em 0.8em;
	color:#fff;
	background-color: #c40c43;
	font-size: 0.8rem;
}


/************************************************************
* 自定樣式
************************************************************/
html, body {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "A-OTF 新ゴ Pro", "A-OTF Shin Go Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	-webkit-font-smoothing: antialiased;
}




.h1, h1{
	font-family:  var(--primary-bold-font);
	font-size: 2.5rem; 
	text-align: center; 
	color:var(--secondary);
	letter-spacing: -0.1rem;
	line-height: 1.4;
}

.h2, h2{
	font-family:  var(--primary-bold-font);
	font-size: 2.3rem; 
	text-align: center; 
	color:#b00439;
}

.h3, h3{
	font-family:  var(--primary-bold-font);
	font-size: 2.5rem; 
	text-align: center; 
	color:#FFF;
}

.h4, h4{
	font-family:  var(--secondary-bold-font);
	font-size: 1.7rem; 
	text-align: center;
	font-weight:bold;
}


.highlight{color:var(--secondary);}
.text-xl {font-size: 220%;}
strong, .strong {
	font-family: var(--primary-bold-font) ;
}

p {
	font-size: 1.2rem;
	line-height: 1.8;
	font-weight: normal;
	margin-bottom: 1.8rem;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	/*color: var(--secondary);*/
	text-decoration: none;
}

ul {
	font-size: 1.2rem;
	padding-left: 1rem;
	list-style: none;
}

li {
	position: relative;
	margin-top: 0.3rem;
	padding-left:1rem;
}

.chapter-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size:  80%;
}

.chapter-list li{
	padding: 0!important;
	font-weight:normal;
}

.list-bg{background: #f9f7f5; padding:2rem;border-radius: 30px;}



.check-circle li::before {
    position: absolute;
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-size: 1.25rem;
    left: -1rem;
    top: -3px;
    color: var(--secondary);
	font-weight:bold;
}



.check-circle-b {margin-bottom:0!important;}
.check-circle-b li {padding:0 0 1rem 2rem; font-weight:bold;}

.check-circle-b li:last-child {
	padding:0 0 0rem 2rem; font-weight:bold;
}

.check-circle-b li::before {
    position: absolute;
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-size: 2rem;
    left: -1rem;
    top: -12px;
    color: var(--secondary);
	font-weight:bold;
}






.textyw{background-color: yellow; font-weight:bold;}
.textred{color:#ec016f; font-weight: bold;}
.textgreen{color:var(--secondary); font-weight: bold;}
.under{text-decoration: underline; font-weight: bold;}
.emp{color:#000; font-size:120%;}


li:first-child {
	margin-top: 0;
}

#wrapper {
	background: #fff;
}

.container {
	max-width: 870px; background: #fff;
}

.font-sm {
	font-size: 1em;
	line-height: 1.3;
}



#speaker {
    background: url(../images/speaker-bg.webp) left top;
	background-color: #F2EBE1;
    background-attachment: fixed;
}

#speaker .container, #bonus .container {
	background:#fff;
	padding:0;
	box-shadow: 0 0 10px #9dc5c7;
    -webkit-box-shadow: 0 0 10px #9dc5c7;
	border-radius: 0 0 30px 30px;
}

#bonus {
	background: #fff url(../images/bonus-bg.webp) no-repeat;background-attachment: fixed;}

#bonus .container{padding: 0!important;}	
.bonus-bar {
	width:100%; 
	color:#fff; 
	background-color: #c40c43; 
	padding:20px 0 15px 0;
	text-align: center;
}

.bottom-wave {background:url(../images/wave.jpg) bottom repeat-x; height:50px; width:100%;}

footer {
	background-color: var(--secondary);
	color: #fff;
}

footer p {
	font-size: 16px;
}

footer p:last-child {
	margin: 0px;
}



@media (max-width: 767.98px) {

	:root {
		font-size: 18px;
	}

	body {
		font-size: 0.95rem;
	}

	h3 {margin-bottom:0!important;margin-top:0.3rem!important;}

	section > picture {
		margin-bottom: 0;
	}

	header .container {
		background: none;
	}

	#text-1 .container {
		background: none;
	}

	#text-4 .container {
		background: none;
	}

	.card-body {
		padding: 1.5rem;
	}

	.card-body p:last-child {
		margin-bottom: 0;
	}

	h1,h3 {
		font-size: 1.7rem;
	}

	h4{font-size: 1.1rem;
		line-height: 1.3;}


	p {
		font-size: 1rem;
		padding: 0;
		margin-bottom: 1rem;
		line-height: 1.8;
	}

	.chapter-list {
		font-size:  70%;
	}

	#thanks .container {
		background: none;}
		

	.emp{font-size:115%;}

	.text-xl {font-size: 180%;}
	.font-sm {
		font-size: 0.9em;
	}

	.list-bg{background: #f9f7f5; padding:2rem 1rem;border-radius: 30px; }


	.check-circle-b li{font-size:1.2rem; padding:0 0 0.7rem 1.5rem;}
	.check-circle-b li:last-child {padding:0 0 0rem 1.5rem; font-weight:bold;}
	.check-circle-b li::before {
		position: absolute;
		content: '\f058';
		font-family: 'Font Awesome 5 Free';
		font-size: 1.8rem;
		left: -1rem;
		top: -6px;
		color: var(--secondary);
		font-weight:bold;
	}

	ul {
		font-size: 1rem;
		max-width: 650px;
		font-weight: 900;
		margin-bottom: 0;
	}

	li{line-height: 1.3; margin-top:10px;}

	#bonus {
		background: #fff;}

.bonus-bar {	
	padding:20px 0 15px 0;

}

	.badge-red {
		padding: 0.8em;
		font-size: 0.5rem;
	}

	#speaker {
		background: none;
		background-color: #fff;
	}

	.color-circle {
		width: 48px;
		height: 48px;
		line-height: 50px;
		font-size: 1.25rem;
	}

	#speaker .container, #bonus .container {
		box-shadow:none;
		-webkit-box-shadow: none;
	}

	.bottom-wave {background:none;}


	footer {
		padding-top: 7%;
		padding-bottom: 7%;
		font-size: 13px;
	}

}