@charset "utf-8";

/*
--------------------------------------------------
font
--------------------------------------------------
*/

@font-face{ 
	font-family: 'FuturaStd-Book'; /* お好きな名前にしましょう */
	src: url url('font/FuturaStd-Book.eot'); /* IE9以上用 */
	src: url('font/FuturaStd-Book.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/FuturaStd-Book.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face{ 
	font-family: 'futura_std'; /* お好きな名前にしましょう */
	src: url url('font/futura_std.eot'); /* IE9以上用 */
	src: url('font/futura_std.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/futura_std.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face{ 
	font-family: 'hosoji'; /* お好きな名前にしましょう */
	src: url('font/hosoji.eot'); /* IE9以上用 */
	src: url('font/hosoji.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/hosoji.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face{ 
	font-family: 'ipa'; /* お好きな名前にしましょう */
	src: url('font/ipa.eot'); /* IE9以上用 */
	src: url('font/ipa.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/ipa.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face{ 
	font-family: 'ngt'; /* お好きな名前にしましょう */
	src: url('font/ngt.eot'); /* IE9以上用 */
	src: url('font/ngt.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/ngt.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face{ 
	font-family: 'tmin'; /* お好きな名前にしましょう */
	src: url('font/tmin.eot'); /* IE9以上用 */
	src: url('font/tmin.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/tmin.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face {
  font-family: "higafont";
  src: url("font/yasashisa_gothic_bold.eot?") format('eot'),
       url("font/yasashisa_gothic_bold.woff") format('woff');
}

/*
--------------------------------------------------
reset_styles
--------------------------------------------------
*/
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, sup, 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;
	vertical-align: baseline;
	box-sizing:border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	margin:0;
	padding:0;
}
html{
	min-height:100%;
	width:100%;
	min-width: 320px;
	scroll-behavior: smooth;
}
body{
	font-family: higafont;
	-webkit-text-size-adjust: 100%;
	letter-spacing:0;
	line-height:1.8;
	height:100%;
	width:100%;
	margin:0px auto;
	background:#fff;
	color:#333;
	min-width: 320px;
}
html,body {
	font-size: 62.5%;
	font-size: 10px\0; /* IE */
}
label{
	cursor:pointer;
}

/* 
--------------------------------------------------
link_styles
--------------------------------------------------
*/

a:link{
	color:#333;
	text-decoration:none;
	transition:all .4s;
}
#contents a:link{
	text-decoration:underline;
}
a:visited{
	color:#333;
	text-decoration:none;
}
a:hover{
	color:#333;
	text-decoration:none;
}
a:active{
	color:#333;
	text-decoration:none;
}
a:focus {
	outline:none;
}
.bl_box{
	cursor:pointer;
}
a:hover img,
input[type="submit"]:hover,
button:hover{
	filter:alpha(opacity=70); /* internet explorer */
	-khtml-opacity:0.7;      /* khtml, old safari */
	-moz-opacity:0.7;       /* mozilla, netscape */
	opacity:0.7;           /* fx, safari, opera */
    -webkit-transition: all .4s;
    transition: all .4s;
}
.noalpha a:hover img{
	filter:alpha(opacity=100) !important; /* internet explorer */
	-khtml-opacity:1.0 !important;      /* khtml, old safari */
	-moz-opacity:1.0 !important;       /* mozilla, netscape */
	opacity:1.0 !important;           /* fx, safari, opera */
}
/*
--------------------------------------------------
clearfix
--------------------------------------------------
*/

.clearfix:after{
	content: " ";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix{
	min-height:1px;
}
* html .clearfix{
	height:1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
.clear,.both{
clear:both;
}
*:first-child+html .clearfix{ zoom: 1; } /* IE7 */

/*
--------------------------------------------------
styles
--------------------------------------------------
*/

div,p,dt,dd,li,address,blockquote,i,span{
	font-style:normal;
	font-size:1.5rem;
	line-height:2;
	letter-spacing:.4px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
textarea{
	margin: 0;
	padding: 0;
	font-size:1.6rem;
	padding:5px 10px;
    outline: none;
    line-height: 1.4;
}
figure{
	display:block;
	line-height:1;
	text-align:center;
}
img{
	border:none;
	line-height:1;
    max-width: 100%;
    height: auto;
}
ol, ul{
    list-style:none;
}
ol.clearfix > li,
ul.clearfix > li{
	float:left;
}
p.indent,
ul.indent{
	text-indent:-1em;
	padding-left:1em;
}
table{
	width:100%;
    border-collapse: collapse;
    border-spacing:0;
}
table th{
	font-weight:normal;
}
caption, th{
    text-align: left;
}
.bold{
	font-weight:bold;
}
.underline{
	text-decoration:underline;
}
.nobdr{
	border:none !important;
}
i{
	font-style:normal;
}

/*
--------------------------------------------------
text_align_styles
--------------------------------------------------
*/

.alnL{text-align:left !important;}
.alnC{text-align:center !important;}
.alnR{text-align:right !important;}


/*
--------------------------------------------------
float_styles
--------------------------------------------------
*/

.fL{float:left !important;}
.fR{float:right !important;}


/* 
---------------------------------------
margin_top
---------------------------------------
*/

.mt0{margin-top:0 !important; }
.mt5{margin-top:5px !important; }
.mt10{margin-top:10px !important; }
.mt15{margin-top:15px !important; }
.mt18{margin-top:18px !important; }
.mt20{margin-top:20px !important; }
.mt25{margin-top:25px !important; }
.mt30{margin-top:30px !important; }
.mt35{margin-top:35px !important; }
.mt40{margin-top:40px !important; }
.mt45{margin-top:45px !important; }
.mt50{margin-top:50px !important; }
.mt55{margin-top:55px !important; }
.mt60{margin-top:60px !important; }
.mt65{margin-top:65px !important; }
.mt70{margin-top:70px !important; }
.mt75{margin-top:75px !important; }
.mt80{margin-top:80px !important; }
.mt85{margin-top:85px !important; }
.mt90{margin-top:90px !important; }
.mt95{margin-top:95px !important; }
.mt100{margin-top:100px !important; }


/* 
---------------------------------------
margin_bottom
---------------------------------------
*/

.mb0{margin-bottom:0 !important; }
.mb5{margin-bottom:5px !important; }
.mb10{margin-bottom:10px !important; }
.mb15{margin-bottom:15px !important; }
.mb20{margin-bottom:20px !important; }
.mb25{margin-bottom:25px !important; }
.mb30{margin-bottom:30px !important; }
.mb35{margin-bottom:35px !important; }
.mb40{margin-bottom:40px !important; }
.mb45{margin-bottom:45px !important; }
.mb50{margin-bottom:50px !important; }
.mb55{margin-bottom:55px !important; }
.mb60{margin-bottom:60px !important; }
.mb65{margin-bottom:65px !important; }
.mb70{margin-bottom:70px !important; }
.mb75{margin-bottom:75px !important; }
.mb80{margin-bottom:80px !important; }
.mb85{margin-bottom:85px !important; }
.mb90{margin-bottom:90px !important; }
.mb95{margin-bottom:95px !important; }
.mb100{margin-bottom:100px !important; }


/* 
---------------------------------------
margin_left
---------------------------------------
*/

.ml0{margin-left:0 !important; }
.ml5{margin-left:5px !important; }
.ml10{margin-left:10px !important; }
.ml15{margin-left:15px !important; }
.ml20{margin-left:20px !important; }
.ml25{margin-left:25px !important; }
.ml30{margin-left:30px !important; }
.ml35{margin-left:35px !important; }
.ml40{margin-left:40px !important; }
.ml45{margin-left:45px !important; }
.ml50{margin-left:50px !important; }


/* 
---------------------------------------
margin_right
---------------------------------------
*/

.mr0{margin-right:0 !important; }
.mr5{margin-right:5px !important; }
.mr10{margin-right:10px !important; }
.mr15{margin-right:15px !important; }
.mr20{margin-right:20px !important; }
.mr25{margin-right:25px !important; }
.mr30{margin-right:30px !important; }
.mr35{margin-right:35px !important; }
.mr40{margin-right:40px !important; }
.mr45{margin-right:45px !important; }
.mr50{margin-right:50px !important; }


/* 
---------------------------------------
padding_top
---------------------------------------
*/

.pt0{padding-top:0 !important; }
.pt5{padding-top:5px !important; }
.pt10{padding-top:10px !important; }
.pt15{padding-top:15px !important; }
.pt20{padding-top:20px !important; }
.pt25{padding-top:25px !important; }
.pt30{padding-top:30px !important; }
.pt35{padding-top:35px !important; }
.pt40{padding-top:40px !important; }
.pt45{padding-top:45px !important; }
.pt50{padding-top:50px !important; }


/* 
---------------------------------------
padding_bottom
---------------------------------------
*/

.pb0{padding-bottom:0 !important; }
.pb5{padding-bottom:5px !important; }
.pb10{padding-bottom:10px !important; }
.pb15{padding-bottom:15px !important; }
.pb20{padding-bottom:20px !important; }
.pb25{padding-bottom:25px !important; }
.pb30{padding-bottom:30px !important; }
.pb35{padding-bottom:35px !important; }
.pb40{padding-bottom:40px !important; }
.pb45{padding-bottom:45px !important; }
.pb50{padding-bottom:50px !important; }


/* 
---------------------------------------
padding_left
---------------------------------------
*/

.pl0{padding-left:0 !important; }
.pl5{padding-left:5px !important; }
.pl10{padding-left:10px !important; }
.pl15{padding-left:15px !important; }
.pl20{padding-left:20px !important; }
.pl25{padding-left:25px !important; }
.pl30{padding-left:30px !important; }
.pl35{padding-left:35px !important; }
.pl40{padding-left:40px !important; }
.pl45{padding-left:45px !important; }
.pl50{padding-left:50px !important; }


/* 
---------------------------------------
padding_right
---------------------------------------
*/

.pr0{padding-right:0 !important; }
.pr5{padding-right:5px !important; }
.pr10{padding-right:10px !important; }
.pr15{padding-right:15px !important; }
.pr20{padding-right:20px !important; }
.pr25{padding-right:25px !important; }
.pr30{padding-right:30px !important; }
.pr35{padding-right:35px !important; }
.pr40{padding-right:40px !important; }
.pr45{padding-right:45px !important; }
.pr50{padding-right:50px !important; }


/*
--------------------------------------------------
PC/SP切り替え 768p以上
--------------------------------------------------
*/
@media screen and (min-width: 768px) {
/*--ここから--*/

.pc{
	display: block;
}
.sp{
	display: none;
}

/*--ここまで--*/
}
/*
--------------------------------------------------
PC/SP切り替え 768px以下
--------------------------------------------------
*/
@media screen and (max-width: 768px) {
/*--ここから--*/

.sp{
	display: block;
}
.pc{
	display: none;
}
/*--ここまで--*/
}


/*
--------------------------------------------------
header
--------------------------------------------------
*/

header {
	position: relative;
	background: url("img/kids/bg01.jpg") no-repeat center bottom;
	background-size: cover;
}

header h1 {
	margin: 0 0 20px;
	text-align: center;
}

header h2 {
	margin: 0 0 20px;
	text-align: center;
}

header .text {
	padding: 0 0 20px;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 0px #fff,-1px -1px 0px #fff,1px -1px 0px #fff,-1px 1px 0px #fff;
	line-height: 1.6em;
}

header .image {
	position: absolute;
	width: 100%;
	top: 70px;
	text-align: center;
}

header .btn {
	position: absolute;
	top: 20px;
	left: 3%;
}

header .btn a {
	padding: 7px 30px;
	color: #fff;
	background: #002b86;
	border: solid 3px #ff0218;
	border-radius: 26px;
	font-size: 24px;
	font-weight: bold;
	box-shadow: 5px 5px 0px 0 rgba(0,0,0,0.3);
}

@media screen and (max-width: 768px) {
	
	header {
		padding: 0 10px;
	}
	
	header .text {
		padding: 0;
		font-size: 20px;
	}
	
}

/*
--------------------------------------------------
footer
--------------------------------------------------
*/

footer {
	background: #0049c5;
}

footer .inner {
	display: flex;
	justify-content: space-between;
	width: 70%;
	margin: 0 auto;
	padding: 10px 0 150px;
}

footer .inner p {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

footer .inner ul li a {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: right;
}

footer .copy {
	padding: 15px 0;
	background: #fff;
}

footer .copy p {
	color: #0049c5;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 768px) {
	
	footer .inner {
		display: block;
		width: 100%;
		padding: 0 20px 50px;
	}
	
	footer .inner p {
		margin: 0 0 30px;
		font-size: 14px;
	}
	
	footer .copy p {
		font-size: 10px;
	}
	
}

/*
--------------------------------------------------
character_area
--------------------------------------------------
*/

.character_area {
	padding: 50px 0 100px;
	background: url("img/kids/bg02.jpg") no-repeat center top;
	background-size: cover;
}

.character_area .inner {
	display: flex;
	justify-content: center;
}

.character_area .inner .entry {
	width: 400px;
	margin: 0 10px;
	padding: 30px 30px 50px 30px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 5px 5px 0px 0 rgba(0,0,0,0.3);
}

.character_area .inner .entry .image {
	margin: 0 0 30px;
	text-align: center;
}

.character_area .inner .entry .text {
	padding: 0 0 15px;
	font-size: 17px;
	font-weight: bold;
}

.character_area .inner .entry.cha01 {
	background: url("img/kids/chara_up01.png") no-repeat center 10px,url("img/kids/chara_bot01.png") no-repeat center bottom,#fff;
}

.character_area .inner .entry.cha02 {
	background: url("img/kids/chara_up02.png") no-repeat center 10px,url("img/kids/chara_bot02.png") no-repeat center bottom,#fff;
}

.character_area .inner .entry.cha03 {
	background: url("img/kids/chara_up03.png") no-repeat center 10px,url("img/kids/chara_bot03.png") no-repeat center bottom,#fff;
}

@media screen and (max-width: 768px) {
	
	.character_area {
		padding: 10px;
	}
	
	.character_area .inner {
		display: block;
	}
	
	.character_area .inner .entry {
		width: 100%;
		margin: 0 0 20px;
		padding: 20px 10px;
		background-size: 90% !important;
	}
	
	.character_area .inner .entry.cha01 {
		
	}
	
}

/*
--------------------------------------------------
funedeki_area
--------------------------------------------------
*/

.funedeki_area {
	padding: 100px 0 0;
	background: url("img/kids/bg03.jpg") no-repeat center top;
	background-size: cover;
}

.funedeki_area .inner {
	width: 900px;
	margin: 0 auto;
	padding: 0 0 150px;
}

.funedeki_area .inner h2 {
	margin: 0 0 50px;
	text-align: center;
}

.funedeki_area .movie_area {
	position: relative;
}

.funedeki_area .movie_area .movie {
	padding: 30px 30px 20px 30px;
	background: #ffe100;
}

.funedeki_area .movie_area .movie iframe {
	width: 100%;
	height: 500px;
}

.funedeki_area .movie_area .higazou {
	position: absolute;
	bottom: -50px;
	left: -130px;
}

.funedeki_area .movie_area .higakki {
	position: absolute;
	bottom: -50px;
	right: -150px;
}

@media screen and (max-width: 768px) {
	
	.funedeki_area {
		padding: 20px 0 0;
	}
	
	.funedeki_area .inner {
		width: 100%;
		padding: 0;
	}
	
	.funedeki_area .movie_area .movie {
		padding: 10px;
	}
	
	.funedeki_area .movie_area .movie iframe {
		height: 250px;
	}
	
	.funedeki_area .movie_area .higazou {
		display: none;
	}
	
	.funedeki_area .movie_area .higakki {
		display: none;
	}
	
}

/*
--------------------------------------------------
funetuku_area
--------------------------------------------------
*/

.funetuku_area {
	background: url("img/kids/bg04.jpg") no-repeat center bottom;
	background-size: cover;
}

.funetuku_area .inner {
	padding: 50px 0 740px;
}

.funetuku_area .inner h2 {
	padding: 0 0 70px;
	text-align: center;
}

.funetuku_area .inner .ship_list {
	width: 1150px;
	margin: 0 auto;
}

.funetuku_area .inner .ship_list ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.funetuku_area .inner .ship_list ul li {
	width: 350px;
	margin: 15px;
	padding: 5px 0 12px;
	background: #2b6dbf;
	text-align: center;
}

.funetuku_area .inner .ship_list ul li .image {
	margin: 0 0 10px;
}

.funetuku_area .inner .ship_list ul li .name {
	color: #fff;
	font-size: 23px;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	
	.funetuku_area {
    	background: url(img/bg04.jpg) no-repeat left bottom;
	}
	
	.funetuku_area .inner {
		padding: 0 0 20px;
	}
	
	.funetuku_area .inner h2 {
		padding: 0;
	}
	
	.funetuku_area .inner .ship_list {
		width: 100%;
		padding: 0 10px;
	}
	
	.funetuku_area .inner .ship_list ul {
		display: block;
	}
	
	.funetuku_area .inner .ship_list ul li {
		width: 100%;
		margin: 0 0 10px;
	}
	
}

/*
--------------------------------------------------
tanomana_area
--------------------------------------------------
*/

.tanomana_area {
	background: url("img/kids/bg05.jpg") no-repeat center bottom #3d8745;
}

.tanomana_area .inner {
	padding: 0 0 330px;
}

.tanomana_area .inner h2 {
	margin: 0 0 50px;
	text-align: center;
}

.tanomana_area .inner .entry_area {
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 1145px;
	margin: 0 auto;
}

.tanomana_area .inner .entry_area .entry {
	position: relative;
	width: 340px;
	margin: 0 20px 50px;
	box-shadow: 5px 5px 0px 0 rgba(0,0,0,0.3);
}

.tanomana_area .inner .entry_area .entry .image img {
	vertical-align: bottom;
}

.tanomana_area .inner .entry_area .entry .text_area {
	padding: 15px 20px;
	background: #fff;
}

.tanomana_area .inner .entry_area .entry .text_area .text {
	height: 5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4em;
}

.tanomana_area .inner .entry_area .entry .text_area .btn {
	text-align: center;
}

.tanomana_area .inner .entry_area .entry .tama {
	position: absolute;
	top: -15px;
	width: 100%;
	text-align: center;
}

@media screen and (max-width: 768px) {
	
	.tanomana_area .inner {
		padding: 0 10px 10px;
	}
	
	.tanomana_area .inner h2 {
		margin: 0 0 20px;
	}
	
	.tanomana_area .inner .entry_area {
		display: block;
		width: 100%;
	}
	
	.tanomana_area .inner .entry_area .entry {
		width: 100%;
		margin: 0 0 30px;
	}
	
	.tanomana_area .inner .entry_area .entry .image {
		text-align: center;
	}
	
	.tanomana_area .inner .entry_area .entry .image img {
		width: 100%;
	}
	
}


/*
--------------------------------------------------
dl_area
--------------------------------------------------
*/

.dl_area {
	background: url("img/kids/bg06.jpg") no-repeat center bottom;
	background-size: cover;
}

.dl_area .inner {
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 200px 0 500px;
}

.dl_area .inner h2 {
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
}

.dl_area .inner .image_area {
	padding: 100px 30px 70px;
	background: url("img/kids/shima_ue.png") repeat-x left top,url("img/kids/shima_yoko.png") repeat-y right top,url("img/kids/shima_ue.png") repeat-x left bottom,url("img/kids/shima_yoko.png") repeat-y left top;
	background-color: #fff;
}

.dl_area .inner .image_area .text {
	margin: 0 0 50px;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}

.dl_area .inner .image_area ul {
	display: flex;
	justify-content: center;
}

.dl_area .inner .image_area ul li {
	margin: 0 20px;
	text-align: center;
}

.dl_area .inner .image_area ul li .image {
	margin: 0 0 15px;
}

@media screen and (max-width: 768px) {
	.dl_area .inner {
		width: 100%;
		padding: 30px 0;
	}
	
	.dl_area .inner .image_area {
		padding: 100px 10px 30px;
	}
	
	.dl_area .inner .image_area .text {
		margin: 0 0 20px;
		font-size: 20px;
	}
	
	.dl_area .inner .image_area ul {
		display: block;
	}
	
	.dl_area .inner .image_area ul li {
		margin: 0 0 20px;
	}
	
}

/* 
--------------------------------------------------
カラーボックス
--------------------------------------------------
*/

.col_box {
	display: none;
}

.col_entry {
	padding: 50px 20px 10px 50px;
	border-radius: 20px;
	border: solid 10px #ff6c00;
	background: #fff;
}

.col_entry h3 {
	margin: 0 0 50px;
	color: #0049c5;
	font-size: 30px;
	font-weight: bold;
}

.col_entry .text_area {
	display: flex;
	padding: 0 0 10px;
}

.col_entry .text_area .left {
	width: 60%;
	padding: 0 30px 0 0;
}

.col_entry .text_area .left .text {
	font-size: 20px;
}

.col_entry .text_area .image {
	width: 40%;
	padding: 0 30px 0 0;
}

.col_entry .btn {
	text-align: right;
}

@media screen and (max-width: 768px) {
	
	.col_entry {
		padding: 10px;
	}
	
	.col_entry h3 {
		margin: 0 0 20px;
	}
	
	.col_entry .text_area {
		display: block;
	}
	
	.col_entry .text_area .left {
		width: 100%;
		padding: 0 0 20px;
	}
	
	.col_entry .text_area .image {
		width: 100%;
		padding: 0;
		text-align: center;
	}
	
}