@charset "UTF-8"; /* CSS Document */

@media only screen and (max-width: 640px) { 
/* -------------------------------------------------------- common */	
br.resp { display: block; }
div.inner { width: 100%; padding: 0 15px; box-sizing: border-box; }
.fl { float: none; }
.fr { float: none; }
br.default { display: none; }

/* -------------------------------------------------------- header */
header { width: 100%; height: 50px; }
header div.top { display: none; }
header div.bottom div.inner.clearfix { padding: 10px; }
header div.bottom div.logo.fl { float: left; width: 85%; padding-top: 0.3em; font-size: 122%; }
header div.bottom div.inner>div.fr { width: 15%; float: right; }
header div.bottom.fixed { position: relative; width: auto; top: 0; background: #fff; z-index: 9999; }

/* -------------------------------------------------------- header nav */
header nav { height: 0; overflow: hidden; }
header nav { height: 0; position: absolute; top: 50px; left: 0; transition: all 0.2s ease-in-out; }
header nav.active { height: auto; overflow: visible; }
header nav div.inner { padding: 0; }
header nav ul { display: block; width: 100%; margin: 0 auto; border-top: 1px solid #d6d5d5; }
header nav ul li { display: block; font-size: 100%; border-bottom: 1px solid #d6d5d5; }
header nav ul li a { text-align: left; display: block; padding: 20px; width: 100%; box-sizing: border-box; font-weight: bold; color: #333; position: relative; }
header nav ul li a:after { background: none; position: absolute; top: 50%; right: 15px; display: block; content: ''; width: 7px; height: 7px; margin-top: -5px; border-top: 3px solid #f4873d; border-right: 3px solid #f4873d; transform: rotate(45deg); transition: all 0.2s ease-in-out; }
header nav ul li:first-child a::before { background: none; content: ""; height: auto; left: 0; margin-top: 0; position: relative; top: auto; width: auto; }
header nav ul li:last-child { width: 100%; }
header nav ul li.respMenu { display: block; }

/* -------------------------------------------------------- menuButton */
header div.menuButton { display: block; width: 40px; height: 30px; position: relative; float: right; }
header div.menuButton.active { }
header div.menuButton span { display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 6px; background-color: #f4873d; border-radius: 50px; }
header div.menuButton span:nth-of-type(1) { top: 0; }
header div.menuButton span:nth-of-type(2) { top: 12px; }
header div.menuButton span:nth-of-type(3) { bottom: 0; }
header div.menuButton.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); }
header div.menuButton.active span:nth-of-type(2) { opacity: 0; }
header div.menuButton.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); }

/* ie9 */
html.ie9 header div.menuButton { background: url(../img/menubutton.png) no-repeat; background-size: 40px 30px; background-position: center; cursor: pointer; width: 40px; height: 30px; display: block; position: relative; }
html.ie9 header div.menuButton.active { background: url(../img/menubutton_active.png) no-repeat; background-size: 40px 30px; background-position: center; }
html.ie9 header div.menuButton span { display: none; }

/* -------------------------------------------------------- mainVisual */
div.mainVisual { /* height: 200px; */ }
div.mainVisual div.copy { }
div.mainVisual div.copy span.icon-baby { font-size: 200%; }
div.mainVisual div.copy span.en { font-size: 100%; }
div.mainVisual div.copy span.large { font-size: 200%; }
div.mainVisual div.copy span.sub { font-size: 100%; }

/* -------------------------------------------------------- section common */
section { padding: 60px 0; }
section div.description { font-size: 100%; margin-bottom: 20px; }
section div.title { font-size: 230%; margin-bottom: 10px; }
section div.title span.en { /*display: block;*/ }
section>div.inner>div.fr, section>div.inner>div.fl { width: 100%; margin-bottom: 20px; }
section img { width: 100%; height: auto; }

/* -------------------------------------------------------- section.topics */
section.topics div.link { width: 100%; }
section.topics div.topicsList div.entry div.headline { padding-left: 0; }
section.topics div.topicsList div.entry a { text-decoration: none; }
section.topics div.topicsList div.entry a div.new, section.topics div.topicsList div.entry a div.update, section.topics div.topicsList div.entry a div.title { float: none; padding: 0; }
section.topics div.topicsList div.entry a div.update, section.topics div.topicsList div.entry a div.title { padding: 0.5em 0; }

/* -------------------------------------------------------- pageTop */
div.pageTop.responsive { color: #fff; font-weight: bold; font-family: "Century Gothic", "Droid Serif", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", serif; display: block; background: #f4873d; text-align: center; border-top: 1px solid #f4873d; }
div.pageTop.responsive a { color: #fff; display: block; padding: 1em 0; position: relative; }

/* -------------------------------------------------------- footer */
footer { border: none; }
footer, footer a { color: #ffffff; }
footer div.logo a { font-size: 122%; font-weight: bold; }

/* -------------------------------------------------------- contents */
div.contents { width: 100%; margin: 0 auto; }
div.contents div.main { width: 100%; float: none; }
div.homeBack { background: #f4873d; /*display: block;*/ border-bottom: none; text-align: inherit; display: inherit; width: 100%; font-size: 100%; padding: 0; }
div.homeBack ul { padding: 0; width: 100%; display: table; }
div.homeBack ul li { display: table-cell; }
div.homeBack ul li.top { width: 100%; text-align: center; font-weight: bold; border-right: 1px solid #e0dbdb; }
div.homeBack ul li.top a { color: #ffffff; padding: 1.0em 1em; display: block; }
div.homeBack ul li.top a span { width: 20px; height: 20px; display: inline-block; overflow: hidden; vertical-align: top; }
div.categoryheader { width: 100%; margin-bottom: 40px; }
div.categoryheader { /*height: 200px;*/ }
div.categoryheader div.copy { top: 5%; }
div.categoryheader div.copy span.icon-baby { font-size: 200%; }
div.categoryheader div.copy span.en { font-size: 100%; }
div.categoryheader div.copy span.large { font-size: 180%; }
div.banner ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 20px; } }