/*
Theme Name: yaraon-SmartPhone2023
Theme URI:
Author:
Author URI:
Description:
Version: 0.1
License:
License URI:
Tags:
Text Domain:
*/

body{
	margin:0px;
	padding:0%;
	color:#666666;
	line-height:150%;
	background:#eef2fb;
	font-family: sans-serif;
	font-size:3.6vw;
}
img{
max-width:100%;
}
a{color:#486dd5;}
a:hover{color:#486dd5;}
#wrapper{
width:100vw;
overflow-x:hidden;
box-sizing:border-box;

}
/**HEADER**/
#header #header_cont h1{
display:block;
margin:0px;
padding:0px;
}
#header #header_cont h1 a{
display:block;
margin:0px;
padding:0px;
width:100%;
border-bottom:solid 4vw #d3d3d5;
}
#header #header_cont h1 img{
display:block;
margin:0px;
padding:0px;
width:100%;
}
#headermenu{
display:flex;
margin:0px;
padding:0px;
width:100%;
flex-wrap:wrap;
background-color:#4e7295;

}
#headermenu li{
	margin:0%;
	padding:1.2vw;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	list-style-type:none;
}
#headermenu a{
text-decoration:none;
color:#FFFFFF;
display:block;
	text-align:center;
} 

#headersearch{
width:100vw;
box-sizing:border-box;
padding:3vw 5vw;
	background-color:rgba(78, 114, 149, 0.2);
}
#headersearch form{
	display:flex;
	width:90vw;
	margin: 0% auto;
	justify-content: space-between;
	align-items:center;
}
#input_headersearch{
	box-sizing:border-box;
	padding:2vw;
	border:solid 1px #CCCCCC;
	border-radius:30vw;
	background-color:#FFFFFF;
	width:70vw;
	margin:0%;
	font-size:4vw;
	line-height:100%;
}
#btn_headersearch{
	width:18vw;
	padding:2.3vw;
	border-radius:30vw;
	box-sizing:border-box;
	margin:0%;
	line-height:100%;
	font-size:4vw;
	border:none;
background-color:#4e7295;
color:#FFFFFF;
}

/**FOOTER**/
#copyright{
	background-color:#10587e;
	color:#FFFFFF;
	text-align:center;
	padding:4vw 0vw 22vw;
	margin:2vw 0vw 0vw;
	box-sizing:border-box;
}
#footermenu{
	box-sizing:border-box;
	width:100vw;
	margin: 0% auto;
	padding:5vw 0% ;
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
#footermenu li{
	width:auto;
	text-align:center;
	margin:0% 2vw;
	padding:0%;
}
#footermenu li a{
	display:inline-block;
	padding:2vw 4vw;
	line-height:100%;
	color:#FFFFFF;
	background-color:#0f577d;
	text-decoration:none;
}
/*
h2{
border-top:solid 1vw #039cbb;
border-bottom:solid 1vw #039cbb;
font-size:5vw;
padding:3vw;
box-sizing:border-box;
}
*/
/**LIST**/
.postentry{
margin:1.5vw auto;
width:96vw;
padding:2vw 2vw;
box-sizing:border-box;
background-color:#FFFFFF;
display:flex;
flex-wrap:wrap;
}
.postentry figure{
	display:block;
	width:20vw;
	height:20vw;
	overflow:hidden;
	margin:0%;
	padding:0%;
}

.postentry figure img{
min-width:100%;
min-height:100%;
object-fit: cover;
} 

.postentry-text{
	display:block;
	width:72vw;
	box-sizing:border-box;
	padding:0vw 0vw 0vw 2vw;
}

.latest .postentry  figure{
	width:100%;
	height:auto;
}
.latest .postentry  figure img{
	width:100%;
	height:auto;

}

.latest .postentry .postentry-text{
	width:100%;
}
.postentry-text-title{
display:block;
border-bottom:solid 1px #486dd5;
text-decoration:none;
box-sizing:border-box;
padding-bottom:1vw;
}
.postentry-text-meta{
	padding-top:1vw;
	box-sizing:border-box;
	font-size:85%;
}
.postentry-text-meta-row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	padding-top:0.7vw;
}
.postentry-text-meta-row .res{
margin-right:2vw;
}


.postentry-cat{
	border-radius:2px;
	border:solid 1px #666666;
	box-sizing:border-box;
	padding:0.5vw 1vw;
	text-decoration:none;
	display:inline-bock;
	margin-right:2vw;
	line-height:100%;
}

/**PAGER**/
/* *PAGER new **/
.pager{
	display:flex;
	width:96vw;
	margin:0 auto;
	box-sizing:border-box;
	flex-wrap:wrap;
	justify-content: center;
	padding-top:4vw;
}
.pager span.current{
text-decoration:none;
padding:1.8vw 2.5vw;
display:inline-block;
margin:0 1vw;
color:#0f5a7a;
background-color:#FFFFFF;
}

