@charset "UTF-8";

/* ================================================== *
 *    Web Fonts
 * ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Quattrocento&display=swap');

/* ================================================== *
 *    common
 * ================================================== */
/*  body ------------------------------------------ */
body {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: #fff;
  color:#000;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  font-family: 'Quattrocento',游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  letter-spacing: 0.05em;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  word-break: break-all;
  vertical-align: baseline;
  line-height: 1;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*  clearfix ------------------------------------------ */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/*  a ------------------------------------------ */
a {
  color: #000;
}
a:hover {
  color: #666;
}
.arrow{
  padding:0 0 0 20px;
  background:url(../img/arrow-next.png) 0.15em 0.25em no-repeat;
  background-size: 5px 9px;
}
/*  btn ------------------------------------------ */
.btn{
  padding:1.4em 1em 1.2em 1em;
  display: inline-block;
  text-align:center;
  font-size:1.125rem;
  color:#000;
  background:#fff;
  border:2px solid #000;
  text-decoration: none;
  transition: 0.5s;
}
.btn:hover{
  color:#fff;
  background:#000;
  transition: 0.5s;
}
@media screen and (max-width: 480px) {
  .btn{
    font-size:1rem;
  }
}
.btnOne{
  margin:15px auto 0 auto;
  width:540px;
}
.btnOne a{
  width:100%;
}
@media screen and (max-width: 1112px) {
  .btnOne{
    width:48%;
  }
}
@media screen and (max-width: 480px) {
  .btnOne{
    width:100%;
  }
}
.btnTwo{
  display: flex;
  justify-content: space-between;
}
.btnTwo p{
  width:540px;
  margin:0;
}
.btnTwo a{
  width:100%;
}
@media screen and (max-width: 1112px) {
  .btnTwo p{
    width:48%;
    margin:15px 0 0 0;
  }
}
@media screen and (max-width: 480px) {
  .btnTwo{
    display:contents;
  }
  .btnTwo p{
    width:100%;
  }
}
/*  layout ------------------------------------------ */
.wrapper{
  margin:0 auto;
  width:1140px;
}
@media screen and (max-width: 1112px) {
  .wrapper {
    margin:0 30px;
    width:auto;
  }
}
@media screen and (max-width: 480px) {
  .wrapper {
    margin:0;
    padding:0 30px;
  }
}
.wrapperSecond{
  margin:0 auto;
  padding-bottom:150px;
  width:1140px;
}
@media screen and (max-width: 1112px) {
  .wrapperSecond {
    margin:0 30px;
    padding-bottom:90px;
    width:auto;
  }
}
/*  text  ------------------------------------------ */
.textLLL{
  margin:0;
  font-size:2.25rem;
  line-height: 1.6;
}
.textLL{
  font-size:1.25rem;
  line-height: 1.8;
}
.textL{
  font-size:1.125rem;
  line-height: 1.8;
}
.textM{
  font-size:1rem;
  line-height: 1.8;
}
.textS{
  font-size:0.8rem;
  line-height: 1.8;
}
.lead {
  margin-bottom:30px;
}
.headingLL{
  font-size:1.5rem;
  line-height: 1.8;
  font-weight:500;;
}
.headingL{
  font-size:1.25rem;
  line-height: 1.8;
  font-weight:500;
  color:#666;
}
@media screen and (max-width: 480px) {
  .textLLL{
    font-size:2rem;
  }
  .textLL,
  .headingL{
    font-size:1.125rem;
  }
  .lead{
    text-align:left!important;
  }
  .headingLL{
    font-size:1.25rem;
  }
}
.alignCenter{
  text-align:center;
}
.space30{
  margin-bottom:30px;
}
.space60{
  margin-bottom:60px!important;
}
.colorWhite{
  color:#fff;
}
.colorBlue{
  color:#767cba;
}
.nomalList{
  margin:0;
  padding:0 0 0 1.6rem;
}
.nomalList li{
  margin:0 0 0.5rem 0;
  padding:0;
  line-height:1.8;
}
.dotList{
  list-style:none;
  margin:10px 0 30px 0;
  padding:0;
}
.dotList li{
  margin:0 0 0.8em 0;
  padding:0 0 0 20px;
  background:url(../typefaces/img/dot.png) 0 0.5em no-repeat;
  background-size: 10px 10px;
  line-height:1.8;
  white-space:normal;
}
/*  second  ------------------------------------------ */
.heading{
  background:#f5f5f5;
  margin:60px 0;
  padding:0 0 40px 0;
  text-align:center;
}
.heading h2 img{
  margin:-20px 0 0 0;
}
.secondNavi{
  margin:0 0 90px 0;
  padding:0 0 30px 0;
  border-bottom:2px solid #000;
  list-style: none;
  font-size:1.125rem;
  text-align: center;
}
.secondNavi li{
  margin:0 15px;
  padding:0;
  display: inline-block;
}
.pagingNavi{
  margin:0 0 150px 0;
  padding:30px 0 0 0;
  border-top:2px solid #000;
  list-style: none;
  font-size:1.125rem;
  text-align: center;
}
.pagingNavi ul{
  margin:0 15px;
  padding:0;
}
.pagingNavi li{
  margin:0;
  padding:0;
}
.pagingNavi li.pagingNavi__prev{
  float:left;
  padding:0 0 0 20px;
  background:url(../img/arrow-prev.png) 0.15em 0.25em no-repeat;
  background-size: 5px 9px;
  text-align:left;
}
.pagingNavi li.pagingNavi__next{
  float:right;
  padding:0 20px 0 0;
  background:url(../img/arrow-next.png) right 0.25em no-repeat;
  background-size: 5px 9px;
  text-align:right;
}
@media screen and (max-width: 1112px) {
  .heading{
    padding:0 0 30px 0;
    text-align:center;
  }
  .pagingNavi{
    margin:0 0 90px 0;
  }
}
@media screen and (max-width: 480px) {
  .heading{
    margin:30px 0;
    padding:0 0 10px 0;
  }
  .secondNavi{
    margin:0 0 60px 0;
    padding:0;
    font-size:1rem;
  }
  .secondNavi li{
    margin:0 0 15px 0;
    width:45%;
  }
  .pagingNavi{
    margin:0 0 60px 0;
  }
}

/* ================================================== *
 *    header
 * ================================================== */
h1 {
  margin: 0 auto 20px auto;
  padding:60px 0 0 90px;
}
h1 img{
  height:100px;
  width:auto;
}
@media screen and (max-width: 1112px) {
  h1 {
  margin:0 auto;
  padding:30px 0;
	text-align:center;
  }
  h1 img{
    height:80px;
    width:auto;
  }
}
@media screen and (max-width: 480px) {
  h1 {
  margin:0 auto;
  padding:15px 0 30px 0;
	text-align:center;
  }
  h1 img{
    height:60px;
    width:auto;
  }
}

/*  navi ------------------------------------------ */
.navi__hover{
  display:inline-block;
  position:relative;
  cursor:pointer;
}
.navi__hover::after{
  content:'';position:absolute;
  width:100%;
  transform:scaleX(0);
  height:3px;
  bottom:0;
  left:0;
  background-color:#000;
  transform-origin:bottom right;
  transition:transform .2s cubic-bezier(.86,0,.07,1);
}
.navi__hover:hover::after{
  transform:scaleX(1);
  transform-origin:bottom left;
}
.navi__global {
  position:absolute;
  z-index: 5;
  top: 30px;
  right: 45px;
  overflow: auto;
  width: 100%;
  height: auto;
  padding-top: 0;
  -webkit-transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  text-align: right;
}
.navi__global nav,
.navi__global ul {
  height: 100%;
}
.navi__global li {
  display: inline-block;
  border: none;
  letter-spacing: 0.1em;
  font-size: 100%;
}
.navi__global li img{
  height:40px;
  width:auto;
}
.navi__global a {
  display: block;
  margin: 0 15px 0 15px;
  -webkit-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
  opacity: 0.4;
}
.navi__global a:hover {
  transition: 0.5s;
  opacity: 1;
}
/* menu toggle */
#toggle {
  display: none;
}
#toggle:checked ~ .navi__global{
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
#toggle:checked ~ .container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.mobile__bar {
  display: none;
}
@media screen and (max-width: 1112px) {
.navi__hover::after{
  background:none;
}
/* menu */
.navi__global {
  top: 0;
  position: fixed;
  left: -250px;
  overflow-y: hidden;
  width: 250px;
  height: 100%;
  padding-top: 40px;
  color: #999;
  background: #eee;
  text-align:center;
}
.navi__global nav {
  background: #eee;
}
.navi__global li {
  display: block;
  margin-right: 0;
}
.navi__global a {
  padding: 15px 20px;
  color:#fff;
}
/* menu toggle */
.mobile__bar {
  display: block;
  z-index: 10;
  position:absolute;
  top: 0;
  left: 0;
  padding: 0 25px;
  width: 60px;
  height: 60px;
}
.mobile__icon {
  display: block;
  position: relative;
  width: 25px;
  height: 100%;
  cursor: pointer;
  -webkit-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
}
.mobile__icon > span {
  display: block;
  position: absolute;
  top: 55%;
  margin-top: -0.3em;
  width: 100%;
  height: 0.1em;
  border-radius: 1px;
  background-color: #999;
  -webkit-transition: transform .3s ease;
  transition: transform .3s ease;
}
.mobile__icon > span:before,
.mobile__icon > span:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #999;
  -webkit-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
}
.mobile__icon > span:before {
  -webkit-transform: translateY(-0.6em);
  transform: translateY(-0.6em);
}
.mobile__icon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#toggle:checked + .mobile__bar .mobile__icon {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#toggle:checked + .mobile__bar span:before,
#toggle:checked + .mobile__bar span:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
#toggle:checked ~ .navi__global {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
}

