@charset "UTF-8";

/* ---------------------------------------------------------------------
CSS

 File name:      base.css
 Create:         2008.10.09
 Update:         2008.10.20
 Style Info:     全ページ共通CSSファイ・E
--------------------------------------------------------------------- */

/* 規・E佑離・札奪
--------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,strong {
 margin:0;
 padding:0;
}
fieldset,img {
 border:0;
 vertical-align: bottom;
}
address,caption,cite,code,dfn,em,strong,th,var {
 font-style:normal;font-weight:normal;
}
ol,ul,li {
 list-style:none;
}
caption {
 text-align:left;
}
h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight: normal;
}
q:before,q:after {
 content:'';
}

/* clearfix
--------------------------------------------------------------------- */
.clearfix {display: inline-block;}

/* Mac-IE,Dreamweaverでは適用しない */
* html body .clearfix {height:1px;}
.clearfix {display:block;}

.clearfix:after {
 content: ".";
 display: block;
 height: 0px;
 clear: both;
 visibility: hidden;
}
.clearer {
 clear:both;
 display:block;
 font-size:0px;
 height:1px;
 line-height:0em;
 margin:0pt;
 padding:0pt;
}

/* 共通プ・叢ティ
--------------------------------------------------------------------- */
.no-display {
 display: none;
}
.color-red {
 color: #FF4343;
}
.color-black {
 color: #000;
}
.color-green {
 color: #3E653C;
}

/* 2009.01.17 ﾂｲｶ(tokumaru) */
.color-brown {
 color: #990000;
}
.color-blue {
 color: #0066CC;
}
/* 2009.01.17               */
/* 2013.11.29 Takeshi.Handa */
.color-yellow{
	color:#ffff00;
}
/* 2013.11.29 */
.f-left {
 float: left;
}
.f-right {
 float: right;
}

/* 2009.02.28 ﾂｲｶ(tokumaru) */
.t-right {
 text-align:right;
}
/* 2009.02.28               */

/* font
--------------------------------------------------------------------- */
h1 {
 font-size: 169.2%; /* 22px; */
 font-weight: bold;
 color: #3E653C;
}
h2 {
 font-size: 138.5%; /* 18px; */
 font-weight: bold;
 color: #3E653C;
}
h3 {
 font-size: 123.1%; /* 16px; */
 font-weight: bold;
 color: #3E653C;
}
h4 {
 font-size: 116%;   /* 15px; */
 font-weight: bold;
 color: #3E653C;
}
h5 {
 font-size: 100%;   /* 13px; */
 font-weight: bold;
 color: #3E653C;
}

.f10 {font-size: 77%;}
.f11 {font-size: 85%;}
.f12 {font-size: 93%;}
.f13 {font-size: 100%;}
.f14 {font-size: 108%;}
.f15 {font-size: 116%;}
.f16 {font-size: 123.1%;}
.f17 {font-size: 131%;}
.f18 {font-size: 138.5%;}
.f19 {font-size: 146.5%;}
.f20 {font-size: 153.9%;}
.bold {font-weight: bold;}

/* box     2008.12.13 ﾂｲｶ(tokumaru)
--------------------------------------------------------------------- */
.box-green {
	border : solid 2px #8cc63f;
	background-color : #cdf0a1;
}
/*         2008.12.13                */

/* box     2010.03.05 ﾂｲｶ(tokumaru)  */
.box-green2 {
	border : solid 2px #8cc63f;
}
/*         2010.03.05                */

/* 2009.01.18 ﾂｲｶ(tokumaru)          */
.box-red {
	border : solid 2px #CC0000;
}
.box-blue {
	border : solid 2px #0066CC;
}
/* 2009.01.18 ﾂｲｶ(tokumaru)          */

/* img     2008.12.28 ﾂｲｶ(tokumaru)
--------------------------------------------------------------------- */
.img-center {
 width: 600px;
 margin-top:30px;
 text-align:center;
}

.frame-w600 {
 width: 600px;
}
.frame {
 clear:left;
 float:left;
 margin:20px 0 10px 0;
 padding:0;
 background:white url(../img/shadow.gif) no-repeat right bottom;
 position:relative;
}
.frame img{
 background-color:#fff;
 display:block;
 margin:-5px 12px 12px -5px;
 border:2px solid #CCCCCC;
 padding: 4px;
 position:relative;
}
/* 2008.12.28                 */

/* a
--------------------------------------------------------------------- */
a {
 color: #008C9B;
 text-decoration: underline;
}
a:visited {
 color: #3C0D81;
 text-decoration: underline;
}
a:hover {
 text-decoration: none;
}

/* container
--------------------------------------------------------------------- */
#container {
 margin: 0 auto;
 text-align: left;
}
@media screen and (min-width: 640px) {
	#container {
	 margin: 0 auto;
	 width: 80rem;
	 text-align: left;
	}
}

/* header(logo,submenu)
--------------------------------------------------------------------- */

