@charset "utf-8";
/*  リセット　*/

html, body, div, 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;
color:#444;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
li{
list-style-type:none;
}
nav ul {
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;
}
*,*:before,*:after {
box-sizing: border-box;
}


/*  共通CSS　*/

body {
line-height:1;
font-family:'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
position:relative;
}
a{color:#444; text-decoration:none;}
a:hover{opacity:0.6;cursor:pointer}
.none{display:none!important;}


#top-newkuchi h2,
#top-ranking h2,
#top-category-all h2,
#top-qlist h2{
text-align:center;
font-size:32px;
position: relative;
margin:auto;
padding: 25px;
width: 300px;
background-color:#FFF;
box-sizing: border-box;
font-weight: bold;
}
#top-qlist h2{
width: 500px;
}
#top-newkuchi h2::before,
#top-newkuchi h2::after,
#top-ranking h2::before,
#top-ranking h2::after,
#top-category-all h2::before,
#top-category-all h2::after,
#top-qlist h2::before,
#top-qlist h2::after {
position: absolute;
content: '';
width: 15px;
height: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#top-newkuchi h2::before,
#top-ranking h2::before,
#top-category-all h2::before,
#top-qlist h2::before {
top: 0;
left: 0;
border-top: 3px solid #fa0;
border-left: 3px solid #fa0;
}
#top-newkuchi h2::after,
#top-ranking h2::after,
#top-category-all h2::after,
#top-qlist h2::after {
bottom: 0;
left: 0;
border-bottom: 3px solid #fa0;
border-left: 3px solid #fa0;
}
.kakko::before,
.kakko::after {
position: absolute;
content: '';
width: 15px;
height: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kakko::before {
top: 0;
right: 0;
border-top: 3px solid #fa0;
border-right: 3px solid #fa0;
}
.kakko::after {
bottom: 0;
right: 0;
border-bottom: 3px solid #fa0;
border-right: 3px solid #fa0;
}

/* header */

header#top-header{
display:block;
background: #FFF;
padding:20px 0;
border-bottom:1px solid #ccc;
}
header#top-header .header-wrap{
width: 1000px;
display: -webkit-flex;
display: flex;
align-items: center;
margin:auto;
}
header#top-header .h1-wrap {
padding:0;
text-align:left;
margin:0 auto;
width:60%;
display: -webkit-flex;
display: flex;
align-items: center;
}
header#top-header .h1-wrap a{
background: url(/img/articles/logoarticles.svg)no-repeat;
background-size:100%;
width:250px;
height:40px;
display:block;
line-height:10;
overflow:hidden;
}
header#top-header .h1-wrap span{
display:block;
font-size:15px;
margin:0px 0 0 20px;
color:#d4d4d4;
}
header#top-header .header-wrap form{
width:30%;
position:relative;
}
header#top-header .header-wrap form #search-form-box {
border: 0;
padding:5px 50px 5px 20px;
background:#eee;
width:100%;
height:40px;
line-height:40px;
border-radius:50px;
}
input.css-button{
position:absolute;
width:45px;
height:45px;
top:-3px;
right:0;
border-radius:50px;
border:0;
background:url(/img/articles/icon/search.png)no-repeat;
background-color:#888;
background-size:24px;
background-position:9px center;
}

header#top-header .header-wrap input:focus {
background: #eee!important;
border:0;
outline: none;
}
header#top-header .hed-main-box{
position:absolute;
top:34vh;
left:0;
right:0;
bottom:0;
margin:auto;
text-align:center;
}
header#top-header .hed-main-box h1 {
text-align: center;
margin: auto;
display: block;
font-size:40px;
line-height: 1.4;
color: #FFF;
margin-bottom: 30px;
font-weight:bold;
}
header#top-header .hed-main-box .firstViewTxt {
text-align: center;
margin: auto;
display: block;
font-size:40px;
line-height: 1.4;
color: #FFF;
margin-bottom: 30px;
font-weight:bold;
}
@media (max-width: 680px) {
header#top-header .hed-main-box h1 {
font-size:5vw;
}
header#top-header .hed-main-box .firstViewTxt {
font-size:5vw;
padding-left:15px;
}
body #main-lower #lowerRight{
margin-top:30px;
}
}

/*  topform　*/

.hed-main-box form{
width:50%;
margin:auto;
display:block;
position: relative;
}
.hed-main-box form input:focus {
background: #ffffff!important;
}
.hed-main-box form #search-form-box {
border:1px solid #FFF;
padding: 10px 100px 10px 10px;
background: none;
width:100%;
line-height: 26px;
background: #ccc;
border-radius: 10px;
outline: none;
}
.hed-main-box form .css-button {
border: none;
background: #2d2d2d;
display: inline-block;
padding: 0 36px;
line-height: 30px;
color: #fff;
border-radius: 30px;
font-size: 14px;
cursor: pointer;
position:absolute;
right:-35px;
top:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}

/* topInner-box */

#topInner-box{
display: -webkit-flex;
display: flex;
justify-content:space-between;
align-items:stretch;
width:1000px;
margin:420px auto 0;
}