/* ================================================== *
 *    index
 * ================================================== */
 /*  main ------------------------------------------ */
.indexMain {
  display: flex;
  justify-content: center;
  align-items: center;
  height:70vh;
  text-align:center;
}
.indexMain img{
  height: 50vh;
  width: auto;
}
.indexWrap{
  height: 100vh;
  margin-bottom:15px;
}
@media screen and (max-width: 1112px) {
  .indexMain img{
    height: 50vh;
    width: auto;
  }
}
@media screen and (max-width: 480px) {
  .indexMain img{
    width:80%;
    height:auto;
  }
}
@media screen and (max-width: 768px) and (min-width: 481px){
  .indexMain{
    display: block;
    height:auto;
  }
  .indexMain img{
    height: 50vh;
    width: auto;
  }
  .indexWrap{
    height:auto;
    padding:0 0 60px 0;
  }
}

 /*  news ------------------------------------------ */
.indexNews{
  margin:0;
  padding:0 0 90px 0;
  background:#f5f5f5;
}
.indexNews__heading{
  margin:0 0 50px 0;
  text-align:center;
}
.indexNews__heading img{
  margin-top:-15px;
  width:115px;
  height:auto;
}
.indexNews__item {
  border:2px solid #fff;
  margin:15px 0 0 0;
  width:100%;
  background:#fff;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items:center;
}
.indexNews__item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.indexNews__item:hover {
  border:2px solid #000;
  transition: 1s;
}
.indexNews__img {
  margin:15px;
  width:300px;
  text-align:center;
}
.indexNews__img img{
  width:100%;
  max-width:220px;
  height:auto;
}
.indexNews__text{
  margin:15px;
  width:774px;
}
.indexNews__day{
  color:#999;
  margin-bottom:15px;
}
.indexNews__title{
  margin-top:15px;
  font-size:1.5rem;
  line-height:1.8;
}
@media screen and (max-width: 1112px) {
  .indexNews{
    padding:0 0 60px 0;
  }
  .indexNews__heading{
    margin:0 0 20px 0;
  }
  .indexNews__img {
    width:30%;
  }
  .indexNews__text{
    width:60%;
  }
  .indexNews__title{
    font-size:1.2rem;
  }
}
@media screen and (max-width: 568px) {
  .indexNews__item {
    display:flex;
  }
  .indexNews__img {
    width:100%;
  }
  .indexNews__text{
    margin:0 15px;
    width:auto;
  }
  .indexNews__title{
    font-size:1.125rem;
  }
}
 /*  font ------------------------------------------ */
