@charset "UTF-8";
/*
Theme Name: POKKE-HP
Theme URI: http://minato-pokke.com/
Description: Pokke Original Template
Version: 2.0
Author: POKKE
Author URI: minato-pokke.com
*/

/*** reset 
***********************************************/

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


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}
ul,nav ul {   list-style:none;}
table {
    border-collapse:collapse;
    border-spacing:0;
}



html{background-image:url(./images/bg.png);}
body {
-webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP',sans-serif;
    /*background-color: #fff6d2;*/

}

body#top_page{ background-image:url(http://minato-pokke.com/pokke/wp-content/uploads/2017/08/main01.png);
background-size:1020px; background-position: center top 140px; background-repeat: no-repeat;
}

#contents_area{
    background-size:1200px; background-position: center bottom 0; background-repeat: no-repeat;}

.pc_no{display:none !important;}

/*** Base 
**********************/
html { font-family: "Ropa Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; font-size: 16px; line-height: 1.5; }
header { background-color: rgba(255, 255, 255,0.9); color: rgb(0, 0, 0); min-width: 960px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding-left: 0; }
ul li { list-style-type: none; }
a { color: inherit; text-decoration: none; }
img { vertical-align: middle; }
.clearfix:before, .clearfix:after { clear: both; content: " "; display: table; }
.cb{ clear: both; }
p{font-size: 14px;}

/*** ヘッダー
**********************/
header{ height: 124px; display: block; z-index: 100;width: 100%; background-image:url(./images/line_header.png);background-position:bottom;background-repeat:repeat-x;min-width:1280px;background-size: 100%;}
header h1{display: block;margin-top: 4px;font-size: 11px;padding-left:6px;}
#top header h1{display: block;margin-top: 4px;font-size: 11px;padding-left:6px;text-align: right}
header nav{width:1280px; margin: 0 auto;display: block;height: 50px;}
header ul{width:1010px;margin: 30px auto 0;}

header ul li{float:left;   }

.hd_logo { float: right;width: 118px;margin-top: -30px;}
#top .hd_logo { width: 150px; width: 118px;position: absolute;
    top: 25px;left: 16px;margin-top: 0;}
.hd_logo img{width: 100%; height: auto;}

.address{ float: right; width: 32%; margin-right:4px; font-size:11px; text-align: right;margin-top: 4px;
}


/*スマホ用に
header{ height: 70px; display: block; border-bottom:solid 1px #CCC; position: fixed; top: 0; z-index: 100;
background-color: rgba(255,255,255,0.9);width: 100%;}
.hd_inner{ display: block; width: 1000px; margin: 0 auto;}
.hd_logo { float: left; width: 100px; margin: 8px 48px 0 8px;}
.hd_logo img{width: 100%; height: auto;}
header h1 {font-size: 11px;width: 40%; float: left;margin-top: 42px;}
.address{ float: right; width: 32%; margin-right: 8px; font-size:11px; text-align: right;margin-top: 12px;
*/

/*** PAGES
**************************/

#wrapper{background-image: url(./images/bg_kumo.png); background-position: top center; background-repeat: no-repeat; background-size: 1500px;}

#pankuzu {
    font-size: 10px;
    line-height: 16px;
    padding: 4px 0;
    text-align: left;
    width: 960px;
    margin: 0 auto;
}

ul#pc_navi{width: 960px; margin:80px auto 0; background-color:#ffcc00; height: 34px; display: block; }
ul#pc_navi li {display: inline-block; line-height: 2.1; }
ul#pc_navi li a{padding: 8px 32px;}

#top_visual {width: 960px; margin: 20px auto 90px;}



#contents{
    width: 960px;
    padding:0;
    margin: 0 auto 16px;
}
#contents:after{visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;}


.pages{width: 700px; padding: 10px; margin: 16px 0;float: right;
min-height: 450px;}
.pages h3.fs16{font-size: 16px;}
section.side_nav{width:150px; padding:0; margin: 16px 0; float: left;
min-height: 450px;}

.side_nav dt{padding-bottom: 14px;text-align: center;}
.side_nav dd:nth-child(1){padding:0;}
.side_nav dd{padding:8px 0 0 20px;font-size: 12px;background-image:url(./images/crayon_green_list.png); background-repeat: no-repeat; background-position: left top 10px; background-size: 16px;}
.side_nav li {
    padding: 4px 10px;}

.title {text-align: center;margin-top: 24px;}
.v_logo {text-align: center;}
.v_logo img{width: 150px;}
.v_title{-ms-writing-mode: tb-rl;/* 縦書き */
    writing-mode: vertical-rl;
font-size: 36px;margin-left:45px;margin-top: 42px;margin-bottom: 100px;}


