/* ■■■■■■■■■■■■
page
■■■■■■■■■■■■■ */

/* figure,img リセット */
.single_page .horizontal,
.single_page .horizontal img,
.single_page .vertical_short, .single_page .vertical_long,
.single_page .vertical_short img, .single_page .vertical_long img,
.business figure, .business img,
.profile figure, .profile img,
.fix_page figure, .fix_page img {object-fit:fill; height:auto; 
 position:static; padding:0;}

/* ■■■■■■■■■■■■
single_page 
■■■■■■■■■■■■■ */

/* single_page figure */
.single_page figure:first-of-type {margin-top:0!important;}
.single_page .horizontal {margin:40px 0 30px;}
.single_page .vertical_short, .single_page .vertical_long {background:#f5f5f5; margin:40px 0 30px;}
@media screen and (min-width:768px) {
.single_page .vertical_short, .single_page .vertical_long {background:#f5f5f5; margin:40px 40px 30px;}
}

.single_page figcaption {
background:#fff;
font-size:.78rem;
text-align:right;
line-height:1.4;
color:#121212;
padding-top:5px;
padding-left:20%; 
}

.single_page .vertical_short img {
width:100%;
height:auto;
margin:0 auto;
}
@media screen and (min-width:768px) {
.single_page .vertical_short img {width:90%;}
}

.single_page .vertical_long img {
width:auto;
max-height:450px;
margin:0 auto;
}
@media screen and (min-width:768px) {
.single_page .vertical_long img {max-height:550px;}
}

/* --- single_page bloc1 --- */
.single_page {margin-top:20px;}

.single_page .bloc_1 {margin-bottom:15px;}
.single_page .bloc_2,
.single_page .bloc_3,
.single_page .bloc_4 {margin-bottom:40px;}
@media screen and (min-width:990px) {
.single_page .bloc_1 {max-width:70%; padding-right:20px;}
}

.single_page i {margin-right:5px;}
.single_page figcaption span {color:#777; font-size:.8rem;}

.single_page .bloc_1 ul:nth-of-type(1) {margin-top:10px;}
.single_page .bloc_1 ul:nth-of-type(1) li {margin-bottom:5px;}
.single_page .design_1 {padding:10px 10px 7px; margin-bottom:5px;}
@media screen and (min-width:768px) {
.single_page .bloc_1 ul:nth-of-type(1) {display:flex;}
.single_page .bloc_1 ul:nth-of-type(1) li:nth-child(2) {margin-left:10px;}
}

.single_page .design_3  {
display: inline-block;
color: #121212;
background: #eee;
padding:8px 10px 7px;
border:1px solid #ddd;
}
@media screen and (min-width:768px) {
.single_page .design_3 {padding:7px 10px;}
}

/* single_page h1 */
.single_page h1 {
font-family:'DM Serif Text'; font-weight:400; letter-spacing:.5px;
font-size:1.9rem;
line-height:1.1;
margin-top:20px;
margin-bottom:30px;
color: #121212;
}
@media screen and (min-width:768px) {
.single_page  h1 {font-size:2.2rem;color: #121212;}
}

.single_page h2 {
font-family:'DM Serif Text';
font-weight:400;
letter-spacing:.5px;
font-size:1.7rem;
margin:40px 0 25px;
}
/* --- */
.single_original h1,
.single_science-tec h1,
.single_features h1 {
letter-spacing:.5px; font-size:1.8rem;
}
@media screen and (min-width:768px) {
.single_original h1, .single_science-tec h1, .single_features h1 {font-size:2.4rem;}
}

/* --- single_page bloc2 --- */
.single_page .bloc_2 p {
font-family:Times New Roman,serif;
font-size:1.22rem;
line-height:1.45;
color:#2a2a2a;
margin-bottom:1.4rem;
}

.single_page .bloc_2 .byline {font-family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif; 
letter-spacing:0;
font-size:1.05rem; font-weight:bold; margin-bottom:2px;}

.single_page .bloc_2 .postdate {font-family:Georgia,serif; font-size:.95rem; color:#555; font-style:italic;}

.single_page .bloc_2 .information {background:#eee; padding:30px 20px; margin-bottom:10px;}
@media screen and (min-width:768px) {
.single_page .bloc_2 .information {padding:35px;}
}
.single_page .bloc_2 .information p:nth-of-type(1){
font-family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif;
color:#fff;
background:#333;
display:inline-block;
float:left;
font-size:.95rem;
padding:5px 10px;
margin:0 20px 0 0;
}
.single_page .bloc_2 .information p:last-of-type{margin-bottom:0!important}
.single_page .bloc_2 hr {border-top:2px solid #121212; margin-bottom:15px;}

/* --- Campaign --- */
.frame_type1 {
position: relative;
max-width:650px;
margin:0 auto 40px;
padding:40px;
}
.frame_type1::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background:
radial-gradient(circle at top left, transparent 20px, #333 20px, #333 23px, transparent 23px) left top / 23px 23px no-repeat,
radial-gradient(circle at top right, transparent 20px, #333 20px, #333 23px, transparent 23px) right top / 23px 23px no-repeat,
radial-gradient(circle at bottom left, transparent 20px, #333 20px, #333 23px, transparent 23px) left bottom / 23px 23px no-repeat,
radial-gradient(circle at bottom right, transparent 20px, #333 20px, #333 23px, transparent 23px) right bottom / 23px 23px no-repeat,
linear-gradient(90deg, transparent 20px, #333 23px) left top / 51% 3px no-repeat,
linear-gradient(-90deg, transparent 20px, #333 23px) right top / 51% 3px no-repeat,
linear-gradient(90deg, transparent 20px, #333 23px) left bottom / 51% 3px no-repeat,
linear-gradient(-90deg, transparent 20px, #333 23px) right bottom / 51% 3px no-repeat,
linear-gradient(180deg, transparent 20px, #333 23px) left top / 3px 51% no-repeat,
linear-gradient(0deg, transparent 20px, #333 23px) left bottom / 3px 51% no-repeat,
linear-gradient(180deg, transparent 20px, #333 23px) right top / 3px 51% no-repeat,
linear-gradient(0deg, transparent 20px, #333 23px) right bottom / 3px 51% no-repeat;
}
.frame_type1::after {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: "";
box-shadow: 0 0 0 1px #aaa;
}

/* single_page Gallery */
.gallery {margin:40px 0 30px;}
.gallery .g_select figure{
position: relative;
padding-top:66%;
background: #f5f5f5;
margin-bottom:5px;
}
.gallery .g_select img{
position: absolute;
top: 50%;left: 50%;
width: auto;
height: 100%;
transform: translate(-50%, -50%);
}
.gallery .g_select p{
font-family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif;
font-size: .8rem;
text-align: right;
line-height: 1.5;
color: #121212;
padding:0 10px;
margin-bottom:15px;
}
/* --- */
.gallery #g_list5_1 li, .gallery #g_list5_2 li, .gallery #g_list5_3 li,
.gallery #g_list6_1 li, .gallery #g_list6_2 li, .gallery #g_list6_3 li,
.gallery #g_list7_1 li, .gallery #g_list7_2 li, .gallery #g_list7_3 li,
.gallery #g_list8_1 li, .gallery #g_list8_2 li, .gallery #g_list8_3 li {width: calc(100% / 4) !important;}
.gallery .g_list .slick-slide {padding:3px;}
.gallery .g_list figure {
cursor:pointer;
position: relative;
padding-top:65%;
background:#121212;
}
.gallery .g_list img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery .g_list img:hover{
opacity: 0.7;
transition-duration: 0.6s;
}
.gallery .g_list img {opacity:1;}
.gallery .g_list .slick-current img{opacity:0.4;}

/* 事業者、店舗 */
.business p,
.profile p {
font-family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif  !important;
font-size:1.02rem !important;
}
.business p:nth-of-type(1),
.profile p:nth-of-type(1){
font-weight:700;
margin-bottom:10px !important;
}

.business figure.f90 {
float:left;
width:90px;
padding:5px;
border: 1px solid #ccc;
margin:0 20px 5px 0;
}
.business figure.f120 {
float:left;
width:120px;
padding:5px;
border: 1px solid #ccc;
margin:0 20px 5px 0;
}
.business figure.f150 {
float:left;
width:150px;
padding:5px;
border: 1px solid #ccc;
margin:0 20px 5px 0;
}
.business figure.f200 {
float:left;
width:200px;
padding:5px;
border: 1px solid #ccc;
margin:0 20px 5px 0;
}

/* エディター、プロフィール */
.profile figure.man {
float:left;
width:85px;
height:85px;
background:linear-gradient(to bottom, #f5f5f5 0%, #eee 30%, #e5e5e5 60%, #ddd 100%);
border: 1px solid #ddd;
border-radius:50%;
margin:0 20px 10px 0;
overflow:hidden;
}
.profile figure.woman_1 {
float:left;
width:85px;
height:85px;
background:linear-gradient(to bottom, #fff9f4 0%, #fff4ea 30%, #ffefe0 60%, #ffe8d1 100%);
border: 1px solid #ddd;
border-radius:50%;
margin:0 20px 10px 0;
overflow:hidden;
}
.profile img {
width:93%;
height:93%;
margin:2px 0 0 4px;
}
.profile p {
overflow:hidden;
margin-bottom:10px !important;
}
.hr_p02 {clear:both;}

/* Google MAP */
.map_area {margin:10px 0;}
.googlemap {
position:relative;
width:95%;
padding-bottom:56.25%;
height:0;
overflow:hidden;
margin:0 auto;
}
.googlemap iframe {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* video YouTube */
.video {width:90%; aspect-ratio:16 / 9; margin-bottom:10px;}
.video p {font-size:1rem!important; margin-bottom:5px!important;}
.video iframe {width:100%; height:100%;}

.video_2 {aspect-ratio:16 / 9; padding:10px; border:1px solid #ccc;}
.video_2 span {font-size:1rem;}
.video_2 iframe {width:100%; height:100%;}

/* videos */
.videos ul{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
.videos li{width:calc((100% - 20px) / 2); margin-bottom:30px; aspect-ratio:16 / 10;}
.videos li iframe {width:100%; height:100%;}
.videos a {font-family:'DM Serif Text'; display:block; line-height:1.3;}
.videos a:hover {color:#1955a5; transition-duration: .6s;}

/* --Kanta-on-Manga-- */
.kanta {float:left; width:200px; padding:5px; border:3px solid #333; margin:0 20px 10px 0;}

/* text to speech */
.bloc_2 figcaption .fa-headphones {font-size:.75rem; color:#fff; background:#333; padding:5px 0 5px 7px; margin:0 0 5px 0;}
.bloc_2 figcaption .fa-headphones+i {font-size:.7rem; color:#fff; background:#333; padding:5px; margin:0 0 5px 0;}

/* SNS */
.single_page .sns-button {display:flex; justify-content:flex-end;}
.single_page .sns-button .fb-share,
.single_page .sns-button .reddit-share {margin-right:7px;}

.btn-reddit {
  padding: .55em .8em .5em 2.5em;
  background-color:#FF4500;
  color: #fff;
  font-size:12px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-reddit::after {
  position: absolute;
  content: '\f281';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .7em;
  transform: translateY(-50%);
  font-size: 1.3em;
}

.btn-facebook {
  padding: .55em .8em .5em 2.5em;
  background-color: #1877f2;
  color: #fff;
  font-size:12px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .8em;
  transform: translateY(-50%);
  font-size: 1.2em;
}

.btn-twitter {
    padding: .55em 1em .5em 2.5em;
    background-color: #121212;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.btn-twitter::after {
    position: absolute;
    background-image: url(https://japannews.yomiuri.co.jp/wp-content/uploads/logo-white.png);
    height: 10px;
    background-size: cover;
    width: 12px;
    height: 12px;
    content: '';
    top: 50%;
    left: .7em;
    transform: translateY(-50%);
    font-size: 1.2em;
}

.sns-button_2 {margin:30px 10px 0 0;}
.sns-button_2 .btn-facebook {background:#fff; color:#121212; border:1px solid #999;}
.sns-button_2 .btn-twitter {background:#fff; color:#121212; border:1px solid #999;}
.sns-button_2 .btn-facebook:hover {background:#eee;}
.sns-button_2 .btn-twitter:hover {background:#eee;}

/* -------------------------------
Google News feed
------------------------------- */
.goolenewsfeed {
width:90%;
text-align:center;
background:#efefef;
padding:15px;
margin:40px auto 0;
}
.goolenewsfeed span {
display:inline-block;
color:#333;
font-family:'Helvetica Neue', Helvetica, Sans-Serif;
font-style:italic;
text-decoration:underline;
font-size:1rem;
margin-bottom:5px;
}
.goolenewsfeed img {width:120px; margin:auto;}
.goolenewsfeed a:hover span {text-decoration:none;}
@media screen and (min-width:768px) {
.goolenewsfeed {padding:20px 40px;}
.goolenewsfeed a {display:flex; align-items:center;}
.goolenewsfeed span {font-size:1.05rem; font-weight:bold; margin:0 20px 0 0;}
.goolenewsfeed img {width:140px; margin:0;}
}

/* -------------------------------
記事下　新着リスト
------------------------------- */
.latestlist,
.Notolist{margin-top:50px;}

.related i {font-size: .85em;}
.related h2 {
font-family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif;
font-size: 1.4em;
font-weight: bold;
margin-bottom:15px;
padding-bottom: 7px;
border-bottom: 1px solid #999;
color: #121212;
}
.related h3 {font-family:'Times New Roman';font-weight:400; color: #121212; font-size: 1.2rem; line-height: 1.1;}
@media screen and (min-width:990px) {
.related h2 {font-size: 1.12em;}
.related h3 {font-size: 1em;}
}
/* --------------------- */
.latestlist  div,
.popularlist div,
.Notolist div {
margin:0 calc(50% - 50vw);
overflow-x:scroll;
-ms-overflow-style:none;
scrollbar-width:none;
}
.latestlist  div::-webkit-scrollbar,
.popularlist div::-webkit-scrollbar,
.Notolist div::-webkit-scrollbar {display:none;}
/* -------4記事------------ */
.latestlist div>ul,
.Notolist div>ul {
display:flex; justify-content:space-between;
width:1000px; padding:0 18px;
}
.latestlist li,
.Notolist li {width:23.8%; margin-right:1.2%; padding-bottom:40px;}
.latestlist li:last-child,
.Notolist li:last-child {margin-right:0;}
@media screen and (min-width: 768px){
.latestlist div>ul,
.Notolist div>ul {padding:0 30px;}
}
@media screen and (min-width:990px) {
.latestlist div,
.Notolist div{margin:0;}
.latestlist div>ul,
.Notolist div>ul {flex-wrap:wrap; width:auto; padding:0;}
}

/* -------------------------------
記事下　人気リスト
------------------------------- */
/* -------8記事------------ */
.popularlist div>ul {
display:flex; justify-content:space-between;
width:2000px; padding:0 18px;
}
.popularlist li {width:24.1%; margin-right:0.9%; padding-bottom:40px;}
.popularlist li:nth-child(4n) {margin-right:0;}
@media screen and (min-width: 768px){
.popularlist div>ul {padding:0 30px;}
}
@media screen and (min-width:990px) {
.popularlist div    {margin:0;}
.popularlist li     {width:23.8%; margin-right:1.2%;}
.popularlist div>ul {flex-wrap:wrap; width:auto; padding:0;}
}

/* -------------------------------
RANKING
------------------------------- */
.ranking h2 {
font-family:'Helvetica Neue',Helvetica,Arial,Sans-Serif;
color: #fff;
background: #121212;
font-weight: bold;
font-size: .95rem;
line-height: 1.4;
letter-spacing:0;
padding: 8px 5px 7px 10px;
border: double 4px #888;
margin-top:0;
margin-bottom:10px;
}
@media screen and (min-width:990px) {
.ranking h2 {
color: #121212;
background: #fff;
font-size: .85rem;
line-height: 1.35;
}
}

.ranking h3 {font-weight:300;}

/* ■■■■■■■■■■■■
fix_page
■■■■■■■■■■■■■ */

.fix_page {margin-top:40px;}
.fix_page p {
font-family:Times New Roman,serif;
font-size:1.22rem;
line-height:1.45;
color:#2a2a2a;
margin-bottom:1.4rem;
}

.fix_page dd {
font-family: Times New Roman,serif;
font-size: 1.22rem;
line-height: 1.45;
color: #2a2a2a;
margin-bottom: 1.4rem;
}

.fix_page .jn_br {display:block;}
.fix_page .p_japanese_130 {font-size:1.3rem; margin-top:5px;}
.fix_page .p_japanese_150 {font-size:1.3rem;}
@media screen and (min-width:768px) {
.fix_page .jn_br {display:none;}
.fix_page .p_japanese_150 {font-size:1.5rem;}
}

.fix_page .link_1 {
font-size:1rem;
color:#2a2a2a;
padding:5px 15px;
border:double 5px #ccc;
}

.fix_page .website-policies {
text-align:center;
font-weight:bold;
margin-bottom:350px;
}
.fix_page .website-policies p {
margin-bottom:50px;
}
.fix_page .website-policies a {
display:inline-block;
width:300px;
color:#2a2a2a;
font-weight:normal;
padding:10px;
border:solid 1px #aaa;
margin:0 auto;
}
.fix_page .website-policies i {font-size:1rem;}

.fix_page .adjust_10 {margin-bottom:20px;}
@media screen and (min-width:768px) {
.fix_page .adjust_10 {margin-bottom:0;}
}

.table_2 {font-size:.9rem;}
.table_2 th:nth-child(1), .table_2 th:nth-child(2), .table_2 th:nth-child(3) {width:14%;}
.table_2 th:nth-child(4), .table_2 th:nth-child(5) {width:24%;}
.table_2 th {
font-weight:normal;
text-align: left;
padding: 10px;
background-color: #eeeeee;
border: solid 1px #ccc;
}
.table_2 td {padding: 10px; border:solid 1px #ccc;}
.table_2 li {margin-bottom:10px;}

/* ■■■■■■■■■■■■
slick.css
■■■■■■■■■■■■■ */

/* Slider */
.slick-slider
{position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{outline: none;}
.slick-list.dragging
{cursor: pointer;
cursor: hand;}

.slick-slider .slick-track,
.slick-slider .slick-list
{    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{visibility: hidden;}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {display: none;}

/* ■■■■■■■■■■■■
Noto Peninsula Earthquake damage situation map
■■■■■■■■■■■■■ */
.Noto-iframe-wrap{
    position: relative;
}
.Noto-iframe-full{
    position: absolute;
    bottom: 3px;
    right: 0px;
    color: white;
    background-color:rgba(0,0,0,0.5);
    padding: 10px;
    font-family: Times New Roman,serif;
    letter-spacing: 1px;
}
.Noto-iframe-full:hover{
    background-color: rgba(0,0,0,1);
}
.Noto-iframe-full i{
    margin-left: 3px;
}