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

/* =============================================================================
 Reset
============================================================================= */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
  display:block;
}

nav ul,
ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000; 
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}



/* =============================================================================
 Fonts
============================================================================= */

html {
  font-size: 62.5%;
}
body {
  font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
  body {
    font-size: 1.2rem;
  }
}



/* =============================================================================
 Elements
============================================================================= */

/* color setting */
body {
  color: #595959;
}

/* text setting */
p {
  line-height: 1.67;
}
p.notice {
  font-size: 1.1rem;
}



/* link setting */
a {
  color: #595959;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  a:hover {
    text-decoration: underline;
  }
}



/* image setting */
img {
  max-width: 100%;
  vertical-align: bottom;
}

@media screen and (max-width: 767px) {
  img {
    width: 100%;
  }
}



/* box */
*,*:before,*:after {
  box-sizing: border-box;
}



/* cursor */
button {
  cursor: pointer;
}



/* for IE11 */
main {
  display: block;
}



/* =============================================================================
 Responsive Class
============================================================================= */

@media screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .only-pc {
    display: none;
  }
}



/* =============================================================================
 Base Layout
============================================================================= */

#container {
  padding: 160px 10px 0;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  #container {
    padding: 100px 0 0;
  }
}



/* =============================================================================
 common header
============================================================================= */

#header {
  padding: 0 30px;
  border-bottom: 1px #d7d7d7 solid;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 110px;
  background-color: #fff;
  box-shadow:0px -3px 3px 3px #d7d7d7;
}
#header .headerInner {
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}
#header .headerInner:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 503px;
  height: 110px;
  background: url(../images/common/bg_header.png) 0 0 no-repeat;
}
#header .siteLogo {
  padding: 10px 0 0;
  position: relative;
  width: 346px;
}
#header .selectLang {
  position: absolute;
  right: 0;
  bottom: 19px;
  z-index: 5;
}
#header .selectLang ul {
}
#header .selectLang ul li {
  display: inline-block;
  font-size: 1rem;
}
#header .selectLang ul li:first-child:after {
  margin: 0 5px;
  content: "｜";
  color: #565656;
}
#header .selectLang ul li a {
  color: #000000;
}
#header .selectLang ul li.current {
  color: #bc4b4b;
}
#header .btnMenu {
  display: none;
}

@media screen and (max-width: 767px) {
  #header {
    padding: 0 calc(35/750*100vw);
    height: 70px;
  }
  #header .headerInner {
    height: 70px;
  }
  #header .headerInner:before {
    left: calc(-35/750*100vw);
    bottom: 1px;
    width: 324px;
    height: 70px;
    background: url(../images/common/bg_header_sp.png) 0 0 no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
  }
  #header .siteLogo {
    padding: 11px 0 0;
    width: 290px;
  }
  #header .selectLang {
    position: static;
    line-height: 60px;
    text-align: center;
  }
  #header .selectLang ul li {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
  }
  #header .btnMenu {
    display: block;
    position: absolute;
    right: 0;
    top: 22px;
    width: 30px;
    height: 25px;
  }
  #header .btnMenu span {
    position: absolute;
    top: 11px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #595959;
  }
  #header .btnMenu span:before,
  #header .btnMenu span:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #595959;
    transition: transform ease .3s;
  }
  #header .btnMenu span:before {
    top: -11px;
  }
  #header .btnMenu span:after {
    top: 11px;
  }
  .menuOpen #header .btnMenu span {
    background-color: transparent;
  }
  .menuOpen #header .btnMenu span:before {
    top: calc(50% - 2px);
    transform: rotate(45deg);
  }
  .menuOpen #header .btnMenu span:after {
    top: calc(50% - 2px);
    transform: rotate(-45deg);
  }
}

@media screen and (max-width: 374px) {
  #header .siteLogo {
    padding: 20px 0 0;
    width: 250px;
  }
  #header .selectLang ul li {
    font-size: 1.2rem;
  }
}



/* =============================================================================
 global navi
============================================================================= */

@media screen and (min-width: 768px) {
  #globalNavi {
    margin: 0 auto;
    max-width: 1000px;
    position: relative;
    height: 40px;
  }
  #globalNavi .naviInner {
  }
  #globalNavi .navSearch {
    position: absolute;
    right: 112px;
    bottom: 15px;
    display: flex;
  }
  #globalNavi .navSearch form {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
  }
  #globalNavi .navSearch .searchEntry {
    padding: 0 10px 0 0;
    position: absolute;
    top: -3px;
    right: 16px;
  }
  #globalNavi .navSearch .searchBtn {
    opacity: 0;
    width: 16px;
    pointer-events: none;
  }
  #globalNavi .navSearch .searchOpen {
    position: relative;
    width: 16px;
    cursor: pointer;
  }
  #globalNavi .navSearch.open .searchBtn {
    opacity: 1;
    pointer-events: all;
  }
  #globalNavi .navSearch.open .searchOpen {
    z-index: -1;
  }
  #globalNavi .navSearch .searchOpen img {
    width: 16px;
    height: 17px;
  }
  #globalNavi .navSearch input[type="text"] {
    padding: 0;
    border: none;
    border-radius: 12px;
    height: 24px;
    line-height: 24px;
    width: 0;
    background-color: #f1f1f1;
    outline: none;
    transition: padding ease .5s,width ease .5s;
  }
  #globalNavi .navSearch.open input[type="text"] {
    padding: 0 1em;
    width: 160px;
  }
  #globalNavi .navSearch input[type="image"] {
    width: 16px;
    outline: none;
  }
  #globalNavi .navBody {
    padding-top: 10px;
    display: flex;
  }
  #globalNavi .navBtn {
    margin-right: 20px;
    position: relative;
  }
  #globalNavi .navBtn .btnCat {
    height: 30px;
    color: #000;
    font-weight: bold;
  }
  #globalNavi .navBtn .btnCat a {
    color: #000;
  }
  #globalNavi .navBtn .btnLink {
    height: 30px;
    font-weight: bold;
  }
  #globalNavi .navBtn .btnLink a {
    display: block;
    color: #000;
  }
  #globalNavi .navBtn ul {
    padding: 15px 30px;
    position: absolute;
    top: 40px;
    left: 0;
    background-color: rgba(89,89,89,.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity ease .3s, visibility ease .3s;
  }
  #globalNavi .navBtn.hover ul {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  #globalNavi .navBtn ul:before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
  }
  #globalNavi .navBtn ul:after {
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 8px 7px;
    border-color: transparent transparent rgba(89,89,89,.95) transparent;
  }
  #globalNavi .navBtn ul li {
    line-height: 26px;
    font-size: 1.2rem;
    white-space: nowrap;
  }
  #globalNavi .navBtn ul li a {
    color: #fff;
  }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
  #globalNavi .navSearch {
    bottom: 55px;
  }
  #header .selectLang {
    bottom: 59px;
  }
}