.indexFont{
  padding:120px 0;
  background:url(../img/index-font-bg.png) repeat-y;
  background-position: top center;
  background-size: 100% auto;
}
.indexFont h2{
  margin:0 0 60px 0;
  padding:0;
}
.indexFont__heading01{
  width:148px;
  height:auto;
}
.indexFont__heading02{
  width:38px;
  height:auto;
}
@media screen and (max-width: 1112px) {
  .indexFont {
    background:url(../img/index-font-bg02.png);
    background-position: top center;
    background-size: 80% auto;
    padding:60px 0;
  }
  .indexFont h2,
  .indexFont .lead{
    text-align:center;
  }
  .indexFont h2{
    margin:0 0 30px 0;
  }
  .indexFont__heading01{
    width:118px;
    height:auto;
  }
}
@media screen and (max-width: 480px) {
  .indexFont {
    background:url(../img/index-font-bg02.png);
    background-position: top center;
    background-size: 120% auto;
    padding:60px 0;
  }
}
/*  mail ------------------------------------------ */
.indexMail{
  margin:0;
  padding:90px 0;
  background:#444;
  text-align:center;
}
.indexMail h2{
  margin:0 0 60px 0;
  padding:0;
}
.indexMail__heading01{
  margin:0;
  width:261px;
  height:auto;
}
.indexMail__heading02{
  margin:0;
  width:37px;
  height:auto;
}
@media screen and (max-width: 1112px) {
  .indexMail {
    padding:60px 0;
  }
  .indexMail h2{
    margin:0 0 30px 0;
  }
  .indexMail__heading01{
    width:208px;
  }
}
/*  link ------------------------------------------ */
.indexLink{
  display: flex;
  justify-content: space-between;
  text-align:center;
}
.indexLink__kokoro{
  margin:90px 30px 90px 60px;
  padding:80px 0 70px 0;
  border:2px solid #f5f5f5;
  width:50%;
  position: relative;
}
.indexLink__profile{
  margin:90px 60px 90px 30px;
  padding:80px 0 70px 0;
  border:2px solid #f5f5f5;
  width:50%;
  position: relative;
}
.indexLink__kokoro a,
.indexLink__profile a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.indexLink__kokoro:hover,
.indexLink__profile:hover{
  border:2px solid #000;
  transition: 1s;
}
.indexLink__kokoro h2{
  margin:0 0 70px 0;
}
.indexLink__kokoro h2 img{
  width:220px;
  height:auto;
}
.indexLink__profile h2{
  margin:0 0 55px 0;
}
.indexLink__profile h2 img{
  width:198px;
  height:auto;
}
@media screen and (max-width: 1112px) {
  .indexLink__kokoro{
    margin:60px 15px 60px 30px;
    padding:50px 0 40px 0;
  }
  .indexLink__profile{
    margin:60px 30px 60px 15px;
    padding:50px 0 40px 0;
  }
}
@media screen and (max-width: 568px) {
  .indexLink{
    display:block;
    padding:30px;
  }
  .indexLink__kokoro h2{
    margin:10px 0 30px 0;
  }
  .indexLink__profile h2{
    margin:0 0 30px 0;
  }
  .indexLink__kokoro{
    margin:0 0 20px 0;
    width:100%;
    height:220px;
  }
  .indexLink__profile{
    margin:0;
    width:100%;
    height:220px;
  }
}

