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

/***********************************************

reset記述

***********************************************/
/*reset*/
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html {
  color: #000;
  background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
fieldset, img {
  border: 0
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal
}
ol, ul {
  list-style: none
}
caption, th {
  text-align: left
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
q:before, q:after {
  content: ''
}
abbr, acronym {
  border: 0;
  font-variant: normal
}
sup {
  vertical-align: text-top
}
sub {
  vertical-align: text-bottom
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
legend {
  color: #000
}
#yui3-css-stamp.cssreset {
  display: none
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#contents {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.img_full {
  width: 100%;
  height: auto;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.f_l {
  float: left;
}
.f_r {
  float: right;
}
.wrapper {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 3% 0;
}
a {
  text-decoration: none;
}
.m30 {
  margin: 30px 0;
}
.mb3 {
  margin-bottom: 3%;
}
.m-btm15 {
  margin-bottom: 15px;
}
.w80 {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.white {
  color: #fff;
}
body.on {
  overflow: hidden;
}
/***********************************************

aichan記述

***********************************************/
.aichan {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 3%;
  width: 30%;
  height: auto;
  max-width: 160px;
  padding: 0;
  margin: 0;
}
.aichan:hover {
  opacity: 0.8;
}
.aichan img {
  vertical-align: bottom;
}
/***********************************************

header記述

***********************************************/
header .menu, header nav ul span, header nav ul span.sp_logo {
  display: none;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 9999;
}
header h1, header div.himg {
  float: left;
  width: 13%;
  max-width: 175px;
  height: auto;
}
header nav {
  float: right;
  padding: 10px;
}
header nav ul li {
  position: relative;
  float: left;
  padding: 0 20px;
}
header nav ul li a {
  color: #fff;
  font-size: 12px;
  text-shadow:2px 2px 3px #666;
}
header nav ul li::after {
  position: absolute;
  top: 5px;
  right: 0;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #fff;
  transform: rotate(30deg);
}
header nav ul li:last-child::after {
  display: none;
}
/***********************************************

Facebook連携記述

***********************************************/
#facebook {
  width: 100%;
  height: auto;
  margin: 0;
  padding:0;
}
.facebook_wrapper {
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding:2% 0;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
  vertical-align: middle !important;
}
/***********************************************

top_visual(子ページ)記述

***********************************************/
#top_visual {
  text-align: center;
  padding: 10% 0;
  color: #fff;
  overflow: hidden;
}
#top_visual h1 {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  font-weight: bold;
  font-size: 2.6rem;
  margin-bottom: 3%;
}
#top_visual h1::after {
  display: block;
  width: 30%;
  height: 100%;
  position: absolute;
  top: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  background: url(../img/h1_bottom.png)no-repeat;
  background-size: contain;
  background-position: top;
}
#top_visual span {
  font-size: 0.8rem;
}
/***********************************************

a設定記述

***********************************************/
#contents a.link01 {
  display: inline-block;
  letter-spacing: 5px;
  font-weight: bold;
  color: #29ABE2;
  background-color: #fff;
  padding: 10px 30px;
  border-radius: 200px;
  font-size: 0.8rem;
}
/***********************************************

font記述

***********************************************/
body, html {
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
#contents h2 {
  font-size: 2.4rem;
  margin-bottom: 3%;
  font-weight: bold;
}
#contents p {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
  line-height: 1.4rem;
  margin-bottom: 3%;
}
/***********************************************

固定上部アンカー記述

***********************************************/
#page-top {
  position: fixed;
  bottom: 2%;
  right: 2%;
  font-size: 77%;
  z-index: 9999;
}
#page-top a {
  position: relative;
  border: 2px solid #29ABE2;
  color: #fff;
  width: 30px;
  height: 30px;
  text-align: center;
  display: block;
  border-radius: 50%;
}
#page-top a::before, #page-top a::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#page-top a::before {
  top: 4px;
  width: 8px;
  height: 8px;
  border-top: 4px solid #29ABE2;
  border-right: 4px solid #29ABE2;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/***********************************************

ScrollTriger記述

***********************************************/
.invisible {
  transition: opacity 0.5s ease;
  opacity: 0.0;
}
.visible {
  transition: opacity 0.5s ease;
  opacity: 1.0;
}
/***********************************************

パンくず記述

***********************************************/
#contents #pankz {
  width: 100%;
  height: auto;
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
}
#contents #pankz .wrapper {
  padding: 1% 0;
  overflow: hidden;
}
#contents #pankz .wrapper ul li {
  position: relative;
  font-size: 0.8rem;
  color: #29ABE2;
  float: left;
  padding: 0 10px;
}
#contents #pankz .wrapper ul li::before {
  position: absolute;
  top: 50%;
  left: -4px;
  content: "";
  width: 8px;
  height: 1px;
  background-color: #293337;
  margin-right: 10px;
}
#contents #pankz .wrapper ul li:first-child {
  padding: 0 10px 0 0;
}
#contents #pankz .wrapper ul li:first-child::before {
  display: none;
}
#contents #pankz .wrapper ul li a {
  color: #293337;
  font-size: 0.8rem;
}
#contents #pankz .wrapper ul li a:hover {
  text-decoration: underline;
}
/***********************************************

footer記述

***********************************************/
footer {
  display: table;
  width: 100%;
  height: auto;
}
footer .logobox {
  width: 50%;
  height: auto;
  box-sizing: border-box;
  padding: 5% 15%;
  display: table-cell;
  background-color: #293337;
  vertical-align: middle;
}
footer .textbox {
  width: 50%;
  height: auto;
  box-sizing: border-box;
  padding: 5%;
  display: table-cell;
  background-color: #203D53;
  vertical-align: middle;
}
footer .textbox ul {
  margin-bottom: 30px;
}
footer .textbox ul li::before {
  content: "-";
  color: #fff;
  margin-right: 10px;
}
footer .textbox ul li a, footer .textbox p {
  color: #fff !important;
  font-size: 0.8rem !important;
}