/* top-main */
main#top-main{
width:680px;
margin-top:50px;
position:relative;
}

main#top-main h2{
padding-bottom:15px!important;
}

#main-lower #lowerRight{
margin-top:60px;
}

/*  top-article　*/
#top-article{
background:url(/img/articles/top-bg.jpg);
background-size:60%;
padding:30px 0;
margin-bottom:30px;
width:100%;
position: absolute;
left:0;
margin:auto;
}
#top-article:before{
content:"";
display:block;
width:100%;
height:14px;
background:url(/img/articles/linenamisen.png);
background-size:100%;
bottom:-10px;
left:0;
position:absolute;
}
#top-article .top-article-in{
display: -webkit-flex;
display: flex;
justify-content:space-between;
align-items:stretch;
width:1000px;
margin:auto;
}
#top-article .top-article-in article{
padding:15px;
margin:0 10px;
border-radius:5px;
box-sizing:border-box;
background:#FFF;
}
#top-article .top-article-in article img{
width:100%;
}
#top-article .top-article-in article h3{
margin:10px 0;
font-size:18px;
display:block;
line-height:1.5;
font-weight:bold;
color:#444;
}
#top-article .top-article-in article p{
font-size:14px;
line-height:1.5;
color:#666;
}
/*  article-list　*/
section#article-list{
width:100%;
padding-right:30px;
}
section#article-list h2{
padding:0 0 20px;
margin:0 0 20px;
font-size:22px;
background:url(/img/articles/lineslash.png)no-repeat;
background-position:bottom;
background-size:100%;
color:#444;
font-weight:bold;
}
section#article-list .article-list-in{
}
section#article-list .article-list-in article{
}
section#article-list .article-list-in article a{
display: -webkit-flex;
display: flex;
margin-bottom:20px;
border:1px solid #dde4e6;
padding:10px;
box-sizing:border-box;
border-radius:5px;
}
section#article-list .article-list-in article img{
width:30%;
height: 150px;
object-fit: cover;
}
section#article-list .article-list-in article .a-list-r{
width:65%;
margin-left:20px;
}
section#article-list .article-list-in article .listSub{
}
section#article-list .article-list-in article .listSub time{
font-size:14px;
color:#888;
margin-right:10px;
}
section#article-list .article-list-in article .listSub .listCategory{
font-size:12px;
padding:0px 20px;
border:1px dashed #ccc;
border-radius:10px;
background:#e7e6ff;
color:#666;
}
section#article-list .article-list-in article .a-list-r h3{
color:#444;
font-size:17px;
margin:10px 0;
line-height:1.5;
font-weight:bold;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
section#article-list .article-list-in article .a-list-r p{
font-size:14px;
line-height:1.4;
color:#666;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}


/* footer */

footer{
width:100%;
margin:20px auto 0;
background:#FFF;
}
footer .footer-link-list{
width:100%;
background:#eff3f4;
}
footer .footer-link-list ul{
display:-webkit-flex;
display:flex;
justify-content: center;
align-items: center;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
width:980px;
margin:auto;
padding:10px 0;
box-sizing:border-box;
}
footer .footer-link-list li{
width:14%;
font-size:11px;
}
footer .footer-link-list li a{
display:block;
padding:10px 0px;
color:#888;
text-align:center;
}
.copyright-txt{
color:#999;
display:block;
padding:15px 0;
text-align:center;
width:100%;
font-size:10px;
}


/*  ↓sp　*/

@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){

/*  共通CSS　*/

#top-newkuchi h2,
#top-ranking h2,
#top-category-all h2,
#top-qlist h2{
text-align:center;
font-size:24px;
position: relative;
margin:auto;
padding: 15px;
width: 90%;
background-color:#FFF;
box-sizing: border-box;
font-weight: bold;
}
#top-qlist h2{
width: 90%;
}


/* header */

header#top-header{
display:block;
background: #FFF;
padding:10px 0;
border-bottom:1px solid #ccc;
}
header#top-header .header-wrap{
width:100%;
display: -webkit-flex;
display: flex;
align-items: center;
margin:auto;
}
header#top-header .h1-wrap {
padding:0;
text-align:left;
margin:0 auto;
width:60%;
display: -webkit-flex;
display: flex;
align-items: center;
}
header#top-header .h1-wrap a{
background: url(/img/articles/logoarticles.svg)no-repeat;
background-size:100%;
width:200px;
height:32px;
display:block;
line-height:10;
overflow:hidden;
}
header#top-header .h1-wrap span{
display:none;
font-size:15px;
margin:0px 0 0 20px;
color:#d4d4d4;
}
header#top-header .header-wrap form{
width:30%;
position:relative;
}
header#top-header .header-wrap form #search-form-box {
border: 0;
padding:5px 50px 5px 20px;
background:#eee;
width:100%;
height:40px;
line-height:40px;
border-radius:50px;
}
input.css-button{
position:absolute;
width:45px;
height:45px;
top:-3px;
right:0;
border-radius:50px;
border:0;
background:url(/img/articles/icon/search.png)no-repeat;
background-color:#888;
background-size:24px;
background-position:9px center;
}