/* ================================================== *
 *    footer
 * ================================================== */
footer{
  padding: 60px 0 150px 0;
  background: #f5f5f5;
}
footer .wrapper{
  display: flex;
  justify-content: space-between;
  align-content:flex-start;
}
.footer__logo{
  width:80px;
}
.footer__logo img{
  width:35px;
  height:auto;
}
.footer__copyright{
  width:200px;
  line-height:1.8;
  font-size:0.875rem;
}
.footer__copyright address {
  font-size: 11px;
  letter-spacing: 0.05em;
  font-style: normal;
}
.footer__logo p,
.footer__copyright p{
  margin-top:0;
}
.footer__navi{
  margin-left: auto;
}
.footer__navi ul{
  margin:0;
  padding:0;
  float:left;
}
.footer__navi li {
  margin:0 0 0 50px;
  padding:0;
  font-size: 0.875em;
  margin-bottom:1em;
}
.footer__navi a{
  display: block;
}
.footer__navi ul li ul{
  margin:0;
}
.footer__navis{
  margin:0;
  padding:0 0 0 10px!important;
  background:url(../img/footer-li.png) 0 0.35em no-repeat;
}
.footer__navi a{
  color:#666;
  text-decoration: none;
}
.footer__navi a:hover {
  color:#000;
  transition: 0.5s;
}
@media screen and (max-width: 1112px) {
  .footer__logo{
    width:80px;
    text-align: center;
  }
}
@media screen and (max-width: 667px) {
  footer{
    padding: 60px 0;
  }
  footer .wrapper{
    display:flex;
    flex-direction: column;
  }
  .footer__logo{
    width:100%;
    text-align:center;
    order:1;
    clear:both;
  }
  .footer__logo img{
    width:35px;
    height:auto;
  }
  .footer__copyright{
    width:100%;
    text-align:center;
    order:3;
  }
  .footer__navi{
    display: block;
    margin:0 auto;
    padding:30px 0;
    order:2;
  }
  .footer__navi ul{
    float:left;
  }
  .footer__navi li {
    margin:0 1em 0.8em 1em;
  }
}
@media screen and (max-width: 375px) {
  .footer__navi{
    margin:0 10%;
  }
}
@media screen and (max-width: 320px) {
  .footer__navi{
    margin:0;
  }
}