/*** top section
**************************/

#top_visual{height:640px;position: relative; overflow: hidden; }
.mask{position: absolute;top: 0;left: 0;width: 960px;height:640px;z-index: 400;}
section.top-page ,section.news_info{ margin-bottom: 210px;width: 864px; margin-left: auto;margin-right: auto;}
.mask img{width: 100%;}

#top_visual2{height:440px;position: relative; overflow: hidden; margin-bottom: 70px; width: 700px;margin-left: 260px;}
.mask2{position: absolute;top: 0;left: 0;width:100%;height:auto;z-index: 400;}
section.top-page ,section.news_info{ margin-bottom: 210px;width: 864px; margin-left: auto;margin-right: auto;}
.mask2 img{width: 100.3%;height: auto;}


.top_area{position: relative;display: block;width: 960px; margin:29px auto 0;}
.hikouki{position: absolute; bottom:-100px; left: -200px;z-index: 500;width: 150px;}
.hikouki img{width: 100%;}

.an_nostep {
    animation: img-move 6s infinite;}
.an_train {
    animation: img-move2 12s infinite;}
@keyframes img-move {
  to {
    transform: translateX(1480px) translateY(-440px);
  }
}
@keyframes img-move2 {
  to {
    transform: translateX(1680px);
  }
}

/* balloon animation*/

.yura {

    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    -ms-animation: spin 4s linear infinite;
    -o-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg)translate3d(0, 0, 0);}
    30% {-webkit-transform: rotate(1deg)translate3d(0, 0, 0);}
    70% {-webkit-transform: rotate(-1deg)translate3d(0, 0, 0);}
    100% {-webkit-transform: rotate(0deg)translate3d(0, 0, 0);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg)translate3d(0, 0, 0);}
	30% {-moz-transform: rotate(1deg)translate3d(0, 0, 0);}
    70% {-moz-transform: rotate(-1deg)translate3d(0, 0, 0);}
    100% {-moz-transform: rotate(0deg)translate3d(0, 0, 0);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg)translate3d(0, 0, 0);}
	30% {-ms-transform: rotate(1deg)translate3d(0, 0, 0);}
    70% {-ms-transform: rotate(-1deg)translate3d(0, 0, 0);}
    100% {-ms-transform: rotate(0deg)translate3d(0, 0, 0);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg)translate3d(0, 0, 0);}
	30% {-o-transform: rotate(1deg)translate3d(0, 0, 0);}
    70% {-o-transform: rotate(-1deg)translate3d(0, 0, 0);}
    100% {-o-transform: rotate(0deg)translate3d(0, 0, 0);}
}
@keyframes spin {
	0% {transform: rotate(0deg)translate3d(0, 0, 0);}
	30% {transform: rotate(1deg)translate3d(0, 0, 0);}
    70% {transform: rotate(-1deg)translate3d(0, 0, 0);}
    100% {transform: rotate(0deg)translate3d(0, 0, 0);}
}



.rainbow{position: absolute; bottom:-35px; left: 80px;z-index: 500;width: 300px;}
.rainbowL{position: absolute; bottom:-5px; left: -80px;z-index: 490;width: 230px;}
.rainbow img ,.rainbowL img{width: 100%;}
.balloon{position: absolute; bottom:56px; left: 0;z-index: 501;}
.balloon img{width: 240px;}
.kumo{position: absolute;bottom:200px;right:0px;z-index: 500;width: 100px;}
.kumo1{position: absolute;top:0px;left:50px;z-index: 500;width: 300px;}
.kumo2{position: absolute;bottom:-54px;left:187px;z-index: 500;width: 250px;}
.kumo3{position: absolute;top:0px;right: 0px;z-index: 500;width: 200px;}
.kumo4{position: absolute; bottom:93px; left: 32px;z-index: 500;width: 80px;}
.kumo4 img{width: 100%;}

.kumo img ,.kumo2 img ,.kumo3 img{width: 100%;}

section.top-page h2 ,section.news_info h2{text-align: center;margin-bottom: 90px;background-image: url(images/bg_h3_crayon_mizu.png); background-size:430px; background-repeat: no-repeat; background-position: center;}


h2 img{width: 50%;}
section h3{font-size: 24px;margin-bottom: 30px;text-align: center;
 }
