@charset "utf-8";

/* body
------------------------ */

body {
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size:16px;
	color:#565656;
	line-height:1.7;
	background: url(../img/bg.png) repeat;
}



/* a
------------------------ */

a { 
	color:#08C;
	text-decoration:none;
}
a:hover{
	color:#999;
}
a:active, 
a:focus {
	outline: 0;
}

#main a { 
	text-decoration: underline;
}
#main a:hover { 
	text-decoration: none;;
}


/* img
------------------------ */

a:hover img {
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}
#logo a:hover img {
	filter: alpha(opacity=100) !important;
	-moz-opacity:1 !important;
	opacity:1 !important;
}



/* インデント
------------------------ */
.ind-pc p {
    text-indent:1em;
    padding-bottom: 0 !important;
}
.ind-sp p {
    font-size: 0.8rem;
    padding: 0 !important;
}


/* wrapper
------------------------ */
#wrapper{
	margin: 0 auto;
	width: 960px;
}
#container {
	padding: 10px 0 0 0;
}




/* -----------------------------------------------------------
	#header
		ヘッダー
----------------------------------------------------------- */
#header {
	width: 960px;
	height:80px;
	overflow:hidden;
	margin: 0 auto;
}

#header #logo {
	clear: both;
	float: left;
	font-size: 14px;
	font-weight: bold;
}
#headerDesc {
	height: 20px;
}
#headerDescArea {
	width: 960px;
	margin: 0 auto;
}

#headerDescArea h1 {
	font-size: 11px;
	font-weight: normal;
	float: left;
	margin: 2px 0 0 10px;
	height: 20px;
	color:#555;
	float:right;
}
#headerDescArea h2 {
	font-size: 10px;
	font-weight: normal;
	float: right;
	margin: 2px 10px 0 0;
	height: 20px;
}


/* #utilityNav
----------------------------------------------------------- */
#header #utilityNav {
	float: right;
	text-align: right;
	padding-top: 50px;
}

#header #utilityNav li {
	display: inline;
	list-style-type: none;
	margin-left: 10px;
	padding:0 0 5px 8px;
	background: url(../img/list-arw.png) no-repeat;
	background-position:0% 30%;
	font-size:11px;
}


/* -----------------------------------------------------------
	#navi
		ナビ
----------------------------------------------------------- */
#navi {
	clear: both;
/*	background: #fff url(../img/navi_bg.png);*/
	height: 50px;
}
.p-other #navi { margin-bottom:20px; }

/* #gNav
----------------------------------------------------------- */
#navi #gNav {
	clear: both;
	overflow: hidden;
}

* html #navi #gNav {
	height: 1%;
}

#naviArea {
	width: 960px;
	margin: 0 auto;
	border-left-width: 1px;
	border-left-style: dashed;
	border-left-color: #dcabb3;
}

#navi #gNav li {
	float: left;
	text-align: center;
}

#navi #gNav li a:link,
#navi #gNav li a:visited,
#navi #gNav li a:active {
	color:#fff;
	font-size: 14px;
    line-height: 20px;
	text-decoration:none;
	display:block;
	width: 160px;
	height: 40px;
	padding-top: 16px;
	font-weight:bold;
	letter-spacing:2px;
	background: url(../img/gNav_li_bg.png);
}
#navi #gNav li a.gn2 {
	background: url(../img/gNav_li_bg2.png);
}
#navi #gNav span {
	color:#D4E5B5;
	font-size: 10px;
	font-weight:normal;
}
#navi #gNav li a.gn2 span {
	color:#FFCCCC;
}
#navi #gNav li a:hover{
	color:#fff;
	background-position:0 -60px;
	text-decoration:none;
}






/*----------------------------------------------------
	#contents
----------------------------------------------------*/
#contents {
	width: 960px;
	margin: 20px auto 0 auto;
	padding-bottom: 60px;
	text-align: left;
}

#contents .pageTop {
	clear: both;
	text-align: right;
}


/*.contentsBox
----------------------------------------------------*/
.contentsBox {
	margin: 0 0 20px 15px;
	min-height:1px;
}

.contentsBox .box {
	font-size: 12px;
	width: 280px;
	float: left;
	border: solid #e9dab6 1px;
	margin-right: 10px;
	padding: 10px;
}