/*  pagetop ------------------------------------------ */
#pagetop {
  position: fixed;
  bottom: 60px;
  right: 44px;
}
#pagetop img{
  width:20px;
  height:60px;
}
#pagetop a{
  -webkit-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
  opacity: 0.4;
}
#pagetop a:hover{
  transition: 0.5s;
  opacity: 1;
}
@media screen and (max-width: 480px) {
  #pagetop {
    bottom: 20px;
    right: 16px;
  }
  #pagetop img{
    width:16px;
    height:48px;
  }
}

/* ================================================== *
 *    font
 * ================================================== */
.fontHeading{
  width:48px;
  height:auto;
}
@media screen and (max-width: 480px) {
  .fontHeading{
    width:34px;/* 35% */
    height:auto;
  }
}
.fontList__wrap{
  margin:0 auto 60px auto;
  width:1170px;
}
.fontList__wrap ul{
  margin:0;
  padding:0;
  list-style:none;
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.fontList__wrap ul li{
  margin:0 15px 30px 15px;
  padding:0;
  width:165px;
}
.fontList__wrap ul li img{
  width:163px;
  height:auto;
}
.fontList__wrap ul li a img{
  border:2px solid #fff;
}
.fontList__wrap ul li a img:hover{
  border:2px solid #000;
  transition: 0.5s;
}
.linkList{
  margin:0;
  padding:0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.linkList li{
  width:540px;
}
@media screen and (max-width: 1112px) {
  .fontList__wrap {
    width:780px;
  }
  .linkList li{
    width:48%;
  }
}
@media screen and (max-width: 768px) {
  .fontList__wrap{
    width:96%;
  }
  .fontList__wrap ul li{
    margin:0 2% 15px 2%;
    width:21%;
    text-align:center;
  }
  .fontList__wrap ul li img{
    width:90%;
    margin:0 auto;
  }
  .linkList{
    display:contents;
    padding-top:60px;
  }
  .linkList li{
    width:100%;
    padding:40px 0 0 0;
  }
}
@media screen and (max-width: 480px) {
  .fontList__wrap{
    margin:0 auto 30px auto;
    width:100%;
  }
  .fontList__wrap ul li{
    width:46%;
  }
}
/*  download ------------------------------------------ */
.fontDownload{
  margin:0;
  padding:90px 0;
  background:#f5f5f5;
  text-align:center;
}
.fontDownload h2{
  margin:0 0 60px 0;
  padding:0;
}
.fontDownload__heading01{
  margin:0;
  width:330px;
  height:auto;
}
.fontDownload__heading02{
  margin:0;
  width:84px;
  height:auto;
}
.fontDownload__shop{
  margin:0 auto;
  padding:0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
}
.fontDownload__shop li{
  padding:30px 0;
  margin-bottom:30px;
  width:270px;
  text-align:center;
  background:#fff;
  position: relative;
  border:2px solid #fff;
}
.fontDownload__shop li a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.fontDownload__shop li:hover {
  border:2px solid #000;
  transition: 1s;
}
.fontDownload__shop li p{
  margin:0;
}
.fontDownload__shop li p img{
  padding-bottom:10px;
}
.fontDownload__logo{
  padding-top:15px!important;
}
@media screen and (max-width: 1112px) {
  .fontDownload {
    padding:60px 0;
  }
  .fontDownload h2{
    margin:0 0 30px 0;
  }
  .fontDownload__heading01{
    width:264px;
  }
  .fontDownload__shop li{
    width:24%;
    text-align:center;
  }
}
@media screen and (max-width: 768px) {
  .fontDownload__shop li{
    width:100%;
    text-align:center;
  }
}
/*  sample ------------------------------------------ */
.fontSample{
  margin:0;
  padding:90px 0 150px 0;
}
.fontSample__wrap{
  margin:0 0 60px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fontSample__pdf img{
  width:360px;
  height:auto;
}
.fontSample__text{
  width:720px;
}
@media screen and (max-width: 1112px) {
  .fontSample {
    padding:50px 0 90px 0;
  }
  .fontSample__wrap{
    display: block;
  }
  .fontSample__pdf{
    text-align:center;
    margin-bottom:30px;
  }
}
@media screen and (max-width: 480px) {
  .fontSample__pdf img{
    width:100%;
    height:auto;
  }
  .fontSample__text{
    width:100%;
  }
}
/*  permission ------------------------------------------ */
.fontTable{
  margin:10px 0 40px 0;
  line-height:1.5;
}
.fontTable th{
  border:1px solid #ccc;
  padding:0.7rem 2rem 0.5rem 2rem;
  background:#f5f5f5;
  font-size:0.8rem;
}
.fontTable th span,
.fontTable td span{
  font-size:0.7rem;
}
.fontTable td{
  border:1px solid #ccc;
  text-align:center;
  padding:0.7rem 2rem 0.5rem 2rem;
}
.fontTable .fontTable__title{
  background:#666;
  color:#fff;
}
@media screen and (max-width: 834px) {
  .fontTable {
    width: 100%;
  }
  .fontTable tr {
    display: block;
    float: left;
  }
  .fontTable tr th{
    display: block;
    height: 3.5rem;
    padding:0.7rem 0.5rem 0.5rem 0.5rem;
  }
  .fontTable tr td {
    border-left: none;
    display: block;
    height: 3.5rem;
    padding:0.7rem 0.5rem 0.5rem 0.5rem;
  }
  .fontTable thead {
    display: block;
    float: left;
    width: 70%;
  }
  .fontTable thead tr {
    width: 100%;
  }
  .fontTable tbody {
    display: block;
    float: left;
    width: 28%;
  }
  .fontTable tbody tr {
    width: 100%;
  }
  .fontTable thead th,
  .fontTable tbody td {
    border-bottom: none;
  }
  .fontTable thead th:last-child,
  .fontTable tbody td:last-child{
    border-bottom: solid 1px #ccc;
  }
}

/* ================================================== *
 *    graphic
 * ================================================== */
 .graphicHeading{
   width:84px;
   height:auto;
 }
 @media screen and (max-width: 480px) {
   .graphicHeading{
     width:58px;/* 35% */
     height:auto;
   }
 }
.graphicCategory{
  margin:0;
  padding:0 0 0 28px;
  background:url(../graphics/img/h-line.png) 0 0.4em no-repeat;
}
.graphic{
  margin:0 0 120px 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.graphicImg{
  margin:0;
}
.graphicText{
  position: absolute;
  right: 0;
  text-align:right;
  align-self:flex-end;
  line-height:1.8;
}
.graphicText p{
  margin:0;
}
.graphicYear{
  font-size:1.125rem;
  color:#999;
}
@media screen and (max-width: 1112px) {
  .graphicCategory{
    margin:0 0 30px 0;
  }
  .graphic{
    display: block;
    margin:0 0 60px 0;
  }
  .graphicImg{
    text-align:center;
    padding:0;
  }
  .graphicImg img{
    width:80%;
    height:auto;
  }
  .graphicText{
    position: relative;
    right:auto;
  }
}
@media screen and (max-width: 480px) {
  .graphicImg img{
    width:100%;
  }
}

/* ================================================== *
 *    logo
 * ================================================== */
 .logoHeading{
   width:98px;
   height:auto;
 }
 @media screen and (max-width: 480px) {
   .logoHeading{
     width:68px;/* 35% */
     height:auto;
   }
 }
.logoYear{
  margin:0;
  padding:0 0 0 28px;
  background:url(../graphics/img/h-line.png) 0 0.4em no-repeat;
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
  color:#999;
}
.logo{
  margin:0 0 120px 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.logoImg{
  text-align:center;
}
.logoText{
  position: absolute;
  right: 0;
  text-align:right;
  align-self:flex-end;
  line-height:1.8;
}
@media screen and (max-width: 1112px) {
  .logoImg img{
    max-width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .logo{
    display: block;
  }
  .logoImg{
    text-align:center;
  }
  .logoImg img{
    zoom: .7;
    max-width: 100%;
    height:auto;
  }
  .logoText{
    position: relative;
    right:auto;
  }
}

/* ================================================== *
 *    kokorono-katachi
 * ================================================== */
 .kokoroHeading{
   width:208px;
   height:auto;
 }
 @media screen and (max-width: 480px) {
   .kokoroHeading{
     width:145px;/* 35% */
     height:auto;
   }
 }
.kokoroDiary{
  margin:0 0 60px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kokoroDiary__day{
  width:120px;
  color:#999;
  font-size:1.125rem;
}
.kokoroDiary__day p{
  margin:0;
  line-height:1.8;
}
.kokoroDiary__text{
  width:720px;
  line-height:1.8;
}
.kokoroDiary__text h3{
  margin:0 0 15px 0;
  font-size:1.25rem;
  font-weight:500;
  color:#767cba;
}
.kokoroDiary__img,
.kokoroDiary__img img{
  width:200px;
}
.kokoroDiary__img p{
  margin:0 0 15px 0;
}
.kokoroDiary__imghalf{
  width:100px!important;
}
@media screen and (max-width: 1112px) {
  .kokoroDiary__day{
    width:100%;
  }
  .kokoroDiary__text{
    width:70%;
  }
  .kokoroDiary__img{
    width:25%;
  }
  .kokoroDiary__img img{
    width:100%;
  }
}
@media screen and (max-width: 480px) {
  .kokoroDiary{
    display: block;
    margin:0 0 60px 0;
  }
  .kokoroDiary__day,
  .kokoroDiary__text,
  .kokoroDiary__img{
    width:100%;
  }
  .kokoroDiary__img p {
    margin:0 0 10px 0;
    float:left;
    width:50%;
  }
  .kokoroDiary__img p.kokoroDiary__clear {
    clear:both;
    width:100%!important;
  }
  .kokoroDiary__img p.kokoroDiary__clear img{
    width:50%;
    margin-bottom:10px;
  }
  .kokoroDiary__imghalf{
    width:50%!important;
  }
}

/* ================================================== *
 *    profile
 * ================================================== */
 .profileHeading{
   width:76px;
   height:auto;
 }
 @media screen and (max-width: 480px) {
   .profileHeading{
     width:53px;/* 35% */
     height:auto;
   }
 }
.profile{
  margin:-60px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1140px;
}
.profileName{
  width:328px;
  padding-top:60px;
  border-right:2px solid #f5f5f5;
  text-align:center;
  align-items: center;
  justify-content: center;
}
.profileName h3{
  margin:0 0 0 150px;
  width:30px;
  height:200px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-weight:500;
  font-size:2.5rem;
  line-height: 1;
  align-items: center;
}
.profileName__eng{
  margin:40px 0;
  color:#666;
  font-size:1.25rem;
}
.profileText{
  width:750px;
  padding:90px 0;
}
.profileText h4{
  font-size:1.4rem;
  line-height: 1.8;
  font-weight:500;
  margin-bottom:15px;
}
.history p{
  margin:0 0 50px 0;
}
.ikiAbout{
  margin:0 auto 60px auto;
  padding:0;
  width:750px;
  border:2px solid #f5f5f5;
}
.ikiAbout__text{
  float:left;
  width:430px;
  padding:20px 0 0 60px;
}
.ikiAbout__text h4{
  color:#767cba;
}
p.ikiAbout__img{
  float:right;
  margin:0;
  padding:0;
}
p.ikiAbout__img img{
  width:290px;
  height:auto;
}
.ikiWrap{
  margin:0 auto 60px auto;
  width:750px;
}
.ikiWrap__text{
  float:left;
  width:503px;
}
.ikiWrap__img{
  float:right;
  width:200px;
  text-align:center;
}
.ikiWrap__textImg{
  float:left;
  padding:0 10px 0 0;
  text-align:center;
}
.iki .pagingNavi{
  margin-bottom:60px!important;
  margin-left:0!important;
}
@media screen and (max-width: 1112px) {
  .profile{
    display: block;
    margin:0;
    width:100%;
  }
  .profileName{
    width:100%;
    padding-top:0;
    text-align:center;
    border-right:none;
    border:none;
  }
  .profileName h3{
    margin:0 auto;
    width:100%;
    height:auto;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    font-size:1.8rem;
  }
  .profileName__eng{
    margin:20px 0;
    color:#666;
    font-size:1.25rem;
  }
  .profileText{
    width:100%;
    padding:0 0 30px 0;
  }
  .history p,
  .history h4{
    text-align:center;
  }
  .profileText ul{
    margin-left:15%;
  }
  .ikiAbout{
    width:100%;
    margin-top:30px;
  }
  .ikiAbout__text{
    width:60%;
  }
  p.ikiAbout__img{
    width:35%;
  }
  p.ikiAbout__img img{
    width:100%;
  }
  .ikiWrap{
    width:100%;
    margin-bottom:60px;
  }
  .ikiWrap__text{
    width:70%;
  }
  .ikiWrap__img{
    width:28%;
  }
  .ikiWrap__img img{
    max-width:180px;
  }
}
@media screen and (max-width: 480px) {
  .profileText p,
  .profileText h4{
    text-align:left;
  }
  .profileText ul{
    margin-left:0;
  }
  .ikiAbout__text{
    width:100%;
    float:none;
    padding:0 20px;
  }
  .ikiAbout__text p{
    margin:0;
  }
  p.ikiAbout__img{
    width:100%;
    float:none;
    text-align:center;
  }
  p.ikiAbout__img img{
    width:50%;
  }
  .ikiWrap__text{
    width:100%;
    float:none;
  }
  .ikiWrap__img{
    width:100%;
    max-width:100%;
    float:none;
  }
}