.pages section h3:before{content: url("./images/crayon_wblue_list2.png");}
.pages section h3:after{content: url("./images/crayon_wblue_list2.png");}
.pages section h3.tal:after{content: url("./images/crayon_wblue_list2.png");    margin-left: 8px;}
section h3.fs18{font-size: 18px;}
section h4{font-size: 18px;margin-bottom: 30px;text-align: center;}
.pages section h4:before{content: url("./images/crayon_wblue_list.png");}
section p{margin-bottom: 36px;}
.box:after{ clear: both; content: " "; display: table;}
.left-box{width: 48.5%;float: left;}
.left-box img{width: 100%;}
.right-box{width: 48.5%;float: right;}
.img-box{width: 31%;float: left;}
.right-txt-box{width: 66.9%;float: right;}
.right-txt-box h4{font-size: 14px; margin-bottom:6px; text-align: left;}


/*** 下層pages
************************/
.pages section{ margin-bottom: 210px;}
.pages h2{text-align: center;margin-bottom: 90px;    background-image: url(images/bg_h3_crayon_mizu.png);
    background-size: 430px;
    background-repeat: no-repeat;
    background-position: center;}
.pages h2 img{width: 60%;}
.pages ul {padding-left: 20px;}
.pages ul li{list-style: circle; list-style-position:outside;}

#page_visual{height: 440px;display: block; overflow: hidden;margin-bottom: 90px; border-radius: 50px;}
#page_visual img{width: 100%;}



/*** ニュース表示
*********************/

section.news_info dl{border-top: 1px solid #aaaaaa;font-size: 14px;}
.news_info dt,.news_info dd{border-bottom: 1px solid #aaaaaa;padding: 18px;}
.news_info dt {width: 140px; float: left;}
section.news_info dl:after{clear: both; content: " "; display: table;}


.info_index dl{border-top: 1px solid #aaaaaa;font-size: 14px;}
.info_index dt,.info_index dd{border-bottom: 1px solid #aaaaaa;padding: 18px;}
.info_index dt {width: 140px; float: left;}
.info_index dl:after{clear: both; content: " "; display: table;}

/***ボタン
***********************/
.more_btn{width: 230px;margin: 58px auto 0;}
.more_btn a{display: block; text-align: center;font-size: 14px; border: 0px solid #CCC; border-radius: 23px;padding: 15px;background-image: url(images/crayon_lightgreen.png);}
.more_btn a:hover{background-image: url(images/crayon_yellow.png);}


/*** TABLE
**************************/
table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #dcdcdc;
    margin: 16px 0;
}
tr {
    display: table-row;
    vertical-align: inherit;
}
th {
    background: #f8f8f8;
    border: 1px solid #dcdcdc;
    padding: 10px;}
td {
    padding: 10px;
    border: 1px solid #dcdcdc;
    text-align: center;vertical-align: middle;}

table.v_table td{text-align:left;font-size: 14px;}


/**** PC PAGE FAQ
***************************/
.faq{
margin-bottom:40px;
font-size:16px;
margin-left:10px;
}
.faq dt{
margin-bottom:10px;
}
.faq dd{
margin-bottom:20px;
}
.faqq{
display:inline-block;
margin-right:15px;
font-size:18px;
color:#4169e1;
font-weight:bold;
}
.faqa{
display:inline-block;
margin-right:15px;
font-size:18px;
color:#e62f8b;
font-weight:bold;
}

/*** banner３
*************************/
.bottom_banner3{padding-bottom: 30px;}

/*** totop
************************/
#page-top {
    position: fixed;
    bottom: 280px;
    right: 20px;
    font-size: 110%;
    z-index: 500;
}

.train{position: absolute; bottom:224px; left: 0; z-index: -1;}


/*** footer
**************************/
#footer:before{content:" "; height: 97px; background-image: url(images/bg_footer.png);background-repeat: repeat-x; background-size: 700px;background-position:top center;display:block; }
#footer{padding:0;position: relative;}
.footer_bg{ background-color:#9ed02e;display:block;padding-bottom: 30px;}
footer{width: 960px; margin: 0 auto ; color: #FFF; }
footer h4{ padding: 36px 16px 0;}
footer ul{width: 900px; padding:0 30px 20px;  font-size: 12px;}
footer .ft_list{width: 20%; padding-left: 5%; float: left;}
address{ text-align: center; color: #FFF; font-size: 9px;line-height: 3; display: block; clear: both; width: 100%;z-index: 200;margin-top: -2px;font-style: normal;min-width:1280px; background-color:#9ed02e;background-image: url(images/line_bottom.png);background-repeat: repeat-x; background-size: 50%; background-position:bottom center;}

.fr{float:right;}
.fl{float:left;}
.tal{text-align: left;}
.tac{text-align: center;}
.tar{text-align: right}
.fontS{font-size:80%;}
.fsS{font-size:10px;}
.uline{text-decoration: underline;}

.bg_f_crayon{background-image: url(./images/bg_FFF_crayon2.png);background-size: 700px;background-repeat: repeat-y;}