@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Montserrat:700&display=swap);
@font-face {
 font-family: 'NotoSansCJKjp';
 font-style: normal;
 font-weight: 400;
 src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.eot");
 src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.woff2") format("woff2"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.woff") format("woff"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Regular.ttf") format("truetype");
}

@font-face {
 font-family: 'NotoSansCJKjp';
 font-style: normal;
 font-weight: 700;
 src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.eot");
 src: url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.woff2") format("woff2"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.woff") format("woff"), url("../fonts/NotoSansCJKjp/NotoSansCJKjp-Bold.ttf") format("truetype");
}

@font-face {
 font-family: 'AlternateGothicNo2BT';
 font-style: normal;
 font-weight: 400;
 src: url("../fonts/AlternateGothicNo2BT/AlternateGothicNo2BT.eot");
 src: url("../fonts/AlternateGothicNo2BT/AlternateGothicNo2BT.eot?#iefix") format("embedded-opentype"), url("../fonts/AlternateGothicNo2BT/AlternateGothicNo2BT.woff2") format("woff2"), url("../fonts/AlternateGothicNo2BT/AlternateGothicNo2BT.woff") format("woff"), url("../fonts/AlternateGothicNo2BT/AlternateGothicNo2BT.ttf") format("truetype");
}

@font-face {
 font-family: 'BounceScript';
 font-style: normal;
 font-weight: 400;
 src: url("../fonts/BounceScript/BounceScript.eot");
 src: url("../fonts/BounceScript/BounceScript.eot?#iefix") format("embedded-opentype"), url("../fonts/BounceScript/BounceScript.woff2") format("woff2"), url("../fonts/BounceScript/BounceScript.woff") format("woff"), url("../fonts/BounceScript/BounceScript.ttf") format("truetype");
}

