* {
margin: 0;
padding: 0;
overflow: auto;
border: 0px;
outline: 0px none black;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

body {
background-color: #FFF;
-webkit-text-size-adjust: none;
/*font-family: 'Roboto', 'Noto Sans', sans-serif;*/
margin: 0px;
padding: 0px;
outline: 0px none black;
word-wrap: break-word;
font-size: 14px;
line-height: 200%;
color: #0d7bc3;/*rgb(55,55,55);*/
color: rgb(55,55,55);
letter-spacing: 1px;
font-family: 'Roboto', 'Noto Sans JP';
}

/* -------------------------------- */

p {
font-size: 17px;
line-height: 42px;
}

.sub p {
font-size: 17px;
line-height: 43px;
}

h1 {
display: block;
overflow: visible;
font-size: 51px;
line-height: 68px;
font-weight: 700;
text-decoration: none;
letter-spacing: 1px;
}

h2 {
display: block;
overflow: visible;
font-size: 42px;
line-height: 68px;
font-weight: 700;
text-decoration: none;
}

h3 {
display: block;
overflow: visible;
font-size: 40px;
line-height: 55px;
font-weight: 700;
text-decoration: none;
}

h4 {
display: block;
overflow: visible;
font-size: 38px;
line-height: 57px;
font-weight:  bold;
text-decoration: none;
}

/*タイトル下の無駄な線*/
.ks-ub {
width: 40px;
height: 5px;
background-color: black;
margin-top: 33px;
margin-bottom: 38px;
margin-left: auto;
margin-right: auto;
}

.ks-ub-sml {
width: 32px;
height: 4px;
background-color: black;
margin-top: 32px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

.ks-ub-sml-bl {
width: 32px;
height: 4px;
background-color: #0d7bc3;
margin-top: 28px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

.ks-ub-bl {
width: 40px;
height: 5px;
background-color: #0d7bc3;
margin-top: 33px;
margin-bottom: 38px;
margin-left: auto;
margin-right: auto;
}

.ks-bb {
background-color: black;
text-align: center;
font-size: 12px;
padding: 7px;
width: 100%;
letter-spacing: 1px;
}
.ks-bb a:link,.ks-bb a:visited,.ks-bb a:active,.ks-bb a:hover {
list-style:none;
text-decoration: none;
color: white;
width: 100%;
display: block;
}


.ks-wb a:link,.ks-wb a:visited,.ks-wb a:active,.ks-wb a:hover {
  color: white;
font-weight: 300;
font-size: 12px;
line-height: 150%;
padding: 12px;
padding-left: 25px;
padding-right: 25px;
border: 1px solid rgba(255,255,255,0.5);
overflow: visible;
text-decoration: none;
letter-spacing: 1px;
}

/* -------------------------------- */
/* -------------------------------- */
/* YouTube */



.ks-yt {
display: block;
overflow:hidden;
width: 100%;
position: relative;
text-align: center;
}

.ks-yt iframe {
pointer-events: none;
overflow:visible;
position: relative;
text-align: center;
background-color:rgba(0,0,0,1.00);
z-index: 0;
}

.ks-yt-mesh {
  width: 100%;
    height: 100%;
position:absolute;
z-index: 4;
background-image: url('../img/mesh.png');
}

.ks-yt-ov {
  width: 100%;
text-align: center;
position:absolute;
z-index: 5;
margin-left: auto; margin-right: auto;
top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}

/* -------------------------------- */
/* -------------------------------- */
/* BOX */

.ks-box {
background-size: cover;
background-position: center;
}

.ks-box-50 {
background-size: cover;
background-position: center;
width: 50%;
}

@media screen and (max-width: 750px){
.ks-box-50 {
width: 100%;
}
}

.ks-box-33 {
background-size: cover;
background-position: center;
width: 33.33%;
}

@media screen and (max-width: 750px){
.ks-box-33 {
width: 100%;
}
}

/* -------------------------------- */
/* -------------------------------- */
/* 小見出し */

.ks-kmd h2 {
font-size: 32px;
line-height: 150%;
}

.ks-kmd h6 {
font-size: 11px;
line-height: 200%;
color: rgba(0,0,0,0.33);
padding-bottom: 14px;
}

.ks-kmd p {

}

.ks-kmd-ubd {
width: 40px;
height: 5px;
background-color: black;
margin-top: 33px;
margin-bottom: 38px;
}

/* -------------------------------- */
/* -------------------------------- */
/* 小見出し */




/* 円の基本形 */
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column;
  vertical-align: top;
}

.kaku {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  vertical-align: top;
  border-bottom: 1px solid #0d7bc3;
}

/* 円の大きさ */
.size_normal{
  width: 100px;
  height: 100px;
}

.size_s{
  width: 62px;
  height: 100px;
}

.mr_bd{
  width: 12px;
  height: 50px;
}

/* 文字の大きさ */
.mr_14 {
  font-size: 13px;
  line-height: 1.5em;
}

.mr_11 {
  font-size: 11px;
  line-height: 28px;
    color: #0d7bc3;
}

/* 円と文字の色 */
.mr_bl {
  color: #0d7bc3;
  border: 1px solid #0d7bc3;
}



body {
    /*animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;*/
    opacity:0;
}

@keyframes fadeIn {
    0% {opacity: 0}
	50% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
	50% {opacity: 0}
    100% {opacity: 1}
}