@charset "UTF-8";

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

   共通

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

html,body {
  width: 100%;
  font-size: 62.5%; /*ベースを10pxに設定*/
  letter-spacing: 0.04em;
  line-height: 1.5;
  font-family: 'Sawarabi Gothic', YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;  font-weight: normal;
  color: #333;
  background: url(../img/common/bg01.jpg);
  background-size: contain;
  scroll-behavior: smooth;
}

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

h1 {font-size: 1.4rem;}
h2 {font-size: 5rem;}
h3 {font-size: 3.5rem;}
h4 {font-size: 2.4rem;}
h5 {font-size: 2rem;}

p {font-size: 1.4rem; line-height: 2;}
a{font-size: 1.4rem; text-decoration: none; transition:.5s;}
a:hover{color:#457EAC; transition:.3s;}
li, th, td {font-size: 1.4rem;}


/* ボタン */
.btn01 {
  font-family: 'erasdust';
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: .3s;
  font-size: 2.2rem;
}
.btn01::after {
  position: absolute;
  bottom: -7px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #457EAC;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.btn01:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.btn01:hover{
  color: #457EAC;
  transition: .3s;
}


/* マウスドラッグした時の文字色 */
::selection{background: #457EAC; color: #fff;}


/* 改行 */
.br_sp{display: none;}
.br_pc{display: block;}


/* ページ全体の余白など */
#page {
  overflow: hidden;
  width: 100%;
}

.container{
  width: 1180px;
  padding: 0 3rem;
  margin: 0 auto;
}


/* スクロールバー */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #fff;
}

::-webkit-scrollbar-thumb {
	background: #457EAC;
	border-radius: 10px;
	box-shadow: inset 0 0 0 2px #fff;
}


/*flex, clearfix*/
.flex{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: flex-start;
}


/***** ヘッダー *****/
#nav-drawer{
  display: none;
}

header{
  height: 15vh;
  position: fixed;
  top: 0;
  transition: .5s;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.header-nav{
  font-family: 'erasdust', YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.header-nav__list {
  display: inline-block;
  text-align: center;
  transition: .5s;
  line-height: 15vh;
  margin: 0 2rem;
}

.header-nav__list a:hover{
  color: #457EAC;
  transition: .5s;
}

.header-nav__list h1, .header-nav__list a{
  font-size: 1.8rem;
}

header.hide{
    top: -15vh;
}



/***** フッター *****/
footer{
}

small{
  font-size: 1.2rem;
  display: block;
  text-align: center;
  margin: 0 0 5rem;
}


/***** 枠 *****/
html:before,
html:after,
body:before,
body:after {
  content: "";
  position: fixed;
  display: block;
  z-index: 999;
}

/* 上 */
html:before {
  height: 30px;
  width: 97%;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  background: url(../img/common/line01.png);
  background-size: auto;
}

/* 右 */
html:after {
  width: 30px;
  height: 100vh;
  right: 0;
  top: 0;
  background: url(../img/common/line02.png);
  background-size: auto;
}

/* 下 */
body:before {
  height: 30px;
  width: 97%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/common/line01.png);
  background-size: auto;
}

/* 左 */
body:after {
  width: 30px;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(../img/common/line02.png);
  background-size: auto;
}


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

   アニメーション

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

/***** ローディングアニメーション *****/
.loadingWrap{
	width: 100%;
	height: 100%;
	background: #D5F0EB;
	position: fixed;
	top: 0;
	left: 0;
  z-index: 15;
}
.loadingWrap img{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    width: auto;
    height: auto;
}


/***** ページトップに戻るボタン *****/
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 3.5rem;
  bottom: 3.5rem;
  background: url(../img/common/btn_pagetop.png);
  opacity: 0.7;
  border-radius: 50%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

#page_top:hover{
  opacity: 1;
}

#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
}


/***** スクロールアニメーション *****/
.move.fadeInUp {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1500ms;
}

.move.fadeIn {
	opacity: 0;
	transition: all 1500ms;
}

/* 画面内に入った状態 */
.move.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

.move.delay {
	-moz-transition-delay: 200ms;
	-webkit-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
}

@media screen and (min-width:1366px){

.move.fadeInUp:nth-of-type(2) {
	-moz-transition-delay: 200ms;
	-webkit-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
}

.move.fadeInUp:nth-of-type(3) {
	-moz-transition-delay: 400ms;
	-webkit-transition-delay: 400ms;
	-o-transition-delay: 400ms;
	-ms-transition-delay: 400ms;
}

.move.fadeInUp:nth-of-type(4) {
	-moz-transition-delay: 600ms;
	-webkit-transition-delay: 600ms;
	-o-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
}

.move.fadeInUp:nth-of-type(5) {
	-moz-transition-delay: 800ms;
	-webkit-transition-delay: 800ms;
	-o-transition-delay: 800ms;
	-ms-transition-delay: 800ms;
}

.move.fadeInUp:nth-of-type(6) {
	-moz-transition-delay: 1000ms;
	-webkit-transition-delay: 1000ms;
	-o-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
}

}

@media screen and (max-width: 560px) {
  .move.delay {
  	-moz-transition-delay: 0;
  	-webkit-transition-delay: 0;
  	-o-transition-delay: 0;
  	-ms-transition-delay: 0;
  }
}


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

   1600px以上 / デスクトップPC

   ************************************************************************************************ */
@media screen and (min-width: 1600px){

}


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

   1180px

   ************************************************************************************************ */
@media screen and (max-width: 1180px){

/***** 共通 @1180px *****/
.container{
  width: 100%;
  padding: 0 4rem;
  margin: 0 auto;
}

/* 枠 */
html:before {width: 95%;}
body:before {width: 95%;}

}


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

   960px / タブレット

   ************************************************************************************************ */
@media screen and (max-width: 959px){

/***** 共通 @960px *****/
h2 {font-size: 4.5rem;}
h3 {font-size: 3rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.6rem;}

}


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

   560px / スマホ

   ************************************************************************************************ */
@media screen and (max-width: 559px){

/***** 共通 @560px*****/
h1 {font-size: 1.2rem }
h2 {font-size: 3.8rem}
h3 {font-size: }
h4 {font-size: }

.btn01 {font-size: 2rem;}

img{max-width: 100%;}

.container {padding: 0 3rem;}

.br_sp{display: block;}
.br_pc{display: none;}

/* 枠 */
html:before,
html:after,
body:before,
body:after {
  background-size: cover;
  background-repeat: no-repeat;
}

html:before {height: 20px; width: 89%;}
html:after {width: 20px;}
body:before {height: 20px; width: 89%;}
body:after {width: 20px;}


/* ページトップボタン */
#page_top, #page_top a{
  width: 50px;
  height: 50px;
  background-size: contain;
}

#page_top {right: 2.5rem; bottom: 2.5rem;}


/***** ヘッダー @560px*****/
header {padding-top: 3rem;}
.header-nav__list {line-height: 2.5;}
.header-nav__list h1, .header-nav__list a {font-size: 1.6rem;}
header.hide{top: -18vh;}


/***** フッター @560px *****/
small {
  font-size: 1.1rem;
}


}


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

   320px / スマホ

   ************************************************************************************************ */
@media screen and (max-width: 320px){

/***** 共通 @320px *****/
.header-nav__list {margin: 0 1.5rem;}


}