@media screen and (max-width: 767px) {
  #globalNavi {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity ease .3s,visibility ease .3s;
  }
  .menuOpen #globalNavi {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  #globalNavi .naviInner {
    height: 100%;
    overflow-y: auto;
  }
  #globalNavi .navSearch {
    padding: 15px calc(35/750*100vw);
    border-bottom: 1px #ddd solid;
  }
  #globalNavi .navSearch form {
    position: relative;
  }
  #globalNavi .navSearch .searchEntry {
  }
  #globalNavi .navSearch .searchBtn {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 20px;
  }
  #globalNavi .navSearch .searchOpen {
    display: none;
  }
  #globalNavi .navSearch input[type="text"] {
    padding: 0 40px 0 10px;
    border: none;
    border-radius: 25px;
    width: 100%;
    line-height: 50px;
    height: 50px;
    background-color: #f1f1f1;
    outline: none;
    font-size: 1.6rem;
  }
  #globalNavi .navSearch input[type="image"] {
    width: 20px;
    outline: none;
  }
  #globalNavi .navBody {
  }
  #globalNavi .btnCat {
    color: #000;
  }
  #globalNavi .navBtn .btnCat,
  #globalNavi .navBtn .btnLink {
    padding: 0 calc(35/750*100vw);
    border-bottom: 1px #ddd solid;
    position: relative;
    line-height: 62px;
    font-size: 1.4rem;
    font-weight: bold;
  }
  #globalNavi .navBtn .btnCat:before {
    content: "";
    border-top: 2px #595959 solid;
    border-right: 2px #595959 solid;
    display: block;
    position: absolute;
    top: 20px;
    right: calc(35/750*100vw);
    width: 12px;
    height: 12px;
    transform: rotate(135deg);
    transition: transform ease .3s;
  }
  #globalNavi .navBtn .btnLink a:before {
    content: "";
    border-top: 2px #595959 solid;
    border-right: 2px #595959 solid;
    display: block;
    position: absolute;
    top: 25px;
    right: calc(42/750*100vw);
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
  }
  #globalNavi .navBtn .btnCat.open:before {
    top: 26px;
    transform: rotate(-45deg);
  }
  #globalNavi .navBtn .btnLink a {
    display: block;
    color: #000;
  }
  #globalNavi .navBtn ul {
    padding: 20px 0;
    display: none;
    background-color: #f1f1f1;
  }
  #globalNavi .navBtn ul li {
    line-height: 50px;
    font-size: 1.4rem;
    white-space: nowrap;
  }
  #globalNavi .navBtn ul li a {
    padding: 0 calc(35/750*100vw);
    display: block;
    color: #595959;
  }
}




/* =============================================================================
 common footer
============================================================================= */

#footer {
  padding: 40px 0 0;
  border-top: 1px #ccc solid;
}
#footer .footerInner {
  margin: 0 auto;
  max-width: 1000px;
}
#footer .footerNav {
  display: flex;
  flex-wrap: wrap;
}
#footer .groupSite {
  padding-right: 10px;
  width: 27.5%;
}
#footer .siteNav {
  display: flex;
  flex-wrap: wrap;
  width: 72.5%;
}
#footer dl {
}
#footer dl dt {
  margin-bottom: 10px;
  font-weight: bold;
}
#footer dl dt a {
  color: #000;
}
#footer dl dd:not(.fb) {
  line-height: 2;
  font-size: 1.2rem;
}
#footer dl dd:not(.fb) a {
  color: #595959;
}
#footer dl dd:not(.fb) a[target="_blank"]:after {
  margin-left: 5px;
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url(../images/common/icon_other.svg) 0 0 no-repeat;
  background-size: contain;
}
#footer dl dd.fb {
  margin-bottom: 10px;
}
#footer dl dd.fb a {
  border: 1px #1877f2 solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 40px;
  color: #1877f2;
  font-size: 1.2rem;
  text-decoration: none;
}
#footer dl dd.fb a .icon {
  margin-right: 10px;
  width: 24px;
}
#footer dl dd.fb a .icon img {
  width: 24px;
  height: 24px;
}
#footer .groupSite dl dt {
  margin: 0 0 15px;
  max-width: 230px;
}
#footer .groupSite dl dd {
}
#footer .siteNav dl {
  margin-bottom: 20px;
  padding-right: 10px;
  width: 25%;
}
#footer .copyright {
  padding: 40px 0;
  width: 100%;
  font-size: 1rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #footer {
    padding: 30px calc(35/750*100vw) 0;
  }
  #footer .footerNav {
    display: block;
  }
  #footer .groupSite {
    margin-bottom: 30px;
    padding-right: 0;
    width: auto;
  }
  #footer .siteNav {
    width: 100%;
  }
  #footer dl {
  }
  #footer dl dt {
    margin-bottom: 10px;
    font-size: 1.6rem;
  }
  #footer dl dd:not(.fb) {
    line-height: 1.64;
    font-size: 1.4rem;
  }
  #footer dl dd:not(.fb) + dd {
    margin-top: 10px;
  }
  #footer dl dd:not(.fb) a[target="_blank"]:after {
    width: 12px;
    height: 12px;
  }
  #footer dl dd.fb {
    margin-bottom: 10px;
  }
  #footer dl dd.fb a {
    width: 150px;
    height: 36px;
    font-size: 1.4rem;
  }
  #footer dl dd.fb a .icon {
    margin-right: 15px;
    width: 20px;
  }
  #footer dl dd.fb a .icon img {
    width: 20px;
    height: 20px;
  }
  #footer .groupSite dl dt {
    margin: 0 0 15px;
    max-width: inherit;
    width: calc(540/750*100vw);
  }
  #footer .groupSite dl dd {
    font-weight: bold;
  }
  #footer .siteNav dl {
    margin-bottom: 30px;
    padding-right: 0;
    width: 50%;
  }
  #footer .copyright {
    padding: 40px 0;
    line-height: 1.5;
    text-align: left;
  }
  #footer .copyright {
    padding: 0 0 20px;
    line-height: 1.5;
    text-align: left;
  }
  #footer .copyright span {
    display: block;
  }
  #footer .copyright span + span {
    margin-top: 10px;
  }
}




/* =============================================================================
 Common Block Styles
============================================================================= */

#mainArea {
  margin: 0 auto;
  padding: 0 0 100px;
  max-width: 1000px;
}
.section + .section {
  margin-top: 50px;
}

@media screen and (max-width: 767px) {
  #mainArea {
    margin: 0 calc(35/750*100vw);
    padding-bottom: 70px;
  }
}



