@charset "utf-8";

/*==============================================
            Common Styles
==============================================*/

body{
	font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
	/* 20190527 削除 -> font-feature-settings:'palt';	*/
	font-weight: 400;
	background: #fff;
	height: 100%;
	margin: 0;
	padding: 0;
}
html{ height: 100%; }
/* 20190527 削除 -> font-weight:300; */
p{ font-size: 20px; line-height: 1.85; color:#3c3c3c; text-align:justify; margin:0; }
*, *::before, *::after{box-sizing: border-box; -webkit-box-sizing:border-box;}
a, a:hover, a:focus, a:active, a.active {outline: 0;}
a{color: #000; text-decoration: none;}
a:hover, a:focus, a:active, a.active{color: #aaa;}
h1, h2, h3, h4, h5, h6,figure{
	margin: 0; padding:0;
	/* 20190527 削除 font-feature-settings:"pkna"; */
}
ul, ol{ list-style-type: none; margin: 0; padding: 0;}
h1{ }
h2{ font-size: 30px; text-align: center; padding-bottom: 17px; color: #3c3c3c;}
h3{ font-size: 26px; /* font-weight:200; */}
h4 { font-size: 20px; padding-bottom: 30px; color: #3c3c3c; text-transform: uppercase; }

a, img{-webkit-transition: all .5s ease; transition: all .5s ease;}

.container { max-width: 1160px; margin:auto; }

.midashi{font-weight:700; margin-bottom:10px;}
.midashi{font-size:1.3em; clear:both;}

/* font-size */
.f30{ font-size:30px !important;}
.f25{ font-size:25px !important;}
.f20{ font-size:20px !important;}

/* pagenation */
.pagenation{text-align:center;}
.pagenation span{display:inline-block; position:relative; font-size:18px; width:36px; height:36px; border-radius:100%; line-height:36px; margin:0 5px;}
.pagenation span:hover{background:#eee; color:#000;}
.pagenation span.active{ background:#F0DE21; color:#000;}
.pagenation span.prev::before,
.pagenation span.prev::after,
.pagenation span.next::before,
.pagenation span.next::after{
	content:"";
	display:block;
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
}
.pagenation span.prev:hover,
.pagenation span.next:hover{background:transparent; opacity:0.3;}

.pagenation span.prev::before,
.pagenation span.next::before{
	width:20px; height:3px;
	left:0; right:0;
	border-radius:5px;
	background:#000;
}

.pagenation span.prev::after,
.pagenation span.next::after{
	width:18px; height:18px; background:transparent; border-top:solid 3px #000; border-right:solid 3px #000;
}

.pagenation span.prev::after{ transform:rotate(225deg); left:3px;}
.pagenation span.next::after{ transform:rotate(45deg); right:3px;}

/*==============================================
            Headline Block
==============================================*/
.headline{background:#F0DE21; margin-bottom: 15px;}
.grid{
	display:flex;
	height:440px;
	position:relative;
	overflow:hidden;
}
.recommend-title{
	position:absolute;
	z-index:1;
	top:0;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 1.0em;
	line-height:1.2;
	text-align:center;
	width:100px;
}
.recommend-title::after{
	content:"";
	display:block;
	position:absolute;
	width:100px;
	height:100px;
	border-radius:100%;
	-webkit-border-radius:100%;
	background:#fff;
	z-index:-1;
	top:-50px;
	left:0;
}

.entry-list{ position:relative; overflow:hidden; background:#000;}
.entry-list a{display:block; width:100%; height:100%;}
.entry-list img{width:100%; height:100%; object-fit:cover;}
.entry-list a:hover img{filter: blur(2px); -webkit-filter:blur(2px);}
.entry-title{
	font-weight:700;
	color:rgba(255,255,255,1);
	margin:auto;
	line-height:1.2;
}

.num-1 .entry-title, .num-2 .entry-title, .num-3 .entry-title{
	position:absolute;
	right:0;
	left:0;
	text-shadow:0 0 2px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,1);
	z-index:1;
}

.num-1 .entry-title{ font-size:30px; bottom:20px; padding:0 25px;}
.num-2 .entry-title, .num-3 .entry-title{ height:auto; font-size:21.28px; bottom:5px; padding:0 15px;}

.column{position:relative; flex-basis:250px;}

.num-1{
	flex-basis: 500px;
	height:440px;
	align-self: flex-start;
}
.num-2{
	height:220px;
	align-self: flex-start;
}
.num-3{
	height:220px;
}
.ranking{padding:15px; counter-reset:ranking; flex-basis:410px;}
.ranking li{position:relative; border-bottom:solid 1px rgba(0,0,0,0.4); padding:10px 0; font-weight:500; padding-left:2.3em;}
.ranking li::before{counter-increment:ranking;content: counter(ranking); height:26px; font-size:26px; line-height:1; display:block; position:absolute; left:0; top:0; bottom:0; margin:auto; font-family:Sawarabi Mincho;}
.read-more{
	border:none;
	/*
	font-size:0.9em;
	*/
	display:block;
	margin-top:10px;
	text-align:right;
}

/* ranking list */
.ranking-area{}
.ranking-area .num{
	width: 30px;
	height: 30px;
	font-family: 'Sawarabi Mincho', sans-serif;
	position: absolute;
	font-size: 20px;
	font-style: normal;
	text-align: center;
	top: 0;
	left: 0;
	padding: 5px;
	line-height: 1;
	background-color: #F0DE21;
	z-index: 100;
	border-radius: 0 0 3px 3px;
}

article{
	display: flex;
	position:relative;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	align-items:center;
}

.list-article .item{
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}
.list-article .item:hover{
    opacity: 0.8;
}
.list-article .image{
    flex-basis: 160px;
    width: 160px;
    height: 120px;
    overflow: hidden;
    margin-right: 20px;
}
.list-article .image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.list-article .title{
	flex: 1;
	width: auto;
	height: 120px;
    overflow: hidden;
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
}
.list-article .attribute{
	font-weight: normal;
	height: 40px;
}

.list-article .new, .list-article .pref{
	display: inline-block;
	position: relative;
    font-size: 17px;
	line-height: 30px;
	height: 30px;
	vertical-align: top;
	margin-right: 8px;
    text-align: center;
}
.list-article .new{
    background-color: #f0de21;
	color: #000;
	padding: 0 8px;
}
.list-article .new::after{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: #F0DE21;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: -5px;
	z-index: -1;
}
.list-article .pref{
    color: #aaa;
}
.list-article .rank{
	width: 40px;
	height: 40px;
	font-family: 'Sawarabi Mincho', sans-serif;
	position: absolute;
	font-size: 26px;
	font-style: normal;
	text-align: center;
	line-height: 40px;
	top: 0;
	left: 0;
	background-color: #F0DE21;
	z-index: 100;
	border-radius: 0 0 3px 3px;
}

.category-title{display: flex; align-items:center; margin:0 auto;}
.category-title::before, .category-title::after{content:""; flex-grow:1; height:1px; background:rgba(0,0,0,1); display:block;}
.category-title span{ padding:0 .4em;}

.more-btn{
	margin:50px auto;
	width:300px;
	background:#5e5e5d;
	color:#fff;
	border-radius:50px;
	text-align:center;
	line-height:40px;
	cursor:pointer;
	transition: background-color .24s ease-in-out;
}
.more-btn:hover{background:#888;}
.more-btn span{position:relative; padding:0 20px; font-size:20px; font-weight:500;}
.more-btn span::after{content:""; display:block; width:15px; height:15px; border-top:solid 2px #fff; border-right:solid 2px #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); position:absolute; right:0; margin:auto; top:0; bottom:0;}


/*==============================================
            Header Block
==============================================*/

/*** Haader ***/
header{width:100%; height:60px; background:#fff; position:relative;}
body#list header{background:#F0DE21;}
header .title {
    width: 300px;
    margin: auto;
    line-height: 1;
    height: 37px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
header .title img{width:100%;}


/*==============================================
           トップページ差し込みコンテンツ
==============================================*/

section.feature{ background:rgba(0,0,0,0.8); color:#fff; padding:20px 10px; box-shadow:inset 0 5px 15px rgba(0,0,0,0.4);}
section.feature .read-more a{
	color: #fff;
}
section.feature .read-more a:hover{
	color: #aaa;
}

.list-feature{
	display: flex;
	flex-wrap: wrap;
}
.list-feature .item{
	display: block;
	padding: 10px;
	width: 25%;
}
.list-feature .item:first-child{
	padding-left: 0;
}
.list-feature .item:last-child{
	padding-right: 0;
}
.list-feature .item:hover{
	opacity: 0.8;
}
.list-feature .image{
	width: 100%;
	height: 180px;
	margin-bottom: 10px;
	overflow: hidden;
}
.list-feature .image img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.list-feature .title{
	width: 100%;
	height: auto;
	text-align: justify;
	overflow: hidden;
	font-size: 22px;
	line-height:28px;
	font-weight: 700;
	color: #fff;
}


/*==============================================
            個別
==============================================*/

section .entry, section .list{padding:0;}
.news-content{ padding: 0; }
.news-title{ margin-bottom:30px;}
.news-title h3{font-size:35px; line-height:1.2; font-weight:700; display:block; margin-bottom:20px;}
.news-title .tag{margin-bottom:20px; line-height:1;}
.news-title .tag a{margin:0 5px 5px 0; padding:0 5px; background:#F5E301; display:inline-block; font-size:16px; line-height:24px; height: 24px;}
.news-title .date{font-size:0.9em; color:#aaa;}

.social-buttons{ text-align:right;}
.social-buttons li{display:inline-block; line-height:1;}
.social-buttons .facebook span{
	vertical-align: baseline !important;
}
.entry figure.image{ margin:30px 0;}
.entry figure.image img{width:100%;}
/* 20190415 text-align:center; -> text-align:left; */
.entry figure{ display:table; width:100%; text-align:left;}
.entry figure.vertical{ width:auto; margin-left:auto; margin-right:auto;}
.entry figure.vertical a{}
/* 20190415 追加 -> display:block;margin:0 auto; */
.entry figure.vertical a img{width:auto; height:800px; display:block; margin:0 auto;} 
/* 20190524 追加 -> font-weight:300; */
/* 20190527 削除 -> font-weight:300; */
.entry figcaption{color:#666; font-size:0.9em;}
.entry main .text{
	font-size: 20px;
	line-height: 1.85em;
	margin-bottom: 1.0em;
	color: #3c3c3c;
	/* 20190527 削除 -> font-weight:300; */
	text-align: justify;
}
.entry main .text a{
	text-decoration: underline;
}

.sub-photo{display:flex; flex-wrap:nowrap; -webkit-justify-content: space-between; justify-content: space-between;}
.sub-photo{margin-bottom:30px;}
.sub-photo .item{display:block; position:relative; border:solid 2px #fff; flex:1;}
.sub-photo .item::before{content:""; display:block; padding-top:75%;}
.sub-photo img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.sub-photo .no-photo::after{content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; border:solid 1px #000;}
.link, .movie, .map{ margin:30px 0;}
.link a{display:inline-block; margin:0 10px 10px 0; border:solid 1px #ccc; padding:0 4px;}

/*比率固定*/
.wrapper{position:relative; width:100%;}
.wrapper::before{content:""; display:block; padding-top:56.25%;}
.fixed-ratio{position:absolute; top:0; left:0; width:100%; height:100%;}

/*2カラム*/
.two-column{display:flex;}
@supports (position:sticky) {.two-column{align-items:flex-end;}}

.two-column main{ width:800px; margin-right:60px; align-self: flex-start;}
.two-column aside{
	flex:none;
	position: -webkit-sticky;
	position: sticky;
	width:300px;
	min-height: calc(100vh - 60px);
	bottom: 0px;
}

aside div{margin-bottom:30px;}
aside .ranking{padding:0;}
aside ul li{position:relative; border-bottom:solid 1px rgba(0,0,0,0.4); padding:10px 0; font-weight:500;}

.banner-area{display:-webkit-flex; display:flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; align-items: center; justify-content: center;}
.banner-area .item{margin-bottom:10px; width: 300px;}
.banner-area .image{width:100%;}
.toppage .banner-area{flex-flow: row wrap;}
.toppage .banner-area .item{margin:10px;}


/*==============================================
            Footer Part
==============================================*/

footer { position:relative; padding:80px 0; }
.footer-grid { display:flex; -webkit-justify-content:center; justify-content:center;}
.footer-grid div{flex:0 auto; padding:0 20px;}
.footer-left{}
.social{width:160px; display:flex; -webkit-justify-content:space-between; justify-content:space-between; text-align:center; padding:0 !important; margin:auto;}
.social i{flex:1; display:block; padding:15px;}
.social a{display:block; border-radius:10px;}
.social a{display:block; border-radius:10px;max-width:50px;margin:0 auto;}
.social a:hover img{opacity:0.6;}
.social img{width:100%;}
.footer-menu ul {width:100%; display:flex; flex-wrap:wrap;}
.footer-menu ul li{ width:50%; margin-bottom:15px; font-weight:500;}
.copyright { margin-bottom: 0; font-size: 14px; line-height: 1; margin-bottom:5px;}


/*==============================================
            Search  2019.03.28 kikuchi
==============================================*/

.search-container{
	position:relative;
	width:calc(100% - 20px);
	margin:0 10px 30px 10px;
}
#list_input{
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
	width:100%;
	display: block;
	height: 45px;
	padding: 0 50px 0 12px;
	border: 0;
	border-radius: 3px;
	background-color: #eaedf2;
	color: #5c6b80;
	font-size: 1em;
	vertical-align: middle;
	line-height: 45px;
	transition: background-color .24s ease-in-out;
}
#list_input:focus {
  background-color: #f7f8fa;
}
#list_submit{
  cursor: pointer;
  font-size: 1.0em;
  border: none;
  background: #5e5e5d;
  color: #000;
  position: absolute;
  width:45px;
  height: 45px;
  right: 0;
  top: 0;
  outline : none;
  border-radius:0 3px 3px 0;
  transition: background-color .24s ease-in-out;
}
#list_submit:hover{background:#888;}
#list_submit:before {
  position: absolute;
  content: '';
  width: 25px;
  height: 25px;
  top:0;
  left:0;
  bottom:0;
  right:0;
  border-radius: 50%;
  border:solid 3px #fff;
  margin:auto;
}
#list_submit:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 6px;
  top: calc(50% + 8px);
  left: calc(50% + 3px);
  border-top: solid 3px #fff;
  transform: rotate(45deg);
}

/* モーダルメニュー */
body.is-menu-open #content {
  pointer-events: none;
  transition: all .2s ease-out;
  -webkit-filter: blur(8px);
     -moz-filter: blur(8px);
      -ms-filter: blur(8px);
          filter: blur(8px);
}

.menu-open-btn {
  width: 40px;
  height: 40px;
  position: fixed;
  top: 10px;
  right: 10px;
  margin:auto;
  border-radius:100%;
  z-index:100;
  background:#fff;
	opacity: 0.8;
}
.menu-open-btn:hover{background:#eee;}
.menu-open-btn::before,.menu-open-btn::after{content:""; display:block; height:3px; width:24px; background:rgba(0,0,0,1); position:absolute; left:0; right:0; margin:auto;}
.menu-open-btn::before{top:10px;}
.menu-open-btn::after{bottom:10px;}
.menu-open-btn span{display:block; height:3px; width:24px; background:rgba(0,0,0,1); position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
#modal-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 222, 33, 0.9);
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;
  overflow-y: auto;
	z-index: 500;
}

.menu-nav {
  margin-top: 100px;
  text-align: left;
  position: relative;
  transform: translateY(50px);
  transition: all .2s ease-out;
}

.menu-nav a:hover {
  text-decoration: underline;
}

.menu-close-btn {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
.menu-close-btn::before,.menu-close-btn::after{ content:""; display:block; height:1px; width:100%;background:#000; position:absolute; top:20px;}
.menu-close-btn::before{transform:rotate(45deg);}
.menu-close-btn::after{transform:rotate(-45deg);}

body.is-menu-open #modal-menu {
  opacity: 1;
  pointer-events: auto;
}

body.is-menu-open #content {
  pointer-events: none;
  transition: all .2s ease-out;
  -webkit-filter: blur(8px);
     -moz-filter: blur(8px);
      -ms-filter: blur(8px);
          filter: blur(8px);
}

body.is-menu-open .menu-nav {
  transform: translateY(0);
}


.menu-nav .bar {
	display: block;
	position: relative;
	margin: 0 0 2px 0;
	padding: 15px 50px;
	line-height: 1;
	cursor: pointer;
	font-size:36px;
}

.menu-nav label i{display:block; position:absolute; top:0; bottom:0; left:10px; margin:auto; width:30px; height:30px; border-radius:100px; border:solid 2px #000;}
.menu-nav label i::before, .menu-nav label i::after{background:#000; content:""; display:block; position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; width:70%; height:2px;}
.menu-nav label i::before{ }
.menu-nav label i::after {transform:rotate(90deg);}

input[type="checkbox"]:checked + label i::after{ transform:rotate(0deg);}
input[type="radio"]:checked + label i::before{ transform:rotate(-45deg); margin-left:10.5px; width:50%;}
input[type="radio"]:checked + label i::after{ transform:rotate(45deg); margin-right:10.5px; width:50%;}

.menu-nav input {
	display: none;
}
.menu-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background:rgba(255,255,255,0.8);
}
.menu-nav li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
	font-size:18px;
}

.menu-nav dl{margin:30px 0; padding:0;}
.menu-nav dd{display:inline-block; font-size:18px; margin:10px;}

.top-line{ border-top:solid 1px #000;}
.bottom-line{ border-bottom:solid 1px #000;}

/*リストが増えたらULごとに追加してください*/
#bar1:checked ~ #link1 li,
#bar2:checked ~ #link2 li,
#bar3:checked ~ #link3 li,
#bar4:checked ~ #link4 li,
#bar5:checked ~ #link5 li,
#bar6:checked ~ #link6 li {
	max-height: 46px;
	padding:10px 0 10px 40px;
	opacity: 1;
}


/*==============================================
            Responsive Part tablet
==============================================*/

@media all and (max-width: 1160px) {
	footer {padding: 80px 20px;}
	.banner-area{display:-webkit-flex; display:flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; align-items: center;}
	.banner-area .item{margin:10px;}
	.container {
		width: auto;
	}
	.grid{
	height:auto;
	display:block;
	}
	.entry-list a{position:absolute; top:0;}
	.column{width:33.3%; float:left;}
	.num-1{
		width:66.7%;
		height:auto;
		float:left;
	}
	.num-2{
		width:100%;
		height:auto;
	}
	.num-3{
		width:100%;
		height:auto;
	}
	
	.grid ul{
		width:100%;
		clear:both;
	}

	.headline .item{position:relative;}
	.headline .item::before{content:""; display:block; padding-top:75%;}
	.headline .item a{position:absolute; width:100%; height:100%; display:block; top:0;}

	.ranking li:nth-child(6),
	.ranking li:nth-child(7),
	.ranking li:nth-child(8),
	.ranking li:nth-child(9),
	.ranking li:nth-child(10){display:none;}

	.news-content{ padding: 0 10px; }

	.list-article .item{
        display: flex;
        position: relative;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        align-items: center;
	}
	.list-article .item:hover{
        opacity: 0.8;
	}
	.list-article .image{
        flex-basis: 100px;
        width: 100px;
        height: 100px;
        overflow: hidden;
        margin-right: 10px;
	}
	.list-article .image img{
        object-fit: cover;
        width: 100%;
        height: 100%;
	}
	.list-article .title{
		flex: 1;
		width: auto;
		height: 100px;
        overflow: hidden;
        font-size: 24px;
        line-height: 33px;
        font-weight: 700;
	}
	.list-article .attribute{
   	font-weight: normal;
		height: 34px;
	}

	.list-article .new, .list-article .pref{
		display: inline-block;
		position: relative;
        font-size: 15px;
		line-height: 25px;
		height: 25px;
		vertical-align: top;
		margin-right: 6px;
        text-align: center;
	}
	.list-article .new{
        background-color: #f0de21;
        color: #000;
		padding: 0 6px;
	}
	/*
	.list-article .pref{
    color: #aaa;
	}
	*/
	.list-article .new::after{
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		background: #F0DE21;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: -4px;
		z-index: -1;
	}
	.list-article .rank{
		width: 33px;
		height: 33px;
		font-family: 'Sawarabi Mincho', sans-serif;
		position: absolute;
		font-size: 20px;
		font-style: normal;
		text-align: center;
		line-height: 33px;
		top: 0;
		left: 0;
		background-color: #F0DE21;
		z-index: 100;
		border-radius: 0 0 3px 3px;
	}
	
	section.feature{padding: 10px;}
	.list-feature .item{
		display: block;
		padding: 10px;
		width: 50%;
	}
	.list-feature .item:nth-child(odd){
		padding-left: 0;
	}
	.list-feature .item:nth-child(even){
		padding-right: 0;
	}
	.list-feature .image{
		width: 100%;
		height: auto;
		margin-bottom: 10px;
		overflow: hidden;
		position: relative;
	}
	.list-feature .image::before{
		content: "";
		display: block;
		padding-top: 75%;
	}
	.list-feature .image img{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.list-feature .title{
		width: 100%;
		height: auto;
		text-align: justify;
		overflow: hidden;
		font-size: 20px;
		line-height:26px;
		font-weight: 700;
		color: #fff;
	}

	.entry main .text{
		font-size: 18px;
		line-height: 1.85em;
		margin-bottom: 1.0em;
	}
	.entry figure.vertical a img { height: 760px;}

	.two-column{display:block;}
	.two-column main{margin-right:auto; width:100%; margin-bottom: 30px;}
	.two-column aside{width:100%; position:relative; right:0; top:0;}
	.two-column aside .ranking{
		padding: 0 10px;
	}
	.two-column aside .list{
		padding: 0 10px;
	}
	
	footer{padding:30px;}
	.footer-grid{flex-wrap:wrap;}
	.footer-left, .footer-menu{width:auto;}
	.footer-grid div{flex:auto; text-align:center;}
	.copyright{text-align:center;}

	.more-btn{
		margin:40px auto;
	}
}

/*==============================================
            Responsive Part smartphone
==============================================*/

@media all and (max-width: 640px) {
	p{font-size:16px;}
	
	header .title {
        width: 55%;
        margin: auto;
	}

	.num-1 .entry-title{ height: auto; font-size:21.28px; bottom:5px; top:auto; padding:0 15px;}

	.column{width:100%; float:none;}
	.num-1{
		width:100%;
		float:none;
	}

	.list-article .item{
        display: flex;
        position: relative;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        align-items: center;
	}
	.list-article .item:hover{
        opacity: 0.8;
	}
	.list-article .image{
        flex-basis: 80px;
        width: 80px;
        height: 80px;
        overflow: hidden;
        margin-right: 10px;
	}
	.list-article .image img{
        object-fit: cover;
        width: 100%;
        height: 100%;
	}
	.list-article .title{
		flex: 1;
		width: auto;
		height: 80px;
        overflow: hidden;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
	}
	.list-article .attribute{
    	font-weight: normal;
		height: 20px;
	}

	.list-article .new, .list-article .pref{
		display: inline-block;
		position: relative;
        font-size: 12px;
		line-height: 15px;
		height: 15px;
		margin-right: 4px;
        text-align: center;
	}
	.list-article .new{
        background-color: #f0de21;
		color: #000;
		padding: 0 4px;
	}
	/*
	.list-article .pref{
    color: #aaa;
	}
	*/
	.list-article .new::after{
		content: "";
		display: block;
		width: 6px;
		height: 6px;
		background: #F0DE21;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: -3px;
		z-index: -1;
	}
	.list-article .rank{
		width: 24px;
		height: 24px;
		font-family: 'Sawarabi Mincho', sans-serif;
		position: absolute;
		font-size: 16px;
		font-style: normal;
		text-align: center;
		line-height: 24px;
		top: 0;
		left: 0;
		background-color: #F0DE21;
		z-index: 100;
		border-radius: 0 0 3px 3px;
	}
	.list-feature .title{
		width: 100%;
		height: auto;
		text-align: justify;
		overflow: hidden;
		font-size: 16px;
		line-height:20px;
		font-weight: 700;
		color: #fff;
	}

	.news-title h3{font-size:26px;}
	
	.social-buttons{ text-align:left;}
	
	.entry main .text{
		font-size: 16px;
		line-height: 1.85em;
		margin-bottom: 1.0em;
	}
	.entry figure.vertical a img{width:100%; height:auto;} 

	.menu-nav{margin-top:10px;}
	.menu-nav .bar {
	    display: block;
	    position: relative;
	    margin: 0 0 2px 0;
	    padding: 15px 50px;
	    line-height: 1;
	    cursor: pointer;
	    font-size:24px;
	}

	footer { padding:40px 10px; }
	.footer-grid { display:block;}
	.footer-grid div{flex:1;}
	.footer-logo{width:60%; margin:auto; display:block; margin-bottom:10px;}
	.social{width:100%; display:flex; -webkit-justify-content:space-between; justify-content:space-between; text-align:center;}
	.social i{flex:1; display:block; padding:15px 30px;}
	.social a{display:block; border-radius:10px;}
	.social a:hover img{opacity:0.6;}
	.social img{width:100%;}
	.footer-menu ul {width:100%; display:flex; flex-wrap:wrap;}
	.footer-menu ul li{ width:50%; margin-bottom:15px; font-weight:500;}
	.copyright { margin-bottom: 0; font-size: 14px; line-height: 1; margin-bottom:5px;}

	.more-btn{
		margin:30px auto;
	}
}


/* ===== 追加拡張 ===== */
#list_readmore{
	display: none;
}

#list_loading{
	display: none;
	animation-name: blink;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
@keyframes blink{
	  0%{ opacity: 1.0; }
     50%{ opacity: 0.2; }
    100%{ opacity: 1.0; }
}

.ext_bold{
	font-weight: 700;
}

.ext_headline{
	font-weight: 700;
	font-size: 1.5em;
	border-bottom: 1px solid #808080;
	margin: 1.0em 0;
}

#btn_pagetop{
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	margin: auto;
	border-radius: 100%;
	z-index: 100;
	background: #fff;
	display: none;
	cursor: pointer;
	opacity: 0.8;
}
#btn_pagetop:hover{
	background: #eee;
}
#btn_pagetop::before{
	display: block;
	content: "";
	position: absolute;
	top: 16px;
	left: 12px;;
	transform: rotate(-45deg);
	width: 16px;
	height: 16px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
}

ul.type-decimal{
	list-style-type: decimal;
	margin-left: 40px;
}
ul.type-disc{
	list-style-type: disc;
	margin-left: 40px;
}
ul.type-square{
	list-style-type: square;
	margin-left: 40px;
}