@media screen and (max-width: 640px){
html,body,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,font,img,dl,dt,dd,ol,ul,li,form,caption,tbody,tfoot,thead,table,label,tr,th,td{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font-weight:normal;
vertical-align: baseline;
background:transparent;
}

body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
background:white;
}

a{
color:#0044CC;
}
a:visited{
color:#0044CC;
}

.header{
width:100%;
text-align:center;
}
.header h1 a{
display:block;
color:white;
background-color:#00A9C5;
text-decoration:none;
padding:50px 0;
width:100%;
font-size:105%;
}


.header span a{
display:block;
text-decoration:none;
padding:50px 0;
width:100%;
font-size:105%;
color:white;
background-color:#00A9C5;
}

.accordion ul{
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin: 0;
padding: 0;
list-style: none;
}
.accordion li a{
font-size:16px;
background:white;
text-align:center;
text-decoration:none;
width:100%;
padding:20px 0;
display:block;
border-bottom:1px solid grey;
text-decoration:none;
}
.accordion label{
cursor:pointer;
font-size:18px;
background:#EFF5FB;
text-align:center;
color:#222;
text-decoration:none;
width:100%;
padding:22px 0;
display:block;
color:#0044CC;
}
.accordion label:before{
content:"≡";
font-size:16px;
padding-right:3px;
}
.toggle{
display:none;
}
.toggle + ul{
height:0;
overflow:hidden;
}
.toggle:checked + ul{
height:270px;
}


.wrapper{
text-align:center;
color:#444444;
}

.toplogo img{
margin:0 auto;
max-width: 100%;
height: auto;
}

.phrase{
padding:15px 5% 0 5%;
font-size:90%;
text-align:left;
}


.entry_box{
text-align:left;
color:#444444;
padding:30px 5% 40px 5%;
}

.title{
margin:10px 0;
}

.title div{
margin:15px 0;
}

.title div a{
font-size:21px;
color:#0044CC;
font-weight:bold;
text-decoration:none;
line-height:30px;
}

.outline{
margin:10px 0 0 0;
font-size:70%;
}
.outline a{
color:white;
text-decoration:none;
line-height:220%;
}

.category{
padding:5px 6px;
background:#f992c1;
margin:0 2px 0 0;
border-radius:4px;
}

.tag{
padding:5px 6px;
background:#3ec1bd;
margin:0 2px 0 0;
border-radius:4px;
}

.comment{
padding:5px 6px;
background:#BDBDBD;
color:white;
margin:0 4px 0 0;
border-radius:4px;
}

.date{
font-size:90%;
font-weight:bold;
border-bottom:1px solid grey;
}

.summary{
font-size:85%;
width:80%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
color:#666666;
}
.summary p{
overflow: hidden;
text-overflow:ellipsis;
}

.menu_box{
background:#EEFDFF;
padding:10px 0;
border-bottom:2px solid #00A9C5;
color:#333333;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
margin:20px 0 0 0;
}
.menu_box a{
display:block;
position: relative;
padding:20px 35px 20px 15px;
border-bottom:1px solid #E0E0E0;
background:white;
text-decoration:none;
}
.menu_box a:after{
position: absolute;
top: 50%;
right: 10px;
display: block;
content: '';
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #E72181;
border-right: 1px solid #E72181;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.menu_box dl{
text-align:left;
}
.menu_box dl:last-child{
}
.menu_box dt{
text-align:center;
}
.menu_box dt a{
}
.menu_box dt a:last-child{
}
.menu_box dd{
}



.profile_box{
background:#FBEAE0;
padding:10px;
border-bottom:2px solid #DD5E19;
color:black;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
font-size:90%;
margin: 20px 0 0 0;
}

.profile_inner_box{
}
.profile_inner_box p{
text-align:left;
}
.profile_inner_box a{
width:220px;
padding:15px 0;
margin:20px auto;
display:block;
color:white;
font-weight:bold;
text-decoration:none;
background:#E76C29;
font-size:120%;
border-radius:10px;
text-align:center;
}
.profile_inner_box a:hover{
text-decoration:underline;
background:green;
}

.search{
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
text-align:center;
padding:15px 0;
margin:20px 0 0 0;
}