@media screen and (max-width: 1050px) {
.wrapper {
  width: 90%;
  padding: 5% 0;
}
}

@media screen and (max-width: 768px) {
header div.himg {
  width: 94px;
  height: auto;
}
#contents #pankz .wrapper ul li, #contents #pankz .wrapper ul li a {
  font-size: 0.6rem;
}
/***********************************************

a設定記述

***********************************************/
#contents a.link01 {
  font-size: 0.6rem;
}
/***********************************************

	font(SP)記述

***********************************************/
#top_visual h1 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
#contents h2 {
  font-size: 1.2rem !important;
  margin: 10px 0 !important;
}
#contents p {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: inherit;
  text-align: left;
}
header nav {
  display: none;
}
header.on nav {
  box-sizing: border-box;
  display: block;
  position: fixed;
  width: 95%;
  height: 95%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  z-index: 1;
  background-color: #293337;
  padding: 0;
}
header.on nav ul {
  box-sizing: border-box;
}
header.on nav ul li {
  box-sizing: border-box;
  float: none;
  width: 100%;
  height: auto;
  padding: 0;
  border-bottom: 1px solid #3B424B;
}
header.on nav ul li a {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  padding: 3% 8% 3% 3%;
  box-sizing: border-box;
  text-shadow: none;
}
header.on nav ul li a::before, header.on nav ul li a::after {
  position: absolute;
  right: 3%;
  bottom: 50%;
  top: 50%;
  margin: auto;
  content: "";
  vertical-align: middle;
}
header.on nav ul li a::before {
  width: 14px;
  height: 14px;
  border-top: 1px solid #fff;
  border-right: 1px solid #eee;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
header.on nav ul span.sp_logo {
  display: block;
  width: 20%;
  height: auto;
  margin: 3% 2% 0 0%;
  padding: 0 3%;
}
header.on nav ul span.sp_logo p {
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 3% 0 0;
}
header.on nav ul li a span {
  display: block;
  font-weight: normal;
  font-size: 0.6rem;
  color: #eee;
}
header.on nav ul li::after {
  display: none;
}
header .menu {
  box-sizing: border-box;
  position: fixed;
  right: 0px;
  top: 0px;
  width: 46px;
  height: 45px;
  padding: 15px 12px;
  display: block;
  z-index: 9999;
  background-color: #F7931E;
}
header .menu a {
  width: 23px;
  height: 15px;
  display: block;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
header .menu a span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #fff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
header .menu a span:nth-child(1) {
  top: 0px;
}
header .menu a span:nth-child(2), header .menu a span:nth-child(3) {
  top: 7px;
}
header .menu a span:nth-child(4) {
  top: 14px;
}
header.on .menu span:nth-child(1) {
  top: 8px;
  width: 0;
  left: 50%;
}
header.on .menu span {
  background: #fff;
}
header.on .menu span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
header.on .menu span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
header.on .menu span:nth-child(4) {
  top: 18px;
  width: 0;
  left: 50%;
}
footer {
  display: block;
}
footer .logobox {
  width: 100%;
  padding: 5% 30%;
  display: block;
}
footer .textbox {
  width: 100%;
  display: block;
}
footer .textbox ul {
  margin-bottom: 30px;
}
}
/* ローディングの背景部分のCSS */
.loader {
  background: #29ABE2;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
/* ローディングのアニメーション部分のCSS (https://projects.lukehaas.me/css-loaders/) */
.loader-animation, .loader-animation:before, .loader-animation:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader-animation {
  height: 10px;
  left: 50%;
  margin: -5px 0 0 -5px;
  position: absolute;
  top: 50%;
  width: 10px;
  color: #ffffff;
  text-indent: -9999em;
  font-size: 10px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader-animation:before, .loader-animation:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader-animation:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader-animation:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
 0%, 80%, 100% {
 box-shadow:0 0;
 height:4em;
}
 40% {
 box-shadow:0 -2em;
 height:5em;
}
}
@keyframes load1 {
 0%, 80%, 100% {
 box-shadow:0 0;
 height:4em;
}
 40% {
 box-shadow:0 -2em;
 height:5em;
}
}
@media screen and (max-width: 480px) {
#top_visual h1::after {
  width: 60%;
}
}