@font-face {
 font-family: 'Font Awesome 5 Free';
 font-style: normal;
 font-weight: 400;
 src: url("../fonts/FontAwesome5/fa-regular-400.eot");
 src: url("../fonts/FontAwesome5/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/FontAwesome5/fa-regular-400.woff2") format("woff2"), url("../fonts/FontAwesome5/fa-regular-400.woff") format("woff"), url("../fonts/FontAwesome5/fa-regular-400.ttf") format("truetype"), url("../fonts/FontAwesome5/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
 font-family: 'Font Awesome 5 Free';
 font-style: normal;
 font-weight: 900;
 src: url("../fonts/FontAwesome5/fa-solid-900.eot");
 src: url("../fonts/FontAwesome5/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/FontAwesome5/fa-solid-900.woff2") format("woff2"), url("../fonts/FontAwesome5/fa-solid-900.woff") format("woff"), url("../fonts/FontAwesome5/fa-solid-900.ttf") format("truetype"), url("../fonts/FontAwesome5/fa-solid-900.svg#fontawesome") format("svg");
}

/*  基本
-------------------------------------------------------*/
html {
 font-size: 62.5%;
}

body {
 width: 100%;
 height: 100%;
 color: #333;
 background-color: #fff;
 font-family: "NotoSansCJKjp", sans-serif;
 font-size: 1.4em;
 font-weight: 400;
 line-height: 2.14em;
 letter-spacing: .075em;
 word-wrap: break-word;
 overflow-wrap: break-word;
 overflow-x: hidden;
}

/*  リンク
-------------------------------------------------------*/
a {
 -webkit-transition: all .3s;
 transition: all .3s;
}

a:hover {
 opacity: 0.8;
}

/*  ヘッダー
-------------------------------------------------------*/
.header {
 position: fixed;
 margin: 0 auto;
 width: 100%;
 height: 70px;
 background-color: #fff;
 z-index: 900;
}

@media screen and (min-width: 1300px) {
 .header {
  height: 100px;
 }
}

/* ------------------------------------ レイアウト */
.header-wrap {
 position: relative;
 width: 100%;
}

.logo-wrap {
 padding-right: 70px;
 position: absolute;
 top: 15px;
 left: 10px;
 display: flex;
 align-items: center;
}

@media screen and (max-width: 1299px) {
 .site-logo {
  width: auto;
  max-height: 40px;
 }
}

@media screen and (min-width: 1300px) {
 .logo-wrap {
  position: absolute;
  top: 0;
  left: 15px;
  left: 5%;
  padding: 0;
  height: 100px;
 }
}

/* ------------------------------------ ナビコンテナ（SP） */
.navi-outer {
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

@media screen and (max-width: 1300px) {
 .navi-outer {
  display: inline-block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 70px 15px 15px 15px;
  width: 0%;
  height: 100vh;
  background-color: #fff7eb;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  overflow: hidden;
  overflow-x: scroll;
  z-index: 5;
 }
 .navi-outer.close {
  position: fixed;
  top: 0;
  right: 0;
  width: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  overflow: hidden;
 }
 .navi-outer.open {
  opacity: 1;
  visibility: visible;
  width: 100%;
 }
}

/* ------------------------------------ ヘッダーナビ（PC） */
.navi {
 margin: 0;
 padding: 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-transition: max-height 0.3;
 transition: max-height 0.3;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
}

.navi li {
 margin-right: 50px;
}

.navi li a {
 position: relative;
 display: block;
 font-size: 14px;
 font-size: 1.4rem;
 font-weight: 700;
 text-align: center;
 letter-spacing: .2em;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.navi li a:after {
 position: absolute;
 margin-left: .5em;
 content: '\f054';
 color: #f29600;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.navi li a:hover {
 opacity: 0.7;
}

.navi li a:hover::after {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 -webkit-transition: all .3s;
 transition: all .3s;
}

.navi li .active {
 background: #bbe2f1;
}

/* ------------------------------------ ヘッダーナビ（SP） */
.navi-wrap {
 display: flex;
 align-items: center;
}

@media screen and (max-width: 1300px) {
 .navi-wrap {
  display: block;
  height: 100vh;
  overflow-y: scroll;
 }
 .navi {
  margin-bottom: 25px;
  display: block;
  width: 100%;
 }
 .navi li {
  border-top: 1px solid #f29600;
  width: 100%;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
 }
 .navi li a:after {
  position: absolute;
  right: 10px;
 }
 .navi li:last-child {
  border-bottom: 1px solid #f29600;
 }
 .navi li a {
  display: block;
  padding: 1em;
 }
}

.header-btn {
 display: flex;
 justify-content: center;
 margin-left: -15px;
}

.header-btn a {
 margin-left: 15px;
 padding: 1em 0;
 width: calc(50% - 15px);
 text-align: center;
}

.header-btn a:first-child {
 border: 1px solid #f29600;
 background-color: #fff;
}

.header-btn a:last-child {
 background-color: #f29600;
 color: #fff;
 font-weight: 700;
}

.header-btn a:first-child:hover {
 background-color: #333;
 color: #fff;
}

.header-btn a:last-child:hover {
 background-color: #fff7eb;
 color: #f29600;
}

@media screen and (min-width: 1300px) {
 .header-btn {
  display: flex;
  justify-content: center;
  margin-left: 0;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
 }
 .header-btn a {
  margin-left: 0;
  padding: 0 4em;
  width: auto;
  line-height: 100px;
 }
 .header-btn a:first-child {
  border: none;
  background-color: #fff;
 }
}

/* ------------------------------------ スマホメニューボトム画像 */
.header-logo {
 display: none;
}

@media screen and (max-width: 1299px) {
 .header-logo {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 7;
  text-align: right;
 }
 .header-logo img {
  max-width: 80%;
 }
 .navi-outer::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 150px solid #fff;
  border-left: 100vw solid transparent;
  z-index: 6;
 }
}

/*  フッター
-------------------------------------------------------*/
/* ----------------- フッターメインエリア - */
.footer {
 position: relative;
}

.footer-main {
 position: relative;
 display: block;
 padding: 40px 0 85px 0;
 background-color: #fff7eb;
}

.footer-logo {
 position: absolute;
 bottom: 0;
 right: 0;
 z-index: 2;
}

@media screen and (max-width: 1299px) {
 .footer-main {
  padding: 30px 0 50px 0;
 }
 .footer-logo {
  text-align: right;
 }
 .footer-logo img {
  max-width: 80%;
 }
}

.footer-main::after {
 content: "";
 position: absolute;
 bottom: 0;
 right: 0;
 width: 0;
 height: 0;
 border-bottom: 315px solid #fff;
 border-left: 315px solid transparent;
 z-index: 1;
}

/* ----------------- ２分割レイアウト - */
.footer-wrap > div {
 position: relative;
 width: 100%;
 z-index: 3;
}

@media screen and (min-width: 1300px) {
 .footer-wrap {
  display: flex;
 }
 .footer-wrap > div {
  width: 50%;
 }
}

.footer-wrap > div:last-child {
 margin-top: 15px;
 padding-top: 15px;
}

@media screen and (min-width: 1300px) {
 .footer-wrap > div:last-child {
  margin-left: 25px;
  padding-left: 60px;
  border-top: none;
  border-left: 1px solid #ccc;
 }
}

/* ------------------------------------ 連絡先情報 */
.footer-info > div:first-child {
 margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
 .footer-info {
  display: flex;
 }
 .footer-info > div {
  width: 50%;
 }
 .footer-info > div:first-child {
  margin-bottom: 0;
 }
}

/* ------------------------------------ フッターナビ */
.footer-navi li {
 border-top: 1px solid #ccc;
}

.footer-navi:nth-of-type(3) > li:last-child {
 border-bottom: 1px solid #ccc;
}

.footer-navi li a {
 position: relative;
 display: block;
 font-size: 12px;
 font-size: 1.2rem;
 padding: .5em 1em;
}

.footer-navi li a:after {
 position: absolute;
 right: 10px;
 top: 50%;
 margin-top: -11px;
 content: '\f054';
 color: #f29600;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}

@media screen and (min-width: 1300px) {
 .footer-navi {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
 }
 .footer-navi:last-child {
  margin-bottom: 0;
 }
 .footer-navi li {
  border-top: none;
 }
 .footer-navi:nth-of-type(3) > li:last-child {
  border-bottom: none;
 }
 .footer-navi li a {
  padding: 0 1em;
  text-align: left;
 }
 .footer-navi li a:after {
  content: '';
 }
 .footer-navi li + li {
  border-left: 1px solid #ccc;
 }
}

/* ------------------------------------ フッターボタン */
.footer-btn {
 display: flex;
 justify-content: center;
 margin-left: -15px;
}

.footer-btn a {
 margin-left: 15px;
 width: calc(50% - 15px);
 line-height: 40px;
 text-align: center;
}

.footer-btn a:first-child {
 margin-right: 15px;
 background-color: #fff;
}

.footer-btn a:last-child {
 background-color: #f29600;
 color: #fff;
 font-weight: 700;
}

.footer-btn a:first-child:hover {
 background-color: #333;
 color: #fff;
}

.footer-btn a:last-child:hover {
 background-color: #fff;
 color: #f29600;
}

@media screen and (min-width: 1300px) {
 .footer-btn {
  justify-content: flex-start;
  margin-left: 0;
 }
 .footer-btn a {
  margin-left: 0;
  padding: 0 3em;
  width: auto;
  line-height: 50px;
 }
 .footer-btn a:first-child {
  margin-right: 30px;
 }
}

/* ----------------- コピーライト - */
.copyright {
 background-color: #f29600;
 color: #fff;
}

.copyright p {
 font-size: 12px;
 font-size: 1.2rem;
 line-height: 1.2em;
}

/*  グローバルコンテナ
-------------------------------------------------------*/
.container {
 overflow: hidden;
}

.l-global {
 padding-top: 70px;
}

@media screen and (min-width: 1300px) {
 .l-global {
  padding-top: 100px;
 }
}

/*  横幅最大設定コンテナ
-------------------------------------------------------*/
.l-inner {
 position: relative;
 margin: 0 auto;
 padding: 0 15px;
 width: 100%;
}

@media screen and (min-width: 1000px) {
 .l-inner {
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
 }
}

.l-inner1 {
 position: relative;
 margin: 0 auto;
 padding: 0 15px;
 width: 100%;
}

@media screen and (min-width: 1000px) {
 .l-inner1 {
  margin: 0 auto;
  padding: 0;
  max-width: 850px;
 }
}

/*  トグル
-------------------------------------------------------*/
/* ------------------------------------ トグルボタン */
.toggle {
 display: block;
 position: fixed;
 top: 15px;
 right: 15px;
 height: 27px;
 width: 40px;
 cursor: pointer;
 -webkit-transition: opacity 0.25s ease;
 transition: opacity 0.25s ease;
 z-index: 9 !important;
}

@media screen and (min-width: 1300px) {
 .toggle {
  display: none;
 }
}

.toggle span {
 background-color: #333;
 border-radius: 2px;
 height: 2px;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transition: all 0.35s ease;
 transition: all 0.35s ease;
 cursor: pointer;
}

.toggle span:nth-of-type(2) {
 top: 11px;
}

.toggle span:nth-of-type(3) {
 top: 22px;
}

.toggle.active .top {
 -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
 transform: translateY(11px) translateX(0) rotate(45deg);
 background-color: #f29600;
}

.toggle.active .middle {
 opacity: 0;
}

.toggle.active .bottom {
 display: block;
 -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
 transform: translateY(-11px) translateX(0) rotate(-45deg);
 background-color: #f29600;
}

/* ------------------------------------ トグルテキスト */
.toggle-text {
 margin-top: 22px;
 font-size: 10px;
 font-size: 1.0rem;
 color: #333;
 font-family: "NotoSansCJKjp", sans-serif;
 font-weight: 700;
 text-align: center;
 letter-spacing: .1em;
}

.toggle.active .toggle-text {
 display: none;
}

/*  ページトップ
-------------------------------------------------------*/
.pagetop {
 display: block;
 position: absolute;
 bottom: 56px;
 right: 0;
 width: 45px;
 height: 45px;
 z-index: 777;
}

@media screen and (min-width: 1300px) {
 .pagetop {
  top: -97px;
  right: 97px;
  width: 97px;
  height: 97px;
 }
 .pagetop a {
  display: block;
 }
 .pagetop:hover {
  opacity: 0.6;
  cursor: pointer;
 }
}

/*  パンくず
-------------------------------------------------------*/
.breadcrumb {
 margin: 10px 0;
 padding: 0 10px;
}

.breadcrumb-list {
 margin: 0 auto;
 max-width: 1000px;
}

.breadcrumb-list li {
 display: inline-block;
 color: #999;
 font-size: 10px;
 font-size: 1rem;
}

.breadcrumb-list li a {
 color: #333;
}

.breadcrumb-list li:after {
 padding: 0 8px;
 content: '\f105';
 color: #999;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}

.breadcrumb-list li:last-child:after {
 content: '';
}

@media screen and (min-width: 1300px) {
 .breadcrumb {
  padding: 0;
 }
 .breadcrumb-list li {
  font-size: 12px;
  font-size: 1.2rem;
 }
}

/*  セクション見出し
-------------------------------------------------------*/
.page-heading {
 position: absolute;
 bottom: 10px;
 left: 0;
 background-color: #fff;
 padding: 10px;
 font-size: 18px;
 font-size: 1.8rem;
 font-weight: 700;
 letter-spacing: .1em;
}

@media screen and (min-width: 1300px) {
 .page-heading {
  bottom: 30px;
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .2em;
 }
}
.page-heading02 {
 position: absolute;
 bottom: 10px;
 left: 0;
 background-color: rgb(255,255,255,0.8);
 padding: 10px;
 font-size: 18px;
 font-size: 1.8rem;
 font-weight: 700;
 letter-spacing: .1em;
　color: #666
     :
}

@media screen and (min-width: 1300px) {
 .page-heading02 {
  bottom: 30px;
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .2em;
 }
}
.heading {
 position: relative;
 display: inline-block;
 margin-bottom: 1em;
}

.heading:before {
 content: '';
 position: absolute;
 bottom: -25px;
 display: inline-block;
 width: 60px;
 height: 3px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 background-color: #f29600;
}

.flexbox .col2 {
 margin-bottom: 25px;
}

@media screen and (min-width: 1300px) {
 .flexbox {
  display: flex;
 }
 .flexbox .col2 {
  width: 50%;
  margin-bottom: 0;
 }
}

.btn1 {
 position: relative;
 display: inline-block;
 padding: 1em 0;
 background-color: #fff;
 box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.05);
 width: 700px;
 max-width: 100%;
 color: #f29600;
 text-align: center;
}

.btn1:hover {
 background-color: #f29600;
 color: #fff;
}

.btn1::after {
 position: absolute;
 top: 50%;
 right: 30px;
 content: '';
 display: inline-block;
 margin-top: -13px;
 width: 25px;
 height: 28px;
 background-image: url(../img/newface/pdf.png);
 background-size: contain;
 vertical-align: middle;
}

.btn1:hover::after {
 content: '';
 background-image: url(../img/newface/pdf_wh.png);
}

@media screen and (min-width: 1300px) {
 .btn1 {
  padding: 2em 0;
  text-align: center;
 }
 .btn1::after {
  position: relative;
  top: 5px;
  left: 1em;
 }
}

.section-btn {
 position: relative;
 height: 143px;
}

.btn-wrap {
 position: relative;
 top: -45px;
}

/*  ホバー画像ズーム
-------------------------------------------------------*/
.scale-box {
 width: 100%;
 height: auto;
 overflow: hidden;
}

.scale-box img {
 width: 100%;
 height: auto;
 transition: all 0.4s cubic-bezier(0, 0, 0.58, 1);
}

.scale-box img:hover {
 transform: scale(1.1);
 cursor: pointer;
}

/*  ホバーアイコンズーム
-------------------------------------------------------*/
.scale-icon img {
 transition: all 0.4s cubic-bezier(0, 0, 0.58, 1);
}

.scale-icon:hover img {
 transform: scale(1.1);
 cursor: pointer;
}

/*  トップページ --> 英字見出し
-------------------------------------------------------*/
.caption {
 position: relative;
 font-family: "BounceScript", sans-serif;
 font-size: 46px;
 font-style: 3.6rem;
 color: #fee7c2;
 letter-spacing: .1em;
 line-height: 1em;
}

@media screen and (min-width: 1300px) {
 .caption {
  position: absolute;
  font-size: 82px;
  font-style: 8.2rem;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  z-index: 777;
 }
}

/*  トップページ --> ABOUT
-------------------------------------------------------*/
/* ----------------- 英字見出し - */
.caption-about {
 margin-top: 15px;
 margin-bottom: 15px;
 text-align: right;
}

@media screen and (min-width: 1300px) {
 .caption-about {
  top: -80px;
  left: -135px;
  margin: 0;
  text-align: left;
 }
}

/* ----------------- ABOUT - */
.section-about {
 position: relative;
 padding-bottom: 30px;
}

.section-about .content {
 margin-bottom: 15px;
 width: 100%;
}

.about-photo {
 position: relative;
 z-index: 2;
}

@media screen and (min-width: 1300px) {
 .section-about {
  padding: 70px 0 50px 0;
 }
 .section-about .content {
  width: 55%;
 }
 .about-photo {
  position: absolute;
  top: 0;
  right: 0;
 }
}

.about-heading {
 display: inline-block;
 padding-left: 40px;
 font-family: "AlternateGothicNo2BT", sans-serif;
 color: #f29600;
 font-size: 24px;
 font-size: 2.4rem;
}

.about-heading:before {
 content: '';
 position: absolute;
 top: 15px;
 left: 0px;
 width: 30px;
 height: 1px;
 background-color: #f29600;
}

@media screen and (min-width: 1300px) {
 .about-heading {
  margin-left: -40px;
  padding-left: 40px;
 }
 .about-heading:before {
  left: -40px;
 }
}

/*  トップページ --> バナー
-------------------------------------------------------*/
.section-banner {
 position: relative;
 margin-top: -70px;
 padding: 20px 0 120px 0;
 background: url(../img/top/bg-banner@2x.png);
 background-size: cover;
 background-position: top;
 background-repeat: no-repeat;
}

.section-banner .bg-gray {
 position: absolute;
 top: -10px;
 left: 0;
 width: 100%;
 height: 100px;
 background-color: #f6f6f6;
 z-index: 1;
}

@media screen and (min-width: 1300px) {
 .section-banner {
  margin: 0;
  padding: 220px 0 190px 0;
  height: 630px;
 }
 .section-banner .bg-gray {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 145px;
  background-color: #f6f6f6;
  z-index: 1;
 }
}

@media screen and (max-width: 1299px) {
 .section-banner .top-wrap {
  margin-top: 100px;
 }
}

.top-wrap > div,
.top-wrap a {
 display: block;
 position: relative;
 margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
 .top-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
 }
 .top-wrap > div,
 .top-wrap a {
  margin-left: 20px;
  margin-bottom: 20px;
  width: calc(50% - 20px);
 }
}

@media screen and (min-width: 1300px) {
 .top-wrap {
  margin-left: -20px;
 }
 .top-wrap > div,
 .top-wrap a {
  margin-left: 20px;
  width: calc(33.33333% - 20px);
 }
}

.top-wrap a .menu-heading {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 background-color: #fff;
 padding: .2em 1em;
}

.top-wrap .box {
 position: relative;
 background-color: #fff;
}

.top-wrap .num {
 position: absolute;
 top: -15px;
 left: 2px;
 letter-spacing: .075em;
}

/*  トップページ --> クロノスの取り組み
-------------------------------------------------------*/
/* ----------------- 英字見出し - */
.caption-activity {
 margin-top: 35px;
 margin-bottom: 25px;
 text-align: center;
}

@media screen and (min-width: 1300px) {
 .caption-activity {
  top: 100px;
  right: 135px;
  margin: 0;
  text-align: left;
 }
}

.section-activity {
 position: relative;
 margin-top: -80px;
 background-color: #fff7eb;
}

.section-activity:before {
 content: '';
 display: inline-block;
 position: absolute;
 top: -50px;
 left: 0;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 0 50px 100vw;
 border-color: transparent transparent #fff7eb transparent;
}

.section-activity:after {
 content: '';
 display: inline-block;
 position: absolute;
 bottom: -200px;
 left: 0;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 100vw 200px 0;
 border-color: transparent #fff7eb transparent transparent;
 z-index: 1;
}

@media screen and (min-width: 768px) {
 .section-activity {
  margin-top: -50px;
 }
}

@media screen and (min-width: 1300px) {
 .section-activity {
  margin-top: 0;
 }
 .section-activity:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -110px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 110px 100vw;
  border-color: transparent transparent #fff7eb transparent;
 }
}

/*  トップページ --> お客様の声
-------------------------------------------------------*/
/* ----------------- 英字見出し - */
.caption-voice {
 position: absolute;
 top: -20px;
 left: 30px;
 z-index: 888;
}

@media screen and (min-width: 1300px) {
 .caption-voice {
  top: -80px;
  left: 70px;
  margin: 0;
  text-align: left;
 }
}

.section-voice {
 position: relative;
 margin-bottom: 50px;
 top: -50px;
 z-index: 2;
}

@media screen and (min-width: 768px) {
 .section-voice {
  margin-bottom: 0px;
 }
}

@media screen and (min-width: 1300px) {
 .section-voice {
  margin: 0;
 }
}

.voice-bg {
 position: relative;
 z-index: 1;
}

.voice-bg-wh {
 position: absolute;
 top: 50px;
 left: -10px;
 width: calc(100% + 20px);
 height: 130%;
 background-color: #fff;
 -moz-transform: rotate(-2deg);
 -webkit-transform: rotate(-2deg);
 -o-transform: rotate(-2deg);
 -ms-transform: rotate(-2deg);
 transform: rotate(-2deg);
 z-index: 2;
}

@media screen and (min-width: 768px) {
 .voice-bg-wh {
  top: 110px;
  height: 280px;
  z-index: 2;
 }
}

.voice-wrap {
 position: absolute;
 top: 40%;
 left: 15px;
 width: calc(100% - 30px);
 z-index: 3;
}

.voice-wrap .image {
 position: relative;
 margin-bottom: 15px;
}

@media screen and (min-width: 1300px) {
 .voice-wrap {
  position: absolute;
  top: 190px;
  left: 50%;
  margin-left: -500px;
  display: flex;
  width: 1000px;
 }
 .voice-wrap .image {
  margin-right: 30px;
  width: calc(55% - 30px);
 }
 .voice-wrap .content {
  width: 45%;
 }
}

.rotate {
 position: absolute;
 padding: 30px 0;
 top: 30px;
 left: -10px;
 -moz-transform: rotate(-1deg);
 -webkit-transform: rotate(-1deg);
 -o-transform: rotate(-1deg);
 -ms-transform: rotate(-1deg);
 transform: rotate(-1deg);
 width: calc(100% + 20px);
}

@media screen and (min-width: 1300px) {
 .rotate {
  padding: 60px 0;
  top: 110px;
 }
}

.voice-heading {
 position: absolute;
 left: 15px;
 top: 15px;
 background: linear-gradient(transparent 60%, #fff799 60%);
}

@media screen and (min-width: 1300px) {
 .voice-heading {
  left: 45px;
  top: 35px;
 }
}

.pdf {
 position: absolute;
 right: 7px;
 bottom: 5px;
}

/*  トップページ --> ムービー
-------------------------------------------------------*/
.section-movie {
 position: relative;
 padding: 50px 0 50px 0;
 background-color: #fff7eb;
}

@media screen and (min-width: 1300px) {
 .section-movie {
  padding: 0 0 150px 0;
  background-color: #fff;
 }
}

/* ----------------- 英字見出し - */
.caption-movie {
 margin-left: 15px;
 margin-bottom: 15px;
 text-align: center;
}

@media screen and (min-width: 1300px) {
 .caption-movie {
  top: 200px;
  right: 135px;
  margin: 0;
  text-align: left;
 }
}

.video {
 margin: 0 auto;
 position: relative;
 width: 800px;
 max-width: 100%;
 padding-top: 56.25%;
}

.video iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
}

/*  トップページ --> お問い合わせ
-------------------------------------------------------*/
.section-cta {
 padding: 35px 0;
 background-color: #f29600;
 background-image: url(../img/top/bg-cta@2x.jpg);
 background-size: 100%;
 background-repeat: no-repeat;
}

@media screen and (max-width: 1300px) {
.section-cta {
 background-size: cover;
 background-position: right;
}
}

@media screen and (min-width: 1300px) {
 .section-cta {
  padding: 60px 0 50px 0;
 }
}

.btn-contact {
 position: relative;
 display: inline-block;
 width: 700px;
 height: 100px;
 max-width: 100%;
 background-color: #fff;
 color: #f29600;
 font-size: 16px;
 font-size: 1.6rem;
 font-weight: 700;
 text-align: center;
 line-height: 37px;
}

.btn-contact:hover {
 background-color: #b7d100;
 color: #fff;
}

.btn-contact:after {
 position: absolute;
 top: 50%;
 right: 20px;
 margin-top: -18px;
 content: '\f054';
 font-size: 1.8em;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}

.btn-tel {
 position: relative;
 display: inline-block;
 padding: 15px 0;
 width: 700px;
 max-width: 100%;
 border: 3px solid #fff;
 color: #fff;
 font-weight: 700;
 text-align: center;
}

.btn-tel p:last-child {
 display: inline-block;
 padding: 0 1em;
 border-top: 1px solid #fff;
}

.multi {
 margin-left: -1em;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
}

@media screen and (min-width: 1300px) {
 .multi {
  margin-left: 0;
 }
 .btn-contact {
  font-size: 18px;
  font-size: 1.8rem;
 }
}

/*  トップページ --> SNS
-------------------------------------------------------*/
.sns-wrap > div {
 margin-bottom: 30px;
}

@media screen and (min-width: 768px) {
 .sns-wrap {
  display: flex;
  margin-left: -30px;
 }
 .sns-wrap > div {
  margin-left: 30px;
  margin-bottom: 0;
  width: calc(50% - 30px);
 }
}

@media screen and (min-width: 1300px) {
 .sns-wrap {
  margin-left: -60px;
 }
 .sns-wrap > div {
  margin-left: 60px;
  width: calc(50% - 60px);
 }
}

.fb-timeline {
 width: 100%;
 max-width: 470px;
}

@media screen and (min-width: 1300px) {
 .fb-timeline {
  width: 470px;
 }
}

.insta-timeline {
 /*display: block !important;*/
 width: 100%;
 text-align: center;
}

/*  トップページ --> メインビジュアル
-------------------------------------------------------*/
/* ----------------- スライド文字 - */
.slide-text {
 position: absolute;
 top: 20px;
 left: 20px;
 z-index: 777;
}

.slide-text p {
 display: inline-block;
 padding: .2em 1em;
 background-color: #fff;
 font-size: 18px;
 font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
 .slide-text {
  top: 105px;
  left: 200px;
 }
 .slide-text p {
  padding: .5em 1em;
  font-size: 36px;
  font-size: 3.6rem;
 }
}

/*  トップページ --> バナーセクション
-------------------------------------------------------*/
/* ----------------- SEに求められる人物像 - */
.statue-wrap .image {
 margin-bottom: 15px;
}

@media screen and (min-width: 1300px) {
 .statue-wrap {
  display: flex;
 }
 .statue-wrap .image {
  margin-bottom: 0;
  width: 50%;
 }
 .statue-wrap .content {
  margin-left: 30px;
  width: calc(50% - 30px);
 }
}

/* ----------------- 利用料金 - */
.table3-wrap {
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
}

.table3 {
 margin: 0 auto;
 width: 1000px;
 border: 1px solid #ccc;
}

.table3-size1 {
 width: 283px;
}

.table3-size2 {
 width: 73px;
}

.table3 tr {
 border-bottom: 1px solid #ccc;
}

.table3 thead td {
 background-color: #f6f6f6;
 font-weight: 700;
 text-align: center;
}

.table3 td {
 padding: 1em;
 border-right: 1px solid #ccc;
 vertical-align: top;
}

/*  トップページ --> バナーセクション
-------------------------------------------------------*/
.game-about-outer {
 background: url(../img/game/bg.jpg);
 background-size: cover;
 background-repeat: no-repeat;
}

.game-about-inner {
 padding: 20px;
 background-color: #fff;
 box-shadow: 0px 0px 20px 0px rgba(51, 51, 51, 0.05);
}

@media screen and (min-width: 1300px) {
 .game-about-inner {
  padding: 40px 80px;
 }
}

/* ----------------- 研修内容 - */
.training-content .image {
 margin-bottom: 15px;
}

@media screen and (min-width: 1300px) {
 .training-content {
  display: flex;
 }
 .training-content .image {
  margin-right: 25px;
  margin-bottom: 0;
  width: calc(50% - 25px);
 }
 .training-content .content {
  width: 50%;
 }
}

/* ----------------- 身に付くスキル - */
.skill-box {
 padding: 25px 30px;
 border: 6px solid #fff7eb;
}

/* ----------------- 括弧付き数字リスト - */
ol.list-skill {
 counter-reset: item;
}

ol.list-skill li {
 text-indent: -3em;
 padding-left: 3em;
}

ol.list-skill li:before {
 margin-right: 1em;
 color: #f29600;
 font-size: 18px;
 font-size: 1.8rem;
 font-family: "Montserrat", sans-serif;
 counter-increment: item;
 content: counter(item, decimal-leading-zero);
}

/* ----------------- カリキュラム・スケジュール - */
.table1 {
 margin: 0 auto;
 width: 100%;
}

.table1 th {
 display: block;
 padding: 5px 5px;
 width: 100%;
 background-color: #afd15e;
 color: #fff;
 font-family: "Montserrat", sans-serif;
 font-size: 18px;
 font-size: 1.8rem;
 text-align: center;
 font-weight: 700;
 vertical-align: top;
}

.table1 td {
 display: block;
 padding: 5px 5px;
 width: 100%;
 font-weight: 700;
}

@media screen and (min-width: 1300px) {
 .table1 tr {
  border-bottom: 1px solid #ccc;
 }
 .table1 th {
  display: inline-block;
  padding: 20px 10px;
  width: 70px;
  background-color: #fff;
  color: #afd15e;
 }
 .table1 td {
  display: inline-block;
  padding: 20px 10px;
  width: calc(100% - 70px);
 }
}

/* ----------------- カリキュラム・スケジュール - */
.table2 {
 margin: 0 auto;
 width: 100%;
 border: 1px solid #ccc;
}

.table2 tr {
 border-bottom: 1px solid #ccc;
}

.table2 th {
 display: block;
 padding: 10px;
 border-bottom: 1px solid #ccc;
 width: 100%;
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
 text-align: center;
 vertical-align: top;
}

.table2 td {
 display: block;
 padding: 10px;
 width: 100%;
 background-color: #fff;
 text-align: center;
}

.th-gray th {
 background-color: #f6f6f6;
}

.th-orange th {
 background-color: #f29600;
 color: #fff;
}

@media screen and (min-width: 1300px) {
 .table2 th {
  display: inline-block;
  padding: 15px 10px;
  width: 280px;
  border-right: 1px solid #ccc;
  border-bottom: none;
 }
 .table2 td {
  display: inline-block;
  padding: 15px 20px;
  width: calc(100% - 280px);
  text-align: left;
 }
}

.venue-wrap li {
 margin-bottom: 20px;
 padding: 20px 30px;
 background-color: #fff;
}

@media screen and (min-width: 1300px) {
 .venue-wrap {
  display: flex;
  margin-left: -90px;
 }
 .venue-wrap li {
  margin-left: 90px;
  margin-bottom: 0;
  padding: 35px 50px;
  width: calc(50% - 90px);
  background-color: #fff;
 }
}

/*  フォーム
-------------------------------------------------------*/
.contact-form {
 width: 100%;
 max-width: 100%;
 letter-spacing: 1.1px;
}

.contact-form tr {
 border-bottom: 1px solid #ccc;
}

.contact-form th {
 position: relative;
 padding: 20px;
 padding-right: 1em;
 width: 205px;
 color: #333;
 font-size: 14px;
 font-size: 1.4rem;
 font-weight: 700;
 text-align: left;
 vertical-align: top;
}

.contact-form td {
 position: relative;
 padding: 20px;
 vertical-align: middle;
 width: calc(100% - 225px);
}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select {
 padding: 15px 8px;
 background-color: #f6f6f6;
 border: 1px solid #ccc;
 border-radius: 0;
 color: #333;
 font-size: 14px;
 font-size: 1.4rem;
}

.contact-form select {
 /* 矢印カスタマイズに重要 */
 width: 100%;
}

.contact-form textarea {
 padding: 10px;
 width: 100%;
 max-width: 510px;
 height: 300px;
 background-color: #f6f6f6;
 border: 1px solid #ccc;
 color: #333;
 font-size: 14px;
 font-size: 1.4rem;
}

@media screen and (max-width: 1299px) {
 .contact-form tr {
  border-bottom: none;
 }
 .contact-form th {
  display: block;
  padding: 7px 0;
  width: 100%;
 }
 .contact-form td {
  display: block;
  width: 100%;
  padding: 0 0 15px 0;
 }
 .contact-form textarea {
  height: 150px;
 }
}

/* ---------------------------------- 必須ラベル */
.required {
 position: absolute;
 top: 15px;
 right: 10px;
 display: inline-block;
 margin-left: 20px;
 padding: 3px 10px;
 color: #ff0000;
 font-size: 12px;
 font-size: 1.2rem;
 text-align: center;
}

@media screen and (max-width: 1299px) {
 .required {
  top: 8px;
  font-size: 10px;
  font-size: 1rem;
 }
}

/* ---------------------------------- 任意ラベル */
.unrequired {
 position: absolute;
 top: 15px;
 right: 10px;
 display: inline-block;
 margin-left: 20px;
 padding: 3px 10px;
 color: #cccccc;
 font-size: 12px;
 font-size: 1.2rem;
 text-align: center;
}

@media screen and (max-width: 1299px) {
 .unrequired {
  top: 8px;
  font-size: 10px;
  font-size: 1rem;
 }
}

/* ---------------------------------- 確認！ */
.select-flex {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 width: 100%;
}

.select-flex div {
 margin-right: 5px;
}

/* ---------------------------------- お名前・フリガナ・ */
.input-text1 {
 width: 100%;
 max-width: 510px;
}

/* ---------------------------------- お名前・フリガナ・ */
.input-text2 {
 width: 100%;
 max-width: 350px;
}

/* ---------------------------------- メールアドレス・電話番号 */
.input-tel {
 width: 100%;
 max-width: 450px;
}

/* ---------------------------------- 日程 */
.input-date {
 width: 100%;
 max-width: 300px;
}

@media screen and (max-width: 1299px) {
 .input-date {
  max-width: 100%;
 }
}

/* ---------------------------------- セレクトボックス矢印カスタマイズ */
.select {
 position: relative;
}

.select:before {
 position: absolute;
 right: 10px;
 top: 50%;
 content: '\f0dd';
 font-size: 16px;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-top: -16px;
 pointer-events: none;
 z-index: 1;
}

/* ---------------------------------- ボタン */
.form-btn-wrap {
 margin: 0 auto;
 width: 100%;
 text-align: center;
}

.form-btn-wrap > div:nth-child(2) {
 margin-top: 15px;
}

@media screen and (min-width: 1300px) {
 .form-btn-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
 }
 .form-btn-wrap > div:nth-child(2) {
  margin-top: 0;
 }
}