.recent_box{
background:#FBFBEF;
padding:10px 0;
border-bottom:2px solid #FFD700;
color:#333333;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
margin:20px 0 0 0;
}
.recent_box a{
display:block;
position: relative;
padding:20px 35px 20px 15px;
border-bottom:1px solid #E0E0E0;
text-decoration:none;
}
.recent_box a:after{
position: absolute;
top: 50%;
right: 10px;
display: block;
content: '';
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #E72181;
border-right: 1px solid #E72181;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.recent_box dl{
margin-bottom:10px;
text-align:left;
}
.recent_box dt{
margin:0 0 0 10px;
}
.recent_box dd{
background:white;
}


.entry_text_box{
background-color:#F0F0F0;
}

.entry_text_inner_box{
padding:5px 20px 10px 20px;
margin:0 10px;
line-height:200%;
text-align:left;
color:#444444;
font-size:90%;
background:white;
}

.entry_text_inner_box h1{
font-size:21px;
font-weight:bold;
padding:30px 0;
line-height:30px;
}

.entry_text_inner_box h2{
font-size:19px;
padding:0;
margin:70px 0 30px 0;
font-weight:bold;
border-bottom:2px solid #f992c1;
}


.hanyouh{
font-size:19px;
padding:0;
margin:70px 0 30px 0;
font-weight:bold;
border-bottom:2px solid #f992c1;
}


.entry_text_inner_box h3{
font-size:18px;
padding:0;
margin:70px 0 30px 0;
font-weight:bold;
border-bottom:2px solid #f992c1;
}


.entry_text_inner_box p{
margin-bottom:40px;
}

.entry_text_inner_box ol{
padding:0 0 0 18px;
margin:0 0 25px 15px;
}

.entry_text_inner_box ol li{
padding-bottom:15px;
}

.entry_text_inner_box ul{
padding:0 0 0 18px;
margin:0 0 25px 15px;
}

.entry_text_inner_box ul li{
padding-bottom:15px;
}


.aka1{
color:red;
font-size:24px;
line-height:30px;
padding:30px 0;
}
.ore1{
color:darkorange;
font-size:24px;
line-height:30px;
padding:30px 0;
}
.ao1{
color:#ce31ff;
font-size:24px;
line-height:30px;
padding:30px 0;
}

img{
margin:5px auto;
max-width:100%;
height:auto;
}


.entry_footer_box{
color:#555555;
padding:30px 0 0 0;
background:#F0F0F0;
}


.entry_comment{
margin:0 10px;
padding:0 20px;
color:#555555;
font-size:80%;
text-align:left;
background:white;
line-height:150%;
}

.entry_comment span{
color:#61B832;
}

.comment_name{
counter-increment:numeber;
}
.comment_name:first-child{
margin:20px 0 0 0;
padding:20px 0 0 0;
}
.comment_name:before{
content: counter(numeber)".";
}

.comment_body{
padding:5px 0 20px 13px;
}
.comment_body:last-child{
padding:5px 0 20px 13px;
}



.comment_form_box{
margin:0 10px;
padding:20px;
background:white;
}
.comment_form_box label{
display:block;
}

.comment_form_box input{
width:90%;
height:30px;
-webkit-appearance: none;
border-radius: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size:16px;
color:#444444;
}

.comment_form_box textarea{
width:90%;
height:100px;
-webkit-appearance: none;
border-radius: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size:16px;
color:#555555;
}

.form-submit input{
height:50px;
color:#444444;
}

.search input{
-webkit-appearance: none;
border-radius: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size:16px;
color:#444444;
}

