@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-weight: normal;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}



/*====================================
文字の装飾・配置
=====================================*/
strong{
font-weight:bold;
}
#main .bold{
font-weight: bold;
}
#main .center{
text-align: center;
}
#main .left{
text-align: left;
}
#main .right{
text-align: right;
}
#main .red{
color:#ff0000;
}
#main .blue{
color: #0000cd;
}
#main .orange{
color: #ff6600;
}
#main .deeppink{
color: #ff1493;
}
#main .larger{
font-size: 18pt;
}
#main .largest{
font-size: 24pt;
}
#main .smaller{
font-size: 11pt;
}
#main .underline{
text-decoration: underline;
}


/*マーカーアニメーション*/
.c-marker {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 1.5s ease;
font-weight: bold;
}
.c-marker.active{
background-position: -100% .5em;
}




/*====================================
SP・PC共通スタイル
=====================================*/

html{
font-size: 62.5%;
}
body { 
text-align:center;
padding:0;
margin:0 auto;
font-size: 16px;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#FFF;
color: #111;
}
a{
color: #0000ff;
text-decoration: underline;
}

#main{
padding:3% 0;
margin: 5% 2%;
clear: both;
border:1px solid #ccc;
border-radius: 10px;
}

#main h1 {
font-size: 15pt;
font-weight: 600;
line-height: 160%;
text-align: left;
padding: 1% 0;
}

#main .blinking{
-webkit-animation: blink 0.7s infinite alternate;
-moz-animation: blink 0.7s infinite alternate;
animation: blink 0.7s infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

#main p{
font-size:12pt;
line-height:200%;
text-align:left;
padding:4% 3%;
}
#main div{
font-size:12pt;
line-height:210%;
}
#main h3{
background: #fff;
color: #000000;
border-left: 5px solid #FF7B7D;
padding: 5px;
margin: 40px 0 10px 0;
font-weight: bold;
font-size:18pt;
line-height: 34px;
text-align: left;
box-shadow: 1px 2px 5px #cfcfcf;
}
#main h3 strong{
color:#ffff66;
}

#main .box{
border: 3px solid #ff0000;
padding: 2% 2%;
margin: 4% 2%;
}
#main .box h4{
font-weight: 600;
font-size: 14pt;
text-align: center;
}
#main .box ol{
list-style: decimal;
text-align: left;
padding: 3% 3% 1% 9%;
}
#main ol li{
padding: 2% 0;
line-height:210%;
}
#main .box ul{
text-align: left;
padding: 3% 3% 1% 5%;
}
#main li{
font-size:12pt;
line-height:3.3rem;
}
#main ul{
text-align: left;
padding:4% 0 3% 0;
}
#main ul li{
padding: 1% 0 2% 0;
margin: 0;
line-height:210%;
}
#main ul.checkbox li:before{
font-family: FontAwesome;
content: "\f046";
padding-right : 5px;
color: #fd497c;
}

.marker_blue
{font-weight: bold;
font-size:25px;
background-color:#1e90ff;
}

.marker_yellow
{font-weight: bold;
font-size:25px;
background-color:#ffff00;
color:#0000ff;
}

.marker_red
{font-weight: bold;
font-size:25px;
background-color:#ffff00;
color:#FF0000;
}

.marker
{font-weight: bold;
background-color:#ffff00;
}
/*====================================
コメント欄
=====================================*/
#comment{
border:1px solid #ccc;
padding: 3% 2%;
border-radius: 10px;
margin: 15% 3%;
}
#comment h3{
font-size: 1.8rem;
text-align: left;
font-weight: 600;
border-bottom: solid 5px #eaa4ab;
position: relative;
margin: 1% 2% 3% 2%;
padding: 2% 0;
}
#comment h3:after {
position: absolute;
content: "";
display: block;
border-bottom:solid 5px #ffb86f;
bottom: -5px;
width: 30%;
}
#comment dl{
padding: 2%;
text-align: left;
clear: both;
}
#comment dt{clear: both;}
#comment dd{clear: both;}
#comment dt:before{
font-family: FontAwesome;
content: "\f2bd";
font-size: 3.5rem;
padding: 10px 5px 0 0;
color: #ff9fb4;
}
#comment dt{
padding: 1% 0 1% 0;
font-size: 12pt;
line-height: 200%;
}
#comment dd{
padding: 0 2% 5% 10%;
font-size: 11pt;
text-align: right;
}
#comment table{
width: 100%;
}
#comment th{
word-break: keep-all;
vertical-align:middle;
text-align: left;
padding:2% 0;
}
#comment td{
text-align: left;
vertical-align:middle;
padding:2% 0;
}
#comment td input{
width: 200px;
height: 25px;
border:1px solid #ccc;
border-radius: 3px;
}
#comment td span{
font-size: 1rem;
}
#comment td textarea{
width: 220px;
height: 150px;
border:1px solid #ccc;
border-radius: 3px;
margin: 0;
}
#comment input[type="button"] {
border-style:none;
background:#eee;
border:1px solid #ccc;
height: 30px;
}


/*====================================
フッター
=====================================*/
#footer{
text-align:center;
margin:3% auto 0 auto;
font-size:10pt;
line-height:180%;
}
#footer p{
padding: 3% 0;
text-align: center;
}


@media screen and (max-width:640px){
#main img{
width:100%;
height:auto;
}
}

#main img.wdt50{
width:50%;
}

#main img.wdt20{
width:25%;
height:25px;
}


/*------------------------------------PC style------------------------------------*/
@media print,screen and (min-width: 641px){
body { 
text-align:center;
padding:0;
margin:0 auto;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 16px; font-size: 1.6rem;
background: #fff;
color:#111;
}

#main{
width:760px;
padding:0 30px 40px 30px;
margin:20px auto;
background:#fff;
border-radius:1px;
border:1px solid #ccc;
border-radius: 10px;
}
#main h1 {
font-size: 30px;
font-size: 3.0rem;
line-height: 42px;
line-height: 4.2rem;
padding: 0 0 10px 0;
}

#main p{
font-size:18px;
font-size:1.8rem;
line-height:1.9;
text-align:left;
padding:15px;
}
#main .larger{
font-size: 25px;
font-size: 2.5rem;
}
#main .largest{
font-size: 36px;
font-size: 3.6rem;
}
#main .smaller{
font-size: 14px;
font-size: 1.4rem;
}
#main img{
width:80%;
height:auto;
}

#main h3{
font-size:24px;
font-size: 2.4rem;
padding: 25px;
}
#main .box h4{
font-weight: 600;
font-size:21px;
font-size: 2.1rem;
text-align: center;
}

#comment{
width:760px;
padding:10px 30px;
margin:50px auto 20px auto;
}
}