/* ---------------------------------- 確認・送信ボタン */
.form-btn-submit {
 display: inline-block;
 padding: 0 20px;
 width: 180px;
 max-width: 100%;
 border: 1px solid #f29600;
 background-color: #f29600;
 color: #fff;
 font-size: 14px;
 font-size: 1.4rem;
 font-weight: 700;
 text-align: center;
 line-height: 50px;
 letter-spacing: .1em;
 -webkit-transition: all .3s;
 transition: all .3s;
 cursor: pointer;
}

.form-btn-submit:hover {
 background-color: #fff;
 color: #f29600;
}

/* ---------------------------------- リセット・戻るボタン */
.form-btn-back {
 display: inline-block;
 width: 135px;
 max-width: 100%;
 border: 1px solid #ccc;
 background: #fff;
 color: #333;
 font-size: 14px;
 font-size: 1.4rem;
 text-align: center;
 line-height: 50px;
 -webkit-transition: all .3s;
 transition: all .3s;
 cursor: pointer;
}

.form-btn-back:hover {
 background-color: #333;
 color: #fff;
}

/*  アイコンフォント
-------------------------------------------------------*/
.icon-mappin:after {
 content: '\f3c5';
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}

.icon-contact:before {
 content: '\f0e0';
 margin-right: 10px;
 font-size: 2em;
 font-family: "Font Awesome 5 Free";
 font-weight: 400;
}

