@charset "UTF-8";


/*slideshow.cssの読み込み
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@import url("slideshow.css");

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #333;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 18px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
/*	background: #faf9f1; */	/*背景色*/
	background: #FFFFFF;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
video,audio {max-width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;		/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #22ac38;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*container（footer以外を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1500px;	/*サイトの最大幅*/
	margin: 0 auto;
	position: relative;
	padding: 0 10%;		/*上下、左右へのボックス内の余白*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	width: 100%;
	height: 50px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #000000;
}
/*ロゴ画像ブロック*/
header .logo {
	color: #000000;
	font-weight: bold;
	text-align: undefined;
	width: 10%;
	float: left;
	margin-top: 7.5px;
	margin-left: 15px;
	letter-spacing: 4px;
}
header #pc-menu {
	float: right;
	width: 80%;
	text-align: right;
	margin-top: 10px;
}
header #pc-menu ul {
	list-style: none;
	float: right;
}
header #pc-menu ul li {
	float: left;
	color: #000000;
	font-size: 14px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	font-weight: bold;
	transition: all 0.3s linear;
}
header #pc-menu ul li a {
	color: #000000;
	text-decoration: none;
}
header #pc-menu ul li:hover a {
	color: #2C9AB7;
}

/*スマホ用メニューを表示させない*/
#sp-menu {display: none;}
/*３本バーアイコンを表示させない*/
#sp-menu-bar {display: none;}

/*contents
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
/*mainブロック全体の設定*/
#main {
}
/*トップページでのmainコンテンツへの追加設定*/
.home #main {
	margin-top: 10%;	/*上に空けるスペース。スライドショーとのバランスをとって設定して下さい。*/
}
/*mainコンテンツのh2タグ設定*/
#main h2 {
  text-align: center;
	clear: both;
	font-size: 24px;
	margin-bottom: 20px;
	padding: 20px 20px 20px 60px;	/*上、右、下、左への見出し内の余白*/
	color: #fff;		/*文字色*/
}
#main h2 img {
  width: 60px;
  height: 60px;
}
/*mainコンテンツのh3タグ設定*/
#main h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 4px 20px;		/*上下、左右への見出し内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: #fff;	/*背景色*/
}
#main h3::first-letter {
	border-left: 3px solid #22ac38;
	padding-left: 15px;
}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 0px 20px 20px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;

}
#main section + section {
	margin-top: 30px;
}

/*subコンテンツ
---------------------------------------------------------------------------*/
#sub {
  margin: 0 auto;
  background-color: #DFF3FF;
  height: 300px;
  box-shadow:
    inset 0 0 30px #fff /* 背景色と同じ色 */,
    inset 0 0 30px #fff,
    inset 0 0 30px #fff,
    inset 0 0 30px #fff;
}
#sub h2 {
  text-align: center;
	font-size: 30px;
	padding: 40px 20px 20px 20px;	/*上、右、下、左への見出し内の余白*/
	font-weight: bold;
}
#sub p {
  text-align: center;
	font-size: 18px;
	padding: 10px 20px 10px 20px;	/*上、左右、下への余白*/
}
#sub p + p {
	margin-top: -5px;
}
#sub .tagline {
	text-align: center;
	color: #003366;
	margin-top: 4px;
	font-weight: bold;
	letter-spacing: 1px;
}
#sub .bordering {
  text-shadow    : 
       2px  2px 1px #C2DCFF,
      -2px  2px 1px #C2DCFF,
       2px -2px 1px #C2DCFF,
      -2px -2px 1px #C2DCFF,
       2px  0px 1px #C2DCFF,
       0px  2px 1px #C2DCFF,
      -2px  0px 1px #C2DCFF,
       0px -2px 1px #C2DCFF;        /* 文字の影 */
}
.arrow-first {
  position: relative;
  margin-top: 500px;
  height: 200px;
  background: url("images/arrow.svg") no-repeat center;
}
@media screen and (max-width:2000px) {
  .arrow-first {
    margin-top: 400px;
  }
}
@media screen and (max-width:1875px) {
  .arrow-first {
    margin-top: 350px;
  }
}
@media screen and (max-width:1750px) {
  .arrow-first {
    margin-top: 300px;
  }
}
@media screen and (max-width:1625px) {
  .arrow-first {
    margin-top: 250px;
  }
}
@media screen and (max-width:1500px) {
  .arrow-first {
    margin-top: 200px;
  }
}
@media screen and (max-width:1375px) {
  .arrow-first {
    margin-top: 150px;
  }
}
@media screen and (max-width:1250px) {
  .arrow-first {
    margin-top: 100px;
  }
}
@media screen and (max-width:1125px) {
  .arrow-first {
    margin-top: 50px;
  }
}
.arrow-first::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  height: 80%;
  border-left: solid 1px #7A7A7A;
}
.arrow-next {
  position: relative;
  height: 200px;
  background: url("images/arrow.svg") no-repeat center;
}
.arrow-next::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  height: 80%;
  border-left: solid 1px #000000;
}