/* title */
.bdrTitle {
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px #646464 solid;
  line-height: 1.5;
  color: #000;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: .075em;
}
.bdrTitle.sfont {
  font-size: 1.8rem;
}
.bdrTitle .small {
  margin-left: 1em;
  font-size: 1.3rem;
}
.bdrTitle + p {
  margin-top: 15px;
}
p + .bdrTitle {
  margin-top: 40px;
}
.pageTitle {
  margin: 0 0 40px;
  line-height: 1.5;
  color: #000;
  font-size: 3.2rem;
  font-weight: bold;
  letter-spacing: .075em;
}
.sectionTitle {
  margin: 0 0 15px;
  line-height: 1.5;
  color: #000;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: .075em;
}
.sectionTitle .small {
  font-size: 1.3rem;
}
p + .sectionTitle {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .bdrTitle {
    margin: 0;
    font-size: 1.8rem;
  }
  .pageTitle {
    margin: 0 0 20px;
    font-size: 2.4rem;
  }
  .sectionTitle {
    margin: 0 0 10px;
    font-size: 1.8rem;
  }
  p + .sectionTitle,
  p + .bdrTitle {
    margin-top: 20px;
  }
}



/* article list */
.articleList {
}
.articleList>ul {
  display: flex;
  flex-wrap: wrap;
}
.articleList>ul>li {
  margin: 0 2% 60px 0;
  width: 23.5%;
}
.articleList>ul>li:nth-child(4n) {
  margin-right: 0;
}
.articleList>ul>li:nth-last-child(-n+4) {
  margin-bottom: 0;
}
.articleList ul li .image {
  margin: 0 0 15px;
  border: 1px #ddd solid;
}
.articleList ul li .date {
  margin-bottom: 5px;
  line-height: 1.4;
  color: #595959;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .05em;
}
.articleList ul li .title {
  line-height: 1.54;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: .05em;
}
.articleList ul li .title a {
  color: #000;
}
.articleList ul li .catList {
  margin-top: 15px;
}

@media screen and (min-width: 768px) {
  .articleList ul li .image a {
    transition: opacity ease .3s;
  }
  .articleList ul li .image a:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 767px) {
  .articleList {
  }
  .articleList>ul {
    display: block;
  }
  .articleList>ul>li {
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px #ccc solid;
    width: 100%;
  }
  .articleList>ul>li:after {
    content: "";
    display: block;
    clear: both;
  }
  .articleList ul li .image {
    margin: 0;
    float: left;
    width: calc(250/750*100vw);
  }
  .articleList ul li .date {
    float: right;
    width: calc(400/750*100vw);
  }
  .articleList ul li .title {
    float: right;
    width: calc(400/750*100vw);
    font-size: 1.4rem;
  }
  .articleList ul li .catList {
    margin-top: 5px;
    float: right;
    width: calc(400/750*100vw);
  }
}



/* cat list */
.catList {
  font-size: 0;
}
.catList li {
  margin: 0 6px 6px 0;
  display: inline-block;
  width: 60px;
  line-height: 24px;
  color: #fff;
  font-size: 1rem;
  text-align: center;
}
.catList li a {
  color: #fff;
}
.catList li:last-child {
  margin-right: 0;
}
.catList li.catOffcampus {
  /* width: 90px; */
  background-color: #ebc350;
}
.catList li.catStudent {
  background-color: #739b69;
}
.catList li.catApplicant {
  background-color: #508cb9;
}
.catList li.catColumn {
  background-color: #d76969;
}
.catList li.catEnglish {
  background-color: #9673a8;
}
.catList li.all {
  background-color: #565656;
}

@media screen and (max-width: 767px) {
  .catList li {
    line-height: 18px;
    font-size: 1rem;
  }
}



/* pager */
.pager {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 28px;
  font-size: 1.2rem;
}
.pager a {
  color: #666;
  text-decoration: none;
}
.pager .btnFirst,
.pager .btnPrev,
.pager .btnNext,
.pager .btnlast {
  line-height: 23px;
  font-size: 30px;
}
.pager .noactive a {
  opacity: .3;
  pointer-events: none;
}
.pager .btnFirst {
  margin-right: 10px;
}
.pager .btnlast {
  margin-left: 10px;
}
.pager ul {
  margin: 0 5px;
  font-size: 0;
}
.pager ul li {
  margin: 0 5px;
  display: inline-block;
  font-size: 1.2rem;
  text-align: center;
}
.pager ul li a,
.pager ul li span {
  border: 1px #999 solid;
  display: block;
  width: 30px;
  height: 30px;
  color: #595959;
  text-decoration: none;
}
.pager ul li span {
  border-color: transparent;
}
.pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  line-height: 28px;
  font-size: 1.5rem;
}
.pagination .btnPrev,
.pagination .btnNext {
  margin: 0 15px;
}
.pagination a {
  color: #595959;
  text-decoration: none;
}
.pagination a span {
  font-size: 30px;
  vertical-align: text-bottom;
}

@media screen and (max-width: 767px) {
  .pager {
    margin-top: 30px;
    font-size: 1.4rem;
  }
  .pager ul li a,
  .pager ul li span {
    font-weight: bold;
  }
}



/* topic path */
.topicPath {
  margin: -30px 0 40px;
}
.topicPath ul {
}
.topicPath ul li {
  display: inline-block;
  font-size: 1.2rem;
}
.topicPath ul li:after {
  margin: 0 .5em;
  content: ">";
}
.topicPath ul li:last-child:after {
  display: none;
}
.topicPath ul li a {
  color: #000;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .topicPath ul li a:hover {
    text-decoration: none;
  }
}

@media screen and (max-width: 767px) {
  .topicPath {
    margin: 0 0 30px;
  }
  .topicPath ul {
  }
  .topicPath ul li {
    display: inline-block;
    font-size: 1.1rem;
  }
}



/* page top */
.pagetop {
  margin-top: 40px;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .pagetop {
    margin-top: 30px;
  }
}



/* icon link */
a.arrow {
  padding-left: 15px;
  display: inline-block;
  color: #595959;
  background: url(../images/common/a-2_a_arrow.jpg) 0 center no-repeat;
  text-decoration: none;
}
a.blank {
  padding-left: 18px;
  display: inline-block;
  color: #595959;
  background: url(../images/common/a-3_btn.jpg) 0 center no-repeat;
  text-decoration: none;
}
a.line {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  a.arrow:hover,
  a.blank:hover {
    text-decoration: underline;
  }
  a.line:hover {
    text-decoration: none;
  }
}



/* anchor point */
.anchorPoint {
  margin-top: -101px;
  padding-top: 101px;
}

@media screen and (max-width: 767px) {
  .anchorPoint {
    margin-top: -70px;
    padding-top: 70px;
  }
}



/* page anchor */
.pageAnchor {
  margin: 0 0 30px;
}
.pageAnchor ul {
}
.pageAnchor ul li {
  margin-right: 1em;
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .pageAnchor ul li a:hover {
    color: #bababa;
  }
}

@media screen and (max-width: 767px) {
  .pageAnchor {
    margin: 0 0 20px;
  }
  .pageAnchor ul {
    line-height: 1.5;
  }
}




/* =============================================================================
 Top Page Styles
============================================================================= */

