@charset "utf-8";

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;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block;}
li{ list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins { background-color:#ff9; color:#000; text-decoration:none;}
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

.bold { font-weight:bold;}
.fl { float:left;}
.fr { float:right;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}
.hidden { display: none;}
.absolute { position:absolute;}
.relative { position:relative;}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:30px; height:24px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:4px; background-color:#333; border-radius:4px;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}


* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
html { visibility: hidden;}
html.wf-active { visibility: visible;}
body { text-align: center; font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif; font-family: fot-tsukuardgothic-std, sans-serif; line-height:1.7; color:#000; letter-spacing:0.1em;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}
#copyRight{ font-size:0.75rem; letter-spacing:0em; padding:1rem 0 0;}




#headerWrapper{ max-width:1000px; margin:0 auto; text-align:left; position:relative; z-index:1000;}
#headerWrapper > h1{ padding:2rem 1rem;}
#headerWrapper > h1 img{ height:200px; width:auto;}

#headerWrapper > ul{ position:absolute; right:1rem; top:2rem;}
#toSchoolBtn a{ display:inline-block; background:#118129 url(img/icon_school.svg) 1rem center no-repeat; background-size:1.8rem; border-radius:100px; padding:0.5rem 1rem 0.5rem 3.2rem; color:#fff;}
#toSchoolBtn a:hover{ background:#0d6621 url(img/icon_school.svg) 1rem center no-repeat; background-size:1.8rem;}
#mvWrapper{ max-width:1280px; margin:0 auto; height:480px; background:url(img/main.jpg) center bottom no-repeat; background-size:cover; position:relative; top:-140px; margin-bottom:-140px;}
#mvWrapper:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.2); mix-blend-mode:screen;}

#siteInfoWrapper{ padding:2rem 0; background:#EDFEFF;}
#siteInfo{ text-align:left; max-width:720px; margin:0 auto; padding:0 1rem 0 5rem; background:#EDFEFF url(img/yahata_logo.jpg) 0 0 no-repeat; background-size:4rem; background-blend-mode:multiply;}
#siteInfo > h2{ font-size:1.8rem; font-weight:400; line-height:1; margin:0 0 1rem;}
#siteInfo > h2 > span:nth-child(1){ letter-spacing:0.5em; display:inline-block; padding:0 1rem;}
#siteInfo > h2 > span:nth-child(2){ font-size:0.8rem; letter-spacing:0; vertical-align: middle;}

@media only screen and (max-width : 800px) {
    #headerWrapper > h1{ padding:1rem 1rem;}
    #headerWrapper > h1 img{ height:140px; width:auto;}
    #headerWrapper > ul{ top:1rem;}
    #toSchoolBtn a{ background-size:1.4rem; padding:0.5rem 1rem 0.5rem 2.8rem; font-size:0.8rem;}
    #mvWrapper{ height:180px; top:-80px; margin-bottom:-80px;}

    #siteInfoWrapper{ padding:1rem 1rem;}
    #siteInfo{ padding:0 0 0 4rem; background-size:3rem;}
    #siteInfo > h2{ font-size:1.2rem;}
    #siteInfo > h2 > span:nth-child(2){ display:block; margin-top:10px;}
    #siteInfo > p{ font-size:0.8rem; margin:0 0 0 -4rem;}
}


.catTitle{ font-size:2.4rem; margin-bottom:1rem; letter-spacing:0; font-weight:400;}
.catTitle2{ font-size:2.4rem; margin-bottom:1rem; letter-spacing:0; font-weight:400; background:#EDFEFF; text-align:center; padding:2rem 0;}
.defaultWrapper{ max-width:720px; margin:2rem auto; padding:1rem 1rem; text-align:left;}
.dateText{ font-size:0.75rem; display:block;}

.icon{ line-height:1; border-radius:100px; color:#fff; display:inline-block; padding:0.2rem; font-size:1.8rem; margin:5px 8px 0 0; min-width:1em;}
.icon.small{ font-size:1rem;}
.oyaji{ background: #67BECE;}
.oyaji:before{ content:"お";}
.pta{ background: #9ECE67;}
.pta:before{ content:"P"; padding-left:0.2em;}
.asobi{ background: #DD88D0;}
.asobi:before{ content:"遊";}
.kogai{ background: #FFA460;}
.kogai:before{ content:"地";}
.other{ background: #888EDD;}
.other:before{ content:"他";}
.gaku{ background: #6EDBEF;}
.gaku:before{ content:"学";}

.moreLinkWrapper{ text-align:right;}
.moreLink {
    display: inline-block;
    padding: 0.5rem 2rem 0.5rem 0;
    font-size: 1rem;
    position: relative;
}
.moreLink::before {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 1rem;
    width: 4rem;
    height: 1px;
    background: #666;
    transition: all .3s;
}
.moreLink::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2rem;
    height: 1.4rem;
    background:url(img/icon_hand.svg) right bottom no-repeat; background-size:contain;
    transition: all .3s;
}
.moreLink:hover::before {
    right: 0.5rem;
}
.moreLink:hover::after {
    right: -0.5rem;
}

#indexNewsList li{ border-bottom:1px solid #ccc; margin-top:1rem; font-size:1.4rem; vertical-align:middle;}
#indexNewsList li p{ display:inline-block;}
#indexNewsList li:first-child{ margin-top:0;}
#indexNewsList li > a{ position:relative; padding-right:1rem; display:block;}
#indexNewsList li > a:after{ content:""; position:absolute; bottom:0.7em; right:1rem;
display: block;
width: 5px;
height: 5px;
border: 1px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(45deg);
transition: all .3s;
}
#indexNewsList li > a:hover:after{
right:0.5rem;
}

@media only screen and (max-width : 800px) {
    .defaultWrapper{ margin:2rem auto 4rem; padding:0 1rem;}
    .catTitle{ font-size:1.8rem;}
    .catTitle2{ font-size:1.8rem;}
    .icon{ font-size:1.6rem;}
    #indexNewsList li{ font-size:1.2rem;}
    #indexNewsList li > a:after{ right:0;}

}




#iconInfoWrapper{ margin:4rem auto; position:relative;}
#iconThumbList{ position:absolute; top:2em; right:0;}
#iconThumbList li{ display:inline-block;}

#indexTypeList li{ margin-top:1rem;}
.iconDetailWrapper{ border-radius:8px; background:#EDFEFF; padding:1rem; display:flex; align-items:center;}
.iconDetailWrapper:hover{ background:#c0e9f4;}
.iconMihon{ flex-basis:2rem;}
.iconMihon .icon{ margin:0;}
.iconDetail{ flex-basis:calc(100% - 2rem); padding:0 0 0 1rem;}
.iconDetail h3{ font-weight:400;}
.iconDiscription{ font-size:0.8rem; margin-top:8px;}

#indexTypeList > li > a{ position:relative; display:block;}
#indexTypeList > li > a:after{ content:""; position:absolute; top:50%; right:1rem; transform: translate(0,-50%);
display: block;
width: 5px;
height: 5px;
border: 1px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(45deg);
transition: all .3s;
}
#indexTypeList li > a:hover:after{
    right:0.5rem;
}

@media only screen and (max-width : 800px) {
    #iconInfoWrapper{ margin:2rem auto 4rem;}
    #iconThumbList{ position:relative; top:-1rem; right:auto;}
    .leadText{ font-size:0.8rem;}
}




#ptaBlogTitle{ font-size:2.4rem; font-weight:400; margin-bottom:1rem; letter-spacing:0; position:relative; padding:0 0 0 5rem; background:url(img/icon_pen.svg) 0 center no-repeat; background-size:4rem;}
#ptaBlogTitle:after{ content:""; position:absolute; top:0; left:0; width:200px; height:200px; border-radius:100px; background:#EDFEFF; z-index:-1; transform:translate(-100px,-20px);}
.ptaBlogContent{ margin:2rem 0 1rem; border:1px solid #ccc; padding:1rem;}
.ptaBlogContent h2{ font-size:1rem; margin-bottom:8px;}

.ptaBlogContent p{ margin:1rem 0;}

@media only screen and (max-width : 800px) {
    #ptaBlogTitle{ font-size:1.8rem; padding:0 0 0 4rem; background-size:3rem;}
    .ptaBlogContent h2{ font-size:1rem;}
    .ptaBlogContent p{ font-size:0.8rem;}
}




#informationWrapper{ margin:2rem auto;}
#informationBtnWrapper{ max-width:720px; margin:1rem auto;}
#informationBtnWrapper > p:nth-child(1){ font-size:1.8rem;}
#informationBtn{ position:relative; border:1px solid #ccc; padding:1rem; margin:1rem 0; display:inline-block; overflow:hidden; background:url(img/icon_school.svg) center center no-repeat; background-size:8rem;}
#informationBtn > img{ transform:scale(0);}
#informationBtn > img.popupShow{ animation-name:img-anime; animation-duration:1s; animation-fill-mode:forwards;}
#informationBtn:hover{ background:#EDFEFF url(img/icon_school.svg) center center no-repeat; background-size:8rem;}
@keyframes img-anime{
    0%{ transform:scale(0);}
    80%{ transform:scale(1.1);}
    100%{ transform:scale(1);}
}
#informationBtn > div > img.rotateAnime{ transform:rotate(300deg); animation-name:rotate-anime; animation-duration:1s; animation-fill-mode:forwards;}
@keyframes rotate-anime{
    0%{ transform:rotate(300deg);}
    100%{ transform:rotate(360deg);}
}
#informationClick{ position:absolute; bottom:1rem; right:1rem; height:8rem; width:auto;}
#informationLead{ text-align:left;}
#informationNote{ font-size:0.8rem; margin-bottom:1rem;}

@media only screen and (max-width : 800px) {
    #informationBtnWrapper > p:nth-child(1){ font-size:1rem; letter-spacing:0;}
    #informationBtn{ margin:1rem;}
    #informationLead{ font-size:0.8rem; padding:0 1rem;}
    #informationClick{ bottom:4px; right:4px; height:4rem;}
}




#linkListWrapper{ margin:2rem auto;}
#linkListWrapper > ul > li > a{ display:block; position:relative; background:#EDFEFF; padding:2rem 0;}
#linkListWrapper > ul > li > a:after{ content:""; position:absolute; bottom:-2rem; right:50%; margin-right:-360px; height:6rem; width:6rem; background:url(img/icon_click.svg) center center no-repeat; background-size:contain; transform:scale(0); transition:.5s; z-index:990;}
#linkListWrapper > ul > li > a.popupShow:after{ animation-name:img-anime; animation-duration:1s; animation-fill-mode:forwards;}
#linkListWrapper > ul > li > a > dl{ max-width:720px; margin:0 auto;}
#linkListWrapper > ul > li > a > dl > dt{ font-size:1.4rem; margin-bottom:1rem;}
#linkListWrapper > ul > li > a > dl > dt span{ background: yellow; padding:0.5rem;}
#linkListWrapper > ul > li > a > dl > dd{ font-size:1rem;}
#linkListWrapper > ul > li > a > h3{ font-size:1.4rem; margin-top:1rem;}
#linkListWrapper > ul > li{ margin:2rem 0;}
#ptaMemoWrapper{ background:#EDFEFF; padding:2rem 0;}
#ptaMemoWrapper > h2{ font-weight:400; font-size:1.4rem; margin-bottom:1rem;}
#ptaMemoWrapper > ol{ max-width:720px; margin:0 auto; padding:0 1rem; text-align:left;}
#ptaMemoWrapper > ol > li{ list-style-type:decimal; margin:1rem 0 0 1rem;}
#linkList{ margin:1rem auto 0;}
#linkList > ul > li{ display:inline-block; margin:1rem 0.5rem 0;}
#linkList > ul > li > a{ display:block; padding:1rem; color:#fff; background:#118129; border-radius:8px; box-shadow:0 0 5px rgba(0, 0, 0, 0.4);}
#linkList > ul > li > a:hover{ background:#0d6621;}
#linkListWrapper > ul > li > a:hover{background:#c0e9f4;}
#linkListWrapper > ul > li > a.touch{background:#c0e9f4;}

@media only screen and (max-width : 800px) {
    #linkListWrapper > ul > li > a:after{ bottom:-1rem; right:1rem; margin-right:0; height:4rem; width:4rem;}
    #linkListWrapper > ul > li > a > dl{ padding:0 1rem;}
    #linkListWrapper > ul > li > a > dl > dt{ font-size:1rem;}
    #linkListWrapper > ul > li > a > dl > dd{ font-size:0.8rem;}
    #linkListWrapper > ul > li > a > h3{ font-size:1rem;}
    #ptaMemoWrapper > h2{ font-size:1rem;}
    #ptaMemoWrapper > ol > li{ font-size:0.8rem;}

    #informationBtn{ background-size:4rem;}
    #informationBtn:hover{ background-size:4rem;}
}




#oyajiInfoWrapper{ margin:4rem auto 0; background:#FFE888; padding:2rem 0;}
#oyajiInfoInner{ max-width:720px; margin:0 auto;}
#oyajiInfoInner > a{ display:block; padding:1rem 0 0;}
#oyajiInfoInner > a > img{ max-width:360px;}
#oyajiLead{ font-size:1.8rem;}
.oyajiEyecatch{ margin-bottom:1rem;}

@media only screen and (max-width : 800px) {
    #oyajiInfoInner{ padding:0 1rem;}
    #oyajiInfoInner > a > img{ max-width:initial; width:240px; height:auto;}
    #oyajiLead{ font-size:1rem; letter-spacing:0;}
}




footer{ background:#FFF5F5; padding:2rem 1rem 1rem;}
#siteAdmin{ max-width:720px; margin:0 auto;}
#siteAdmin > dt{ font-weight:400; font-size:1.4rem; margin-bottom:1rem;}
#siteAdmin > dd{ text-align:left;}
#footerLinkList{ max-width:720px; margin:0 auto 4rem;}
#footerLinkList > li{ display:inline-block; margin:1rem 0.5rem 0;}
#footerLinkList > li > a{ display:block; padding:1rem; color:#fff; background:#118129; border-radius:8px; box-shadow:0 0 5px rgba(0, 0, 0, 0.4);}
#footerLinkList > li > a:hover{ background:#0d6621;}

#pager { margin: 2em 0; display: flex; justify-content: center; }
#pager ul { display: flex; }
#pager ul li { font-size: 100%; line-height: 1.2; }
#pager ul li a { text-align: center; color: #9F918E; padding: .7em 1em .6em 1em; border-top: solid 1px #D9D2C7; border-bottom: solid 1px #D9D2C7; border-right: solid 1px #D9D2C7; display: block; }
#pager ul li:first-child a { border-left: solid 1px #9F918E; border-radius: .5em 0 0 .5em; }
#pager ul li:last-child a { padding: .7em .8em .6em .8em; border-radius: 0 .5em .5em 0; }
#pager ul li a.active, #news-column .txt-box #pager li a.active:hover { color: #FFF; border-color: #9F918E; background: #9F918E; }
#pager ul li a:hover { background: #D9D2C7;}

#footerLink{ margin:2rem auto 0;}
#footerLink > li{ display:inline-block; padding:0 1rem;}
#footerLink > li > a{ text-decoration:underline;}
#footerLink > li > a:hover{ text-decoration:none;}

@media only screen and (max-width : 800px) {
    #siteAdmin > dt{ font-size:1rem;}
    #siteAdmin > dd{ font-size:0.8rem;}
    #footerLinkList > li > a{ font-size:0.8rem; white-space:nowrap;}
}




.lowerIntroWrapper{ max-width:720px; margin:-2rem auto 2rem;}
.categoryDescription{ padding:0 1rem;}

#aboutOyajiWrapper{ max-width:720px; margin:2rem auto 2rem;}
#aboutOyajiWrapper > h2:nth-child(1) {font-size: 1.8rem; font-weight:400;}
#aboutOyajiWrapper > img{ margin-bottom:2rem;}
.handsBtn{ text-decoration:underline; display:inline-block; padding:1.5rem 5rem 1.5rem 0; background:url(img/icon_click.svg) right center no-repeat; background-size:4rem;}

#oyajiTopicWrapper{ text-align:left; max-width:720px; margin:2rem auto 2rem;}
#oyajiTopicLead{ margin:-1rem 0 0;}
.oyajiTopicContent{ border:1px solid #ccc; padding:1rem; margin:1rem 0;}
.postTitle{ margin-bottom:1rem;}

#oyajiContactWrapper{ padding:2rem 0; margin:2rem 0; background:#FFE888;}
#oyajiContactInner{ text-align:left; max-width:720px; margin:0 auto 0;}
#oyajiContactInner > p{ margin-bottom:1rem;}
#oyajiContactInner > dl{ margin-bottom:1rem;}
#oyajiContactInner > dl > dt{ font-size:1.4rem; font-weight:400;}
.handsBtn2{ display:inline-block; padding:0.5rem 2rem 0.5rem 3rem; background:#fff; border-radius:100px; position:relative;}
.handsBtn2:after{ content:""; height:4rem; width:4rem; background:url(img/icon_click.svg) center center no-repeat; background-size:contain; position:absolute; top:50%; right:-3rem; transform:translate(0,-50%);}

.backLinkWrapper{ margin:2rem auto;}
.backLinkWrapper a{ display:inline-block; background:#118129; padding:0.5rem 2rem; border-radius:100px; color:#fff;}
.backLinkWrapper a:hover{ background:#0d6621;}

@media only screen and (max-width : 800px) {
    .lowerIntroWrapper{ margin:0 auto 0;}

    #aboutOyajiWrapper{ padding:0 1rem; margin:2rem auto 0;}
    #aboutOyajiWrapper > h2:nth-child(1) {font-size: 1rem;}
    #aboutOyajiWrapper > p.catTitle{ font-size:1rem;}
    #aboutOyajiWrapper > p{ font-size:0.8rem;}
    #oyajiInfoInner > h2.catTitle{ font-size:1.4rem;}

    #oyajiTopicWrapper{ margin:2rem 1rem 2rem;}
    #oyajiTopicLead{ font-size:0.8rem;}
    .oyajiTopicContent > h2{ font-size:1rem;}
    .oyajiTopicContent > div{ font-size:0.8rem;}

    #oyajiContactWrapper{ padding:2rem 1rem;}
    #oyajiContactInner > dl > dt{ font-size:1rem; margin-bottom:8px;}
    #oyajiContactInner > dl > dd{ font-size:0.8rem;}
}




#catWrapper{ margin:0 auto 4rem;}
.catListWrapper{ border:1px solid #ccc; padding:1rem; text-align:left; max-width:720px; margin:2rem auto;}
.postDate{ font-size:0.75rem;}
.catListWrapper > h2{ font-size:1rem;}

.catListContent h3{ margin-top:1rem; margin-bottom:1rem; font-size:150%;}
.catListContent p{ margin-top:1rem; text-indent:0;}
.catListContent p img{ margin:1rem 0 0 0; display:block;}
.catListContent ul{ margin:1rem 0;}
.catListContent ul li{ list-style-type:disc; list-style-position: outside; margin:0 0 0 2em;}
.catListContent ol{ margin:1rem 0;}
.catListContent ol li{ list-style-type:decimal; list-style-position: outside; margin:0 0 0 2em;}

@media only screen and (max-width : 800px) {
    .catListWrapper{ margin:2rem 1rem;}
    .catListContent{ font-size:0.8rem;}
}




#postList{ max-width:720px; margin:2rem auto 2rem; text-align:left;}
#postList li{ margin-top:1rem;}
#postList > li > a{ position:relative; display:block;}
#postList > li > a:after{ content:""; position:absolute; top:50%; right:1rem; transform: translate(0,-50%);
display: block;
width: 5px;
height: 5px;
border: 1px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(45deg);
transition: all .3s;
}
#postList > li > a:hover:after{
    right:0.5rem;
}

@media only screen and (max-width : 800px) {
    #postList{ margin:2rem 1rem 2rem;}
}




#singleWrapper{ max-width:720px; margin:4rem auto 4rem; text-align:left; border:1px solid #ccc; padding:1rem;}
#single > h2{ font-size:1.4rem;}

#single h3{ margin-top:1rem; margin-bottom:1rem; font-size:150%;}
#single p{ margin-top:1rem; text-indent:0;}
#single p img{ margin:1rem 0 0 0; display:block;}
#single ul{ margin:1rem 0;}
#single ul li{ list-style-type:disc; list-style-position: outside; margin:0 0 0 2em;}
#single ol{ margin:1rem 0;}
#single ol li{ list-style-type:decimal; list-style-position: outside; margin:0 0 0 2em;}
.space{ margin:2rem 0;}
#single a.btn{ display:inline-block; padding:0.5rem 3rem 0.5rem 1rem; border:1px solid #ccc; background:url(img/icon_popup.svg) right 1rem center no-repeat; background-size:1em; margin:1rem 0;}

@media only screen and (max-width : 800px) {
    #singleWrapper{ border-left:none; border-right:none; margin:2rem auto 2rem;}
    #single > h2{ font-size:1rem;}
    #single > div{ font-size:1rem;}
}




#mimamorume{ display:none; max-width:720px; margin:0 auto; padding:1rem;}
#mimamorume h3{ font-size:1.4rem; margin-bottom:8px; text-align:center;}
#mimamorume > div{ text-align:center; margin:2rem auto 0;}
#mimamorume a{ display:inline-block; background:#118129; padding:0.5rem 2rem; border-radius:100px; color:#fff; margin:0 auto 0;}
#mimamorume a:hover{ background:#0d6621;}
.mimamorumeNote{ font-size:0.8rem;}

#bannerWrapper{ padding:2rem 0;}
#bannerWrapper ul{ max-width:600px; width:100%; margin:0 auto;}
#bannerWrapper ul li{ display:inline-block; width:50%; padding:0 1rem;}

@media only screen and (max-width : 800px) {
    #bannerWrapper{ padding:2rem 0 1rem;}
    #bannerWrapper ul li{ display:block; max-width:320px; width:100%; margin:0 auto; padding:0 0 1rem;}
    #mimamorume h3{ font-size:1.2rem;}
}