/*  左からフェードイン
-------------------------------------------------------*/
.animate-lmove {
 -webkit-transition: all 2s;
 transition: all 2s;
 -webkit-transform: translate(5em, 0);
 transform: translate(5em, 0);
 opacity: 0;
}

.animate-lmove.show {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity: 1;
}

/*  右からフェードイン
-------------------------------------------------------*/
.animate-rmove {
 -webkit-transition: all 2s;
 transition: all 2s;
 -webkit-transform: translate(-5em, 0);
 transform: translate(-5em, 0);
 opacity: 0;
}

.animate-rmove.show {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity: 1;
}

/*  上へフェードイン
-------------------------------------------------------*/
.animate-tmove {
 -webkit-transition: all 1s;
 transition: all 1s;
 -webkit-transform: translate(0, 3em);
 transform: translate(0, 3em);
 opacity: 0;
}

.animate-tmove.show {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity: 1;
}

/*  下へフェードイン
-------------------------------------------------------*/
.animate-bmove {
 -webkit-transition: all 2s;
 transition: all 2s;
 -webkit-transform: translate(0, 5em);
 transform: translate(0, 5em);
 opacity: 0;
}

.animate-bmove.show {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity: 1;
}

/* ----------------- 上へフェードイン - */
@media screen and (min-width: 1300px) {
 .animate-bmove {
  -webkit-transition: all 2s;
  transition: all 2s;
  -webkit-transform: translate(0, -5em);
  transform: translate(0, -5em);
  opacity: 0;
 }
}

