@charset "utf-8";
/*=================================================
site : 学校法人 日本聾話学校 2019リニューアルサイト
file : /css/style_pc.css
uses : body.home　トップページ
=================================================*/
@media screen and (min-width: 768px) { 

/* article
=================================================*/
body.home article {
	padding-top: 0;
	padding-bottom: 10px;
}

/* div#articleMain
----------------------------------------*/
body.home #articleMain {
	background-image: url(../img/top/bg_topmain.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}
body.home #articleMain .content {
	position: relative;
	width: 1280px;
	min-height: 720px;
	padding: 0 0 52px;
	background: url(../img/top/bg_topmain_pc.jpg) no-repeat center top;
	background-size: 1280px 838px;
}

body.home #articleMain .content h1 {
	position: absolute;
	top: 152px;
	left: 465px;
	padding-top: 0;
}
body.home #articleMain .content h1 img {
	width: 348px;
	height: auto;
}

body.home #articleMain .content p,
body.home #articleMain .content img {
	position: absolute;
	text-align: left;
}
body.home #articleMain .content img.icon03 {
	top: 75px;
	left: 100px;
-webkit-animation:float 1.1s infinite linear alternate;
animation:float 1.1s infinite linear alternate;
}
body.home #articleMain .content img.icon02 {
	top: 35px;
	right: 100px;
-webkit-animation:float 1s infinite linear alternate;
animation:float 1s infinite linear alternate;
}
body.home article #articleMain .content img.icon03,
body.home article #articleMain .content img.icon02 {
	pointer-events: auto !important;
}

/* div#visual
----------------------------------------*/
body.home #articleMain #visual {
	padding: 625px 0 26px;
}

/* div#bnr2025
----------------------------------------*/
body.home #articleMain #bnr2025 {
	padding: 0 0 28px;
}
body.home #articleMain #bnr2025 img {
	max-width: 892px;
	position: static;
	text-align: center;
}

/* div.newsBox
----------------------------------------*/
body.home #articleMain .newsBox {
	width: 892px;
}

body.home #articleMain .newsBox ul {
	width: 892px;
}
body.home #articleMain .newsBox li {
	padding: 14px 20px 0;
}
body.home #articleMain .newsBox li span {
	display: inline;
}

/* section
=================================================*/
body.home section li a:hover {
	text-decoration: underline;
}

/* section#education
=================================================*/
body.home #education {
	width: 1100px;
	margin: auto;
	background-image: url(../img/education/bg_education.png);
	background-position: 750px bottom;
	background-repeat: no-repeat;
}

body.home #education .content {
	width: 1100px;
	padding: 48px 0 0;
	background-image: none;
}

body.home #education .content h2 {
	color: #4A4A4A;
	font-size: 28px;
	line-height: 1.1;
	text-align: center;
}
body.home #education .content h2 span {
	color: #FF6200;
	font-size: 18px;
	font-family: Roboto, sans-serif;
	letter-spacing: 2px;
}

body.home #education .content h3 {
	margin-top: 15px;
	margin-left: 100px;
	text-align: left;
}

body.home #education .content p.txt01 {
	font-size: 18px;
	margin-top: 15px;
	text-align: center;
	line-height: 2;
}

body.home #education .content ul.number {
	width: 500px;
	margin: 0 0 0 100px;
}
body.home #education .content ul.number li {
	font-size: 20px;
	padding-top: 22px;
}
body.home #education .content ul.number li span {
	top: 11px;
}

body.home #education .btnFrom {
	margin-top: 36px;
}


/* section#audiology
=================================================*/
body.home #audiology .content {
	width: 1100px;
	padding: 40px 0 30px;
	background-size: 324px 284px;
	background-position: 95% bottom;
}

body.home #audiology .content h2 {
	font-size: 28px;
	text-align: center;
}
body.home #audiology .content p {
	width: 616px;
	margin: 25px 0 0 100px;
}
body.home #audiology .content h2 + p {
	margin-top: 40px;
}
body.home #audiology .btnFrom {
	margin-top: 0;
}

/* section#guide
=================================================*/
body.home #guide {
	padding: 55px 0;
}

body.home #guide p {
	margin-top: 25px;
	text-align: center;
}

body.home #guide ul {
	width: 924px;
	padding-top: 40px;
}
body.home #guide li {
	margin: 0 16px;
	background-image: url(../img/top/bg_guide_pc.png);
	float: left;
}

body.home #guide li a,
body.home #guide .guide04 a {
	transition: .3s;
	text-decoration: none !important;
}
body.home #guide li a:hover {
	color: #F29400;
}
body.home #guide .guide04 a:hover {
	color: #1E9FAC;
}

body.home #guide .guide04 {
	width: 890px;
	margin: 32px auto 0;
	background-image: url(../img/top/bg_guide04_pc.png);
	background-position: -7px 25px;
}
body.home #guide .guide04 a {
	position: relative;
	height: 100px;
	padding: 0px;
}
body.home #guide .guide04 a h3 {
	position: absolute;
	top: 20px;
	left: 155px;
}
body.home #guide .guide04 a p {
	position: absolute;
	top: 25px;
	left: 50%;
	margin-top: 0px;
	text-align: left;
}

/* section#support
=================================================*/
body.home #support {
	margin-top: 12px;
	padding: 40px 0 40px;
}
body.home #support .content {
	position: relative;
	width: 892px;
	padding: 76px 0 28px;
	text-align: center;
}