/*middleコンテンツ
---------------------------------------------------------------------------*/
/*middleブロック全体の設定*/
#middle {
  vertical-align: top;
  text-align: center;
}
/*トップページでのmiddleコンテンツへの追加設定*/
.home #middle {
}
/*middleコンテンツのh2タグ設定*/
#middle h2 {
  text-align: center;
	clear: both;
	font-size: 24px;
	margin-bottom: 20px;
	padding: 20px 20px 20px 60px;	/*上、右、下、左への見出し内の余白*/
	color: #fff;		/*文字色*/
}
/*middleコンテンツのh3タグ設定*/
#middle h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 4px 20px;		/*上下、左右への見出し内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: #fff;	/*背景色*/
}
#middle h3::first-letter {
	border-left: 3px solid #22ac38;
	padding-left: 15px;
}
/*middleコンテンツの段落タグ設定*/
#middle p {
	padding: 0px 20px 20px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#middle p + p {
	margin-top: -5px;
}
#middle h2 + p,
#middle h3 + p {
	margin-top: -10px;

}
#middle section + section {
	margin-top: 30px;
}
#middle section {
	display: inline-block;
  width: 24%;
  text-align: center;
}
#middle section .image {
  width: 100%;
  height: 210px;
}
#middle #section-half {
  display: none;
}

