

.infeed-rectangle-box {
margin-top:10px;
margin-bottom:20px;
}


/*=============================
reset
=============================*/

* {
margin: 0px;
padding: 0px;
}

img {
border: 0px;/* IE */
vertical-align: bottom
}

a,p,h1,h5,h6 {
text-decoration: none;
color: #313131;
}
h2 {
color: #313131;
}

li{
list-style-type: none;
}

/* Firefox */
a:hover {
outline: none;
}

/*=============================
 base
=============================*/

body {
-webkit-text-size-adjust: 100%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background-color:#f2f2f2;/*ダミーのグレー地、制作後に消去*/
}

#container { 
width : 100%;/*320 to 414 ※制作後100%に変更*/
margin-left: auto;
margin-right: auto;
background-color:#ffffff;
}

#main { 
width: 100%;
}

#page-top{
position: fixed; 
bottom: 80px;
right: 30px;
width: 76px;
height: 30px;
padding-top: 36px;
background-color:#78787c;
text-align: center;
border-radius: 4px;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

#page-top a{ 
position: relative; 
display: block;
font-size: 12px;
line-height: 160%;
color:#ffffff;
}

#page-top a:before{ 
position: absolute; 
bottom: 25px;
right: 35%;
display: block;
content: ' ';
height: 0px;
width: 0px;
border-top: 0px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: #fff 20px solid;
}

/*=============================
header
=============================*/

@media screen and (max-width: 673px) {#header-line{
display:none;
}}

#header-line {
width : 100%;
background-color:#919191;
height:10px;
overflow:hidden;
}

#rogo {
width :  170px;
float: right;
margin-right:20px;
margin-top:10px;
}
#rogo img{
width :  100%;
height: auto;
}
h1{
font-size: 10px;
text-align: right;
}

/*トグルベース*/
#toggle-base {
margin-left: 4%;
width :  72px;
height: 70px;
padding-top: 1px;
background-color:#919191;
text-align: center;
}

p.menu-btn {
font-size: 14px;
color:#ffffff;
margin-top: 4px;
margin-bottom: 2px;
line-height: 100%;
}

/*トグル→バツ*/
/*白丸*/
#toggle-btn{
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
}
/*トグル中線*/
#toggle-btn-icon{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 4px;
margin: -2px 0 0 -9px;
background: #78787c;
transition: .2s;
}
/*トグル上下線*/
#toggle-btn-icon:before, #toggle-btn-icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 18px;
height: 4px;
background: #78787c;
transition: .3s;
}
#toggle-btn-icon:before{
margin-top: -10px;
}
#toggle-btn-icon:after{
margin-top: 6px;
}
/*→バツ*/
#toggle-btn .close{
background: transparent;
}
#toggle-btn .close:before, #toggle-btn .close:after{
margin-top: 0;
}
#toggle-btn .close:before{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#toggle-btn .close:after{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

/*=============================
Gnavi
=============================*/

@media screen and (max-width: 673px) {#gnav{
display:none;
}}

#gnav ul { 
display:block;
width: 96%;
overflow:hidden;
padding: 2%;
background-color:#ffccf5;
}

#gnav li {
font-size: 13px;
line-height: 160%;
list-style-type: none;
float: left;
width: 31.3333%;
height: 31.3333%;
padding: 1%;
text-align: center;
margin-top:0px;
margin-left:0px;
}

#gnav a { 
display:block;
}

#gnav img{ 
width: 100%;
height: auto;
}

/*=============================
main
=============================*/

.infeed-box {
width: 93%;
height: auto
margin-top:10px;
margin-bottom: 10px;
margin-left:2%;
padding-right: 2%;
}

#search-box {
width: 100%;
margin: 10px 0 -10px 0px;
}

p#search {
font-size: 12px;
margin: 0 0 -10px 16px;
}

/*新着記事*/
h2 {
font-size: 24px;
}
.midashi {
padding-top: 20px;
width:  96%;
border-bottom:#9acde7 1px solid;
margin-bottom: 10px;
margin-left: 2%;
}

.link-box-g a {
display: inline-block;/*写真飛び出し防止*/
width: 93%;
height: auto
margin-top:10px;
margin-bottom: 10px;
margin-left:2%;
padding-right: 2%;
border-bottom: solid 1px #81d6cf;
border-right: solid 2px #81d6cf;
}

.link-box-g img {
width: 120px;
height:  auto;
float: left;
margin-right:10px;
}

p.category-gr {
display: inline-block;
width: 120px;
height: auto;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
letter-spacing: 0px;
font-weight: bold;
color:#ffffff;
background-color:#3db680;
text-align: center;
}