header#top-header .header-wrap input:focus {
background: #eee!important;
border:0;
outline: none;
}
header#top-header .hed-main-box{
position:absolute;
top:34vh;
left:0;
right:0;
bottom:0;
margin:auto;
text-align:center;
}
header#top-header .hed-main-box h1 {
text-align: center;
margin: auto;
display: block;
font-size:40px;
line-height: 1.4;
color: #FFF;
margin-bottom: 30px;
font-weight:bold;
}
header#top-header .hed-main-box .firstViewTxt {
text-align: center;
margin: auto;
display: block;
font-size:40px;
line-height: 1.4;
color: #FFF;
margin-bottom: 30px;
font-weight:bold;
}

/*  topform　*/

.hed-main-box form{
width:90%;
}
.hed-main-box form input:focus {
background: #ffffff!important;
}
.hed-main-box form #search-form-box {
border:1px solid #FFF;
padding: 10px 85px 10px 10px;
background: none;
width:100%;
line-height: 26px;
background: #ccc;
border-radius: 6px;
outline: none;
}
.hed-main-box form .css-button {
border: none;
background: #2d2d2d;
display: inline-block;
padding: 0 20px;
line-height: 35px;
color: #fff;
font-size: 12px;
cursor: pointer;
position:absolute;
right:-15px;
top:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}

/* topInner-box */

#topInner-box{
display: -webkit-flex;
display: flex;
justify-content:space-between;
align-items:stretch;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
width:100%;
margin:0 auto;
}

/* top-main */
main#top-main{
width:100%;
position:relative;
margin-top:25px;
}

/*  top-article　*/

#top-article{
background:url(/img/articles/top-bg.jpg);
background-size:60%;
padding:30px 0;
position:relative;
top:0;
}
#top-article:before{
content:"";
display:block;
width:100%;
height:14px;
background:url(/img/articles/linenamisen.png);
background-size: 350%;
bottom:-10px;
left:0;
position:absolute;
}
#top-article .top-article-scroll{
overflow:scroll;
}
#top-article .top-article-in{
display: -webkit-flex;
display: flex;
justify-content:space-between;
align-items:stretch;
width:1000px;
margin:auto;
}
#top-article .top-article-in article{
padding:15px;
margin:0 10px;
border-radius:5px;
box-sizing:border-box;
background:#FFF;
}
#top-article .top-article-in article img{
width:100%;
}
#top-article .top-article-in article h3{
margin:10px 0;
font-size:18px;
font-weight:bold;
display:block;
color:#444;
}
#top-article .top-article-in article p{
font-size:14px;
line-height:1.5;
color:#666;
}

/*  article-list　*/
section#article-list{
width:100%;
padding:0 10px;
}
section#article-list h2{
padding:0 0 20px;
margin:0 0 20px;
font-size:22px;
background:url(/img/articles/lineslash.png)no-repeat;
background-position:bottom;
background-size:100%;
}
section#article-list .article-list-in{
}
section#article-list .article-list-in article{
}
section#article-list .article-list-in article a{
display: -webkit-flex;
display: flex;
margin-bottom:20px;
border:1px solid #dde4e6;
padding:10px;
box-sizing:border-box;
border-radius:5px;
height:130px;
}
section#article-list .article-list-in article img{
width:30%;
height:100%;
object-fit:cover;
}
section#article-list .article-list-in article .a-list-r{
width:70%;
margin-left:10px;
}
section#article-list .article-list-in article .listSub{
}
section#article-list .article-list-in article .listSub time{
font-size:12px;
color:#888;
margin-right:10px;
}
section#article-list .article-list-in article .listSub .listCategory{
font-size:11px;
padding:0px 20px;
border:1px dashed #ccc;
border-radius:10px;
background:#e7e6ff;
color:#666;
}
section#article-list .article-list-in article .a-list-r h3{
color:#444;
font-size:15px;
line-height:1.4;
margin:10px 0 5px 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
section#article-list .article-list-in article .a-list-r p{
font-size:13px;
line-height:1.4;
margin:0;
color:#666;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

/* footer */

footer{
width:100%;
margin:20px auto 0;
background:#FFF;
}
footer .footer-link-list{
width:100%;
background:#eff3f4;
}
footer .footer-link-list ul{
display:-webkit-flex;
display:flex;
justify-content: center;
align-items: center;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
width:100%;
margin:auto;
padding:10px 0;
box-sizing:border-box;
}
footer .footer-link-list li{
width:50%;
font-size:11px;
}
footer .footer-link-list li a{
display:block;
padding:10px 20px;
color:#888;
text-align:center;
border:1px solid #e2e2e3;
border-radius:50px;
margin:3px;
box-sizing:border-box;
}
.copyright-txt{
color:#999;
display:block;
padding:15px 0;
text-align:center;
width:100%;
font-size:10px;
}

}

/*------------
共通
--------------*/

#top-main .sns-copytxt{
display:none;
}