@charset "utf-8";

@font-face {
    font-family: "a_song_for_jenniferregular";
    src: url("../font/a_song_for_jennifer-webfont.woff2") format("woff2"),
         url("../font/a_song_for_jennifer-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "crayon_1";
    src: url("../font/crayon_1.woff2") format('woff2'),
         url("../font/crayon_1.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}


/*  */

*{
	margin:0;
	padding:0;
	border:0;
}

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

html,body {
	height: 100%;
}

html { font-size: 62.5%; }

body{
	width:100%;
	font-family:-apple-system, BlinkMacSystemFont,'Helvetica Neue',"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", sans-serif;
	font-size:10px;
	font-size:1.0rem;
	line-height:1.6;
	color: #555;
	background: url(../img/stripe_blue.png) top center no-repeat #FFFBEE;
	background-size: contain;
	position: relative;
	left: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*  */

h1{font-size:2.4rem;}
h2{font-size:1.8rem;}
h3{font-size:1.4rem;}
h4{font-size:1.4rem;}
h5{font-size:1.2rem;}
h6{font-size:1.2rem;}

@media screen and (min-width: 768px){
	h1{font-size:3.6rem;}
	h2{font-size:3.0rem;}
	h3{font-size:2.4rem;}
	h4{font-size:1.8rem;}
	h5{font-size:1.4rem;}
	h6{font-size:1.2rem;}
}

.f12{ font-size: 1.2rem; }
.f14{ font-size: 1.4rem; }
.f16{ font-size: 1.6rem; }

.f12,
.f14,
.f16{
line-height:1.7;
}

.jennifer{font-family: 'a_song_for_jenniferregular';}
.crayon{font-family: 'crayon_1';}

/*  */

a{
	outline:none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

a:link{color: #666;}
a:visited{color: #666;}
a:hover{color: #666;}
a:active{color: #999;}

a:link,a:visited,a:active{text-decoration:none;}
a:hover, a:active { outline: 0; text-decoration: none; cursor: pointer;}
a:focus { outline:none; }
a img{border:none;text-decoration:none;}

::selection { background:#333; color:#FFF; text-shadow: none; }
::-moz-selection { background:#333; color:#FFF; text-shadow: none; }

/*

a {
	display: block;
	width: 100%;
	height: 100%;
}

*/

.img-responsive { width: 100%; max-width: 100%; height: auto;}
.img-responsive-overwrite { margin: 0 auto; }

figure {
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
}

.spcut{ display:none; }
@media screen and (min-width: 768px){
	.spcut{ display:block; }
	.br-sp{ display:none; }
}

/* */

.mb10{ margin-bottom: 10px; }
.mb20{ margin-bottom: 20px; }
.mb30{ margin-bottom: 30px; }
.mb40{ margin-bottom: 40px; }
.mb50{ margin-bottom: 50px; }
.mb60{ margin-bottom: 60px; }
.mb70{ margin-bottom: 70px; }
.mb80{ margin-bottom: 80px; }
.mb90{ margin-bottom: 90px; }
.mb100{ margin-bottom: 100px; }

/*  */

.linemarkar{
	background: linear-gradient(transparent 50%, #a8eaff 50%);
}

.linemarkar-s{
	background: linear-gradient(transparent 70%, #a8eaff 70%);
}

.linemarkar2{
	background: linear-gradient(transparent 50%, #fffab2 70%);
}

.wavyline{
	background:url('../img/wave-skyblue.png') bottom repeat-x; 
	background-size: 20px;
}

.stripe{ 
	position: relative;
	padding: 0.3em;
}
.stripe:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	background: repeating-linear-gradient(-45deg, skyblue, skyblue 2px, white 2px, white 4px);
}

.brsp{ display: inline-block; }
.brpc{ display: none; }
@media screen and (min-width: 768px){
	.brsp{ display: none; }
	.brpc{ display: inline-block; }
}