body{
font-family: "Noto Sans Japanese",Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,'serif';
line-height:1.8em;
}
#page-top{
position: fixed;
background: rgba(21,138,155,0.92);
min-width: 50px;
min-height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 50%;
bottom: 2%;
right: 2%;
z-index: 10;
}
a{
white-space: pre-wrap;
word-wrap: break-word;
}
img {
image-rendering: -webkit-optimize-contrast;
}
#wrapper {
width:100%;
overflow:hidden;
}/*おまじない*/
.co_aka{
color: #FF0000;
}
.bbb{
font-weight: bold;    
}
.pa20{
padding:20px 0;
}
.pa20_spnone{
padding:20px 0;
}
.te_center{
text-align-last: center;
}
.un_line{
text-decoration: underline;
}
.un_red{
border-bottom: solid 3px red;
}
a.un_line:hover{
font-weight: bold;
text-decoration: underline;
}
.img_30{
width: 30%;
margin: 10px auto;
}
.img_30 img,.img_40 img{
width: 100%;
}
.img_40{
width: 40%;
margin: 10px auto;
}
.flex_box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex_50{
width: 45%;
}
.flex_box img{
width: 100%;
}
.top_cont{
background: url("../img/main.jpg")no-repeat center center;
width: 100%;
text-align: center;
height: 500px;
margin:0 auto;
position: relative;
}
.top_cont_sp{
display: none; 
}
header{
padding: 40px 0 0 0;
text-align: center;
position: relative;
}
.logo_img{
width: 20%;
position: absolute;
top: 10px;
left: 10px;
}
.logo_img img{
width: 100%;
}
 /*接種できるのかアニメーション*/
.header_title {
position: absolute;
top: 20%;
left: 3%;
font-size: 120%;
}
.header_title p {
float: left;
color: #222222;/*文章文字*/
font-weight: bold;
}
.scroller {
line-height: 1.7em;
float: center;
overflow: hidden;
height: 2em;
margin: 0.2em 0 0.2em 7px;
font-weight: bold;/*スクロールの文字*/
max-width: 1300px;
}
.scroller span {
display: block;
color: #FF0308;
}
.scroller .inner {
animation: anime15_scroll 5s infinite ease-out;
}
/*アニメーションの秒数*/
@keyframes anime15_scroll {
20%  { margin-top: 0px; }
40%  { margin-top: -1.5em; }
70%  { margin-top: -1.5em; }
100% { margin-top: 0px;  }/*ani*/
}
/*接種できるのかアニメーションここまで*/
h1 {
font-size:180%;
text-align:center;
line-height:0.95em;
font-weight:bold;
color: #FFF;
text-shadow: 
0 0 0.10em #2962FF,
0 0 0.15em #2962FF,
0 0 0.80em #2962FF,
0 0 1.00em #2962FF;
margin: 0 0 30px 0;
}
h2 {
font-size: 120%;
padding: 15px 0;
background-color: #206E7B;
border-radius: 6px;
color: ghostwhite;
text-align: center;
}
h3 {
font-size:150%;
text-align:center;
line-height:0.95em;
font-weight:bold;
color: #FFF;
text-shadow: 
0 0 0.10em #FF2857,
0 0 0.15em #FF2857,
0 0 0.80em #FF2857,
0 0 1.00em #FF2857;
margin: 0 0 30px 0;
}
h3 span{
font-size: 130%;
line-height: 2;
color: #FFFD00;
}
h4 {
font-size:180%;
text-align:center;
line-height:0.95em;
font-weight:bold;
color: #FFF;
text-shadow: 
0 0 0.10em #2962FF,
0 0 0.15em #2962FF,
0 0 0.80em #2962FF,
0 0 1.00em #2962FF;
margin: 0 0 30px 0;
}
h5{
font-size: 120%;
font-weight: bold;
color: #066C90;
padding: 10px 0;
text-align: center;
}
h6 {
padding: .4em .75em;
background-color: #EB4A5E;
border-radius: 6px;
color: ghostwhite;
}

