@charset "utf-8";
@media screen and (max-width: 786px) {

/* ======================================================


    common


========================================================*/
body {
    font-size:.85em;
}

/* ======================================================


    confirm age


========================================================*/
.confirmAge { box-sizing:border-box; }
.confirmAge img { width:100%; }
.confirmAge .modaal-outer-wrapper { display: block; }
.confirmAge .modaal-inner-wrapper { display: block; padding-top:20px; padding-bottom:20px; }
.confirmAge .confirmAgeInr .welcome { line-height: 2.2rem; }
.confirmAge .confirmAgeInr .detail .btnlist li + li { margin-top:20px; margin-left:auto; }
.confirmAge .confirmAgeInr .detail .btnlist li .button { min-width:200px; }

/* ======================================================


    header


========================================================*/

#header #logoCircle { width:180px; }

#header #globalNav { margin-top:25px; }
#globalNav  { display:none; }

/*
 *    sp global navigation
 */
#glbNaviBtn { display:block; position:fixed; top:25px; right:20px; z-index:9999; cursor:pointer; padding:10px 10px 8px 10px; border-radius:5px; background-color:#077a27; }
#glbNaviBtn > .inner { position:relative; width:28px; height:24px; }
#glbNaviBtn .rectLine { overflow:hidden; position:absolute; width:28px; height:3px; margin-bottom:7px; background-color:#FFF; transition:all 0.3s; }
#glbNaviBtn .rectLine:nth-child(1) { top:0; }
#glbNaviBtn .rectLine:nth-child(2) { top:9px; }
#glbNaviBtn .rectLine:nth-child(3) { top:18px; }
#glbNaviBtn.active { background-color:transparent; }
#glbNaviBtn.active .rectLine { background-color:#333; }
#glbNaviBtn.active .rectLine:nth-child(1) { top:9px; transform:rotate(315deg); }
#glbNaviBtn.active .rectLine:nth-child(2) { opacity:0; }
#glbNaviBtn.active .rectLine:nth-child(3) { top:9px; transform:rotate(-315deg); }
#glbNaviBtn.color .rectLine { background-color:#574c39; }

#glbRespNav { display:block; position:fixed; top:0; right:-400px; min-width:240px; border-left:solid 2px #555; font-size:.9em; z-index:9990; transition:.2s; background-color:#FFF; }
#glbRespNav.active { right:0; }
#glbRespNav > .inner { padding-top:60px; }
#glbRespNav a { display:block; font-weight: bold; color:#333; }
#glbRespNav a:hover { text-decoration:none; background-color:#efefef; }

#glbRespNav .menuTitle { margin:25px auto 20px; text-align:center; font-weight:bold; line-height:1.4em; color:#333; }
#glbRespNav .menuTitle .en { display:block; font-size:115%; }
#glbRespNav .menuTitle .ja { display:block; font-size:75%; }

#glbRespNav #spGlobalNav > ul > li:first-child { border-top:solid 1px #ccc; }
#glbRespNav #spGlobalNav > ul > li { border-bottom:solid 1px #ccc; }
#glbRespNav #spGlobalNav > ul > li > a { padding:20px; }

#glbRespNav .searchBox { width:100%; }

#glbRespNav #spInfo p a { padding:20px; border-bottom:solid 1px #352C1C; }

.subNavWrap { position:static; padding:10px 0; border-top:solid 1px #ccc; border-bottom:none; background-color:#FFF; z-index:9999; }
.subNavWrap ul li { float:none; width:100%; }
.subNavWrap ul li + li { margin-top:10px; margin-left:auto; }

/* ======================================================


    top page


========================================================*/
#areaTop #newest .visual { width:100%; }
/* swiper parts */
#areaTop #newest .newest-thumbs { width:auto; margin-top:10px; }

#areaTop #news > .inner { padding:0 15px; }
#areaTop #news .newsLine > ul > li > dl dt { float:none; width:auto; }
#areaTop #news .newsLine > ul > li > dl dd { margin-left:auto; }

/* ======================================================


    blog page


========================================================*/
#blog {}
#blogDtl { margin-bottom:60px; }
#blogDtl .titleWrap { position:relative; padding-bottom:10px; border-bottom:solid 2px #000; margin-bottom:40px; }
#blogDtl .titleWrap::after { content:""; position:absolute; right:0; bottom:-2px; left:0; width:80px; border-bottom:solid 2px #92bc10; }
#blogDtl .titleWrap .title { font-size:165%; font-weight:bold; }
#blogDtl .titleWrap .date { margin-top:5px; font-size:85%; color:#777; }

/* blog modules */
#blogContents .readTtl { padding-left:5px; border-left:solid 14px #92bc10; margin-bottom:15px; font-size:115%; font-weight:bold; line-height:1.4em; }
#blogContents .image { width:80%; }
#blogContents .fontBold { font-weight:bold; }
#blogContents br { display:block; }
#blogContents br.break { display:inline; }
#blogContents .imgBox { max-width:600px; width:auto; }
#blogContents .imgBoxVrt { max-width:420px; width:auto; }

}