.pager a{
	color:#FFFFFF;
	text-decoration:none;
	padding:1.8vw 2.5vw;
	background-color:#0f5a7a;
	display:inline-block;
	margin:0 1vw;

}
.pager span.dot{
text-decoration:none;
padding:1.8vw 0.5vw;
display:inline-block;
margin:0 1vw;

}

/***/


.pagejumparea{
width:96vw;
box-sizing:border-box;
padding:5vw 0vw;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin:0% auto;
}
.pagejumparea a{
background-color:#FFFFFF;
color:#0f5a7a;
display:block;
width:36vw;
text-align:center;
line-height:100%;
padding:5vw;
text-decoration:none;
box-sizing:border-box;
}

.apcr_pp{
	padding:2vw 0%;
}
.apcr_pp a{
	display:flex;
	flex-wrap;
	text-decoration:none;
}
.apcr_pp a figure{
	display:block;
	width:20vw;
	height:20vw;
	margin:0%;
	padding:0%;
	overflow:hidden;
}

.apcr_pp a img{
	display:block;
	min-width:20vw;
	min-height:20vw;
	object-fit:cover;
}
.apcr_pp_title{
	display:block;
	width:72vw;
	box-sizing:border-box;
	padding:0vw 0vw 0vw 2vw;
	font-size:90%;
	text-decoration:none;
}
.apcommentranking.popularposts{
	width:100vw;
	box-sizing:border-box;
	padding:0%;
	margin:0% auto 2vw;
}
.apcommentranking.popularposts .apcommentranking_inr{
	width:96vw;
	box-sizing:border-box;
	padding:0% 2vw;
	background-color:#FFFFFF;
	margin:0% auto;
}
#widgetarea_sp_single_bfore_title h3.title_archive,
h2.title_corner{
background-color:#FFFFFF;
border-top:solid 2px #0f5a7a;
border-bottom:solid 2px #0f5a7a;
font-weight:400;
font-size:4vw;
color:#0f5a7a;
padding:1.2vw 0%;
text-align:center;
line-height:100%;
margin:0% 0% 1vw;

}
.post-osusume-area{
padding-bottom:2vw;
}
.post-osusume-area-inr{
width:96vw;
background-color:#FFFFFF;
margin:0% auto;
padding:2vw;
box-sizing:border-box;
}
.post-osusume{
padding:1vw 0%;
border-bottom:solid 1px #666666;
width:92vw;
box-sizing:border-box;

}
.post-osusume a{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	text-decoration:none;
}
.post-osusume-title{
	width:87vw;
	overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing:border-box;
padding-left:1.5vw;
}
.icn_arrow{
display:block;
border:solid 1px #0f5a7a;
border-radius:50%;
width:3.5vw;
height:3.5vw;
position:relative;
}
.icn_arrow:before{
	width:1.4vw;
	height:1.4vw;
	border-top:solid 1px #0f5a7a;
	border-right:solid 1px #0f5a7a;
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-75%,-50%) rotate(45deg);

}


/**SINGLE**/
.corner{
width:96vw;
box-sizing:border-box;
padding:3vw;
background-color:#FFFFFF;
margin:0% auto;
}
header.corner h1{
	font-size:5vw;
	line-height:175%;
	font-weight:400;
	margin-top:0%;
	color:#0f5a7a;
	padding-bottom:2vw;
	border-bottom:solid 1px #0f5a7a;
}


.corner .t_h{
word-break: break-all;
}
.corner #yaraoncategorypost_widget-2 img{
display:none;
}
.corner #yaraoncategorypost_widget-2 .single_rank_list{
padding-left:4vw;
padding-bottom:3.5vw;
box-sizing:border-box;
position:relative;
}
.corner #yaraoncategorypost_widget-2 .single_rank_list:before{
	content:"";
	display:block;
	background-color:#666666;
	width:1.8vw;
	height:1.8vw;
	position:absolute;
	top:2vw;
	left:0%;
}
.corner #yaraoncategorypost_widget-2 .single_rank_list a{
text-decoration:none;
}

h1.title_archive,
h3.widgettitle,
.corner #yaraoncategorypost_widget-2 h3{
background-color:#FFFFFF;
border-top:solid 2px #0f5a7a;
border-bottom:solid 2px #0f5a7a;
font-weight:400;
font-size:4vw;
color:#0f5a7a;
padding:1.2vw 0%;
text-align:center;
line-height:100%;
margin:3vw 0% 1vw;
}
.corner img{
max-width:92vw;
display:block;
}
.corner div{
	max-width:92vw;
	transform:none !important;
}

.corner .youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.corner .youtube iframe {
  width: 100%;
  height: 100%;
}
.corner img{
	max-width:100%;
	height:auto;
}