/*----------------------------------------------------
	#main
		メイン
----------------------------------------------------*/
#main {
	float: right;
	width: 700px;
	margin-bottom:20px;
}

#main p{
	padding: 15px 10px 15px 10px;
}
#main .kiji p{
	padding: 0 10px 15px 10px;
}
#main h2{
	color: #fff;
	font-size:1.3rem;
	font-weight: normal;
	width: 700px;
	height: 50px;
	background: url(../img/bg-h2.png?d=1) no-repeat;
	padding: 10px 0 0 16px;
}
body.p-other #main h2{
	margin-bottom:5px;
}
body#p-nursery #main h2,
body#p-support #main h2,
body#p-support_photo #main h2,
body#p-childcare #main h2{
	background: url(../img/bg-h2b.png?d=1) no-repeat;
}
#main h2 span {
	font-size:80%;
}
#main h3{
	color: #7a522b;
	font-size:1.15rem;
	font-weight: normal;
    line-height: 1.4;
	width: 700px;
	height: 31px;
	background: url(../img/bg-h3.png) no-repeat;
	padding: 8px 0 0 16px;
}
body.p-other #main h3{
	margin-bottom:20px;
}


#main h4{
	color: #629124;
	font-size:1rem;
	font-weight: normal;
	margin: 0 0 10px 0;
}

#main .section{
	margin: 0 10px 20px 10px;
	padding: 10px 5px;
}
#main .section img {
	border: solid 1px #ddd;
	padding:2px;
	background:#fff;
}
#main .sectionBorder{
	margin: 0 0 20px 0;
	padding: 15px 20px;
	border: solid #e9dab6 1px;
	min-height:1px;
}

#main .box {
	width: 190px;
	float: left;
	border-right: solid #ddd 1px;
	margin-top: 5px;
	margin-right: 5px;
	padding: 0 15px 0 10px;
}
#main .box .TXT-S{
}
#main .box-end {
	padding: 0 0 0 10px !important;
	border-right: 0 none !important;
}

#main ul li{
	list-style-type: none;
	padding: 0 0 5px 8px;
	background: url(../img/list-arw.png) no-repeat;
	background-position:0% 30%;
}

#main ul.qa li.q{
	list-style-type: none;
	padding: 5px 0 0 30px;
	background: url(../img/list-qa-q.png) no-repeat;
}
#main ul.qa li.a{
	list-style-type: none;
	margin-bottom:20px;
	padding: 5px 0 0 30px;
	background: url(../img/list-qa-a.png) no-repeat;
}


#date {
text-align: right;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
font-weight:bold;
color:#858585;
}

#next {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}

/* テーブル装飾
----------------------------------------------------------- */
#main .t-head {
	border-collapse: collapse;
	border: solid 1px #e9dab6;
	padding: 10px;
	background-color: #f1e6cf;
	width: 80px;
}

#main .t-item {
	border-collapse: collapse;
	border: solid 1px #e9dab6;
	padding: 10px;
	width: 535px;
}



/* -----------------------------------------------------------
	#sub
		サイドバー、サブ
----------------------------------------------------------- */
#sub {
	float: left;
	width: 230px;
}

#sub h3{
	color: #7a522b;
	font-weight: normal;
	width: 230px;
	height: 35px;
	background: url(../img/bg-side-h3.png) no-repeat;
	margin:0;
	padding: 9px 0 0 16px;
}
#sub h3 span {
    font-size: 0.8rem;
}

#sub ul {
	margin: -5px 0 20px 0;
	padding: 5px 10px 0 14px;
	border: solid #e9dab6 1px;
}

#sub ul li{
	list-style-type: none;
	padding: 5px 0 5px 8px;
	background: url(../img/list-arw.png) no-repeat top left;
	background-position:0% 49%;
	border-bottom: solid #e9dab6 1px;
	margin: 5px 0 5px;
}
#sub ul li:last-child {
    border-bottom: 0;
}
#sub ul#left-news li {
	padding: 5px 0 5px 1px !important;
	background:none !important;
}
#sub .sectionBorder{
	font-size: 12px;
	margin: -5px 0 20px 0;
	padding: 10px 10px 10px 10px;
	border: solid #e9dab6 1px;
}

#sub .box {
	border-bottom: solid #CCC 1px;
	padding: 5px;
}