.hero {
  margin-top: -15px;
  padding: 0 0 40px;
}

.newArticles>ul {
  display: none;
}
.newArticles>ul#all {
  display: flex;
}

.attachCats {
  margin: 0 0 24px;
  padding: 0 0 15px;
  border-bottom: 1px #646464 solid;
  position: relative;
}
.attachCats .catList {
  position: absolute;
  top: 0;
  right: 0;
}
.attachCats .catList li {
  margin-right: 10px;
  width: 80px;
}
.attachCats .catList li.catOffcampus {
  /* width: 90px; */
  background-color: #ebc350;
}
.attachCats .bdrTitle {
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.showList {
  margin-top: 25px;
  text-align: right;
}
.showList a {
  padding-right: 15px;
  display: inline-block;
  position: relative;
  color: #595959;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: underline;
}
.showList a:after {
  content: "";
  display: block;
  border-top: 1px #595959 solid;
  border-right: 1px #595959 solid;
  position: absolute;
  top: 2px;
  right: 0;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

@media screen and (min-width: 768px) {
.showList a:hover {
  text-decoration: none;
}
  .attachCats .catList li {
    transition: opacity ease .3s;
    cursor: pointer;
  }
  .attachCats .catList li:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 767px) {
  .hero {
    margin-top: 0;
    padding: 0 0 25px;
  }

  .attachCats {
    margin: 0;
  }
  .attachCats .catList {
    margin-top: 10px;
    position: static;
  }
  .attachCats .catList li {
    margin-right: 0;
    padding: 6px 0;
    width: calc(1/6*100%);
    white-space: nowrap;
  }
  .attachCats .bdrTitle {
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
  .showList {
    margin-top: 25px;
    text-align: right;
  }
  .showList a {
    padding-right: 18px;
    font-size: 1.4rem;
  }
  .showList a:after {
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
  }
}



/* =============================================================================
 Introduction Page Styles
============================================================================= */

/* introduction */
.photoCloumn {
  display: flex;
  justify-content: space-between;
}
.photoCloumn + .photoCloumn {
  margin-top: 40px;
}
.photoCloumn.photoLeft {
  flex-direction: row-reverse;
}
.photoCloumn + h2,
.photoCloumn + h3,
.photoCloumn + h4,
.photoCloumn + h5,
.photoCloumn + h6 {
  margin-top: 40px;
}
.photoCloumn .text p + p {
  margin-top: 1em;
}
.photoCloumn .photo {
  margin-left: 40px;
}
.photoCloumn .photo img {
  max-width: inherit;
}
.photoCloumn.photoLeft .photo {
  margin-left: 0;
  margin-right: 40px;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .photoCloumn {
    display: block;
  }
  .photoCloumn + .photoCloumn {
    margin-top: 30px;
  }
  .photoCloumn + h2,
  .photoCloumn + h3,
  .photoCloumn + h4,
  .photoCloumn + h5,
  .photoCloumn + h6 {
    margin-top: 30px;
  }
  .photoCloumn .text,
  .photoCloumn .photo {
    width: 100%;
  }
  .photoCloumn .photo {
    margin: 10px 0 0 !important;
  }
}



/* =============================================================================
 History Page Styles
============================================================================= */

.history {
  color: #595959;
}
.history .bdrTitle {
  margin: 40px 0 20px;
}
.history .historyTable {
  display: flex;
  justify-content: space-between;
}
.history .historyTable table {
  width: 48%;
}
.history .historyTable table th {
  padding: 10px 0 10px 10px;
  border-bottom: 1px #ccc solid;
  width: 70px;
  line-height: 21px;
  text-align: left;
}
.history .historyTable table th + th {
  padding-left: 0;
}
.history .historyTable table th.second {
  width: 145px;
}
.history .historyTable table th.second + th {
  width: calc(100% - 215px);
}
.history .historyTable table td {
  padding: 10px 0;
  border-bottom: 1px #ccc solid;
  line-height: 21px;
  text-align: left;
}
.history .historyTable table td[colspan="3"] {
  padding-left: 10px;
  border-bottom: none;
}
.history #h01 .historyTable table th.first + th {
  width: calc(100% - 70px);
}
.history .withPhoto .historyTable {
  display: block;
}
.history .withPhoto .historyTable table {
  width: 100%;
}
.history .withPhoto .historyTable table th.first {
  width: 70px;
}
.history .withPhoto .historyTable table th.second {
  width: 100px;
}
.history .withPhoto .historyTable table th.third {
  width: 169px;
}
.history .withPhoto .historyTable table th.photo {
  width: 31px;
}
.history .withPhoto .historyTable table th.photo + th {
  width: calc(100% - 370px);
}
.history .past {
  margin: 40px 0 10px;
  text-align: right;
}
.history .past + .pagetop {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .history .pageAnchor ul li a:hover {
    color: #bababa;
  }
}

@media screen and (max-width: 767px) {
  .history .pageAnchor {
    margin: 0 0 20px;
  }
  .history .pageAnchor ul {
    line-height: 1.5;
  }
  .history .bdrTitle {
    margin: 30px 0 10px;
  }
  .history .historyTable {
    display: block;
  }
  .history .historyTable table {
    width: 100%;
  }
  .history .historyTable table + table {
    margin-top: 30px;
  }
  .history .historyTable table th {
    padding-left: 5px;
    width: 50px;
  }
  .history .historyTable table th + th {
    padding-left: 0;
  }
  .history .historyTable table th.second {
    width: 70px;
  }
  .history .historyTable table th.second + th {
    width: calc(100% - 140px);
  }
  .history .withPhoto .historyTable table th.first {
    width: 50px;
  }
  .history .withPhoto .historyTable table th.second {
    width: 70px;
  }
  .history .withPhoto .historyTable table th.third {
    width: 60px;
  }
  .history .withPhoto .historyTable table th.photo {
    width: 31px;
  }
  .history .withPhoto .historyTable table td img {
    width: auto;
  }
  .history .withPhoto .historyTable table th.photo + th {
    width: calc(100% - 211px);
  }
  .history .past {
    margin: 30px 0 10px;
  }
  .history .pagetop {
    margin: 30px 0 0;
  }
}



/* =============================================================================
 curriculum Page Styles
============================================================================= */

.curriculumTarget + .curriculumTarget {
  margin: 20px 0 40px;
}
.curriculumTarget dt {
  padding: 10px;
  color: #fff;
  background-color: #898989;
  font-size: 1.8rem;
  font-weight: bold;
}
.curriculumTarget dd {
  border-bottom: 1px #ccc solid;
  display: flex;
  justify-content: space-between;
}
.curriculumTarget dd .num {
  padding: 10px;
  color: #000;
  font-size: 3rem;
  
}
.curriculumTarget dd p {
  padding: 20px 0 10px;
  width: calc(100% - 50px);
}

@media screen and (max-width: 767px) {
  .curriculumTarget + .curriculumTarget {
    margin: 10px 0 30px;
  }
  .curriculumTarget dt {
    margin-top: 15px;
  }
  .curriculumTarget dd .num {
    padding: 10px;
    color: #000;
    font-size: 2rem;

  }
  .curriculumTarget dd p {
    padding: 10px 0 10px;
    width: calc(100% - 40px);
  }
}



/* =============================================================================
 lesson Page Styles
============================================================================= */

.lessonNavi {
  margin: 0 0 30px;
  display: flex;
  justify-content: space-between;
}
.lessonNavi .pageAnchor {
  width: calc(100% - 100px);
}
.lessonNavi .right {
  width: 100px;
  line-height: 1.5;
  text-align: right;
}
.lessonNavi .prevnext + .link {
  margin-top: 1em;
}
.lessonPlan {
  margin-bottom: 50px;
  position: relative;
}
.lessonPlan .sectionTitle {
  color: #6e6e6e;
}
.lessonPlan .lessonNotice {
  position: absolute;
  top: 10px;
  right: 0;
}
.lessonPlan .lessonNotice .cGreen {
  margin-left: 1em;
}
.lessonPlan .cRed {
  color: #bc4b4b;
}
.lessonPlan .cGreen {
  color: #699328;
}
.lessonPlan .planTable {
  margin-top: 30px;
}
.lessonPlan .planTable table {
  border-right: 1px #ccc solid;
  width: 100%;
  line-height: 1.5;
}
.lessonPlan .planTable table th {
  padding: 20px;
  border-bottom: 1px #ccc solid;
  color: #fff;
  background-color: #9FA1A0;
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}
.lessonPlan .planTable table th .year {
  font-size: 75%;
}
.lessonPlan .planTable table th.annual {
  padding: 20px 10px;
  width: 60px;
  white-space: nowrap;
  text-align: center;
}
.lessonPlan .planTable table th.annual[colspan="5"] {
  padding-left: 80px;
  text-align: left;
}
.lessonPlan .planTable table td {
  padding: 20px;
  border-right: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
  width: 31.3%;
  font-size: 1.4rem;
  vertical-align: middle;
}
.lessonPlan .planTable table td:last-child {
  border-right: none;
}
.lessonPlan .planTable table.cell5 td {
  width: calc(25% - 15px);
}
.lessonPlan .planTable table td a {
  text-decoration: underline;
}
.lessonColumn {
  margin-bottom: 50px;
}
.lessonColumn .bdrTitle {
  margin-bottom: 25px;
  padding-bottom: 10px;
}
.lessonColumn .annual {
  margin-left: 10px;
  padding: 0 5px;
  display: inline-block;
  color: #fff;
  background-color: #9fa1a0;
  font-size: 2.4rem;
  font-weight: bold;
  vertical-align: text-bottom;
}
.lessonColumn .alphabet {
  font-size: 3rem;
}
.lessonColumn .annual .year {
  font-size: 75%;
}
.lessonColumn .image {
  margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
  .lessonPlan .planTable table td a:hover {
    text-decoration: none;
  }
}

@media screen and (max-width: 767px) {
  .lessonNavi {
    margin: 0 0 20px;
  }
  .lessonPlan {
    margin-bottom: 40px;
  }
  .lessonPlan .lessonNotice {
    position: static;
    text-align: right;
  }
  .lessonPlan .planTable {
    margin-top: 20px;
    width: 100%;
    overflow: auto;
  }
  .lessonPlan .planTable table {
    width: 700px;
  }
  .lessonPlan .planTable table th {
    padding: 10px;
    font-size: 1.6rem;
  }
  .lessonPlan .planTable table td {
    padding: 20px;
    border-right: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    width: 210px;
    font-size: 1.4rem;
    vertical-align: middle;
  }
  .lessonPlan .planTable table td:last-child {
    border-right: none;
  }
  .lessonPlan .planTable table.cell5 td {
    width: 160px;
  }
  .lessonColumn {
    margin-bottom: 30px;
  }
}





/* =============================================================================
 study_abroad Page Styles
============================================================================= */

.saMap {
  margin: 30px 0;
  padding-top: 50.2%;
  position: relative;
  background: url(../images/study_abroad/a-6_img001.jpg) 0 bottom no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
.saMap p {
  position: absolute;
  top: 10px;
  left: 0;
}
.agreementTable {
}
.agreementTable table {
  width: 100%;
  line-height: 1.5;
}
.agreementTable table th {
  padding: 10px;
  border: 1px #8F8F8F solid;
  color: #fff;
  font-weight: bold;
  text-align: left;
}
.agreementTable table th.th01 {
  background-color: #898989;
  font-size: 1.6rem;
}
.agreementTable table th.th02 {
  background-color: #9F9FA0;
  font-size: 1.4rem;
}
.agreementTable table td {
  padding: 10px;
  border: 1px #8F8F8F solid;
}
.agreementTable table .cell01 {
  width: 8.5em;
}
.agreementTable table .cell02 {
  width: 7em;
}
.agreementTable table .cell03 {
}
.agreementTable table .cell04 {
  width: 15em;
}
.agreementTable table .cell05 {
  width: 5.5em;
}

@media screen and (max-width: 767px) {
  .saMap {
    margin: 30px 0;
    padding-top: calc(50.2% + 10em);
    position: relative;
  }
  .agreementTable {
    width: 100%;
    overflow: auto;
  }
  .agreementTable table {
    width: 800px;
  }
  .agreementTable table th.th01 {
    font-size: 1.5rem;
  }
  .agreementTable table th.th02 {
    font-size: 1.3rem;
  }
}





/* =============================================================================
 foreign_students Page Styles
============================================================================= */

.fsLink {
  margin: 30px 0;
  display: flex;
}
.fsLink ul + ul {
  margin-left: 40px;
}
.fsLink ul li {
  line-height: 1.5;
}
.fsLink ul li + li {
  margin-top: 15px;
}

@media screen and (max-width: 767px) {
  .fsLink {
    margin: 20px 0;
    display: block;
  }
  .fsLink ul + ul {
    margin-top: 10px;
    margin-left: 0;
  }
  .fsLink ul li + li {
    margin-top: 10px;
  }
}





/* =============================================================================
 gakuho Page Styles
============================================================================= */

.gakuhoList {
  margin-top: 40px;
}
.gakuhoList ul {
  display: flex;
  flex-wrap: wrap;
}
.gakuhoList ul li {
  margin: 0 0 20px 3.95%;
  width: 30.7%;
}
.gakuhoList ul li a {
  transition: opacity ease .3s;
}
.gakuhoList ul li:nth-child(3n+1) {
  margin-left: 0;
}

@media screen and (min-width: 768px) {
  .gakuhoList ul li a:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 767px) {
  .gakuhoList {
    margin-top: 30px;
  }
  .gakuhoList ul li {
    margin: 0 0 15px 4%;
    width: 48%;
  }
  .gakuhoList ul li:nth-child(3n+1) {
    margin-left: 4%;
  }
  .gakuhoList ul li:nth-child(2n+1) {
    margin-left: 0;
  }
}





/* =============================================================================
 research Page Styles
============================================================================= */

.researchBox {
  margin-top: 50px;
}
.researchBox .sectionTitle a {
  margin-left: 5px;
  font-size: 1.3rem;
  font-weight: 400;
}
.researchBox .tableTitle {
  margin: 30px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px #666 solid;
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
}
.researchBox .researchTable {
  margin: 0 0 30px;
}
.researchBox .researchTable table {
  width: 100%;
  line-height: 1.5;
}
.researchBox .researchTable table th {
  padding: 10px 0;
  border-bottom: 1px #ccc solid;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
.researchBox .researchTable table td {
  padding: 10px;
  border-bottom: 1px #ccc solid;
  vertical-align: middle;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .researchBox {
    margin-top: 30px;
  }
  .researchBox .tableTitle {
    margin: 20px 0 0;
    font-size: 1.5rem;
  }
  .researchBox .sectionTitle a {
    font-size: 1.2rem;
  }
  .researchBox .researchTable {
    margin: 0 0 30px;
    width: 100%;
    overflow: auto;
  }
  /*
  .researchBox .researchTable table {
    width: 800px;
  }
  */
  .researchBox .researchTable table,
  .researchBox .researchTable table tbody {
    display: block;
  }
  .researchBox .researchTable table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .researchBox .researchTable table th {
    border-bottom: none;
    display: block;
    width: 100%;
  }
  .researchBox .researchTable table td {
    padding: 0 0 10px;
    display: block;
    width: 100%;
  }
  .researchBox .researchTable table td:nth-child(3),
  .researchBox .researchTable table td:nth-last-child(2) {
    width: 50%;
  }
}





/* =============================================================================
 professor Page Styles
============================================================================= */

.professorList {
}
.professorList ul {
  display: flex;
  flex-wrap: wrap;
}
.professorList ul li {
  margin: 0 0 20px 2.5%;
  width: 18%;
}
.professorList ul li:nth-child(5n+1) {
  margin-left: 0;
}
.professorList ul li dl {
  line-height: 1.5;
}
.professorList ul li dl dt {
  margin: 10px 0 0;
  font-size: 1.4rem;
  font-weight: bold;
}
.professorList ul li dl dd span {
  margin-left: 10px;
}
.fulltimeTeacher {
  margin-top: 50px;
}
.fulltimeTeacher .title {
  margin: 0 0 10px;
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: #000;
  font-size: 1.4rem;
  font-weight: bold;
}
.fulltimeTeacher .teacherTable {
  
}
.fulltimeTeacher .teacherTableInner {
}
.fulltimeTeacher .teacherTable table {
  width: 100%;
  line-height: 1.5;
}
.fulltimeTeacher .teacherTable table th {
  padding: 5px 0;
  width: 80px;
  text-align: left;
  font-weight: 400;
}
.fulltimeTeacher .teacherTable table th.long {
  width: 100px;
}
.fulltimeTeacher .teacherTable table td {
  padding: 5px;
}
.fulltimeTeacher .teacherTable table td.w01 {
  width: 95px;
}
.fulltimeTeacher .teacherTable table th + td {
  white-space: nowrap;
}
.fulltimeTeacher .teacherTable table th.long + td {
  white-space: normal;
}

@media screen and (max-width: 767px) {
  .professorList ul li {
    margin: 0 0 15px 3%;
    width: 48.5%;
  }
  .professorList ul li:nth-child(5n+1) {
    margin-left: 3%;
  }
  .professorList ul li:nth-child(2n+1) {
    margin-left: 0;
  }
  .professorList ul li dl dt {
    font-size: 1.3rem;
  }
  .fulltimeTeacher {
    margin-top: 30px;
  }
  .fulltimeTeacher .title {
    font-size: 1.3rem;
  }
  .fulltimeTeacher .teacherTable {
    display: block;
  }
  .fulltimeTeacher .teacherTableInner {
    width: 100%;
  }
  .fulltimeTeacher .teacherTableInner + .teacherTableInner {
    margin-top: 20px;
  }
  .fulltimeTeacher .teacherTable table td.w01 {
    width: 88px;
  }
}





/* =============================================================================
 course_navi Page Styles
============================================================================= */

.courseNavi + .courseNavi {
  margin-top: 50px;
}
.courseNavi p + p {
  margin-top: 10px;
}
.courseNavi dl {
  line-height: 1.67;
}
.courseNavi dl.htList {
  margin-top: 10px;
}
.courseNavi dl.htList dt {
}
.courseNavi dl.htList dd {
  display: flex;
}
.courseNavi dl.htList dd .label {
  width: 70px;
}
.courseNavi dl.htList dd .name:before {
  margin-right: 5px;
  content: "：";
}
.courseNavi dl.htList dd .name span + span {
  margin-left: 13px;
}
.courseNavi dl.scholarship {
}
.courseNavi dl.scholarship dt {
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: bold;
}
.courseNavi dl.scholarship dd {
}
.courseNavi .scholarshipTable {
  margin-top: 30px;
}
.courseNavi .scholarshipTable table {
  width: 100%;
  line-height: 1.5;
}
.courseNavi .scholarshipTable table th {
  padding: 10px 20px;
  border: 1px #8F8F8F solid;
  color: #fff;
  font-weight: bold;
  text-align: left;
}
.courseNavi .scholarshipTable table th.th01 {
  background-color: #898989;
  font-size: 1.6rem;
}
.courseNavi .scholarshipTable table th.th02 {
  background-color: #9F9FA0;
  font-size: 1.4rem;
}
.courseNavi .scholarshipTable table td {
  padding: 10px 20px;
  border: 1px #8F8F8F solid;
}
.courseNavi .scholarshipTable table .cell01 {
}
.courseNavi .scholarshipTable table .cell02 {
}
.courseNavi .scholarshipTable table .cell03,
.courseNavi .scholarshipTable table .cell04 {
  width: 150px;
}

@media screen and (max-width: 767px) {
  .courseNavi + .courseNavi {
    margin-top: 30px;
  }
  .courseNavi dl.htList dd .label {
    width: 65px;
  }
  .courseNavi dl.scholarship dt {
    margin-top: 20px;
    font-size: 1.4rem;
  }
  .courseNavi .scholarshipTable {
    margin-top: 20px;
    width: 100%;
    overflow: auto;
  }
  .courseNavi .scholarshipTable table {
    width: 600px;
  }
  .courseNavi .scholarshipTable table th {
    padding: 10px;
  }
  .courseNavi .scholarshipTable table th.th01 {
    font-size: 1.5rem;
  }
  .courseNavi .scholarshipTable table th.th02 {
    font-size: 1.3rem;
  }
  .courseNavi .scholarshipTable table td {
    padding: 10px;
  }
  .courseNavi .scholarshipTable table .cell03,
  .courseNavi .scholarshipTable table .cell04 {
    width: 100px;
  }
}





/* =============================================================================
 course_navi Page Styles
============================================================================= */

.contactInfo {
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
}
.contactInfo dl {
}
.contactInfo dl dt {
  margin-bottom: 5px;
  line-height: 1.2;
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
}
.contactInfo dl dt .small {
  display: block;
  color: #595959;
  font-size: 1.3rem;
  font-weight: 400;
}
.contactInfo dl dd {
  line-height: 1.67;
}
.contactInfo dl dd + dt {
  margin-top: 20px;
}
.contactBox {
  margin-bottom: 50px;
}
.contactBox + .contactBox {
  margin-bottom: 0;
}
.contactBox .bdrTitle {
  margin-bottom: 20px;
}
.accessTable {
  margin-top: 30px;
}
.accessTable table {
  width: 100%;
  line-height: 1.5;
}
.accessTable table th {
  padding: 10px 20px;
  border: 1px #8F8F8F solid;
  color: #fff;
  font-weight: bold;
  text-align: left;
}
.accessTable table th.th01 {
  background-color: #898989;
  font-size: 1.6rem;
}
.accessTable table th.th02 {
  width: 240px;
  line-height: 2;
  background-color: #9F9FA0;
  font-size: 1.4rem;
}
.accessTable table td {
  padding: 10px 20px;
  border: 1px #8F8F8F solid;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .contactInfo {
    margin-bottom: 30px;
    display: block;
  }
  .contactInfo dl dt {
    font-size: 1.6rem;
  }
  .contactInfo dl dt .small {
    font-size: 1.2rem;
  }
  .contactInfo dl dd + dt {
    margin-top: 10px;
  }
  .contactBox {
    margin-bottom: 30px;
  }
  .accessTable {
    margin-top: 20px;
  }
  .accessTable table th {
    padding: 10px;
  }
  .accessTable table th.th01 {
    font-size: 1.5rem;
  }
  .accessTable table th.th02 {
    width: 180px;
    font-size: 1.3rem;
  }
  .accessTable table td {
    padding: 10px;
  }
}





/* =============================================================================
 article detail Styles
============================================================================= */

.articleDetail .postDate {
  margin-bottom: 10px;
}
.articleDetail p {
  margin-bottom: 1em;
}
.articleDetail p a {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .articleDetail p a:hover {
    text-decoration: none;
  }
}





/* =============================================================================
 dear Page Styles
============================================================================= */

.separator {
  position: absolute;
  left: 0;
  width: 100%;
  height: 24px;
  background: url(../images/dear/section_lv_01_wrap_bg.gif) top center repeat-x;
}
.imgTitle {
  margin: 0 0 20px;
}
.dearAnchor {
  margin-bottom: 60px;
  z-index: 15;
}
.dearBox {
  margin: -20px 0 65px;
  padding: 45px 25px 35px;
  border: 1px #d2d2d2 solid;
  border-top: none;
  color: #2b2b2b;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHUlEQVQImWM4c+bMfxhg+P///3+YAANM9MyZM/8Bl6siEj4igzcAAAAASUVORK5CYII=) 0 0 repeat;
  box-shadow:0px 12px 12px -6px rgba(0,0,0,.2);
}
.dearBox a {
  color: #2b2b2b;
  text-decoration: underline;
}
.dearBox .dearTitle01 {
  margin: 0 0 5px;
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: bold;
}
.dearBox .dearTitle02 {
  margin: 0 0 20px -25px;
  padding: 5px 10px;
  display: inline-block;
  line-height: 1.5;
  color: #fff;
  background-color: #000;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .1em;
}
.dearBox .dearTitle03 {
  margin: 50px 0 20px -25px;
  padding: 5px 10px;
  display: inline-block;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .1em;
}
.dearBox .dearTitle03:first-child {
  margin-top: 0;
}

#content-primary {
  position: relative;
}
#content-primary:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1300px;
  height: 337px;
  z-index: -1;
  background: url(../images/dear/primary_bg.gif)top center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  transform: translateX(-55%);
}
#sec01 .dearBox {
  padding-top: 0;
}
#sec01 .dearBox .image {
  margin: 0 -25px 45px;
}
#sec01 .dearBox p + p {
  margin-top: 2em;
  line-height: 2;
}
#sec02 .dearBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sec02 .dearBox .left {
  width: 46.19%;
}
#sec02 .dearBox .dearTitle01 {
  margin-bottom: 15px;
}
#sec02 .dearBox .right {
  width: 50.85%;
}
#sec02 .dearBox .full {
  margin-top: 20px;
  width: 100%;
}
#sec03 .dearBox {
  display: flex;
  justify-content: space-between;
}
#sec03 .dearBox .left {
  width: 31.14%;
}
#sec03 .dearBox .right {
  width: 64.94%;
}
#sec03 .dearBox .right ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sec03 .dearBox .right ul li {
  width: 49.2%;
}
#sec03 .dearBox .right ul li:nth-child(2n) {
  width: 49.4%;
}
#sec03 .dearBox .right ul li:nth-child(n+3) {
  margin-top: 15px;
}
#sec03 .dearBox .right ul li:nth-child(1) {
  width: 42.2%;
}
#sec03 .dearBox .right ul li:nth-child(2) {
  width: 56.6%;
}
#sec03 .dearBox .caption {
  padding: 5px 5px;
  font-size: 1.2rem;
}
#sec04 .dearBox ul {
  display: flex;
  flex-wrap: wrap;
}
#sec04 .dearBox ul + .dearTitle02 {
  margin-top: 50px;
}
#sec04 .dearBox ul li {
  margin: 0 0 20px 4.33%;
  width: 29%;
}
#sec04 .dearBox ul li:nth-child(3n+1) {
  margin-left: 0;
}
#sec04 .dearBox .image {
  margin: 0 0 10px;
}
#sec04 .dearBox .name {
  margin: 0 0 5px;
  font-size: 1.5rem;
  font-weight: bold;
}
#sec04 .dearBox .nameEN {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: bold;
}
#sec04 .dearBox .link {
  margin: 0 0 10px;
}
#sec04 .dearBox .link a {
  text-decoration: none;
}
#sec04 .dearBox p {
  margin-top: 33px;
}
#sec04 .dearBox .link + p {
  margin-top: 0;
}