.btn_open_cont{
	width:94vw;
	padding:3vw 4vw;
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
	margin: 0% auto 2vw;
background: linear-gradient(0deg, rgba(101,151,152,1) 0%, rgba(166,198,192,1) 100%);
}
.btn_open_cont .txt{
	display:block;
	width:82vw;

color: #333333;
text-shadow: -0.7px -0.7px 0.7px #CCCCCC, -0.7px -0.7px #FFFFFF;

}

.single_meta{
display:flex;
flex-wrap:wrap;
align-items:center;
}
.metadata{
width:auto;
padding:1vw 2vw 1vw 0vw;
}
.metadata a{
	box-sizing:border-box;
	border:solid 1px #0f5a7a;
	background-color:#0f5a7a;
	color:#FFFFFF;
	font-size:100%;
	padding:0.7vw 1.5vw;
	line-height:100%;
	display:block;
	text-decoration:none;
	box-sizing:border-box;

}
.metadata.twt a{
	box-sizing:border-box;
	border:solid 1px #55acee;
	color:#55acee;
	background-color:transparent;
	display:flex;
	flex-wrap:wrap;
}
.metadata.twt a img{
	width:4vw;
	height:auto;
	margin-right:1vw;
}


#sec-commets-form{
display:none;
position:fixed;
top:0%;
left:0%;
z-index:200010;
width:100vw;
height:100vh;
	background:#83a8d4;
	padding:15vw 5vw;
	box-sizing:border-box;
	color:#FFFFFF;
}
#sec-commets-form div.form-submit{
/*
z-index:1100;
bottom:120px;

left:50%;
transform:translate(-50%, 0%) !important;
*/
width:100vw;
height:17vw;
margin:0 auto;
}
#sec-commets-form .form-submit #submit{
	display:block;
	width:100%;
	padding:5vw;
	box-sizing:border-box;
	border:none;
	line-height:100%;
	background-color:#0f577d;
	font-size:5vw;
	text-align:center;
	color:#FFFFFF;
	margin:0% auto;
}

#sec-commets-form textarea{
width:92vw;
height:40vw;
margin:5vw auto;
background-color:#FFFFFF;
border:solid 2px; #666666;
box-sizing:border-box;
padding:1vw;
}



/**メニュー**/
.menumodal{
position:fixed;
width:100%;
padding:15vw 5vw 5vw;
box-sizing:border-box;
background-color:#6bbdc9;
height:100vh;
z-index:200010;
top:0%;
left:0%;
display:none;
}
.menumodal > ul{
list-style-position:    inside;
	list-style-type:square;
	margin:0px;
	padding:0px;
	box-sizing:border-box;

}
.menumodal > ul> li{
	color:#0f5a7a;
	margin:0px 0px 1px;
	padding:2vw 4vw;
	background-color:#FFFFFF;
	line-height:100%;
}
.menumodal > ul > li > a{
	color:#0f5a7a;
	text-decoration:none;
	display:inline-block;
	width:76vw;
	padding:1vw 0vw;
}
.menumodal h2{
background-color:#FFFFFF;
border-top:solid 2px #0f5a7a;
border-bottom:solid 2px #0f5a7a;
font-weight:400;
font-size:4vw;
color:#0f5a7a;
padding:1.2vw 0%;
text-align:center;
line-height:100%;
margin:0% 0% 1vw;
}

#sec-commets-form  .btn_close,
.menumodal .btn_close{
	width:10vw;
	height:10vw;
	position:absolute;
	display:block;
	top:2vw;
	right:2vw;
}
#sec-commets-form  .btn_close span,
.menumodal .btn_close span{
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	opacity:0;
}
#sec-commets-form  .btn_close:before,
.menumodal .btn_close:before{
	content:"";
	display:block;
	width:75%;
	height:1px;
	background-color:#FFFFFF;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) rotate(45deg);
}
#sec-commets-form  .btn_close:after,
.menumodal .btn_close:after{
	content:"";
	display:block;
	width:75%;
	height:1px;
	background-color:#FFFFFF;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) rotate(-45deg);
}
.menu_cat_wrap{
height:50vh;
overflow:auto;
width:100%;
box-sizing:border-box;
padding-top:2vw;
display:none;
}
.menu_cat_wrap ul{
	list-style-position:    inside;
	list-style-type:square;
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	vertical-align:middle;
}
.menu_cat_wrap ul li{
	padding:2vw 0vw 2vw 4vw;
}
.menu_cat_wrap ul li a{
	color:#0f5a7a;
	text-decoration:none;
	display:inline-block;
	line-height:100%;
	width:70vw;
	padding:1vw 0vw;
}

#menumodal_archive > ul{
height:71vh;
overflow:auto;
width:100%;
box-sizing:border-box;
padding-top:2vw;

}