.navigation p{
margin-top:30px;
font-size:85%;
}
.navigation ul{
text-align:left;
list-style:none;
padding:0;
margin:0;
border-top:1px solid #E0E0E0;
background-color:white;
}
.navigation ul li{
padding:0;
margin:0;
}
.navigation ol{
text-align:left;
list-style:none;
padding:0;
margin:0;
border-top:1px solid #E0E0E0;
background-color:white;
}
.navigation ol li{
padding:0;
margin:0;
}
.navigation a{
display:block;
position: relative;
padding:20px 35px 20px 15px;
border-bottom:1px solid #E0E0E0;
text-decoration:none;
}
.navigation a:after{
position: absolute;
top: 50%;
right: 10px;
display: block;
content: '';
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #E72181;
border-right: 1px solid #E72181;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

hr{
width:70%;
text-align:left;
margin:0 0 40px 0;
border:none;
border-top:dashed 1px black;
height:1px;
color:#FFFFFF;
}

.common{
padding:60px 0 0 0;
text-align:center;
font-size:130%;
}


.footer{
font-size:70%;
background:#A4A4A4;
color:black;
text-align:center;
}
.footer a{
color:#000000;
text-decoration:none;
}

.pager{
margin:30px 5%;
}
.pager ul{
display:flex;
justify-content:flex-end;
}
.pager ul >:last-child{
margin-left: auto;
}

.prev{
text-align:left;
list-style:none;
}
.prev a{
color:grey;
border:1px solid grey;
padding:10px 20px;
border-radius:5px;
text-decoration:none;
font-size:90%;
}
.next{
list-style:none;
text-align:right;
}
.next a{
color:grey;
border:1px solid grey;
padding:10px 20px;
border-radius:5px;
text-decoration:none;
font-size:90%;
}

blockquote{
background-color:#EEEEEE;
border-left:5px solid #DDDDDD;
margin:0 10px 40px 10px;
padding:5px;
}
.aka5 {
    position: relative;
    background: #ACFA58;
    border: 1px solid #A4A4A4;
    margin: 10px;
    padding: 15px;
    border-radius: 15px;
    margin-left: 20%;
    clear: both;
    max-width: 500px;
    float: right;
    color:black;
    text-decoration:none;
font-size:80%;
}
.aka5:after,
.aka5:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}
.aka5:after {
    border-color: rgba(133, 226, 73, 0);
    border-left-color: #ACFA58;
    border-width: 7px;
    margin-top: -7px;
}
.aka5:before {
    border-color: rgba(119, 119, 119, 0);
    border-left-color: #6E6E6E;
    border-width: 8px;
    margin-top: -8px;
}

.aka4{
    position: relative;
    background: #fff;
    border: 1px solid #A4A4A4;
    margin: 10px;
    padding: 15px;
    border-radius: 15px;
    margin-right: 20%;
    clear: both;
    max-width: 500px;
    float: left;
font-size:80%;
}
.aka4:after,
.aka4:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}
.aka4:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.aka4:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #A4A4A4;
    border-width: 8px;
    margin-top: -8px;
}

.clear_balloon{
clear: both;
}
.clears{
clear: both;
}


}











@media screen and (min-width: 641px){
html,body,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,font,img,dl,dt,dd,ol,ul,li,form,caption,tbody,tfoot,thead,table,label,tr,th,td{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font-weight:normal;
vertical-align: baseline;
background:transparent;
}

body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
color:#444444;
}

a{
color:#0044CC;
text-decoration:none;
}
a:hover{
color:green;
text-decoration:underline;
}

.header{
width:100%;
background-color:#00A9C5;
color:white;
margin:0 auto;
padding:20px 0 10px 0;
line-height:140%;
text-align:center;
display:flex;
justify-content:center;
}
.header_inner{
width:960px;
text-align:center;
display:flex;
}

.header_inner h1{
color:white;
font-size:24px;
text-align:left;
}
.header_inner h1 a{
color:white;
text-decoration:none;
}
.header_inner h1 a:hover{
color:yellow;
text-decoration:underline;
}

.header_inner span{
color:white;
font-size:24px;
text-align:left;
}
.header_inner span a{
color:white;
text-decoration:none;
}
.header_inner span a:hover{
color:yellow;
text-decoration:underline;
}

.header_inner nav{
color:white;
font-size:17px;
padding:2px 0 0 0;
margin-left:auto;
}

.accordion ul{
list-style:none;
display:flex;
}

.accordion li{
margin-left:10px;
}
.accordion li a{
color:white;
font-size:80%;
text-decoration:none;
}
.accordion li a:hover{
color:yellow;
text-decoration:underline;
}

.accordion label{
display:none;
}

.toggle{
display:none;
}


.wrapper{
width:960px;
margin:0 auto;
padding:30px 0 0 0;
color:#444444;
}
.left{
float:left;
width:601px;
}
.left2{
float:left;
width:641px;
}
.right{
float:right;
width:310px;
}