#header {
 position: relative;
 width: 630px;
 height: 70px;
 margin: 0 5px;
 background: url(../img/bg_header.gif) top repeat-x;
}
#header .logo {
 visibility:hidden;
 position: absolute;
 top: 18px;
 left: 0;
}
#header .submenu {
 position: absolute;
 width: 252px;
 top: 15px;
 left: 338px;
 text-align: right;
}
#header .submenu ul {
 margin-top: 5px;
}
#header .submenu li {
 display: inline;
 margin-left: 12px;
 padding-left: 15px;
}
#header .submenu li.inquiry {
 background: url(../img/sub_ico_inquiry.gif) left 3px no-repeat;
}
#header .submenu li.sitemap {
 background: url(../img/sub_ico_sitemap.gif) left 4px no-repeat;
}
#header .submenu li a,
#header .submenu li a:visited {
 color: #3E653C;
 font-size: 85%;
 text-decoration: none;
}
#header .submenu li a:hover {
 color: #999;
}
@media screen and (min-width: 640px) {
	#header {
	 position: relative;
	 width: 840px;
	 height: 70px;
	 margin: 0 5px;
	 background: url(../img/bg_header.gif) top repeat-x;
	}
	#header .logo {
	 visibility:visible;
	 position: absolute;
	 top: 18px;
	 left: 0;
	}
	#header .submenu {
	 position: absolute;
	 width: 502px;
	 top: 15px;
	 left: 338px;
	 text-align: right;
	}
	#header .submenu ul {
	 margin-top: 5px;
	}
	#header .submenu li {
	 display: inline;
	 margin-left: 12px;
	 padding-left: 15px;
	}
	#header .submenu li.inquiry {
	 background: url(../img/sub_ico_inquiry.gif) left 3px no-repeat;
	}
	#header .submenu li.sitemap {
	 background: url(../img/sub_ico_sitemap.gif) left 4px no-repeat;
	}
	#header .submenu li a,
	#header .submenu li a:visited {
	 color: #3E653C;
	 font-size: 85%;
	 text-decoration: none;
	}
	#header .submenu li a:hover {
	 color: #999;
	}
}
/* globalmenu
--------------------------------------------------------------------- */
ul#globalmenu {
 	padding-top:10px;
}
ul#globalmenu li {
	display: inline;
}
@media screen and (max-width: 640px) {
	#globalmenu img{
		width:300px;
		height:60px;
	}
}
@media screen and (min-width: 640px) {
	ul#globalmenu {
	 width: 850px;
	}
	ul#globalmenu li {
	 display: inline;
	}
}
@media print {
	ul#globalmenu {
	 width: 850px;
	}
	ul#globalmenu li {
	 display: inline;
	}
}

/* footer
--------------------------------------------------------------------- */
#footer-wrap {
 margin-top: 18px;
 width: 630px;
}
#footer {
 position: relative;
 height: 19px;
 background: url(../img/bg_footer.gif) left top no-repeat;
 line-height: 1.0em;
}
#footer ul.submenu {
 position: absolute;
 top: 6px;
 left: 12px;
}
#footer ul.submenu li {
 display: inline;
 padding-left: 14px;
 margin-right: 8px;
 background-image: url(../img/ico_arrow_cercle_white.gif);
 background-position: 2px 1px;
 background-repeat: no-repeat;
 font-size: 12px;
}
#footer ul.submenu li a {
 color: #FFF;
 text-decoration: none;
}
#footer ul.submenu li a:hover {
 color: #B3D2AA;
}
#footer .copyright {
 position: absolute;
 top: 6px;
 right: 12px;
 color: #FFF;
 font-size: 10px;
}
#footer-cap {
 height: 8px;
 background: url(../img/bg_footer_cap.gif) left top no-repeat;
 font-size: 0;
 line-height: 0;
}
@media screen and (min-width: 640px) {
	#footer-wrap {
		width: 850px;
	}
}
/* 扉ページ メニューボタ・E
--------------------------------------------------------------------- */
#content ul.menu-button {
 width: 600px;
}
#content ul.menu-button li {
 float: left;
 width: 292px;
}
#content ul.menu-button li.left-area {
 margin-right: 16px;
 margin-bottom: 16px;
}
/* 2016/4/06 婦人宝ページ 
--------------------------------------------------------------------- */
.hlogo {
	float:left;
}

/*--------------------------------------------------------------------*/
/* 2018/7/11 gloval-nav */
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}
#vhlogo{
	visibility:hidden;
}
@media screen and (max-width: 640px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #global-nav {
        position: absolute;
        /* 開ａ?逐楳÷凍・・續譜Oｕ4z置 */
        top: -500px;
/*      background: #333;     */
		background: #fff;
        width: 100%;
        text-align: center;
        padding: 5px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 3px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 頗?苡它メAニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
        
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
    #vhlogo{
    	visibility:visible;
    	padding-top:15px;
    	padding-left:5px;
    }
}