.cont_bg_blue {
background: #E3F8FC;
color: #066C90;
padding: 40px 0;
}
.wi80{
width: 80%;
margin: 0px auto;
max-width: 1200px;
}
/* 初期値等のリセット */
.graph-title , .bar-graph, .bar-graph li, .bar-graph dl,
.bar-graph dt, .bar-graph dd, .bar-graph span {
font-size: 16px;
line-height: 1.7;
margin: 0;
padding: 0;
}
/* グラフのタイトル  横グラフ*/
.graph-title {
font-weight: bold;
text-align: center;
}
.bar-graph {
border: 1px solid #ccc;
margin-bottom: 30px;
}
.bar-graph li {
border-bottom: 1px solid #ccc;
}
.bar-graph li:last-child {
border-bottom: 0;
}
/* 各グラフの横並びは flex */
.bar-graph dl {
display: flex;
justify-content: space-between;
}
/* グラフの項目名は固定幅 */
.bar-graph dt {
border-right: 2px solid #ccc;
flex-basis: 250px; /* 項目名の幅 */
flex-grow: 0;
flex-shrink: 0;
padding: 10px;
background: #E5EDFD;
text-align: right;
}
/* グラフが入る要素は自由幅 */
.bar-graph dd {
flex-grow: 1;
flex-shrink: 1;
padding: 10px 0;
text-align: center;
background: #ffffff;
}
/* グラフ本体 */
.bar-graph dd span {
display: block;
overflow: visible;
white-space: nowrap;
}
/* 各グラフの色と％、各々設定する */
.graph-a dd span {
background-color: #f9534b;
color: aliceblue;
width: 67.72%;
}
.graph-b dd span {
background-color: #688F9E;
color: aliceblue;
width: 20.83%;
}
.graph-c dd span {
background-color: #688F9E;
color: aliceblue;
width: 15.14%;
}
.graph-d dd span {
background-color: #688F9E;
color: aliceblue;
width: 10.89%;
}
.graph-e dd span {
background-color: #688F9E;
color: aliceblue;
width: 5.43%;
}
.graph-f dd span {
background-color: #688F9E;
color: aliceblue;
width: 5.13%;
}