/*その他コンテンツ
---------------------------------------------------------------------------*/
.title {
	letter-spacing: 4px;
}
.subtitle {
	letter-spacing: 4px;
}
.tagline {
	text-align: center;
	color: #FFFFFF;
	margin-top: 4px;
	font-weight: lighter;
	letter-spacing: 1px;
}
.bordering {
  text-shadow    : 
       2px  2px 1px #003366,
      -2px  2px 1px #003366,
       2px -2px 1px #003366,
      -2px -2px 1px #003366,
       2px  0px 1px #003366,
       0px  2px 1px #003366,
      -2px  0px 1px #003366,
       0px -2px 1px #003366;        /* 文字の影 */
}
.headline {
  font-size: 30px;
  font-weight: bold;
}
.breadcrumbs {
	width: 50%;
	margin-top: 10px;
	margin-right: 25px;
}
.breadcrumbs ul {
	list-style: none;
}
.breadcrumbs ul li {
	float: left;
	color: #000000;
	font-size: 14px;
	text-align: left;
	letter-spacing: 2px;
	font-weight: bold;
	transition: all 0.3s linear;
}
.breadcrumbs li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.5em;
  color: #555;
}
.breadcrumbs li:last-child:after {
  content: '';
}
.breadcrumbs ul li a {
	color: #000000;
	text-decoration: none;
}
.breadcrumbs ul li:hover a {
	color: #2C9AB7;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	padding-top: 40px;
	text-align: center;
	font-size: 85%;
  height: 300px;
}
footer .pr {display: block;font-size: 80%;}
footer main {
  position: relative;
  height: 100%;
}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
  position: absolute;
  bottom: 0;
	padding: 10px;
  width: 97%;
  height: 50px;
  border-top: solid 1px #eae9e9;
}
#footermenu ul {
	display: inline-block;	/*横並びにさせる*/
	padding: 2px 10px;	/*上下、左右への余白*/
  text-align: center;
}
/*メニュー１個あたり*/
#footermenu ul li {
	display: inline-block;	/*横並びにさせる*/
	padding: 2px 10px;	/*上下、左右への余白*/
}
#footermenu ul li #inquiry-comment01 {
	display: inline-block;	/*横並びにさせる*/
}
#footermenu ul li #inquiry-comment02 {
	display: inline-block;	/*横並びにさせる*/
}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	background: #333;	/*背景色*/
	color: #fff;		/*文字色*/
  width: 100%;
}
#copyright a {
	text-decoration: none;
	color: #fff;		/*文字色*/
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
#page_top {
  width: 100px;
  height: 40px;
  position: fixed;
  right: 0;
  bottom: 80px;
  background: #007ab5;
  opacity: 0.6;
}
#page_top a {
  position: relative;
  display: block;
  width: 100px;
  height: 40px;
  text-decoration: none;
}
#page_top a::after {
  content: '↑ PAGE TOP';
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 10px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #eee;border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.mb10 {margin-bottom: 10px;}
.mb30 {margin-bottom: 30px;}
.clear {clear: both;}
.color1, .color1 a {color: #22ac38;}
.bgcolor1 {background: #f2f2f2 !important;}
.bgcolor2 {background: #dbebf7 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.w40p {width: 40%;}
.w20p {width: 20%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fr {float: right;margin-left: 2%;margin-bottom: 20px;}
.fl {float: left;margin-right: 2%;margin-bottom: 20px;}
.big1 {font-size: 24px;letter-spacing: 0.2em;}
#sub .big1 {font-size: 20px;letter-spacing: normal;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}
.dn {display: none;}
.mail {
	font-size: 20px;
	position: relative;
	width: 0;
	height: 0;
	border-right: 0.8em solid transparent;
	border-left: 0.8em solid transparent;
	border-top: 0.6em solid #39a9d6;
	border-radius: 0.1em;
}
.mail::before {
	position: absolute;
	content: '';
	top: -0.5em;
	left: -0.8em;
	width: 0;
	height: 0;
	border-top: 0.6em solid transparent;
	border-bottom: 0.5em solid #39a9d6;
	border-left: 0.8em solid #39a9d6;
	border-right: 0.8em solid #39a9d6;
	border-radius: 0 0 0.1em 0.1em;
}

/*画面幅1100px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1100px) {

  /*container（footer以外を囲むブロック）
  ---------------------------------------------------------------------------*/
  #container {
    padding: 0 3%;		/*上下、左右へのボックス内の余白*/
  }

  /*mainコンテンツ
  ---------------------------------------------------------------------------*/
  /*トップページでのmainコンテンツへの追加設定*/
  .home #main {
    margin-top: 10%;	/*上に空けるスペース。スライドショーとのバランスをとって設定して下さい。*/
  }

  /*トップページでのmiddleコンテンツへの追加設定*/
  .home #middle {
  }
  #middle #section-half {
    display: none;
  }
  .arrow-first {
    margin-top: 0;
  }

}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

  /*ヘッダー（ロゴが入った最上段のブロック）
  ---------------------------------------------------------------------------*/
  /*ヘッダーブロック*/
  header {
    left: 3%;	/*画面の左からの配置場所指定*/
    top: 0px;	/*画面の上からの配置場所指定*/
  }

  /*contents
  ---------------------------------------------------------------------------*/
  /*トップページのcontentsブロック*/
  .home #contents {
  }

  /*メインメニュー
  ---------------------------------------------------------------------------*/
  /*header,main,sub
  ---------------------------------------------------------------------------*/
  header, #main, #sub {
    float: none;
    width: auto;
    overflow: hidden;
  }

  /*その他
  ---------------------------------------------------------------------------*/
  body.s-n #sub,body.s-n #side {
    display: none;
  }

  /*トップページでのmiddleコンテンツへの追加設定*/
  .home #middle {
  }

  #middle #section-half {
    display: inline;
  }
  #middle section {
    width: 40%;
  }

  #footermenu ul {
    padding: 2px 2px;	/*上下、左右への余白*/
  }
  /*メニュー１個あたり*/
  #footermenu ul li {
    display: inline-block;	/*横並びにさせる*/
    padding: 2px 2px;	/*上下、左右への余白*/
  }

}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px) {

  /*ロゴ画像ブロック*/
  header .logo {
    width: 60px;	/*ロゴ画像の幅*/
  }

  #pc-menu {display: none;}
  
  /*メインメニュー
  ---------------------------------------------------------------------------*/
  /*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明(0%)から色を100%出すアニメーション指定。*/
  @keyframes menu1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  /*スマホ用メニューブロック*/
  #sp-menu {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
    width: 100%;
    z-index: 10;
    animation-name: menu1;		/*上のkeyframesの名前*/
    animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
    animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
  }
  /*メニュー１個あたりの設定*/
  #sp-menu ul li a {
    display: block;text-decoration: none;
    padding: 15px 10px 15px 20px;	/*上、右、下、左へのメニュー内の余白*/
    border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
    background: rgba(0,0,0,0.8);	/*背景色*/
    font-size: 20px;
    color: #fff;	/*文字色*/
  }
  /*英語表記（飾り文字）*/
  #sp-menu ul li a span {
    display: block;
    font-size: 12px;	/*文字サイズ*/
  }

  #sp-menu-bar {
    position: relative;
    display: block;
  	z-index: 11;
    width: 30px;
    height: 25px;
    margin: 10px 10px 0 auto;
  }
  #sp-menu-bar span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #676767;
    transform: translateY(-50%);
  }
  #sp-menu-bar::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #676767;
  }
  #sp-menu-bar::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 2px;
    background-color: #676767;
  }
  /*アイコン共通設定*/
  #sp-menu-bar.close,
  #sp-menu-bar.open {
    border-radius: 50%;
    background-color: #FFF;
  }
  #sp-menu-bar.open {
    position: relative;
    border: 1px solid rgba(0,0,0,.1);
    cursor: pointer;
  }
  #sp-menu-bar.open::before {
    content: '';
    background-color: transparent;
  }
  #sp-menu-bar.open::after {
    content: '';
    background-color: transparent;
  }
  #sp-menu-bar.open span {
    background-color: transparent;
  }
  #sp-menu-bar.open span::before,
  #sp-menu-bar.open span::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    height: 16%;
    margin: -5% 0 0 -42%;
    background: #676767;
    border: 1.1px solid rgba(0,0,0,.1);
  }
  #sp-menu-bar.open span::before {
    transform: rotate(-45deg);
  }
  #sp-menu-bar.open span::after {
    transform: rotate(45deg);
  }

  /*mainコンテンツ
  ---------------------------------------------------------------------------*/
  /*mainコンテンツのh2タグ設定*/
  #main h2 {
    font-size: 18px;	/*文字サイズ*/
    padding: 10px 20px 10px 60px;	/*上、右、下、左への見出し内の余白*/
  }
  #main h2 img {
    width: 50px;
    height: 50px;
  }
  #main .title font {
    font-size: 25px;
  }
  #main .subtitle font {
    font-size: 20px;
  }

  /*PAGE TOP（↑）設定
  ---------------------------------------------------------------------------*/
  /*ボタンの設定*/
  body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    width: 60px;	/*幅*/
  }

  header nav ul li {
    padding: 0px 0px;
    letter-spacing: 0px;
  }
  header nav ul li a {
    font-size: 12px;
  }

  #footermenu ul li {
    vertical-align: top;
  }
  #footermenu ul li img {
    width: 60px;
  }
  #footermenu ul li .mail {
    margin-top: 12px;
  }
  #footermenu ul li #inquiry-comment01 {
    display: block;	/*横並びにさせる*/
    font-size: 12px;
  }
  #footermenu ul li #inquiry-comment02 {
    display: block;	/*横並びにさせる*/
    font-size: 12px;
  }

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px) {

  /*全体の設定
  ---------------------------------------------------------------------------*/
  body {
    font-size: 12px;
    font-size: 2.93vw;
  }

  /*ヘッダー（ロゴが入った最上段のブロック）
  ---------------------------------------------------------------------------*/
  /*contents
  ---------------------------------------------------------------------------*/
  /*トップページのcontentsブロック*/
  .home #contents {
  }
  /*トップページ以外のcontentsブロック*/
  #contents {
  }

  /*mainコンテンツ
  ---------------------------------------------------------------------------*/
  /*mainコンテンツのh2タグ設定*/
  #main h2 {
    font-size: 16px;
    padding: 10px 20px;	/*上下、左右への見出し内の余白*/
    background-image: none;
  }
  /*mainコンテンツのh3タグ設定*/
  #main h3::first-letter {
    border-left: none;
    padding-left: 0;
  }
  /*mainコンテンツの段落タグ設定*/
  #main p {
    padding: 0px 0px 20px;	/*上、左右、下への余白*/
  }

  #sub h2 {
    font-size: 24px;
  }
  #sub p {
    font-size: 15px;
  	padding: 10px 10px 10px 10px;	/*上、左右、下への余白*/
  }

  #middle {
  }
  #middle section {
    display: block;
    position: relative;
    left: 15%;
    right: 15%;
    width: 70%;
  }
  #middle section .image {
    width: 300px;
  }

  /*その他
  ---------------------------------------------------------------------------*/
  .headline {
    font-size: 20px;
  }
  .pc {display: none;}
  .sh {display: inline;}
  .ws,.wl {width: 94%;}
  .big1 {font-size: 18px;letter-spacing: normal;}

}