@charset "UTF-8";
/*###############################################
reset
###############################################*/
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;
}
/*###############################################
common
###############################################*/
label{
	cursor:pointer;
}
a{
	color: #0080B9;
}
a:hover{
	color: #0080B9;
	text-decoration:underline;
}
.clear{
	clear:both;
}
.fl{
	float:left;
}
.fr{
	float:right;
}
img.fl{
	margin:0 10px 0 0;
}
img.fr{
	margin:0 0 0 10px;
}
.mgt10{
	margin-top:10px;
}
.mgt20{
	margin-top:20px;
}
.mgt30{
	margin-top:30px;
}
.mgt40{
	margin-top:40px;
}
.mgt50{
	margin-top:50px;
}
.mgt50{
	margin-top:50px;
}
.mgt60{
	margin-top:60px;
}
.mgt70{
	margin-top:70px;
}
.mgt80{
	margin-top:80px;
}
.mgt90{
	margin-top:90px;
}
.mgt100{
	margin-top:100px;
}
.mgb10{
	margin-bottom:10px;
}
.mgb20{
	margin-bottom:20px;
}
p{
	font-size:14px;
	line-height:1.45;
}
p strong,
td strong{
	font-weight:bold;
}
.bone{
	width:1024px;
	margin-left:auto;
	margin-right:auto;
}
.clearfix::after{
	content:'';
	display:block;
	clear:both;
}
/*###############################################
structure
###############################################*/
body{
	line-height:1.3;
	font: 77%/1.5 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	*font-size:small; /* for IE */
	*font:x-small; /* for IE in quirks mode */
	color:#0e0e0e;
}
#container{
	width:100%;
	margin:0 auto;
	position:relative;
}
#main{
	width:100%;
	background-color:#f6f6f6;
}
#main_inr{
	display:flex;
	justify-content:space-between;
	padding:15px 0;
}
#content{
	width: calc(100% - 320px);
	order: 2;
	max-width:960px;
	margin:0 auto;
	min-height:600px;
}
#side1{
	order: 1;
	width:160px;
	min-height:600px;

}
#side2{
	order: 3;
	width:160px;
	min-height:600px;

}
#content p{
	line-height:1.6;
	font-size:16px;
}
/*pagehead*/
#pagehead{
	width:100%;
	position:relative;
	text-align:center;
	background-color:#ccc;
	background-repeat:repeat-x;
	background-position:center bottom;
	background-image : url(../../Desktop/plattohome.com/__r/im/bg_head.gif);
	height:108px;
}
#pagehead .inr{
	width:100%;
	max-width:960px;
	margin:0 auto;
	position:relative;
	padding:15px 0 0;
}
#pagehead h1{
	font-size:24px;
	color:#fff;
	line-height:1;
}
#pagehead h2{
	font-size:48px;
	color:#fff;
	line-height:1;
}
#logo{
	width:140px;
	height:66px;
	position:absolute;
	left:0;
	top:15px;
	background-color:#fff;
}
#logo img{
	width:100%;
	height:auto;
}
img{
	vertical-align:bottom;
}

/*pagefoot*/
#pagefoot{
	width:100%;
	padding:35px 0 0;
	position:relative;
	z-index:50;
	background-image : url(../../Desktop/plattohome.com/__r/img/bg_foot.png);
	background-repeat:repeat-x;
	background-position:center top;
	background-color:#f6f6f6;
}

#pagefoot .inner{
	width:100%;
	background-color:#7fbe2a;
	min-height:60px;
	padding-top:20px
;
}
#pagefoot a{
	color:#fff;
}
#copy{
	font-size:12px;
	color:#FFF;
	text-align:center;
}
#pagetop{
	display: none;
	position: fixed;
	bottom: 60px;
	right: 40px;
	z-index: 100;
}
#pagetop a{
	display: block;
	width:56px;
	height:56px;
	box-shadow:0 0 8px #AAA;
	background-color:#00abfa;
	border-radius:8px;
	text-indent:-100px;
	text-align:left;
	font-size:10px;
	overflow:hidden;
	opacity:0.6;
	position:relative;
}
#pagetop a::after{
	display:inline-block;
	content:'';
	width:8px;
	height:8px;
	border-top:3px solid #FFF;
	border-left:3px solid #FFF;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-4px;
	margin-left:-4px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
#pagetop a:hover {
	opacity:1.0;
}
/*side*/
#side1 {
}
.pbox{
	margin:0 10px 43px;
	background-color:#fff;
	border-radius:6px;
	overflow:hidden;
	height:220px;
}
.pbox figure{
	height:220px;
	overflow:hidden;
}
.pbox figure img{
	width:100%;
	height:auto;
}
.pbox p{
	padding:5px;
}
.pbox:last-child{
	margin-bottom:0;
}

/*###############################################
contents design
###############################################*/
#content > .box{
	background-color:#fff;
	border-radius:6px;
	padding:18px;
}
#base_ad{

	display:flex;
	justify-content:space-between;
	margin-top:15px;

}
#base_ad .bnr_area img{
	width:100%;
	height:auto;
}
#screen{
	width: calc(50% - 8px);
	vertical-align:top;
}
#screen img{
	width:100%;
	height:auto;

}
#screen .sp-slides-container,
#screen .sp-slide{
	vertical-align:top;
}
#screen .sp-buttons{
    padding-top: 2px;
}
#bnr_area {
	width: calc(50% - 8px);
}
#bnr_area img{
	width:100%;
	height:auto;
}
/*--------base_content--------*/
#base_content{
	background-color:#8eb9f5;
	border-radius:6px;
	padding:18px;
	margin-top:5px;
}
#base_content .inr{
	border-radius:4px;
	background-color:#f4f4f4;
	padding:0;
}
#base_content h2{
	color:#fff;
	font-size:32px;
	font-weight:bold;
	text-align:center;
}
#base_content dl{
	position:relative;
	padding:10px 10px 10px 100px;
	min-height:30px;
}
#base_content dl:nth-child(2n){
	background-color:#fff;
}
#base_content dt,
#base_content dd{
	display:inline-block;
}
#base_content dt{
	font-size:20px;
	width:80px;
	text-align:center;
	background-color:#c8dc59;
	color:#fff;
	border-radius:6px;
	padding:5px 0;
	line-height:1;
	position:absolute;
	left:10px;
	top:10px;
}
#base_content dt span{
	font-size:14px;
}
#base_content dd{
	font-size:18px;
	margin-right:1em;
}
#base_content dd a{
	color:#81b4f5;
}
/*----bose_text----*/
#base_text{
	margin-top:15px;
}
/*base_association*/
#base_association{
	margin-top:15px;
}

#base_association ul{
	display:flex;
	justify-content:space-between;
}
#base_association li{
	width:19%;
	border:1px solid #d1d1d1;
	box-sizing:border-box;
}
#base_association li img{
	width:100%;
	height:auto;
}


/*----------------retina----------------*/
@media only screen and (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){

#pagehead{
	background-image : url(bg_head@2x.jpg);
	background-size: 1900px 122px;
}
#pagefoot{
	background-image : url(bg_foot@2x.png);
	background-size: 665px 35px;

}/*retina*/