#content-secondary {
  padding: 125px 0 0;
  position: relative;
  z-index: 2;
}
#content-secondary:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1300px;
  height: 337px;
  z-index: -1;
  background: url(../images/dear/secondary_bg.gif)top center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  transform: translateX(-55%);
}
.sectionLead {
  margin: 0 0 110px;
  line-height: 1.67;
}
.sectionLead p {
  width: 75%;
}
.sectionLead ul {
  margin: 2em 0;
}
.sectionLead ul:last-child {
  margin: 0;
}
.sectionLead ul li {
  padding-left: 1em;
  text-indent: -1em;
  font-weight: bold;
}
.sectionLead ul li:before {
  content: "・";
}
.sectionLead ul li a {
  text-indent: 0;
  font-weight: normal;
}
#sec05 .dearBox ol {
  margin: 2em 0;
}
#sec05 .dearBox ol li {
  line-height: 1.67;
  list-style-position: inside;
}
#sec06 .dearBox dl {
  line-height: 1.67;
}
#sec06 .dearBox dl span {
  display: block;
}
#sec06 .dearBox dl dt {
  display: flex;
}
#sec06 .dearBox dl dt .qnum {
  width: 45px;
  font-size: 1.6rem;
  font-weight: bold;
}
#sec06 .dearBox dl dt .qtxt {
  width: calc(100% - 45px);
}
#sec06 .dearBox dl dd {
  display: flex;
}
#sec06 .dearBox dl dd .anum {
  width: 45px;
  color: #595959;
  font-size: 1.6rem;
  font-weight: bold;
}
#sec06 .dearBox dl dd .atxt {
  width: calc(100% - 45px);
}
#sec06 .dearBox dl dd + dt {
  margin-top: 1.5em;
}

