@charset "utf-8";
/* CSS Document */

/*****************reset.css*********************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**************************************/
.cf::after {content: "";display:block;clear: both;}
img{width:100%;vertical-align:bottom;}
a{text-decoration:none;line-height: 1.6;}
a:link,a:visited{color:#333333;}
a:hover{text-decoration:underline;}
a:hover dd{text-decoration:underline;}

p{line-height:1.6;}

body{font-family: メイリオ, Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', 'sans-serif';
	font-size:15px;
	background-color: #ffa5a5;}
[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
	width:140%;
}
[data-ruby_k] {
    position: relative;
}
[data-ruby_k]::before {
    content: attr(data-ruby_k);
    position: absolute;
    top: -1.5em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
	width:140%;
}
/* 以下追加 */
rt {
    display: none;
}
ruby{text-align: justify;
}

header{
background:#ffffff;
padding: 5px 0;
min-width:1000px;
}
header .ipalogo{
	width:15%;
	margin-left:1%;}
.wrapper{
	width:1000px;
	margin:0 auto;
	}
.lead{
	background:#ffffff;
	padding:20px;
	margin:10px 0 20px;
	border-radius:5px;
	letter-spacing: 0.2px;
	}

.lead p a:link{color:#001DFF;}
.lead p a:visited{color:#008CE5;}
.lead p.snstxt{margin-top:20px;line-height:2.4;}
.lead p.snsbtn a{display:inline-block;width:100px;margin-right:10px;}
.lead p.snsbtn a img{border-radius:3px;}
div.cnt-block1{margin:10px 0;}
div.cnt-block1 .cont_ind{

	padding:10px 0;
	background:#ffffff;
	border-bottom:1px solid #dddddd;
}
div.cnt-block1 a:hover{text-decoration:none;}
div.cnt-block1 a:hover dd{text-decoration:none;}
div.cnt-block1 a:hover dd p span{background: linear-gradient(transparent 55%, #fefda7 45%);}

div.cnt-block1 .cont_ind:last-of-type{margin-right:0;border-bottom:none;}
div.cnt-block1 dl img{
	width:320px;
	height:180px;
	object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
	vertical-align: middle;
	border-radius:4px;
	}
div.cnt-block1 dl{width:100%;position:relative;}
div.cnt-block1 dt{
	width:30%;
	margin-left:10px;
	float:left;
	position:relative;}
div.cnt-block1 dt span.cnt-type{
	display:inline-block;
	padding:0 10px;
	background:#76ad00;
	position:absolute;
	left:0;top:0;
	letter-spacing:2px;
	color:#ffffff;
	font-size:90%;
	line-height: 1.8;
	border-radius: 4px;
}

div.cnt-block1 dd{margin-left:35%;padding:1%;}
div.cnt-block1 dd p.ctgr{
	font-size:80%;
	background:#76ad00;
	color:#ffffff;
	border-radius: 4px;
	padding:0 8px;
	text-align:center;
	display:inline-block;
	position:absolute;
	right:2%;
	top:0;
	line-height:1.8;
	letter-spacing:2px;}

div.cnt-block1 dd p.cnt_title{
	font-size:120%;
	position:absolute;
	top:10%;
	font-weight:bold;}
div.cnt-block1 dd p.cnt_text{
	margin-top:30px;
	margin-right:10px;
	font-size:95%;
	position:absolute;
	top:35%;
	}
div.cnt-block1 dd p.cnt_text.kids{
	line-height:2.0;}

p.gotopbtn{
	position:fixed;
	bottom:5%;
	right:5%;
	display:inline-block;
	width:60px;
	height:60px;
	border-radius:50%;
	background:#8fc320;
	cursor:pointer;}
p.gotopbtn::before{
	position:absolute;
	content:"";
	display:block;
	width:20px;
	height:2px; 
	border-radius:5px;
	top:46%;
	right:44%;
	transform: rotate(-45deg);
	background:#ffffff;
	transition:all ease .3s;
}
p.gotopbtn::after{
	position:absolute;
	content:"";
	display:block;
	width:20px;
	height:2px; 
	border-radius:5px;
	top:46%;
	left:44%;
	transform: rotate(45deg);
	background:#ffffff;
	transition:all ease .3s;
}
p.gotopbtn:hover::before,p.gotopbtn:hover::after{top:35%;}
footer{
	background:#afd65c;
	padding:10px 0;
	text-align:center;
	font-size:80%;}
.copyright{line-height:1.6;}


input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{
	width:150px; 
	margin:0 5px;
	display:inline-block;
	padding:16px 0;
	color:#737373; 
	background:#cfe69e;
	text-align:center;
	font-size:13px; 
	cursor:pointer; 
	transition:ease 0.2s opacity;
	border-radius: 5px 5px 0 0;
	letter-spacing: 5px;}
.tab_area label:hover{background:#8fc320;color:#ffffff;}
.panel_area{background:#fff;margin-bottom:20px;border-radius: 5px;}
.tab_panel{width:100%; padding:20px 0 10px; display:none;}

 
#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background:#fff; color:#000;}
#tab4:checked ~ .panel_area #panel4{display:block;}
#tab5:checked ~ .tab_area .tab5_label{background:#fff; color:#000;}
#tab5:checked ~ .panel_area #panel5{display:block;}

.pc_br{display:block;}
.sp_br{display:none;}

@media screen and (max-width: 767px){
	header{min-width:100vw;}
	header .ipalogo{width:40%;}
	.wrapper{
	width:100vw;
	}
	.pc_br{display:none;}
	.sp_br{display:block;}
	.lead{
		margin:2%;
		padding:2%;}
	div.cnt-block1 dl img{
		width:100%;
		height:150px;
	}
	.tab_area label{
		width:19%;
		margin:0;
		border-right: 1px solid #ffa5a5;
		letter-spacing: 3px;
		text-indent: 3px;
	}
	div.cnt-block1 dt{
		float:none;
		width:95%;
		margin:0 auto;}

	div.cnt-block1 dd{margin:0 3%;padding:0;}
	div.cnt-block1 dd p.cnt_title,div.cnt-block1 dd p.cnt_text{
		position:static;}
	
	div.cnt-block1 dd p.cnt_title{
		font-size:100%;
		line-height:1.4;
		margin-top:70px;
	}
	div.cnt-block1 dd p.cnt_title.kids{line-height:2.0;}
	div.cnt-block1 dd p.cnt_title.kids [data-ruby]::before{top:-12px;width:140%;}
	span.sphidden{display:none;}
	div.cnt-block1 dd p.cnt_text{
		margin-top:20px !important;
		margin-right:0 !important;
		line-height: 1.4;}
	div.cnt-block1 dd p.ctgr{
		font-size: 80%;
		top: 188px;
		left: 2.5%;
		right: auto;}
	div.cnt-block1 dt span.cnt-type{

		top:165px;
		font-size:80%;}
	div.cnt-block1 dt span.cnt-type.sp_small{
		font-size:80%;}
	.panel_area{margin:0 1% 2%;}
	p.gotopbtn:hover::before,p.gotopbtn:hover::after{top:46%;}

	
}