@charset "UTF-8";

/* CSS Document */
html {
    scroll-behavior: smooth;
}
body{
	font-family: Hiragino Sans, Arial, sans-serif !important;
	margin: 0;
	background-color: #eee;
}
.all{
	background-color: #fff;
	padding: 15px 20px;
}
.wrapper{
	margin: 0 auto;
	width: 620px;

}
@media screen and (max-width:700px) {
	.all{
		padding: 20px;
	}
	.wrapper{
		width: 100%;
	}
}
p{
	font-size: 19px;
	color: #000000;
	line-height: 1.8;
}
b{
	font-weight: bold;
}
.mark {
	background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffffaf 70%, #ffffaf 100%);
	height: 80%;
	vertical-align: bottom;
}
.baY{
	background-color: rgb(255, 255, 0);
}
.pc{
    display: block ;
}
.sp{
    display: none ;
}
.fwB{
    font-weight: bold;
}
.taC{
	text-align: center!important;
}
.taL{
	text-align: left!important;
}

.fsS{
	font-size: 13px;
    vertical-align: bottom;
}
.fsM{
	font-size: 21px;
}
.fsL{
	font-size: 25px;
}
.fcR{
	color: rgb(255, 0, 0);
}
.fcB{
	color: rgb(0, 0, 255);
}
.fcP{
	color: rgb(255, 0, 255);
}
.fcM{
	color: rgb(240, 102, 102);;
}
.fcK{
	color: rgb(0, 194, 201);
}
.mt0{
	margin-top: -10px !important;
}
.mtb20{
	margin: 20px 0;
}
.mt20{
	margin-top: 20px !important;
}
.mt40{
	margin-top: 40px;
}
.mb20{
	margin-bottom: 20px;
}
.mb60{
	margin-bottom: 60px;
}
.mb0{
	margin-bottom: 0!important;
}
.small {
    /*文字サイズ*/
    font-size: 10px;
    color: #3b3b3b;
    text-align: right;
    /*行間調整*/
    line-height: 1.2;
    /*下側の余白*/
    margin-bottom: 1em;
  }
img {
	width: 100%;
	margin: 0 auto;
	vertical-align: bottom;
}
video{
    width: 100%;
    height: auto;
	vertical-align: bottom;
}
footer {
    font-size: 13px;
    padding: 5%;
    background: #ECECEC;
    text-align: center;
    margin-top: 10px;
}



/* こまごま追加 */
h1{
	margin: 0;
}

