*{ margin: 0; padding: 0; font-family: 'Noto Serif Japanese', serif; color: #333; font-size: 14px; font-weight: normal }
img{ width: 100% }
.inner{ width: 960px; margin: 0 auto; overflow: hidden }
.block , .block_to_none{ display: block !important }
.none_to_block{ display: none !important }
.inline , .inline_to_block{ display: inline !important }
.block_to_inline{ display: block !important }
.background_none{ background: none !important }
.color_red{ color: #c0392b }
.font_large{ font-size: 18px; line-height: 27px }
h1{ text-align: center; font-size: 28px; line-height: 42px }
h2{ font-size: 22px; line-height: 33px }
p , dl dt , dl dd , dl dd ul li{ line-height: 28px }
a{ display: block; text-decoration: none; outline: none; word-break: break-all }
a:hover{ text-decoration: none; cursor: pointer }
a:focus, *:focus { outline:none }
li{ list-style: none }
.business , #contact{ padding: 50px 0; height: 300px }
.business h1 , #contact h1{ color: #fff; margin-top: 20px }

@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format('opentype');
}
@font-face {
 font-family: 'Noto Serif Japanese';
 font-style: normal;
 font-weight: 700;
 src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format('opentype');
}

/*header*/
header{ background: #595757; width: 100%; height: 100px }
header h1{ width: 53px; padding-top: 30px; margin: 0 auto }
header h1 a{ line-height: 0 }

/*nav*/
nav.pc{ background: url(../img/menu.png) no-repeat }
nav.pc ul{ text-align: center }
nav.pc li{ display: inline-block; margin-right: 5%; padding: 24px 0 25px 0; font-size: 14px }
nav.pc li:first-child{ width: 35px; padding: 0 }
nav.pc li:first-child img{ vertical-align: middle; padding-bottom: 5px }
nav.pc li:last-child{ margin-right: 0 }
nav.pc li a{ font-weight: bold }
nav.pc li a:hover{ color: #83a2e5; transition: all .9s ease }

/*news*/
#news , #news_detail{ padding: 40px 0 60px 0 }
#news h1{ text-align: left; margin-bottom: 20px }
#news ul{ overflow: hidden }
#news li{ border-top: solid 1px #b2b2b2; padding: 15px 0; overflow: hidden }
#news li:last-child{ border-bottom: solid 1px #b2b2b2 }
#news li .day{ display: inline-block; font-size: 12px; font-weight: bold; background: #efcd3f; margin-right: 3%; padding: 3px 10px }
#news li .more{ font-size: 12px; color: #83a2e5; background: rgba(0,0,0,0); box-sizing: border-box; border: solid 1px #83a2e5; float: right; margin-right: 0; padding: 3px 10px; transition: all .9s ease }
#news li .more:hover{ color: #fff; background: #83a2e5; transition: all .9s ease }
.news_list{ float: right; padding-top: 15px }
.news_list a{ background: url(../img/news_list.png) no-repeat; background-size: 8%; background-position: 100% 50%; padding-right: 15px }
.news_list a:hover{ opacity: 0.5; transition: all .9s ease }

/*about , pdf*/
#about , #pdf{ padding: 50px 0 80px 0 }
#about h1 , #pdf h1{ margin-bottom: 50px }

/*contact*/
#contact{ background: url(../img/contact.jpg) no-repeat; background-size: cover }
#contact p , #contact p span{ color: #fff }
#contact p{ text-align: center; margin-bottom: 20px }
#contact .contact{ width: 100%; margin: 0 auto; overflow: hidden }
#contact .contact p{ margin: 0 auto; text-align: left; box-sizing: border-box }
#contact .contact p a{ display: block; line-height: 60px }
#contact .contact .tel{ width: 360px; background: url(../img/tel_01.png) no-repeat; background-size: 11%; background-position: 4% 40%; transition: all .9s ease; margin-bottom: 20px }
#contact .contact .tel:hover{ background: url(../img/tel_02.png) no-repeat; background-size: 11%; background-position: 4% 40%; transition: all .9s ease }
#contact .contact .tel a{ font-size: 40px; color: #fff; padding-left: 65px; transition: all .9s ease }
#contact .contact .tel a:hover{ color: #efcd3f; transition: all .9s ease }
#contact .contact .mail{ width: 280px; border: solid 1px #efcd3f; background: url(../img/mail_01.png) no-repeat #efcd3f; background-size: 12%; background-position: 16% 50%; transition: all .9s ease }
#contact .contact .mail:hover{ border: solid 1px #fff; background: url(../img/mail_02.png) no-repeat rgba(0,0,0,0); background-size: 12%; background-position: 16% 50%; transition: all .9s ease }
#contact .contact .mail a{ font-size: 18px; padding-left: 88px; transition: all .9s ease }
#contact .contact .mail a:hover{ color: #fff; transition: all .9s ease }

/*pagetop*/
.pagetop{ height: 50px; padding: 20px 0 }
.pagetop div.in{ width: 100% }
.pagetop p{ position: absolute; left: 50%; width: 50px; height: 50px; margin-left: 500px }
.pagetop p a{ display: block; background: url('../img/pagetop.png') no-repeat; background-size: 50px; height: 50px; transition: all .9s ease }
.pagetop p a:hover{ background: url('../img/pagetop_hover.png') no-repeat; background-size: 50px; height: 50px; transition: all .9s ease }

/*footer*/
footer{ background: #595757; padding: 25px 0 20px 0 }
footer .menu{ text-align: center; margin-bottom: 50px }
footer .menu li{ display: inline-block; margin-right: 5%; padding: 25px 0; font-size: 14px }
footer .menu li:first-child{ width: 35px; padding: 0 }
footer .menu li:first-child img{ vertical-align: middle; padding-bottom: 5px }
footer .menu li:last-child{ margin-right: 0 }
footer .menu li a{ color: #fff; font-weight: bold }
footer .menu li a:hover{ color: #f5e18c; transition: all .9s ease }

footer .sns{ text-align: center; margin-bottom: 100px }
footer .sns li{ display: inline-block; margin-right: 3%; width: 45px }
footer .sns li:last-child{ margin-right: 0 }
footer .sns li:hover{ opacity: 0.5; transition: all .9s ease }

footer small{ display: block; text-align: center; font-size: 10px; color: #fff }

@media(max-width: 1250px){
/*pagetop*/
.pagetop{ padding: 0; height: auto }
.pagetop div.in{ width: 100%; margin: 0; padding: 20px 10px; overflow: hidden; box-sizing: border-box }
.pagetop p{ position: static; float: right }
}

@media(max-width: 980px){
  .inner{ width: 100%; box-sizing: border-box; padding: 0 10px }
}

@media(max-width: 768px){
  h1{ font-size: 24px; line-height: 36px }
  p , dl dt , dl dd , dl dd ul li{ line-height: 26px; font-size: 13px }
  .block_to_none{ display: none !important }
  .none_to_block{ display: block !important }
  .inline_to_block{ display: block !important }
  .font_large{ font-size: 16px; line-height: 24px }
  .business , #contact{ padding: 60px 0; height: 230px }
  .business h1 , #contact h1{ margin-top: 0 }

/*header*/
header{ height: 80px }
header h1{ margin: 0; padding-top: 26px }
header h1 img{ width: 70% }

.menu-trigger , .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; z-index: 101 }
.menu-trigger{ position: absolute; width: 30px; height: 25px; top: 0; right: 10px; margin-top: 25px }
.menu-trigger span{ position: absolute; width: 100%; height: 2px; background-color: #fff; border-radius: 4px }
.menu-trigger span:nth-of-type(1){ top: 0 }
.menu-trigger span:nth-of-type(2){ top: 11px }
.menu-trigger span:nth-of-type(3){ bottom: 0 }
.menu-trigger.active{ -webkit-transform: rotate(360deg); transform: rotate(360deg) }
.menu-trigger.active span{ background-color: #333 }
.menu-trigger.active span:nth-of-type(1){ -webkit-transform: translateY(11px) rotate(-45deg); transform: translateY(11px) rotate(-45deg) }
.menu-trigger.active span:nth-of-type(2){ -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg) }
.menu-trigger.active span:nth-of-type(3){ opacity: 0 }
.or_active #overlay{ width: 100%; height:100%; position: fixed; top: 0; z-index: 1; background: rgba(255,255,255,0.9) }
#hamburger{ display: none; width: 100%; margin-top: 0; position: absolute; z-index: 100 }
#hamburger ul{ text-align: center }
#hamburger li{ width: 100% }
#hamburger li:first-child a img{ width: 35px }
#hamburger li a{ display: block; width: 50%; color: #333; font-size: 16px; margin: 0 auto; border-bottom: solid 1px #333; padding: 20px; transition: all .9s ease }
#hamburger li:last-child a{ border-bottom: none }
li a:hover{ border-bottom: none }

/*news*/
#news h1{ margin-bottom: 10px }
#news , #news_detail{ padding: 29px 0 40px 0 }
#news li .day{ display: block; margin-right: 0; padding: 3px 10px; width: 70px; margin-bottom: 15px }
#news li .more{ width: 95px; margin-bottom: 0 }

/*about , pdf*/
#about , #pdf{ padding: 25px 0 50px 0 }
#about h1 , #pdf h1{ margin-bottom: 25px }

/*pagetop*/
.pagetop div.in{ padding: 15px 10px }
.pagetop p{ width: 45px; height: 45px }
.pagetop p a{ background-size: 45px; height: 45px }
.pagetop p a:hover{ background-size: 45px; height: 45px }

/*footer*/
footer{ padding: 25px 0 20px 0 }
footer .menu{ margin-bottom: 25px }
footer .menu li{ display: block; width: 50%; margin: 0 auto 15px auto !important; padding: 0; font-size: 16px }

footer .sns{ margin-bottom: 50px }
footer .sns li{ width: 40px }
}

@media(max-width: 640px){
/*contact*/
#contact p , #contact h1 + p span{ display: block }
#contact p , #contact .contact .tel{ margin-bottom: 10px }
#contact .contact p a{ line-height: 50px }
#contact .contact .tel , #contact .contact .tel:hover{ width: 280px; background-position: 2% 45% }
#contact .contact .tel a{ font-size: 32px; padding-left: 50px }
#contact .contact .mail , #contact .contact .mail:hover{ width: 240px; background-position: 14% 50% }
#contact .contact .mail a{ font-size: 16px; padding-left: 70px }
}


@media(max-width: 375px){
  .business{ padding: 35px 0 85px 0 }
}