p.category-bl {
display: inline-block;
width: 120px;
height: auto;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
letter-spacing: 0px;
font-weight: bold;
color:#ffffff;
background-color:#45a1cf;
text-align: center;
}

p.category-bl {
display: inline-block;
width: 120px;
height: auto;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
letter-spacing: 0px;
font-weight: bold;
color:#ffffff;
background-color:#45a1cf;
text-align: center;
}

p.category-pi {
display: inline-block;
width: 120px;
height: auto;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
letter-spacing: 0px;
font-weight: bold;
color:#ffffff;
background-color:#e7a5c9;
text-align: center;
}

p.category-or {
display: inline-block;
width: 120px;
height: auto;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
letter-spacing: 0px;
font-weight: bold;
color:#ffffff;
background-color:#f09629;
text-align: center;
}

p.category-red {
display: inline-block;
width: 120px;
height: auto;
padding-top: 1px;
padding-bottom: 1px;
font-size: 12px;
letter-spacing: 0px;
font-weight: bold;
color:#ffffff;
background-color:#e50012;
text-align: center;
}

h3 {
display: block;
font-size: 16px;
margin-top:4px; 
line-height: 130%;
overflow: hidden;
}

p.date {
font-size: 10px;
}

.more-bt {
display: block;
width: 95%;
margin-top: 12px;
margin-bottom: 40px;
margin-left:2%;
margin-right:3%;
font-size: 18px;
font-weight: 600;
text-align: center;
background-color: #dbf5f2;
}
.more-bt img {
width: 22px;
height: auto;
vertical-align: middle;
}
.more-bt a{
display: block;
color: #61a098;
padding: 10px 0;
}

/*=============================
side
=============================*/

.area-ad-top {
margin-top:20px;
margin-bottom:20px;
}

#banner { 
width: 90%;
margin-top:20px;
margin-left: auto;
margin-right: auto;
}

#banner img {
width: 100%;
height: auto;
margin-bottom:10px;
}

.series-banner {
width: 70%;
margin-left: auto;
margin-right: auto;
}

.series-banner img {
width: 100%;
height: auto;
margin-bottom:20px;
}

/*=============================
sidemenu-01
=============================*/

.sidemenu {
display: block;
width: 92%;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
}

p.side-title {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 0 5px 10px;
border-top: solid 1px #3f3f3f;
border-left: solid 10px #6090ff;
width : 94%;
}

.menu-link-gloup a {
position: relative;
padding-bottom: 10px;
width: 100%;
height: auto;
display: inline-block;
border-bottom: solid 1px #3f3f3f;
margin-bottom: 10px;
}

.menu-link-gloup img {
width: 65px;
height: auto;
float: left;
margin-right: 10px;
}

p.side-sub {
font-size: 14px;
line-height:120%;
font-weight: bold;
}

p.side-main{
font-size: 13px;
line-height:120%;
padding: 10px 30px 0px 10px;
font-weight: normal;
}

/*サイドメニュー01右矢*/
.menu-link-gloup a::before,
.menu-link-gloup a::after {
position: absolute;
top: 50%;
right: 5px;
content: ' ';
width: 10px;
height: 2px;
background-color: #6090ff;
border-radius: 10px;
}

.menu-link-gloup a::before {
margin-top: -4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-link-gloup a::after {
margin-top: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/*=============================
footer
=============================*/

.page-top-link-area {
width:180px;
float: left;
height: 50px;
margin: 60px 0px 20px 20px;
background-color: #e6e6e8;
}

p.page-top-link {
margin-top: 15px;
font-size: 16px;
}
.up-triangle02 {
margin-left: 20px;
margin-right: 8px;
height: 0px;
width: 0px;
border-top: 0px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: #6090ff 16px solid;
float: left;
}

#footer {
clear: both;
width: 100%;
border-top: solid 1px #313131;
}

#footer p{
clear: both;
font-size: 12px;
margin-left: 6%;
width: 94%;
margin-bottom: 16px;
}

#footer a{
width: 100px;
display: inline-block;
font-size: 12px;
margin-left: 22px;
padding: 10px 10px 10px 6px;
background-color: #e6e6e8;
text-align: center;
}

#footer img{
display:block;
margin-bottom: 10px;
width: 90px;
height: auto;
float: right;
margin-top: 8px;
margin-right: 4%;
}

#footer-line {
width: 100%;
height: 60px;
margin-top: 30px;
background-color: #bacfff;
}
#footer-line p {
width: 92%; 
margin-left: auto;
margin-right: auto;
padding-top: 10px ;
font-size: 12px;
}