#sub .box-end {
	padding: 5px;
}



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

#footer{
	clear:both;
	padding: 10px 0;
	background:#fff;
}

#footer .inner{
	width:910px;
	overflow: hidden;
	margin:0 auto;
}

* html #footer .inner{height:1%;}

#footer #logo{
float:left;
padding: 10px 0 5px;
width: 292px;
}

address{
padding: 20px 0 3px;
text-align: center;
font-style:normal;
font-size: 12px;
clear:both;
display:block;
color:#666;
}


/* フッター共通 */
.box{
float: left;
width: 195px;
margin: 20px 16px 10px 0;
}

.box_img{
padding: 0px 0px 10px 0px;
}

.last{margin-right:0;}


/* ボタン */
p.button{
text-align: center;
padding: 10px 0;
}

p.button a{
display:block;
background: #ffffff url(../img/button.png) no-repeat;
margin: 0 -20px;
}

p.button a{color:#1594cc;}
p.button a:hover{color:#ffffff;}

p.button a:hover{
cursor:pointer;
background-position: 0 -32px;
}
/* メインとフッターのリスト位置調節 */
#main ul, #footer ul{margin-left: 20px;}
#main li, #footer li{margin-bottom: 8px;}




/* ico
------------------------ */

.ico-pdf {
	display:block;
	padding: 0 0 0 28px;
	margin-bottom:3px;
	background:url(../img/ico_pdf.png) no-repeat 0 0;
}
.ico-excel {
	display:block;
	padding: 0 0 0 28px;
	margin-bottom:3px;
	background:url(../img/ico_excel.png) no-repeat 0 0;
}
.ico-window {
	display:block;
	padding: 0 0 0 28px;
	margin-bottom:3px;
	background:url(../img/ico_window.png) no-repeat 0 0;
}

/* round arrow -> */

.ico-red {
	display:block;
	padding: 0 0 0 25px;
	margin-bottom:3px;
	background:url(../img/ico_arrow_round_red.gif) no-repeat 0 1px;
}
.ico-blue {
	display:block;
	padding: 0 0 0 25px;
	margin-bottom:3px;
	background:url(../img/ico_arrow_round_blue.gif) no-repeat 0 1px;
}
.ico-green {
	display:block;
	padding: 0 0 0 25px;
	margin-bottom:3px;
	background:url(../img/ico_arrow_round_green.gif) no-repeat 0 1px;
}




/* css - btn
------------------------- */

.btn-open-form {
	margin:20px auto !important;
	padding:0 !important;
	background:#b44;
	border:solid 3px #ddd;
	text-align:center;
	
	border-radius: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
}
.btn-open-form a {
	display:block;
	padding:10px;
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	text-decoration:none !important;
	color:#fff;
}
.btn-open-form a:hover {
	color:yellow;
}



/* pagetop
------------------------- */

.pagetop{
    margin-top:20px;
    margin-bottom:20px;
    text-align:right;
    clear:both;
    font-size:11px;
    line-height:11px;
}

.pagetop a{
    display:inline-block;
    padding:3px 16px 3px 0;
    text-decoration:none !important;
    background:url(../img/ico_arrow_pagetop.png) no-repeat right 3px;
}



/* clearfix - set
------------------------- */

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}




/*----------------------------------------------------
	汎用class
----------------------------------------------------*/
.imgR {
	float: right;
	margin: 0 0 10px 20px;
}

.imgL {
	float: left;
	margin: 0 20px 10px 0;
}

.btn {
	text-align: center;
}

/* clearfix */
.clearfix:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* margin
----------------------------------------------------------*/
/* Top */
.MG-T0 { margin-top: 0 !important; }
.MG-T5 { margin-top: 5px !important; }
.MG-T10 { margin-top: 10px !important; }
.MG-T15 { margin-top: 15px !important; }
.MG-T20 { margin-top: 20px !important; }
.MG-T25 { margin-top: 25px !important; }
.MG-T30 { margin-top: 30px !important; }
/* Bottom */
.MG-B0 { margin-bottom: 0 !important; }
.MG-B5 { margin-bottom: 5px !important; }
.MG-B10 { margin-bottom: 15px !important; }
.MG-B15 { margin-bottom: 15px !important; }
.MG-B20 { margin-bottom: 20px !important; }
.MG-B25 { margin-bottom: 25px !important; }
.MG-B30 { margin-bottom: 30px !important; }

/* padding
----------------------------------------------------------*/
/* Left */
.PD-L5 { padding-left: 5px !important; }
.PD-L10 { padding-left: 10px !important; }
.PD-L15 { padding-left: 15px !important; }
.PD-L20 { padding-left: 20px !important; }
.PD-L25 { padding-left: 25px !important; }
.PD-L30 { padding-left: 30px !important; }
/* Right */
.PD-R5 { padding-right: 5px !important; }
.PD-R10 { padding-right: 10px !important; }
.PD-R15 { padding-right: 15px !important; }
.PD-R20 { padding-right: 20px !important; }
.PD-R25 { padding-right: 25px !important; }
.PD-R30 { padding-right: 30px !important; }

/* フォントサイズ・カラー
----------------------------------------------------------*/
.TXT-S { font-size:12px;}
.TXT-M { font-size:14px;}
.TXT-L { font-size:16px;}

.TXT-RED { color:#FF3333;}
.TXT-ORG { color:#f7931e;}



/* utility
------------------------- */

.clear{ clear:both; }

.alR { text-align:right !important; }
.alL { text-align:left !important; }
.alC { text-align:center !important; }

.m10  { margin:       10px !important; }
.mt10 { margin-top:   10px !important; }
.mr10 { margin-right: 10px !important; }
.mb10 { margin-bottom:10px !important; }
.ml10 { margin-left:  10px !important; }

.m20  { margin:       20px !important; }
.mt20 { margin-top:   20px !important; }
.mr20 { margin-right: 20px !important; }
.mb20 { margin-bottom:20px !important; }
.ml20 { margin-left:  20px !important; }

.p10  { padding:       10px !important; }
.pt10 { padding-top:   10px !important; }
.pr10 { padding-right: 10px !important; }
.pb10 { padding-bottom:10px !important; }
.pl10 { padding-left:  10px !important; }

.p20  { padding:       20px !important; }
.pt20 { padding-top:   20px !important; }
.pr20 { padding-right: 20px !important; }
.pb20 { padding-bottom:20px !important; }
.pl20 { padding-left:  20px !important; }

.bg-orange { background-color:#fd8 !important; }
.bg-beige  { background-color:#ffd !important; }

.f-bold { font-weight:bold !important; }
.f-u { text-decoration:underline !important; }

.f-red  { color:red !important; }
.f-blue { color:blue !important; }
.f-green { color:#070 !important; }

.f-80 { font-size:80% !important; }
.f-90 { font-size:90% !important; }
.f-100 { font-size:100% !important; }
.f-110 { font-size:110% !important; }
.f-120 { font-size:120% !important; }
.f-130 { font-size:130% !important; }
.f-140 { font-size:140% !important; }

.l-110 { line-height:110% !important; }
.l-120 { line-height:120% !important; }
.l-130 { line-height:130% !important; }
.l-140 { line-height:140% !important; }
.l-150 { line-height:150% !important; }
.l-160 { line-height:160% !important; }
.l-170 { line-height:170% !important; }
.l-180 { line-height:180% !important; }
.l-190 { line-height:190% !important; }
.l-200 { line-height:200% !important; }
.l-210 { line-height:210% !important; }



/* レスポンシブ o.w.
=============================================== */

img{
    max-width:100%;
    height:auto;
}
#menu-toggle{
    display:none;
}

/*
 - マウスがある端末だけを判定
 - スマホで変な hover 状態が残らない
*/
@media (hover:hover){
    a:hover{
        opacity:.7;
    }
}


.pc-hide{
}
.sp-hide{
}
@media screen and (max-width:768px){
    .sp-hide{
        display:none !important;
    }
    .sp-w100p { width: 100%; }
}
@media screen and (min-width:769px){
    .pc-hide{
        display:none !important;
    }
}


@media screen and (max-width: 768px){
    body{
        min-width:0;
        /* 768px 付近で 26.9px まで肥大するので上限を切る。
           clamp 非対応の古い端末は直前の 3.5vw にフォールバックする */
        font-size:3.5vw;
        font-size:clamp(13px, 3.5vw, 16px);
    }
    #wrapper,
    #header,
    #headerDescArea,
    #naviArea,
    #contents,
    #footer .inner{
        width:100%;
        box-sizing:border-box;
    }
    #wrapper{
        padding:0 8px;
    }
    #headerDesc{
        height:auto;
    }
    #headerDescArea h1{
        float:none;
        height:auto;
        margin:0;
        padding:6px 12px;
        font-size:10px;
        text-align:right;
    }
    #header{
        position:relative;
        height:auto;
        min-height:70px;
        overflow:visible;
        padding:10px 54px 10px 0;
        box-sizing:border-box;
    }
    #header #logo{
        float:none;
        clear:none;
    }
    #header #logo img{
        max-width:220px;
    }
    #header #utilityNav{
        float:none;
        text-align:left;
        padding-top:8px;
    }
    #header #utilityNav li{
        display:inline-block;
        margin:0 8px 4px 0;
    }
    #menu-toggle{
        display:block;
        position:absolute;
        top:18px;
        right:8px;
        width:42px;
        height:42px;
        padding:0;
        border:0;
        background:transparent;
        cursor:pointer;
        z-index:2001;
    }
    #menu-toggle span{
        display:block;
        width:28px;
        height:3px;
        margin:6px auto;
        background:#7a522b;
        border-radius:3px;
        transition:.3s;
    }
    body.menu-open #menu-toggle span:nth-child(1){
        transform:translateY(9px) rotate(45deg);
    }
    body.menu-open #menu-toggle span:nth-child(2){
        opacity:0;
    }
    body.menu-open #menu-toggle span:nth-child(3){
        transform:translateY(-9px) rotate(-45deg);
    }
    #navi{
        height:auto;
        margin-bottom: 0 !important;
    }
    #naviArea{
        display:none;
        border-left:0;
    }
    body.menu-open #naviArea{
        display:block;
    }
    #navi #gNav{
        overflow:visible;
        background:#fff;
        border:solid 1px #e9dab6;
    }
    #navi #gNav li{
        float:none;
        width:100%;
        text-align:center;
    }
    #navi #gNav li a:link,
    #navi #gNav li a:visited,
    #navi #gNav li a:active{
        width:100%;
        height:auto;
        padding:7px 14px;
        box-sizing:border-box;
        background:#7fb03d;
        border-bottom:solid 1px rgba(255,255,255,.45);
        letter-spacing:1px;
    }
    #navi #gNav li a.gn2{
        background:#d48391;
    }
    #navi #gNav li span,
    #navi #gNav li br {   
        display: none;
    }
    #container{
        padding-top:10px;
    }
    #main,
    #sub,
    #sidebar{
        float:none;
        width:100%;
        box-sizing:border-box;
    }
    #main{
        margin-bottom:20px;
    }
    #main h2,
    #main h3,
    #sub h3{
        width:100%;
        height:auto;
        min-height:0;
        box-sizing:border-box;
        background-size:100% 100%;
    }
    #main h2{
        padding:16px 14px 10px 14px;
        font-size: 4vw;
        font-size: clamp(15px, 4vw, 20px);
        line-height:1.5;
    }
    #main h3{
        padding:8px 14px;
        font-size: 4vw;
        font-size: clamp(15px, 4vw, 20px);
        line-height:1.4;
    }
    #main h4{
        font-size: 4vw;
        font-size: clamp(15px, 4vw, 20px);
    }
    #main ul {margin-left: 0;}    
    #main p{
        padding: 15px 10px 15px 10px;
    }
    #main .kiji p{
        padding: 0 0 15px;
    }    
    #main .section{
        margin:0 0 20px 0;
        padding:10px 0;
    }
    #main .sectionBorder{
        padding:12px;
    }
    #main .box,
    #main .box-end{
        float:none;
        width:100%;
        margin:0 0 15px 0;
        padding:0 !important;
        border-right:0 !important;
    }
    #sub h3{
        padding:9px 14px;
    }
    #sub ul{
        margin:-5px 0 18px 0;
    }
    .imgR,
    .imgL,
    .alignright,
    .alignleft{
        float:none;
        display:block;
        margin:0 auto 15px auto;
        text-align:center;
    }
    #footer .inner{
        padding:0 12px;
    }
    #footer #logo,
    #footer .box{
        float:none;
        width:100%;
        margin:10px 0;
        text-align:center;
    }
    #footer ul{
        margin-left:0;
    }
}