.toplogo img{
margin:0 auto;
max-width: 100%;
height: auto;
}


.phrase{
font-size:36px;
line-height:42px;
letter-spacing:1px;
margin:20px 0 45px 0;
}

.entry_box{
text-align:left;
margin:0 0 60px 0;
}

.title{
margin:10px 0;
}

.title div{
}

.title div a{
font-size:36px;
line-height:42px;
color:#DD5E19;
}

.outline{
font-size:80%;
line-height:140%;
margin:5px 0 0 0;
}
.outline a{
color:#DD5E19;
}

.category{
padding:0 5px 0 0;
}

.tag{
padding:0 5px 0 0;
}

.comment{
padding:0 5px 0 0;
}

.date{
font-size:90%;
border-bottom:1px solid #E0E0E0;
padding:0 0 5px 0;
}

.summary{
margin: 10px 0 0 0;
font-size: 0.9em;
color: #444444;
}




.menu_box{
background:#EEFDFF;
padding:10px;
border-bottom:2px solid #00A9C5;
color:#333333;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
font-size:90%;
margin:20px 0 0 0;
}
.menu_box a{
color:#DD5E19;
font-size:100%;
}
.menu_box dl{
margin:0 0 10px 0;
}
.menu_box dl:last-child{
margin:0;
}
.menu_box dt{
}
.menu_box dt a{
}
.menu_box dt a:last-child{
}
.menu_box dd{
padding:0 0 0 8px;
color:grey;
}
.menu_box dd:before{
content:"■"
}



.profile_box{
background:#FBEAE0;
padding:10px;
border-bottom:2px solid #DD5E19;
color:black;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
font-size:90%;
}

.profile_inner_box{
}
.profile_inner_box p{
text-align:left;
}
.profile_inner_box a{
width:220px;
padding:15px 0;
margin:20px auto;
display:block;
color:white;
font-weight:bold;
text-decoration:none;
background:#E76C29;
font-size:120%;
border-radius:10px;
text-align:center;
}
.profile_inner_box a:hover{
text-decoration:underline;
background:green;
}

.search{
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
text-align:center;
padding:15px 0;
margin:20px 0 0 0;
}

.recent_box{
background:#FBFBEF;
padding:10px;
border-bottom:2px solid #FFD700;
color:#333333;
border-top:1px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
font-size:90%;
margin:20px 0 0 0;
}
.recent_box a{
color:#DD5E19;
font-size:100%;
}
.recent_box dl{
margin-bottom:10px;
}

.entry_text_inner_box{
padding:5px 20px 10px 20px;
background-color:white;
text-align:left;
color:#444444;
font-size:16px;
}

.entry_text_inner_box h1{
font-size:36px;
font-weight:400;
line-height:42px;
padding:30px 0;
}

.entry_text_inner_box h2{
font-size:26px;
font-weight:400;
line-height:120%;
padding:0;
margin:70px 0 30px 0;
font-weight:bold;
}

.entry_text_inner_box h2:first-letter{
font-size:40px;
color: #7172ac;
}

.hanyouh{
font-size:26px;
font-weight:400;
line-height:120%;
padding:0;
margin:70px 0 30px 0;
font-weight:bold;
}

.hanyouh:first-letter{
font-size:40px;
color: #7172ac;
}

.entry_text_inner_box h3{
font-size:24px;
font-weight:400;
line-height:120%;
padding:0;
margin:70px 0 30px 0;
font-weight:bold;
}

.entry_text_inner_box h3:first-letter{
font-size:38px;
color: #7172ac;
}



.entry_text_inner_box p{
margin-bottom:40px;
}

.entry_text_inner_box ol{
padding:0 0 0 18px;
margin:0 0 25px 25px;
}

.entry_text_inner_box ol li{
padding-bottom:15px;
}

.entry_text_inner_box ul{
padding:0 0 0 18px;
margin:0 0 25px 25px;
}

.entry_text_inner_box ul li{
padding-bottom:15px;
}