.samplebanner{
	width:100vw;
	height:75vw;
	position:relative;
	background-color:#83a8d4;
}
.samplebanner:before{
	content:"広告サンプル";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#FFFFFF;
	text-align:center;
}
.single_post_list_wrap,
.single_rank_list_wrap{
width:96vw;
margin:auto 2vw;
}

.single_post_list,
.single_rank_list{
	width:100%;
	box-sizing:border-box;
	padding:2vw;
	background-color:#FFFFFF;
	margin:0% auto 2vw;
}
.single_post_list a,
.single_rank_list a{
	display:flex;
	flex-wrap:wrap;
	text-decoration:none;
}
.single_post_list a figure,
.single_rank_list a figure{
	display:block;
	width:20vw;
	height:20vw;
	margin:0%;
}
.single_post_list a figure img,
.single_rank_list a figure img{
	min-width:20vw;
	min-height:20vw;
	object-fit:cover;
	margin:0%;
}
.single_post_list a span,
.single_rank_list a span{
	display:block;
	padding-left:2vw;
	box-sizing:border-box;
	width:72vw;
}
.single_pager{
	display:flex;
	flex-wrap:wrap;
	padding:5vw 0vw;
	box-sizing:border-box;
	width:94vw;
	margin:0% auto;
}
.pager_prev{
width:33.33%;
text-align:left;
}
.pager_top{
width:33.33%;
text-align:center;
}
.pager_next{
width:33.33%;
text-align:right;
}

.single_pager a{
	display:inline-block;
	font-size:80%;
	padding:2vw;
	background-color:#0f577d;
	color:#FFFFFF;
	text-decoration:none;
}


.comment-meta{
margin:0%;
}
.comment-content{
word-break: break-all;
}
.comment-content p{
margin:0%;
word-break: break-all;
}
.comment-metadata{
margin-bottom:1vw;
}
.comment-metadata time{
color:#999999;
font-size:80%;
}
#commets-list{
	padding-left:9vw;
	margin:0px;;
}
li.comment{
line-height:200%;
padding:3vw 0% 4vw;
position:relative;
font-size:80%;

}
li.comment:after{
background-color:#83a8d4;
content:"";
position:absolute;
bottom:0%;
height:2px;
border-radius:5px;
width:90vw;
display:block;
left:-9vw;
opacity:80%;
transform:translate(0%,50%);
}
li.comment .reslinks{
line-height:160%;
font-size:80%;
}
li.comment .reslinks a{
display:inline-block;
margin-right:1.7vw;

}

li.comment .reslinks .reslink_label{
display:inline-block;
margin-right:1.7vw;
}


.label_comment{
font-size:80%;
}

.frow span.rank{
	display:inline-block;
	width:4vw;
	height:4vw;
	text-align:center;
	color:#FFFFFF;
	background-color:#83a8d4;
	position:static;
	text-shadow:none;
	font-size:80%;
	line-height:150%;
	margin-right:0.5vw;
	
}
#widgetarea_sp_single_bfore_title{
padding-top:3vw;
}
#widgetarea_sp_single_bfore_title .corner{
background-color:transparent;
padding:0%;
width:100%;
}
#widgetarea_sp_single_bfore_title .corner ul.latestarticle{
	list-style-type:none;
	background-color:#FFFFFF;
	width:96vw;
	margin:0 auto 3vw;
	box-sizing:border-box;
	padding:2vw;

}


#widgetarea_sp_single_bfore_title .corner ul.latestarticle li{
	border-bottom:solid 1px #EFEFEF;
	box-sizing:border-box;
	padding:2vw 2vw 2vw 5vw;
	position:relative;
}

#widgetarea_sp_single_bfore_title .corner ul.latestarticle li:last-child {
	border-bottom:none;
}

#widgetarea_sp_single_bfore_title .corner ul.latestarticle li:before{
	content:"";
	position:absolute;
	top:3.8vw;
	left:1.3vw;
	display:block;
	width:1.6vw;
	height:1.6vw;
	background-color:#444444;
}
#widgetarea_sp_single_bfore_title .corner ul.latestarticle li a{
	text-decoration:none;
}
#commets-list li.comment:last-of-type:after{
	display:none;
}
#box-commets-form{
padding-top:3vw;
}
#widgetarea_sp_single_bfore_title{
padding:2vw;
box-sizing:border-box;
}
#widgetarea_sp_single_bfore_title #topHeadline{
	padding:2vw;
box-sizing:border-box;
background-color:#FFFFFF;
border-radius:4px;
}
#widgetarea_sp_single_bfore_title #topHeadline dl dt{
	font-size:85%;
	font-weight:700;
}
#widgetarea_sp_single_bfore_title #topHeadline dl dd{
	margin:0%;
padding:0vw 0vw 3vw 0vw;
margin-bottom:3vw;
border-bottom:dotted 1px #CCCCCC;
}