/*  右からフェードイン
-------------------------------------------------------*/
.animate-alternately-move {
 -webkit-transition: all 2s;
 transition: all 2s;
 -webkit-transform: translate(-5em, 0);
 transform: translate(-5em, 0);
 opacity: 0;
}

.animate-alternately-move.show {
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 opacity: 1;
}

/* ----------------- 右からフェードイン - */
@media screen and (min-width: 1300px) {
 .animate-alternately-move {
  -webkit-transition: all 2s;
  transition: all 2s;
  -webkit-transform: translate(5em, 0);
  transform: translate(5em, 0);
  opacity: 0;
 }
}

.wave-left,
.wave-right {
 position: relative;
}

.wave-left:after {
 content: "";
 position: absolute;
 right: 0;
 top: 0;
 z-index: 1;
 display: block;
 width: 100%;
 height: 100%;
 background: #fff;
 transition: width 1.5s cubic-bezier(0.25, 1, 0.25, 1);
}

.wave-right:after {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
 display: block;
 width: 100%;
 height: 100%;
 background: #fff;
 transition: width 1.5s cubic-bezier(0.25, 1, 0.25, 1);
}

.active.wave-left:after,
.active.wave-right:after {
 width: 0;
}

.delay0 {
 animation-delay: 0s;
}