#content-tertiary {
  padding: 125px 0 150px;
  position: relative;
  z-index: 2;
}
#content-tertiary:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1300px;
  height: 337px;
  z-index: -1;
  background: url(../images/dear/tertiary_bg.gif)top center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  transform: translateX(-55%);
}

@media screen and (min-width: 768px) {
  .dearBox a:hover {
    color: #BABABA;
    text-decoration: none;
  }
  #sec04 .dearBox .link a:hover {
    color: #BABABA;
  }
}

@media screen and (max-width: 767px) {
  .separator {
    position: absolute;
    left: 0;
    width: 100%;
    height: 24px;
    background: url(../images/dear/section_lv_01_wrap_bg.gif) top center repeat-x;
  }
  .imgTitle {
    margin: 0 0 10px;
  }
  .imgTitle img {
    width: auto;
  }
  .dearAnchor {
    margin-bottom: 40px;
  }
  .dearBox {
    margin: -10px 0 40px;
    padding: 30px calc(35/750*100vw) 25px;
  }
  .dearBox .dearTitle01 {
    font-size: 1.5rem;
  }
  .dearBox .dearTitle02 {
    margin: 0 0 10px calc(-35/750*100vw);
    font-size: 1.3rem;
  }
  .dearBox .dearTitle03 {
    margin: 30px 0 10px calc(-35/750*100vw);
    font-size: 1.3rem;
  }

  #content-primary:before {
    display: none;
  }
  #sec01 .dearBox {
    padding-top: 0;
  }
  #sec01 .dearBox .image {
    margin: 0 calc(-35/750*100vw) 30px;
  }
  #sec02 .dearBox {
  }
  #sec02 .dearBox .left {
    width: 100%;
    order: 2;
  }
  #sec02 .dearBox .dearTitle01 {
  }
  #sec02 .dearBox .right {
    margin-bottom: 20px;
    width: 100%;
    order: 1;
  }
  #sec02 .dearBox .full {
    order: 3;
  }
  #sec03 .dearBox {
    display: block;
  }
  #sec03 .dearBox .left,
  #sec03 .dearBox .right {
    width: 100%;
  }
  #sec03 .dearBox .right ul {
    margin-top: 20px;
  }
  #sec04 .dearBox ul {
  }
  #sec04 .dearBox ul + .dearTitle02 {
    margin-top: 30px;
  }
  #sec04 .dearBox ul li {
    margin: 0 0 10px 3%;
    width: 48.5%;
  }
  #sec04 .dearBox ul li:nth-child(3n+1) {
    margin-left: 3%;
  }
  #sec04 .dearBox ul li:nth-child(2n+1) {
    margin-left: 0;
  }
  #sec04 .dearBox .image {
    margin: 0 0 5px;
  }
  #sec04 .dearBox .name {
    font-size: 1.3rem;
  }
  #sec04 .dearBox .nameEN {
    margin: 0 0 5px;
    font-size: 1.1rem;
  }
  #sec04 .dearBox .link {
    line-height: 1.5;
  }
  #sec04 .dearBox p {
    margin-top: 0;
  }

  #content-secondary {
    padding: 60px 0 0;
  }
  #content-secondary:after {
    display: none;
  }
  .sectionLead {
    margin: 0 0 50px;
    line-height: 1.67;
  }
  .sectionLead p {
    width: 100%;
  }
  .sectionLead ul {
    margin: 2em 0;
  }
  .sectionLead ul:last-child {
    margin: 0;
  }
  #sec06 .dearBox dl dt .qnum,
  #sec06 .dearBox dl dd .anum {
    width: 40px;
    font-size: 1.4rem;
  }
  #sec06 .dearBox dl dt .qtxt,
  #sec06 .dearBox dl dd .atxt {
    padding-top: 2px;
    width: calc(100% - 40px);
  }
  #sec06 .dearBox dl dd + dt {
    margin-top: 1em;
  }

  #content-tertiary {
    padding: 60px 0 0;
  }
  #content-tertiary:after {
    display: none;
  }
}