.bound2__btnArea {
	margin-top: 30px;
  }
  
   .bound2__btnArea .bound_p {
	color: #000;
	font-size: 19px;
	text-align: center;
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	animation: bound2Btn 2s ease infinite;
  }
  
  @keyframes bound2Btn {
	0% {
	  transform: translateY(0);
	}
  
	15% {
	  transform: translateY(-30px);
	}
  
	30% {
	  transform: translateY(0);
	}
  
	45% {
	  transform: translateY(-30px);
	}
  
	60% {
	  transform: translateY(0);
	}
  
	100% {
	  transform: translateY(0);
	}
  }

  .box-contents {
	border: 1px solid #1627c8;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
   .box-contents .title {
	background-color: #1627c8;
	padding: 0.5em;
  }
  
   .box-contents .content {
	padding: 10px;
  }
  
   .box-contents .content>img+p {
	margin-top: 1em;
	margin: auto;
	text-align: center;
	width: 100%;
  }
  
   .box-contents .content>picture>img {
	margin: auto;
	text-align: center;
  }
  
   .subttl {
	text-align: center;
  
  }
  
   .ann {
	margin-top: 3px;
	text-align: right;
	font-size: 10px;
	color: #7d7d7d;
  
  }

  h2 {
	padding: 15px 10px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 20px;
	background-color: #1627c8;
	margin-top: 40px;
	text-align: center;
  
  }
  
  /*@media only screen and (max-width:839px){*/
  /*スマホ表示で反映させる設定*/
  @media only screen and (max-width:839px) {
	
  
	/*スマホ表示で反映させる設定*/
	.content-main {
	  width: 100%;
	}
  
	 img.pics {
	  width: 100%;
	  height: auto;
	}
  
	 .header-inner {
	  width: 100%
	}
  
	 h1 {
	  font-size: 20px;
	}
  
	 h2 {
	  font-size: 21px;
	}
  
	 h3 {
	  font-style: 17px;
	}
  
	 .sns {
	  display: none;
	}
  
	 .box-voice {
	  flex-direction: column;
	}
  
	 .table-blue {
	  width: 650px;
	}
  
	 .table-wrap {
	  width: 100%;
	  overflow: auto;
	  /*overflow-x:scroll;*/
	}
  
	 .show-sp {
	  display: block;
	}
  }

  .head {
	position: relative;
	border-top: solid 2px #000;
	border-bottom: solid 2px #000;
	background: #fff;
	line-height: 2em;
	padding: 4px 5px;
	margin: 22px 0 5px;
	text-align: left;
	font-size: 24px;
	font-weight: bold;
  }
  
   .point {
	position: absolute;
	left: 0px;
	bottom: 100%;
	background: #1627c8;
	color: #fff;
	border-radius: 5px 5px 0 0;
	padding: 5px 7px 3px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.05em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
  }
  
   .point img {
	width: 13px;
	height: 16px;
	margin-right: 6px;
	image-rendering: -webkit-optimize-contrast;
  }
  
  @media screen and (max-width:600px) {
	 .head {
	  font-size: 20px;
	  line-height: 1.3em;
	  border-top: solid 1px #f30368;
	  border-bottom: solid 1px #f30368;
	  padding: 8px 10px;
	}
  
	 .point {
	  padding: 3px 4px 2px;
	  font-size: 11px;
	}
  
	 .point img {
	  transform: scale(0.8);
	  margin-right: 3px;
	}
  }

  .cp_arrows {
	position: relative;
	/*widget自体の高さ*/
	height: 50px;
	/*widgetの上余白*/
	margin-top: 1em;
	/*widgetの下余白*/
	margin-bottom: 1em;
  }
  
  
  
  /*一個目の矢印*/
  .cp_arrows .cp_arrowfirst {
	/*アニメーション設定。
	 左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
	animation: arrow-move08 2s ease-in-out infinite;
  }
  
  
  
  /*二個目の矢印*/
  .cp_arrows .cp_arrowsecond {
	/*アニメーション設定。
	 左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
	animation: arrow-move08 2s 1s ease-in-out infinite;
  }
  
  
  
  /*共通設定*/
  .cp_arrows .cp_arrow {
	position: absolute;
	/*矢印の到着位置　（縦位置）*/
	top: 100%;
	/*矢印の到着位置　（横位置）*/
	left: 45%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	/*透明度（0=透明、1=不透明）*/
	opacity: 0;
  }
  
   .content :first-child {
	margin-top: 0;
  }
  
  @keyframes arrow-move08 {
  
	/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
	0% {
	  top: 40%;
	  opacity: 0;
	}
  
	/*2sの70％（1.7秒）時に不透明になる*/
	70% {
	  opacity: 1;
	}
  
	/*2s（2秒）時に透明になる*/
	100% {
	  opacity: 0;
	}
  }
  
   .cp_arrows .cp_arrow:before {
	/*矢印左の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
	transform: rotate(30deg) translateX(-39%);
	/*矢印左の棒の起点。（top left=左上）*/
	transform-origin: top left;
  }
  
   .cp_arrows .cp_arrow:after {
	/*矢印右の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
	transform: rotate(-30deg) translateX(39%);
	/*矢印右の棒の起点。（top right=右上）*/
	transform-origin: top right;
  }
  
   .cp_arrows .cp_arrow:before,
   .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	/*矢印の棒の横の長さ*/
	width: 40px;
	/*矢印の棒の縦の長さ*/
	height: 3px;
	content: '';
	/*矢印の色*/
	background: #E91E63;
  }
  
   .cp_arrows *,
   .cp_arrows *:before,
   .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
   .cp_arrows *,
   .cp_arrows *:before,
   .cp_arrows *:after {
	box-sizing: border-box;
  }
  
   content div:after,
   .content p:after {
	clear: both;
  }
  
   .content div :after,
   .content p:after {
	display: block;
	content: "";
	clear: both;
  }

  

/*動きの速さをかえたいときは、 animationの1s(=1秒)の時間を変更 */
.flash {
	animation: flash 1s ease infinite alternate;
	display: flex;
	/*左寄せは flex-start、真ん中寄せはcenter*/
	justify-content: center;
	color: #ff0000;
	font-weight: bold;
	font-size: 21px;
  
  }
  
  /*設定した時間（初期：1秒）の半分の時に透明になる*/
  @keyframes flash {
	50% {
	  opacity: 0;
	}
  }

  .h4_01 {
	font-size: 20px;
	position: relative;
	overflow: hidden;
	padding: 10px 10px 10px 75px;
	border-top: 3px solid #1627c8;
	font-weight: bold;
	margin-bottom: 25px;
	background: #f4f4f4;
	line-height: 1.4
  }
  
   .h4_01:before {
	position: absolute;
	top: -150%;
	left: -100px;
	width: 168px;
	height: 273%;
	content: '';
	-webkit-transform: rotate(20deg);
	transform: rotate(16deg);
	background: #1627c8;
  }
  
   .h4_01 span {
	font-size: 28px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: block;
	padding-top: 4px;
	padding-left: 10px;
	color: #fff;
	font-weight: bold;
  }
  
   .h4_02 {
	font-size: 20px;
	position: relative;
	overflow: hidden;
	padding: 10px 10px 10px 75px;
	border-top: 3px solid #ff7990;
	font-weight: bold;
	margin-bottom: 25px;
	background: #ffffe1;
	line-height: 1.4
  }
  
   .h4_02:before {
	position: absolute;
	top: -150%;
	left: -100px;
	width: 172px;
	height: 273%;
	content: '';
	-webkit-transform: rotate(20deg);
	transform: rotate(16deg);
	background: #ff7990;
  }
  
   .h4_02 span {
	font-size: 28px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: block;
	padding-top: 18px;
	padding-left: 10px;
	color: #fff;
	font-weight: bold;
  }
  
  @media only screen and (max-width: 700px) {
	 .h4_01 {
	  font-size: 20px;
	  padding: 10px 10px 10px 65px;
	}
  
	 .h4_01:before {
	  left: -100px;
	  width: 160px;
	}
  
	 .h4_01 span {
	  font-size: 26px;
	}
  }

  

/*全体的な指定*/
.blackwood_box {
	position: relative;
	/*色*/
	color: #000;
	/*外側の余白。上下｜左右*/
	margin: 10px 0 30px;
  }
  
   .blackwood_box .results {
	display: none;
  }
  
   .blackwood_box .results.show_result {
	display: block;
	/*結果グラフの下余白*/
	margin-bottom: 10px;
  }
  
   .blackwood_box .selecter {
	/*アンケートボックス外側の下余白*/
	margin-bottom: 10px;
  }
  
  
  
  /*アンケートボックス*/
  .blackwood_box .selecter>span {
	/*アンケート枠の線。線の種類｜線の太さ｜線の色*/
	border: solid 2px #000;
	display: block;
	/*アンケート枠の内側余白。上下｜左右*/
	padding: 10px 15px;
	/*アンケート内の文字の太さ*/
	font-weight: bold;
	/*アンケートの角丸*/
	border-radius: 28px;
  }
  
  
  
  /*グラフの上にカーソルを乗せた時*/
  .blackwood_box .selecter>span:hover {
	/*背景色*/
	background: #dd2401;
	/*アンケート枠の線の色*/
	border-color: #fff;
	/*文字色*/
	color: #fff;
	/*アンケートボックスの影。水平の距離｜垂直の距離｜ぼかし具合｜色の指定*/
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
	transition: 200ms;
  }
  
  
  
  /*結果グラフ*/
  .show_result .wood-line {
	/*結果グラフ背景色*/
	background: #dd2401;
	/*結果グラフの文字色*/
	color: white;
	/*結果グラフの角丸*/
	border-radius: 30px;
	/*結果グラフのアニメーション速度 1s=1秒*/
	transition: 1s;
	/*結果グラフの影。水平の距離｜垂直の距離｜ぼかし具合｜色の指定*/
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
	width: 1%;
  }
  
   .wood-line span {
	width: 100%;
	text-align: right;
	display: block;
	/*結果グラフの内側余白。上｜右｜下｜左*/
	padding: 5px 10px 5px 0;
	box-sizing: border-box;
	white-space: nowrap;
  }
  
  @media screen and (max-width:767px) {
	 .wood-line span {
	  /* 結果グラフの右内側余白 */
	  padding-right: 3px;
	  /*結果グラフの文字の大きさ*/
	  font-size: 0.7em;
	}
  }
  
   span.result-text {
	/*結果グラフの文字の太さ*/
	font-weight: bold;
  }
  
   .checked .results span.result-text {
	padding-left: 1.1em;
	position: relative;
	color: red;
  }
  
   .checked .results span.result-text::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 1em;
	height: 1em;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check%22%20class%3D%22svg-inline--fa%20fa-check%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ff0000%22%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  }
  
   span.result-text>span {
	display: block;
	/* border: 1px solid #000000; */
	/* border-radius: 30px; */
  }
  
   .widthimp {
	width: 1% !important;
  }

  

/*widget全体のアニメーションの設定*/
.animate69 {
	text-align: center;
	/*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜進め方｜実行回数｜*/
	animation: animate69 1.5s ease-in infinite;
	box-sizing: border-box;
  }
  
   a.a-btn {
	display: inline-block;
	/*飾り*/
	text-decoration: none;
	/*ボタンの最大幅*/
	max-width: 98% !important;
  }
  
   img {
	/*横幅*/
	width: 100%;
	/*高さ*/
	height: auto;
  }
  
  /*アニメーションの詳細設定*/
  @keyframes animate69 {
  
	/*スタート時*/
	0% {
	  /*傾斜変形角度*/
	  transform: skewX(9deg);
	}
  
	10% {
	  transform: skewX(-8deg);
	}
  
	20% {
	  transform: skewX(7deg);
	}
  
	30% {
	  transform: skewX(-6deg);
	}
  
	40% {
	  transform: skewX(5deg);
	}
  
	50% {
	  transform: skewX(-4deg);
	}
  
	60% {
	  transform: skewX(3deg);
	}
  
	70% {
	  transform: skewX(-2deg);
	}
  
	80% {
	  transform: skewX(1deg);
	}
  
	90% {
	  transform: skewX(0deg);
	}
  
	100% {
	  transform: skewX(0deg);
	}
  }

  h3 {
	position: relative;
	padding: 4%;
	background: #f1c232;
	color: white;
	font-weight: bold;
	font-size: 17px;
	text-align: center;
	margin: 7% 0;
	line-height: 1.5;
	color: #000;
  
  }
  
   h3 span {
	color: #ff0000;
  }