.delay1 {
 animation-delay: 4s;
}

.delay2 {
 animation-delay: 5s;
}

.wave {
 position: relative;
}

.wave:after {
 content: "";
 position: absolute;
 right: 0;
 top: 0;
 z-index: 5;
 display: inline;
 width: 100%;
 height: 100%;
 background: #fff;
 transition: width 1.5s cubic-bezier(0.25, 1, 0.25, 1);
}

.active.wave:after {
 width: 0;
}

/*  余白
-------------------------------------------------------*/
.fs10 {
 font-size: 10px;
 font-size: 1.0rem;
}

.fs11 {
 font-size: 10px;
 font-size: 1.0rem;
}

.fs12 {
 font-size: 10px;
 font-size: 1.0rem;
}

.fs13 {
 font-size: 12px;
 font-size: 1.2rem;
}

.fs14 {
 font-size: 13px;
 font-size: 1.3rem;
}

.fs16 {
 font-size: 14px;
 font-size: 1.4rem;
}

.fs18 {
 font-size: 16px;
 font-size: 1.6rem;
}

.fs20 {
 font-size: 18px;
 font-size: 1.8rem;
}

.fs24 {
 font-size: 18px;
 font-size: 1.8rem;
}

.fs26 {
 font-size: 24px;
 font-size: 2.4rem;
}