/* レスポンシブ対応、狭いときは flex を解除 */
@media (max-width: 860px) {
.bar-graph dl {
display: block;
}
.bar-graph dt {
border-bottom: 1px solid #ccc;
border-right: 0;
}
}
.normal_cont{
margin:0 auto;
color: #066C90;
padding: 60px 0;
}
.normal_cont02{
margin:0 auto;
color: #066C90;
padding: 60px 0;
background: #FFF8BC;
}
.normal_cont03{
margin:0 auto;
color: #066C90;
padding: 60px 0;
background: #D1F9D2;
}
.inner_box{
width: 90%;
margin: 10px auto;
padding: 30px 0px;
border-radius: 30px;
}
.inner_box p{
padding: 5px 0;
line-height: 1.5;
}
/*タスカルの活躍シーン　*/
.qa-8 dt {
margin-bottom: 1em;
color: #066C90;
font-weight: 600;
}
.qa-8 dt::before,
.qa-8 dd::before {
margin-right: .4em;
}
.qa-8 dt::before {
 content: "Q.";
color: #0480AC;
font-size: 110%;
}
.qa-8 dd {
margin: 0 0 2.5em;
padding: 1em 1.5em;
background-color: #ebf5ff;
color: #333333;
}
.qa-8 dd::before {
content: "A.";
font-size: 110%;
color: #F84B4E;
}
/*申し込みボタン*/
.inq_btn {
position: relative;
z-index: 1;
padding: 1em;
line-height: 1.4;
cursor: pointer;
user-select: none;
transition: transform 0.3s;
color: #FFFFFF;
border: 0;
background: #87C0CD;
text-align: center;
border-radius: 10px;
width: 60%;
margin: 30px auto;
font-size: 110%;
font-weight: bold;
}
.inq_btn:before {
position: absolute;
z-index: -1;
top: 100%;
left: 5%;
width: 90%;
height: 10px;
content: '';
transition:transform 0.3s,opacity 0.3s;
pointer-events: none;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(46,125,50, 0.35) 0%, rgba(46,125,50, 0) 80%);
background: radial-gradient(ellipse at center, rgba(46,125,50, 0.35) 0%, rgba(46,125,50, 0) 80%);
}
.inq_btn:hover {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation: button13 1.5s linear infinite alternate 0.3s;
animation: button13 1.5s linear infinite alternate 0.3s;
color: #0C4C4F;
}
.inq_btn:hover:before {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation: button13_shadow 1.5s linear infinite alternate 0.3s;
animation: button13_shadow 1.5s linear infinite alternate 0.3s;
opacity: 0.4;
}
.inq_btn:focus {
color: #2e7d32;
}
@-webkit-keyframes button13 {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}
@keyframes button13 {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}
@-webkit-keyframes button13_shadow {
0% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: 0.4;
}
50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 1;
}
100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: 0.4;
}
}
@keyframes button13_shadow {
0% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: 0.4;
}
50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 1;
}
100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: 0.4;
}
}
/*申し込みボタンここまで*/
/*バウンド矢印*/
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_arrows {
position: relative;
display: flex;
height: 50px;
margin: 2em auto;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {
position: absolute;
top: calc(50% - 25px);
left: 50%;
width: 40px;
height: 40px;
}
.cp_arrows .cp_arrow::before,
.cp_arrows .cp_arrow::after {
position: absolute;
display: block;
width: 3px;
height: 30px;
content: '';
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
transform: translate(-50%, -50%) rotateZ(-60deg);
transform-origin: bottom right;
border-radius: 10px;
background: #066C90;
}
.cp_arrows .cp_arrow::after {
-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
transform: translate(-50%, -50%) rotateZ(60deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.cp_arrows .cp_bounce {
-webkit-animation: arrow-move09 2s infinite ease-in-out;
animation: arrow-move09 2s infinite ease-in-out;
}
@-webkit-keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
48% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
48% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
/*バウンド矢印ここまで*/
footer{
background: #bbb;
color:#fff;
text-align: center;
padding: 30px;
}
.footer_img{
width: 60%;
margin: 0 auto;
}
.footer_img img{
width: 100%;
}
.fusen{
font-weight: bold;
font-size: 35px;
line-height: 120%;
color: #F9F4F4; 
display: inline-block;
position: relative;
margin-bottom: 0.7em;
padding: .5em .75em;
background-color: #87C0CD;
}
.pukapuka{
animation: img_box_9955 2s linear infinite;
transform-origin: 50% 50%;
}
@keyframes img_box_9955 {
0% { transform: translateY(0) }
50% { transform: translateY(-5px) }
100% { transform: translateY(0) }
}
	

/*スマホサイズ--------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px){ 
header{     
width:100%;
max-width: 100%;
margin:10px auto;
padding-top: 10px;
}
h1 {
font-size:180%;
margin: 40px 0 0px;
line-height:1.2em;
}
h1 span,h4 span,h2 span{
display: block;
}
h2 {
font-size: 100%;
padding: 15px 0;
font-weight: bold;
}
h3,h4{
font-size:120%;
text-align:center;
line-height:1.2em;
margin: 0 0 10px 0;
}
h3 span{
font-size: 120%;
line-height: 1.5;
}
.wi80{
width: 90%;
}
.img_30,.img_40{
width: 70%;
}
.normal_cont03{
padding: 10px 0;
}
.inner_box{
width: 95%;
padding: 20px 0px;
border-radius: 20px;
}
/*接種できるのかアニメーション*/
.header_title {
position: absolute;
top: 13%;
left: 20%;/*中央*/
-webkit-transform: translate(-30%,-30%);
transform: translate(-30%,-30%);
text-align: start;
font-size: 100%;
}
.header_title p {
float:none;
color: #222222;/*文章文字*/
font-weight: bold;
line-height: 0.8em;
}
.scroller {
line-height: 1.5em;
float: left;
overflow: hidden;
height: 1.5em;
margin: 0.2em 0 0.2em 0.1em;
font-weight: bold;/*スクロールの文字*/
}
.scroller span {
display: block;
color: #FF0308;
}
.scroller .inner {
animation: anime15_scroll 5s infinite ease-out;
}
/*接種できるのかアニメーションここまで*/
.logo_img{
width: 30%;
top: 5px;
left: 5px;
}
.cp_arrows {
margin: 2em auto 0;
}
}
@media screen and (max-width: 498px){
h1 {
font-size:180%;
line-height:1.2em;
}
.wi80{
width: 95%;
}
.chart_box{
display: none;
}
.pa20_spnone{
padding:20px 0;
}
.pa20,.pa20_spnone{
font-size: 95%;
line-height: 1.3;
}
.flex_box{
display: flex;
flex-direction: column;
justify-content: center;
}
.flex_50{
width: 95%;
margin: auto;
}
.inq_btn {
width: 85%;
font-size: 120%;
}
.footer_img{
width: 90%;
}
}