/* =============================================================================
 archive Page Styles
============================================================================= */

.infoList {
}
.infoList>ul {
}
.infoList>ul>li {
  display: flex;
  justify-content: space-between;
  line-height: 1.54;
  font-size: 1.3rem;
}
.infoList>ul>li + li {
  margin-top: 30px;
}
.infoList>ul>li .image {
  width: 150px;
}
.infoList>ul>li .text {
  width: calc(100% - 170px);
}
.infoList>ul>li .date {
  margin-bottom: 5px;
  line-height: 1.4;
  color: #595959;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .05em;
}
.infoList>ul>li .title {
  font-weight: bold;
  letter-spacing: .05em;
}
.infoList>ul>li .catList {
  margin-top: 6px;
}
.infoList>ul>li p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.selectArchive {
  margin-bottom: 20px;
  text-align: right;
}
.selectArchive select {
  padding: 10px;
  border-color: #666;
  border-radius: 6px;
}

@media screen and (max-width: 767px) {
  .infoList>ul>li .image {
    width: calc(250/750*100vw);
  }
  .infoList>ul>li .text {
    width: calc(400/750*100vw);
  }
}




/* =============================================================================
 fancybox Setting
============================================================================= */

.fancybox-button--zoom,.fancybox-button--play,.fancybox-button--thumbs {
  display: none !important;
}
.fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar {
  opacity: 1 !important;
  visibility: visible !important;
}





/* =============================================================================
 for print
============================================================================= */

@media print{
  #header .btnMenu,
  #globalNavi {
    display: none;
  }
  #header {
    position: absolute;
  }
  #header,#footer {
    display: none;
  }
}