.fs30 {
 font-size: 24px;
 font-size: 2.4rem;
}

.fs36 {
 font-size: 30px;
 font-size: 3.0rem;
}

.fs48 {
 font-size: 36px;
 font-size: 3.6rem;
}

.fs60 {
 font-size: 48px;
 font-size: 4.8rem;
}

@media screen and (min-width: 1300px) {
 .fs10 {
  font-size: 10px;
  font-size: 1.0rem;
 }
 .fs11 {
  font-size: 11px;
  font-size: 1.1rem;
 }
 .fs12 {
  font-size: 12px;
  font-size: 1.2rem;
 }
 .fs13 {
  font-size: 13px;
  font-size: 1.3rem;
 }
 .fs14 {
  font-size: 14px;
  font-size: 1.4rem;
 }
 .fs16 {
  font-size: 16px;
  font-size: 1.6rem;
 }
 .fs18 {
  font-size: 18px;
  font-size: 1.8rem;
 }
 .fs20 {
  font-size: 20px;
  font-size: 2.0rem;
 }
 .fs24 {
  font-size: 24px;
  font-size: 2.4rem;
 }
 .fs26 {
  font-size: 26px;
  font-size: 2.6rem;
 }
 .fs30 {
  font-size: 30px;
  font-size: 3.0rem;
 }
 .fs36 {
  font-size: 36px;
  font-size: 3.6rem;
 }
 .fs48 {
  font-size: 48px;
  font-size: 4.8rem;
 }
 .fs60 {
  font-size: 60px;
  font-size: 6.0rem;
 }
}

.fcw {
 color: #fff;
}

.fcaccent {
 color: #f29600;
}

.fcaccent1 {
 color: #d29f00;
}

.fcaccent2 {
 color: #dc7500;
}

.fcaccent3 {
 color: #e23f00;
}

.fcaccent4 {
 color: #a3c700;
}

.fcred {
 color: #ff0000;
}

.bgbase {
 background-color: #fff;
}

.bgaccent {
 background-color: #f29600;
}

.bgaccent2 {
 background-color: #f6f6f6;
}

.bgaccent3 {
 background-color: #fffbe6;
}

.bgaccent4 {
 background-color: #faf0e6;
}

.bgaccent5 {
 background-color: #fff7eb;
}

.ff1 {
 font-family: "NotoSansCJKjp", sans-serif;
}

.ffeigo {
 font-family: "AlternateGothicNo2BT", sans-serif;
}

.fw6 {
 font-weight: 600;
}

.fw7 {
 font-weight: 700;
}

.fsn {
 font-style: normal;
}

.fsi {
 font-style: italic;
}

.lineht1 {
 line-height: 1em;
}

.lineht14 {
 line-height: 1.4em;
}

.lineht18 {
 line-height: 1.8em;
}

.relative {
 position: relative;
}

.left {
 text-align: left;
}

.right {
 text-align: right;
}

.center {
 text-align: center;
}

/* ------------------------------------margin */
.mt-45 {
 margin-top: -45px;
}

.mt05 {
 margin-top: 5px;
}

.mt10 {
 margin-top: 5px;
}

.mt15 {
 margin-top: 5px;
}

.mt20 {
 margin-top: 10px;
}

.mt25 {
 margin-top: 15px;
}

.mt30 {
 margin-top: 20px;
}

.mt35 {
 margin-top: 25px;
}

.mt40 {
 margin-top: 25px;
}

.mt45 {
 margin-top: 30px;
}

.mt50 {
 margin-top: 30px;
}

.mt60 {
 margin-top: 40px;
}

.mt70 {
 margin-top: 50px;
}

.mt80 {
 margin-top: 60px;
}

.mt90 {
 margin-top: 70px;
}

.mt100 {
 margin-top: 80px;
}

.mb05 {
 margin-bottom: 5px;
}

.mb10 {
 margin-bottom: 5px;
}

.mb15 {
 margin-bottom: 5px;
}

.mb20 {
 margin-bottom: 10px;
}

.mb25 {
 margin-bottom: 15px;
}

.mb30 {
 margin-bottom: 20px;
}

.mb35 {
 margin-bottom: 25px;
}

.mb40 {
 margin-bottom: 25px;
}

.mb45 {
 margin-bottom: 30px;
}

.mb50 {
 margin-bottom: 30px;
}

.mb60 {
 margin-bottom: 40px;
}

.mb70 {
 margin-bottom: 50px;
}

.mb80 {
 margin-bottom: 60px;
}