.aka1{
color:red;
font-size:32px;
line-height:42px;
padding:15px 0;
}
.ore1{
color:darkorange;
font-size:32px;
line-height:42px;
margin:20px 0 33px 0;
}
.ao1{
color:#ce31ff;
font-size:32px;
line-height:42px;
margin:20px 0 33px 0;
}

img{
margin:5px auto;
max-width:100%;
height:auto;
}


.entry_footer_box{
padding:30px 0 0 0;
}


.entry_comment{
padding:0 20px;
font-size:80%;
text-align:left;
background-color:white;
color:#444444;
}

.entry_comment span{
color:#61B832;
}

.comment_name{
counter-increment:numeber;
}
.comment_name:first-child{
margin:20px 0 0 0;
padding:20px 0 0 0;
}
.comment_name:before{
content: counter(numeber)".";
}

.comment_body{
padding:5px 0 20px 13px;
}
.comment_body:last-child{
padding:5px 0 20px 13px;
}



.comment_form_box{
font-size:85%;
width:80%;
}

.comment_form_box input{
width:100%;
height:30px;
}

.comment_form_box textarea{
width:100%;
height:100px;
}

.comment_form_box submit{
width:150px;
height:40px;
}

.navigation{
background:white;
margin:30px 0;
padding:5% 3%;
}
.navigation p{
}
.navigation ul{
margin:10px 0 40px 30px;
}
.navigation ul li{
margin:0 0 20px 0;
}
.navigation ol{
margin:10px 0 0 30px;
}
.navigation ol li{
margin:0 0 20px 0;
}
.navigation ol li:last-child{
margin:0;
}
.navigation a{
}

.pager{
margin:70px 0;
}
.pager ul{
display:flex;
justify-content:flex-end;
}
.pager ul >:last-child{
margin-left: auto;
}

.prev{
text-align:left;
list-style:none;
}
.prev a{
font-size:20px;
background-color:#E76C29;
color:white;
padding:10px 20px;
border-radius:5px;
}
.prev a:hover{
text-decoration:underline;
background-color:#00A9C5;
}

.next{
list-style:none;
text-align:right;
}
.next a{
font-size:20px;
background-color:#E76C29;
color:white;
padding:10px 20px;
border-radius:5px;
}
.next a:hover{
text-decoration:underline;
background-color:#00A9C5;
}


hr{
width:70%;
text-align:left;
margin:0 0 40px 0;
border:none;
border-top:dashed 1px black;
height:1px;
color:#FFFFFF;
}

.common{
font-size: 36px;
line-height: 42px;
letter-spacing: 1px;
margin:0 0 45px 0;
}

.clears{
clear:both;
}

.footer{
font-size:70%;
background:#E0E0E0;
color:black;
text-align:center;
padding:10px 0 10px 0;
margin:60px 0 0 0;
}
.footer a{
color:#000000;
text-decoration:none;
}

blockquote{
background-color:#EEEEEE;
border-left:5px solid #DDDDDD;
margin:0 10px 40px 10px;
padding:5px;
}
.permanent_wrapper{
background-color:#F0F0F0;
}

.aka5 {
    position: relative;
    background: #ACFA58;
    border: 1px solid #A4A4A4;
    margin: 20px 30px 20px 0;
    padding: 15px;
    border-radius: 15px;
    margin-left: 20%;
    clear: both;
    max-width: 500px;
    float: right;
    color:black;
    text-decoration:none;
}
.aka5:after,
.aka5:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}
.aka5:after {
    border-color: rgba(133, 226, 73, 0);
    border-left-color: #ACFA58;
    border-width: 7px;
    margin-top: -7px;
}
.aka5:before {
    border-color: rgba(119, 119, 119, 0);
    border-left-color: #6E6E6E;
    border-width: 8px;
    margin-top: -8px;
}

.aka4{
    position: relative;
    background: #fff;
    border: 1px solid #A4A4A4;
    margin: 20px 0 20px 30px;
    padding: 15px;
    border-radius: 15px;
    margin-right: 20%;
    clear: both;
    max-width: 500px;
    float: left;
}

.aka4:after,
.aka4:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}
.aka4:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.aka4:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #A4A4A4;
    border-width: 8px;
    margin-top: -8px;
}

.clear_balloon{
clear: both;
}
.clear{
clear: both;
}

}