body.home #support h2.base {
	width: 396px;
	height: 58px;
	font-size: 22px;
	line-height: 58px;
	padding: 0;
	background-image: url(../img/ttl_baseL.png);
	background-size: 396px 58px;
}
body.home #support .content img.hatena {
	bottom: auto;
	top: -20px;
	left: 48px;
}
body.home #support .content img.mother {
	bottom: -40px;
	right: 118px;
}

body.home #support ul {
	width: 546px;
	padding-top: 10px;
}

body.home #support li a {
	transition: .3s;
	text-decoration: none !important
}
body.home #support li a:hover {
	color: #F29400;
}

/* section#movie
=================================================*/
body.home #movie {
	padding: 55px 0 80px;
}
body.home #movie2 {
	padding: 0 0 45px;
}
body.home .flexBox {
	width: 1110px;
	display: flex;
 flex-flow: row wrap;
	justify-content: space-around;
	margin: 0 auto;
}
body.home #movie2 .flexBox {
	width: 740px;
}
body.home .flexmovie {
	width: 340px;
	margin-top: 0px;
	padding-top: 45px;
}
	
body.home #movie .movieBox,
body.home #movie2 .movieBox {
	width: 100%;
	height: 190px;
	padding-bottom: 0;
}
body.home #movie2 .movieBox.right {
	height: 227px;
	padding-bottom: 0;
}

body.home #movie .movieBox video,
body.home #movie2 .movieBox video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* section#charm
=================================================*/
body.home #charm,
body.charm10 #charm {
	padding: 22px 0 44px;
}
body.charm10 #charm {
	padding: 0 0 15px;
}

body.home #charm .content,
body.charm10 #charm .content {
	width: 925px;
	padding: 0;
}

body.home #charm .content p,
body.charm10 #charm .content p {
	margin-top: 40px;
}

body.home #charm h2,
body.charm10 article h1 {
	height: 122px;
	margin-top: 10px;
	background-position: center 20px;
	background-size: 256px auto;
}
body.charm10 article h1 {
	margin-top: 32px;
}
body.home #charm h2 img,
body.charm10 article h1 img {
	max-width: 548px;
}

body.home #charm p,
body.charm10 #charm p {
	text-align: center;
	margin-top: 40px;
}

body.home #charm ul,
body.charm10 #charm ul {
	width: 925px;
	height: auto;
	padding-top: 15px;
}

body.home #charm li,
body.charm10 #charm li {
	width: 185px;
	height: auto;
	margin-top: 25px;
}

body.home #charm li span,
body.charm10 #charm li span {
	font-size: 80px;
	top: 2%;
}

body.home #charm li img,
body.charm10 #charm li img {
	width: 145px;
	height: 145px;
	margin: 0 auto 5px;
	-webkit-transition: -webkit-transform 0.3s linear;
	transition: transform 0.3s linear;
}
body.home #charm li a:hover img,
body.charm10 #charm li a:hover img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

body.home #charm li a,
body.charm10 #charm li a {
	text-decoration: none !important;
}

body.home #charm .btn {
	display: none;
}

/* body.charm10 section#list
=================================================*/
body.charm10 #list .content {
	width: 1076px;
	margin: 0 auto;
	padding: 0;
}

/* div.box
----------------------------------------*/
body.charm10 #list .box {
	position: relative;
	min-height: 260px;
	margin-top: 20px;
	padding: 15px 22px 75px 22px;
	background-color: #fff;
	border-radius: 12px;
}

body.charm10 #list .box h2 {
	width: 700px;
	font-size: 24px;
	padding-left: 70px;
}
body.charm10 #list .box h2:before {
	position: absolute;
	left: 20px;
	top: 15px;
	content: "";
	display: table-cell;
	width: 64px;
	height: 70px;
	background: url(../img/10/icon_number.png) no-repeat 0 0;
}

body.charm10 #list .box p {
	width: 690px;
	margin-top: 10px;
}

body.charm10 #list .box img {
	position: absolute;
	top: 20px;
	right: 20px;
	margin-top: 0;
}

/* div.btnS
----------------------------------------*/
body.charm10 #list .box .clearfix {
	position: absolute;
	bottom: 20px;
	right: 368px;
	margin: 20px auto 0;
}
body.charm10 #list .box .btnS {
	width: 244px;
	margin-left: 20px;
	float: left;
}
body.charm10 #list .box .btnS.long {
	width: 260px;
}
body.charm10 #list .box .btnS.long2 {
	width: 300px;
}
body.charm10 #list .box .btnS.long3 {
	width: 390px;
	display: block;
	height: 40px;
	font-size: 18px;
	line-height: 39px;
	vertical-align: middle;
	padding: 0;
	border-radius: 22px;
}

body.charm10 #list .box .btnS a:after {
	margin-right: 0;
	transition: all  0.3s ease;
}
body.charm10 #list .box .btnS a:hover:after {
	margin-right: -10px;
	transition: all  0.3s ease;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/*=================================================
footer
=================================================*/
body.charm10 footer .content {
	background-image: url(../img/bg_footer_pc.png), url(../img/ptn_yellow.png);
	background-position: center top, center top;
	background-repeat: no-repeat, repeat;
	background-size: auto, 68px 68px;
}

/* body.notfound
=================================================*/
body.home.notfound article .content p.lead {
	font-size: 18px;
	margin-top: 5vh;
}
body.home.notfound article .content img {
	width: 300px;
	margin-top: 15vh;
}