.mb90 {
 margin-bottom: 70px;
}

.mb100 {
 margin-bottom: 80px;
}

.mb150 {
 margin-bottom: 100px;
}

.mb200 {
 margin-bottom: 150px;
}

@media screen and (min-width: 1300px) {
 .mt05 {
  margin-top: 5px;
 }
 .mt10 {
  margin-top: 10px;
 }
 .mt15 {
  margin-top: 15px;
 }
 .mt20 {
  margin-top: 20px;
 }
 .mt25 {
  margin-top: 25px;
 }
 .mt30 {
  margin-top: 30px;
 }
 .mt35 {
  margin-top: 35px;
 }
 .mt40 {
  margin-top: 40px;
 }
 .mt45 {
  margin-top: 45px;
 }
 .mt50 {
  margin-top: 50px;
 }
 .mt60 {
  margin-top: 60px;
 }
 .mt70 {
  margin-top: 70px;
 }
 .mt80 {
  margin-top: 80px;
 }
 .mt90 {
  margin-top: 90px;
 }
 .mt100 {
  margin-top: 100px;
 }
 .mb05 {
  margin-bottom: 5px;
 }
 .mb10 {
  margin-bottom: 10px;
 }
 .mb15 {
  margin-bottom: 15px;
 }
 .mb20 {
  margin-bottom: 20px;
 }
 .mb25 {
  margin-bottom: 25px;
 }
 .mb30 {
  margin-bottom: 30px;
 }
 .mb35 {
  margin-bottom: 35px;
 }
 .mb40 {
  margin-bottom: 40px;
 }
 .mb45 {
  margin-bottom: 45px;
 }
 .mb50 {
  margin-bottom: 50px;
 }
 .mb60 {
  margin-bottom: 60px;
 }
 .mb70 {
  margin-bottom: 70px;
 }
 .mb80 {
  margin-bottom: 80px;
 }
 .mb90 {
  margin-bottom: 90px;
 }
 .mb100 {
  margin-bottom: 100px;
 }
 .mb150 {
  margin-bottom: 150px;
 }
 .mb200 {
  margin-bottom: 200px;
 }
}

.ml05 {
 margin-left: 5px;
}

.ml10 {
 margin-left: 1em;
}

.ml15 {
 margin-left: 15px;
}

.mr10 {
 margin-right: 10px;
}

/* ------------------------------------padding */
.pt05 {
 padding-top: 5px;
}

.pt10 {
 padding-top: 5px;
}

.pt15 {
 padding-top: 5px;
}

.pt20 {
 padding-top: 10px;
}

.pt25 {
 padding-top: 15px;
}

.pt30 {
 padding-top: 20px;
}

.pt35 {
 padding-top: 25px;
}

.pt40 {
 padding-top: 25px;
}

.pt45 {
 padding-top: 30px;
}

.pt50 {
 padding-top: 30px;
}

.pt60 {
 padding-top: 40px;
}

.pt70 {
 padding-top: 50px;
}

.pt80 {
 padding-top: 60px;
}

.pt90 {
 padding-top: 70px;
}

.pt100 {
 padding-top: 80px;
}

.pb05 {
 padding-bottom: 5px;
}

.pb10 {
 padding-bottom: 5px;
}

.pb15 {
 padding-bottom: 5px;
}

.pb20 {
 padding-bottom: 10px;
}

.pb25 {
 padding-bottom: 15px;
}

.pb30 {
 padding-bottom: 20px;
}

.pb35 {
 padding-bottom: 25px;
}

.pb40 {
 padding-bottom: 25px;
}

.pb45 {
 padding-bottom: 30px;
}

.pb50 {
 padding-bottom: 30px;
}

.pb60 {
 padding-bottom: 40px;
}

.pb70 {
 padding-bottom: 50px;
}

.pb80 {
 padding-bottom: 60px;
}

.pb90 {
 padding-bottom: 70px;
}

.pb100 {
 padding-bottom: 80px;
}

@media screen and (min-width: 1300px) {
 .pt05 {
  padding-top: 5px;
 }
 .pt10 {
  padding-top: 10px;
 }
 .pt15 {
  padding-top: 15px;
 }
 .pt20 {
  padding-top: 20px;
 }
 .pt25 {
  padding-top: 25px;
 }
 .pt30 {
  padding-top: 30px;
 }
 .pt35 {
  padding-top: 35px;
 }
 .pt40 {
  padding-top: 40px;
 }
 .pt45 {
  padding-top: 45px;
 }
 .pt50 {
  padding-top: 50px;
 }
 .pt60 {
  padding-top: 60px;
 }
 .pt70 {
  padding-top: 70px;
 }
 .pt80 {
  padding-top: 80px;
 }
 .pt90 {
  padding-top: 90px;
 }
 .pt100 {
  padding-top: 100px;
 }
 .pb05 {
  padding-bottom: 5px;
 }
 .pb10 {
  padding-bottom: 10px;
 }
 .pb15 {
  padding-bottom: 15px;
 }
 .pb20 {
  padding-bottom: 20px;
 }
 .pb25 {
  padding-bottom: 25px;
 }
 .pb30 {
  padding-bottom: 30px;
 }
 .pb35 {
  padding-bottom: 35px;
 }
 .pb40 {
  padding-bottom: 40px;
 }
 .pb45 {
  padding-bottom: 45px;
 }
 .pb50 {
  padding-bottom: 50px;
 }
 .pb60 {
  padding-bottom: 60px;
 }
 .pb70 {
  padding-bottom: 70px;
 }
 .pb80 {
  padding-bottom: 80px;
 }
 .pb90 {
  padding-bottom: 90px;
 }
 .pb100 {
  padding-bottom: 100px;
 }
}

.pl25 {
 padding-left: 25px;
}

@media screen and (max-width: 1300px) {
 .sp-none {
  display: none;
 }
 .sp-br {
  display: block;
 }
 .text-align {
  text-align: left;
 }
}

@media screen and (min-width: 1300px) {
 .pc-none {
  display: none;
 }
 .pc-br {
  display: block;
 }
 .text-align {
  text-align: center;
 }
}

/*  画像
-------------------------------------------------------*/
.img-fit {
 width: 100%;
 max-width: 100%;
 height: auto;
}

.img-sfit {
 height: auto;
 width: 100%;
}

.img-space_sp {
 width: 100%;
 max-width: 100%;
 height: auto;
}

@media screen and (max-width: 1299px) {
 .img-fit_sp {
  width: 100%;
  max-width: 100%;
  height: auto;
 }
 .img-space_sp {
  width: 80%;
  max-width: 80%;
  height: auto;
 }
 .img-space {
  width: 80%;
  max-width: 80%;
  height: auto;
 }
}

@media screen and (max-width: 375px) {
 .img-space-ssp {
  width: 80%;
  max-width: 80%;
  height: auto;
 }
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
 max-width: 100%;
 height: auto;
}