@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);



/* ルート */
:root {
	--main-color: #009b72; /* メインカラー（グリーン） */
	--accent-color: #aacc02; /* ライトグリーン */
	--dark-main-color: #aacc02; /* 本来ダークカラー（下部フッタ背景等に配色） */
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ccc;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}



/* ルートのメディアクエリ */

/*　（小さい画面）　画面幅 ＜ 600px  */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

/* 600px ≦ 画面幅 ＜ 800px  */
@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 15px;
	}
}

/* 800px ≦ 画面幅　（大きい画面）  */
@media (min-width: 800px) {
	:root {
		font-size: 16px;
	}
}
body {font-size: 16px;} /* 他の未指定のものは標準のブラウザ16px */











/* 以下 数字のみ 'NumberFont' を 定義 → bodyにて 'NumberFont'を 明記して 数字のみ別フォントを指定 */

@font-face {
  font-family: 'NumberFont';
  src: local('Arial'); /* 数字用のフォントを指定 */
  unicode-range: U+0030-0039; /* 半角数字の範囲 */
}


/*  ↓ 'NumberFont'を 明記 */
body {
  font: 16px/1.8 'NumberFont', 'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
}




/* 部分的にフォント変更 */
.fontfamily01 {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
}


/* 部分的にフォント変更 */
.fontfamily02 {
  font-family: 'M PLUS 1p', メイリオ, Meiryo, Osaka, Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/* 英字 筆記体 */
.fontfamily03 {
  font-family: 'Pinyon Script', 'Edwardian Script ITC', 'Brush Script MT','Vladimir Script', 'Edwardian Script ITC' ;
}




a:link{
	color:#006;
	text-decoration:none;
}

a:visited{
	color:#006;
	text-decoration:none;
}

a:hover{
	color:#06c;
	text-decoration:none;
}











/* PageTopへ戻るボタン */

#page-top {
  position: fixed;
  bottom: 10px;
  right: 0px;
  font-size: 80%;
  font-style:normal;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
}

#page-top a {
  background-color: rgba(0,0,0,0.4);
  text-decoration: none;
  color: #fff;
  width: 40px;
  line-height: 0px;
  padding: 12px 0px 14px 0px;
  text-align: center;
  display: block;
  border-radius: 6px;
}

#page-top a:hover {
  text-decoration: none;
  background-color: rgba(0,0,0,0.9);
}


/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
    
  #page-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 120%;
    font-style:normal;
    font-weight:normal;
    font-family: 'Cantarell', sans-serif;
  }

  #page-top a {
    background-color: rgba(0,0,0,0.4);
    text-decoration: none;
    color: #fff;
    width: 70px;
    line-height: 0px;
    padding: 16px 0px 16px 0px;
    text-align: center;
    display: block;
    border-radius: 10px;
  }

  #page-top a:hover {
    text-decoration: none;
    background-color: rgba(0,0,0,0.9);
  }

} /* ← 閉じカッコ */












/* button */

.button01 {
	display: inline-block;
	margin-top: 20px;
	padding: 13px 30px 10px 30px;
	border: solid 0px currentColor;
	border-radius: 3px;
	background-color: #007BA7; /* セルリアンブルーに変更 */
	color: #fff;
	color: var(--text-bright-color);
	font-size: 16px;
    font-weight:200;
	text-decoration: none;

	background-image: linear-gradient(
		rgba(255,255,255,0.0),
		rgba(0,0,0,0.4) /* ← 下部の濃さ */
	);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}


.button01:hover	{
	background-color: #009BC7; /* セルリアンブルーの明るいバージョン */
	color: #fff;
	color: var(--text-bright-color);

	background-image: linear-gradient(
		rgba(255,255,255,0.0),
		rgba(0,123,167,0.5)/* ← 下部の濃さ（セルリアンブルーベース） */
	);
}





.button02 {
	display: inline-block;
	margin-top: 20px;
	padding: 13px 30px 10px 30px;
	border: solid 0px currentColor;
	border-radius: 3px;
	background-color: #009b72;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 16px;
    font-weight:200;
	text-decoration: none;

	background-image: linear-gradient(
		rgba(255,255,255,0.0),
		rgba(0,0,0,0.4) /* ← 下部の濃さ */
	);
-webkit-transition: 0.3s; /* 以下 ロールオーバ時 フェード設定 */
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
} /* ← 閉じカッコ */


.button02:hover	{
	background-color: #aacc02;
	color: #fff;
	color: var(--text-bright-color);

	background-image: linear-gradient(
		rgba(255,255,255,0.0),
		rgba(0,0,0,0.5)/* ← 下部の濃さ */
	);
} /* ← 閉じカッコ */



.button03 {
	display: inline-block;
	margin-top: 20px;
	padding: 13px 30px 10px 30px;
	border: solid 0px currentColor;
	border-radius: 5px;
	background-color: #006;
	color: #fff;
	font-size: 1.1rem;
    font-weight:200;
	text-decoration: none;

	background-image: linear-gradient(
		rgba(0,255,255,0.0),
		rgba(0,0,0,0.0) /* ← 下部の濃さ */
	);
-webkit-transition: 0.3s; /* 以下 ロールオーバ時 フェード設定 */
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
} /* ← 閉じカッコ */


.button03:hover	{
	background-color: #36f;
	color: #fff;

	background-image: linear-gradient(
		rgba(255,255,255,0.0),
		rgba(0,0,0,0.3)/* ← 下部の濃さ */
	);
} /* ← 閉じカッコ */







/* button-effects　通常時リンクテキスト色（color）はもとの a:link a:visited優先 */

.button-effects01 {
  display: inline-block;
  text-align: center;
  outline: none;
  
	padding: 18px 30px 12px 30px;
	border: solid 2px currentColor; /* #XXXで固定せず currentColor にすることで hover時のリンク色に border色が対応 */
	border-radius: 3px;
	font-size: 1.1rem;
    font-weight:600;
	text-decoration: none;
  
  position: relative;
  z-index: 2;
  /* background-color: #fff; */
  overflow: hidden;  
}



.button-effects01::before,
.button-effects01::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.button-effects01,
.button-effects01::before,
.button-effects01::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button-effects01:hover {
  color: #fff;
  	border-radius: 5px;
}

.button-effects01::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button-effects01:hover::after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #ff1166; /* hover時 背景色 */
}








/* icon */

.icon01	{
	display: inline-block;
	margin-bottom: 20px;
	font-size: 40px;
	width: 3em;
	line-height: 2em;
	border-radius: 10%;
	text-align: center;
	background-color: #ccc;
	background-color: var(--icon-bk-color);
	color: #fff;
	color: var(--icon-color);
}









/* header TOPページのみ特別斜め仕様（スマホ版のメニュー背景 両端隙間対策用）起点を -10 -10　width106 */

header.top {
    position: absolute;
  top: -10px;/* リセットではなくメニューfixed時に margin-topされないよう */
  left: -10px;/* リセットではなくメニューfixed時に margin-topされないよう */
    z-index: 100;
    width: 106%;
    background-color: rgba(30,255,255,0.3);/* SP版 上部バー 背景 */
  }

.not-overlay header {
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);

}


/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
    
    header.top {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(30,200,255,0.8); /* PC版 上部バー 背景 */
  }


} /* ← 閉じカッコ */





/* header 共通 */

header {
    position: absolute;
  top: 0px;/* リセットではなくメニューfixed時に margin-topされないよう */
  left: 0px;/* リセットではなくメニューfixed時に margin-topされないよう */
    z-index: 100;
    width: 100%;
    background-color: rgba(0,0,0,0.5);/* SP版 上部バー 背景 */
  }

.not-overlay header {
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);

}


/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
    
    header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(0,0,0,0.8);/* PC版 上部バー 背景 */
  }


} /* ← 閉じカッコ */


















/* header1 上部左上 タイトルロゴ部分　※ 表示しない場合はスペース（テキストで掲載可 WEBフォント） */

.header1 {
	display: inline-block;
	line-height: 60px;        /* heightでは文字の位置が× → line-heightで高さ調整！？ */
	padding-left: 20px;
	padding-right: 20px;
  /* 指定せず　background-color:;　*/
	color: #fff;
	color: var(--text-bright-color);
  font-family: 'Hammersmith One', sans-serif;
	font-size: 28px;
	text-decoration: none;
}


.header1 a,.header1 a:visited {
  display: inline-block;
  line-height: 60px;
  padding: 0px 30px;
  /* 指定せず　background-color:;　*/
  color: #fff;
  font-family: 'Russo One', sans-serif;
  font-weight:normal;
  font-style:oblique;
  font-size: 28px;
  text-decoration: none;
}


.header1 a:hover {
  display: inline-block;
  line-height: 60px;
  padding: 0px 30px;
  /* 指定せず　background-color:;　*/
  color: #fff;
  font-family: 'Russo One', sans-serif;
  font-weight:normal;
  font-style:oblique;
  font-size: 28px;
  text-decoration: none;
  color:#fff;
}











/* header2 */

.header2 ul {
  list-style: none;
  text-align:center;
  font-style:normal;
  font-weight:500;
  background-color: rgba(0,0,0,0.9); /* 小さい画面でのみ トグルでスライドインする ul の背景色を指定 */
}

.header2 a {
  display: block;
  padding: 22px;
  color: #fff;
  font-size: 20px;
  font-style:oblique;
  text-decoration: none;
-webkit-transition: 0.35s; /* 以下 ロールオーバ時 フェード設定 */
-moz-transition: 0.35s;
-o-transition: 0.35s;
-ms-transition: 0.35s;
transition: 0.35s;
}

.header2 a:hover {
  color:#fff;
  background-color: rgba(0,99,150,0.9);
}



/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {

  header .container { /* ヘッダーコンテナ　大きい画面  */
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .header2 ul {
    display: flex;
    background-color: rgba(0,0,255,0.0); /* PC版グローバルナビ ボタン部分 背景 */
  }

  .header2 a:hover {
    color:#fff;
    background-color: rgba(0,99,150,0.95); /* PC版グローバルナビ ボタン部分 hover */
  }


} /* ← 閉じカッコ */






/* header3（＝トグル専用）*/


/* メディアクエリ  767pxまで(max-width: 767px) の 小さい画面 */
@media (max-width: 767px) {

  header .container_inner {  /* container_inner の配置 */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 両端配置に！ */
    }

  .header3 { /* header3（＝トグル専用） */
    margin-right: 30px;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 30px;
    opacity: 0.95;
    cursor: auto; /* カーソル ブラウザ上の表示 */
	color: #fff;
  }

  .header3:hover {
    opacity: 0.5;
  }



    .header2 { /*　小さい画面では ★★ header2 ★★ を 非表示 */
      display: none;
    }



} /* ← 閉じカッコ */




/* メディアクエリ 768px以上(min-width: 768px)の大きい画面 */
@media (min-width: 768px) {

  .header3 { /*　大きい画面では ★★ header3（トグル専用） ★★ を 非表示 */
    display: none;
  }


  .header2 { /*　大きい画面では ★★ header2 ★★ の 非表示解除 を最優先！ */
    display: block !important;
  }

} /* ← 閉じカッコ */












/* contents0 TOPページ専用 フェード背景用 */
.contents0 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 500px;
  background-color: #fff;
  background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url(../images/bg/bg_top001.jpg);
  background-position: right center;
  background-size: cover;
  color: #fff;
  color: var(--text-bright-color);
  text-align: center;
  }



/* ▼▼▼ 背景用のspan ▼▼▼  */
/* contents0内に他のspanを配置しないこと */

.contents0 .container span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	
  height: 100vh; /* contents0の高さに合わせる */
  min-height: 600px; /* contents0の高さに合わせる */

  background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
    span.fadeSlider_01 {
      background-image: url(../images/bg/bg_main/bg_mainXX.jpg);
	  animation: fadeSlideImg01 16s ease-out infinite;
      animation-delay: 5s;
    }
    span.fadeSlider_02 {
      opacity: 0;
      background-image: url(../images/bg/bg_main/bg_mainXX.jpg);
      animation: fadeSlideImg02 16s ease-out infinite;
      animation-delay: 5s;
    }
    span.fadeSlider_03 {
      opacity: 0;
      background-image: url(../images/bg/bg_main/bg_mainXX.jpg);
      animation: fadeSlideImg03 16s ease-out infinite;
      animation-delay: 5s;
    }
    span.fadeSlider_04 {
      opacity: 0;
      background-image: url(../images/bg/bg_main/bg_mainXX.jpg);
      animation: fadeSlideImg04 16s ease-out infinite;
      animation-delay: 5s;
    }
    span.fadeSlider_05 {
      opacity: 0;
      background-image: url(../images/bg/bg_main/bg_mainXX.jpg);
      animation: fadeSlideImg05 16s ease-out infinite;
      animation-delay: 5s;
    }


@keyframes fadeSlideImg01 {
    0% { opacity: 1; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeSlideImg02 {
    0% { opacity: 0; }
    20% { opacity: 1; }
    40% { opacity: 0; }
    60% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes fadeSlideImg03 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes fadeSlideImg04 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes fadeSlideImg05 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ▲▲▲ 背景用のspan ここまで ▲▲▲  */

















/* contents1 サブページで使用 */
.contents1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  min-height: 450px;
  background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url(../images/bg/bg_main01.jpg);
  background-position: right center;
  background-size: cover;
  color: #fff;
  color: var(--text-bright-color);
  text-align: center;
  }





/* .lowheightクラス（低いヒーローイメージ）→ temp3.dwt  */
/* サブページ【lowheightヘッダ仕様ページ】では .contents1部分 を クラス.contents1.lowheight_XXX で設定を上書きする仕様 */


/* lowheight_XXX */

.contents1.lowheight_XXXXXXX {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_XXXXXXX.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_XXXXXXX {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_XXXXXXX.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */










.contents1.lowheight_web {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_web.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_web {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_web.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */









.contents1.lowheight_profile {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_profile.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_profile {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_profile.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */






.contents1.lowheight_web-service {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_web-service.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_web-service {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_web-service.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */





.contents1.lowheight_dtp-service {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_dtp-service.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_dtp-service {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_dtp-service.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */





.contents1.lowheight_aboutus {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_aboutus.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_aboutus {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_aboutus.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */






.contents1.lowheight_ourworks {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_ourworks.jpg) ;
  background-position:bottom right;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_ourworks {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_ourworks.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */






.contents1.lowheight_privacy {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_privacy.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_privacy {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_privacy.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */







.contents1.lowheight_recruit {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_recruit.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_recruit {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_recruit.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */








.contents1.lowheight_contact {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_contact.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_contact {
  height: 600px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_contact.jpg) ;
  background-position:top center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */

















/* 途中段落挿入用 イメージ付きヘッダ bg-headerXX */


.contents1.lowheight_bg-image01 {
  height: 200px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/bg/heroimage_beginner.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_bg-image01 {
  height: 200px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_beginner.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */



.contents1.lowheight_bg-image02 {
  height: 200px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(255,0,0,0.5), rgba(255,0,0,0.1)), url(../images/bg/heroimage_beginner.jpg) ;
  background-position:center center;
  color:#fff;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_bg-image02 {
  height: 200px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(255,0,0,0.5), rgba(255,0,0,0.1)), url(../images/bg/heroimage_beginner.jpg) ;
  background-position:center center;
  color:#fff;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */








/* 汎用 カラー背景ヘッダ　background-color と color を HTML側で 都度設定できる 自由枠＝99番 */

.contents1.lowheight_bg-color99 {
  height: 160px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_bg-color99 {
  height: 140px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:15%; /* オリジナル追記 　大きい画面版 は 左10%　*/
}

} /* ← 閉じカッコ */













/* TOPページ専用 .contents0（フェード背景）下での タイトル・キャッチ */

.contents0 h1.title {
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: 'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  font-size: 13vw;
  font-weight:300;
  letter-spacing: 0em;
  margin-left: 0.1em; /* letter-spacing使用時 右にspaceが入ってしまうため、左に同数値のmarginをとり、中央に揃える */
  line-height:130%;
  
  
  text-shadow: 1px 1px 12px rgba(0,155,114,0.8), /* 影 4方向 */
  -1px 1px 12px rgba(0,155,114,0.8), /* 影 4方向 */
  1px -1px 12px rgba(0,155,114,0.8), /* 影 4方向 */
  -1px -1px 12px rgba(0,155,114,0.8);  /* 影 4方向 */

  /* transform:skew(-3deg , -3deg); 傾き */
}


.contents0 p.catch1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
  font-size: 24px;
  font-weight:800;
  letter-spacing:0.1em;
  text-shadow: 1px 1px 12px rgba(170,203,2,0.95), /* 影 4方向 */
  -1px 1px 12px rgba(170,203,2,0.95), /* 影 4方向 */
  1px -1px 12px rgba(170,203,2,0.95), /* 影 4方向 */
  -1px -1px 12px rgba(170,203,2,0.95);  /* 影 4方向 */
  
 /*  transform:skew(-3deg , -3deg); 傾き */
}


/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {

  .contents0 h1.title { /* TOPページ専用 .contents0 */
    font-size: 80px;
  }
  
  .contents0 p.catch1 { /* TOPページ専用 .contents0 */
    font-size: 32px;
  }

} /* ← 閉じカッコ */











/* list関連ページでは ヘッダ部分 ＝ h1.title_sub */
.contents1 h1.title_sub {
  margin-top: 0;
  margin-bottom: 0;
  font-size:12vw;
  font-weight:800;
  font-style:normal;
  text-shadow: 2px 2px 10px #fff, /* 影 4方向 */
  -2px 2px 10px #fff, /* 影 4方向 */
  2px -2px 10px #fff, /* 影 4方向 */
  -2px -2px 10px #fff;  /* 影 4方向 */
}

.contents1 h1.title_sub_s { /* Sサイズ */
  margin-top: 0;
  margin-bottom: 0;
  font-size:8.5vw;
  font-weight:300;
  font-style:italic;
  text-shadow: 2px 2px 10px #fff, /* 影 4方向 */
  -2px 2px 10px #fff, /* 影 4方向 */
  2px -2px 10px #fff, /* 影 4方向 */
  -2px -2px 10px #fff;  /* 影 4方向 */
}

.contents1 p.catch_sub {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
  font-size:4vw;
  text-shadow: 1px 1px 5px #fff, /* 影 4方向 */
  -1px 1px 5px #fff, /* 影 4方向 */
  1px -1px 5px #fff, /* 影 4方向 */
  -1px -1px 5px #fff;  /* 影 4方向 */
}


/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
  
  .contents1 h1.title_sub {  /* list関連ページでは ヘッダ部分 ＝ h1.title_sub 大きい画面版 */
  font-size:58px;
  font-weight:600;
}

  .contents1 h1.title_sub_s {   /* Sサイズ */
  font-size:40px;
  font-weight:300;
}

  .contents1 p.catch_sub {
    font-size: 16px;
  }

} /* ← 閉じカッコ */





/* contents1-list03（リスト項目03ゾーン TOP他各頁で引用可） */　

/* カスタマイズ中（中央文字のみ表示 写真無） */　/* Ocean Tower LPで 使用中 */


.contents1-list03 {
  /* 指定せず　background:; */
}


.contents1-list03 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1200px; /* max-width値の変更で段組数にも変化 */
  margin:0px auto;
}

.contents1-list03 article {
  flex: 1 1 320px;
  display: flex;
}


.contents1-list03 a {
  position:relative;
  flex: 1;
  margin: 8px;
  display: block;
  border: solid 0px #cfcfcf;
  background-color:#003; /* （画像半透明にしたときの）aゾーン全体の bgカラー指定 */
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
    border-radius: 10px;
}

.contents1-list03 a:hover {
  opacity: 0.8;
}

.contents1-list03 .photo-box {
  min-height: 250px;
  background-position: center;
  background-size: cover;
  opacity:0.5; /* photo-box自体を半透明にして 背景色のトーンに */
}

.contents1-list03 .text-box {
  line-height:280%;
  position: absolute; /* 参：「position + margin」で上下左右中央になる仕組み */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 5.5rem;  /* ← テキスト 中段 位置調整にも */
  color:#fff;
}

.contents1-list03 h2 {
  font-size: 27px;
  text-align:center;
  margin: 0px;
  font-style:normal;
}

.contents1-list03 p {
  font-size: 26px;
  text-align:center;
  margin: 0px;
  opacity: 0.9;
}






























/* contents2 */


.contents2 {
  background-color: #fff;
}


.contents2 .container {
	padding-top: 10px;
	padding-bottom: 0px;
}


.contents2 .text-box {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 60px;
	text-align: center;
}







.contents2 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 2.0rem;
}

.contents2 p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.4rem;
	line-height: 1.8;
	opacity: 0.9;
}





.contents2 a {
  flex: 1;
  margin: 10px 0px;
  display: block;
  border: solid 0px #cfcfcf;
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
  
    -webkit-transition: all 0.3s ease; /* ホバー拡大を表現 */
    -moz-transition: all 0.3s ease;  /* ホバー拡大を表現 */ 
}

.contents2 a:hover {
    opacity: 0.8;
	
    -webkit-transform: scale( 1.06 ); /* ホバー拡大を表現 */
    -moz-transform: scale( 1.06 );   /* ホバー拡大を表現 */
	
}




/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
	.contents2 .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.contents2 .text-box	{
		flex: 1;
	}

} /* ← 閉じカッコ */







/* contents2-list-styleXX */

/* リストスタイル01 スタンダード３つ並び */

.contents2-list-style01 {
    align-content: center;
    padding: 20px 0px;
    max-width: 100%;
    position: relative;
    background-color: #f90;  /* 色違い01 */
}

.contents2-list-style01 .container { /* 同内コンテナ */
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}




/* contents2-list-styleXX */

/* リストスタイル02 スタンダード３つ並び */
.contents2-list-style02 {
    align-content: center;
    padding: 30px 0px;
    max-width: 100%;
    position: relative;
    background-color: #9cf; /* 色違い02 */
}

.contents2-list-style02 .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 10px;
}

/* リストスタイル03 スタンダード３つ並び */
.contents2-list-style03 {
    align-content: center;
    padding: 30px 0px;
    max-width: 100%;
    position: relative;
    /* background-color: #fff; 色違い03 */
}

.contents2-list-style03 .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 10px;
}

/* 共通のホバーエフェクト */
.contents2-list-style02 .Contents,
.contents2-list-style03 .Contents {
    transition: all 0.3s ease;
}

.contents2-list-style02 .Item-width:hover .Contents,
.contents2-list-style03 .Item-width:hover .Contents {
    transform: scale(1.06);
    opacity: 0.8;
}











/* 以下共通 */　/* 以下共通 */　/* 以下共通 */

.Adjustment { /* 位置など */
  align-content:center;
  align-items:center;
  flex:none;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  margin:0px -16px 0px -16px;
}



.Item-width {
  width:32.5%; /* 数値で 横並び数を変更 */
  display:inline-block;
  vertical-align:top;
}

@media screen and (max-width: 768px) {
  .Item-width {
    width: 100%;
    }
}



.Contents_img img{
  width: 100%;
}

.Contents {
  margin: 20px 16px;
}

/* ▲ 共通ここまで ▲ */











/* contents3 */

.contents3 {
  background:#efefef;
}


.contents3 .text-box {
  padding: 20px;
}


.contents3 h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight:200;
}

.contents3 p {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.8;
}

.contents3 .photo-box {
  min-height: 500px;
  background-image: url(../images/bg/bg_main/bg_main05.jpg);
  background-position: center;
  background-size: cover;
}




/* メディアクエリ 768px以上の大きい画面 */

@media (min-width: 768px) {
  .contents3 .container {
    display: flex;
		flex-direction: row-reverse; /* row-reverse = 左右逆 */
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .contents3 .photo-box {
    flex: 3;
  }

  .contents3 .text-box {
    flex: 2;
    padding: 50px;
  }

} /* ← 閉じカッコ */











/* CONTENTS4 */


.contents4 {
  /* 指定せず　background:; */
}

.contents4 .container {
  background:#fff;
  padding:1px 0px;
}

.contents4 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#000;
}

.contents4 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#666;
}

.contents4 .photo-box {
  min-height: 400px;
  background-image: url(../images/cut/cut_john01.jpg);
  background-position: center;
  background-size: cover;
}

.contents4 .text-box{
  padding:0px 20px;
}


/* 【PC版】（768px＝iPad超の場合）.contents4  */

@media(min-width:768px){

  .contents4 .container{
    display:flex;
    flex-direction:row-reverse;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:0px 15px;
  }

  .contents4 .photo-box{
    flex:0 0 400px;
    border-radius: 10px;
  }

  .contents4 .text-box{
  flex:1;
  padding:0px 80px;
  }

} /* ← 閉じカッコ */
















/* CONTENTS4-1 */
/* 複数行のテキストを積み重ねる flex-direction: column; または column-reverse */




.contents4-1 {
  /* 指定せず　background:; */
}


.contents4-1 .container {
  background:#fff;
  padding:1px 0px;
}


.contents4-1 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#000;
}

.contents4-1 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#666;
}


.contents4-1 .photo-box {
  min-height: 400px;
  background-image: url(../images/bg/heroimage_beginner.jpg);
  background-position: right bottom;
  background-size: cover;
}

.contents4-1 .text-box{
  padding:20px;
}





/* 【PC版】（768px＝iPad超の場合）.contents4-1  */

@media(min-width:768px){

  .contents4-1 .container{
    display:flex;
    flex-direction:column;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:10px 15px 100px 15px;
  }

  .contents4-1 .photo-box{
    flex:0 0 400px;
    border-radius: 10px;
  }

  .contents4-1 .text-box{
    flex:1;
    padding:50px;
  }

} /* ← 閉じカッコ */





















/* CONTENTS5 */


.contents5 {
  background:#edf;
  color:#333;
}

.contents5 .container {
  padding:0px 0px;
}

.contents5 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#333;
}

.contents5 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#fff;
}

.contents5 .photo-box {
	min-height: 300px;
	background-image: url(../images/bg/heroimage_beginner.jpg);
	background-position: center;
	background-size: cover;
}

.contents5 .text-box{
  padding:20px;
}



/* 【PC版】（768px＝iPad超の場合）.contents5  */

@media(min-width:768px){

  .contents5 .container{
    display:flex;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents5 .photo-box{
    flex:1;
    border-radius: 10px;
  }

  .contents5 .text-box{
  flex:1;
  padding:10px 50px;
  }

} /* ← 閉じカッコ */












/* CONTENTS6 */


.contents6 {
  background:url(../images/bg/heroimage_beginner.jpg);
  background-position:right center;  /* 小さい画面（SPで表示）の時 背景画像の位置に注意 */
  background-size:cover;
}

.contents6 .container {
  padding:0px 0px;
}

.contents6 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#fff;
}

.contents6 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#fff;
}

.contents6 .photo-box {
  min-height: 400px;
  background-image: none;
  background-position: center;
  background-size: cover;
}

.contents6 .text-box{
  padding:20px;
  background-color:rgba(0,0,0,0.3)
}



/* 【PC版】（768px＝iPad超の場合）.contents6  */

@media(min-width:768px){

  .contents6 .container{
    display:flex;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents6 .photo-box{
    flex:1;
  }

  .contents6 .text-box{
    flex:1;
    border-radius: 10px;
    padding:50px;
  }

} /* ← 閉じカッコ */








/* CONTENTS7 */


.contents7 {
  background-image:linear-gradient(90deg, rgba(0,0,0,0.95), rgba(0,0,0,0.5)), url(../images/bg/heroimage_aboutus.jpg) ;
  background-position:left center;  /* 小さい画面（SPで表示）の時 背景画像の位置に注意 */
  background-size:cover;
}

.contents7 .container {
  padding:0px 0px;
}

.contents7 h2 {
  margin-bottom:10px;
  font-size:30px;
  line-height:180%;
  color:#fff;
}

.contents7 p {
  margin-bottom:20px;
  font-size:15px;
  line-height:180%;
  color:#fff;
}

.contents7 .photo-box {
  min-height: 400px;
  background-image: none;
  background-position: center;
  background-size: cover;
}

.contents7 .text-box{
  padding:20px;
  background-color:rgba(0,0,0,0.2)
}



/* 【PC版】（768px＝iPad超の場合）.contents7  */

@media(min-width:768px){

  .contents7 .container{
    display:flex;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .contents7 .photo-box{
    flex:1;
  }

  .contents7 .text-box{
    flex:1;
    border-radius: 10px;
    padding:50px;
  }

} /* ← 閉じカッコ */

































/* 斜め背景 ×２ver.  */

.contents10 {
  position: relative;
  overflow: hidden;
  margin: 0 0;
  padding: 1rem 0;
}

.contents10:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background-image:linear-gradient(rgba(90,60,0,0.3), rgba(0,0,0,0.3)), url(../images/bg/bg_main/bg_main07.jpg) ;
  background-position:center bottom;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

.contents10 div.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 3rem 0rem;
  color: #fff;
  text-align: center;
}


.contents10:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  /* background: #006; 反対側 斜め背景色 */
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -2;
}












.contents11 {
  position: relative;
  overflow: hidden;
  margin: 0% 0;
  padding: 1rem 0;
}

.contents11:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background-image:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url(../images/bg/bg_main/bg_main06.jpg) ;
  background-position:center bottom;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

.contents11 div.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 3rem 0rem;
  color: #fff;
  text-align: center;
}


.contents11:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #eee;  /* 反対側 斜め背景色 */
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -2;
}














/* 下層ページ  etc.. */
.post .container {
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
	padding: 10px 10px;
}

.post h1 {
	color:#111;
	border-left: solid 0.6rem #ddd;
	border-left: solid 0.6rem var(--gray-color);/* 見出し左のライン */
	font-size: 1.5rem;
padding:0.3rem 0.5rem 0px 1.0rem ;/* paadding調整中 */
}

.post p {
	font-size: 1rem;
	line-height: 200%;;
}

.post img {
	max-width: 100%;
}










/* .history */

.history {
  background-color: #0073a2;
  color: #fff;
}


.history .text-box {
  padding: 20px;
}


.history h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight:200;
}




.history .photo-box {
  min-height: 300px;
  background-image: url(../images/cut/cut_office01.jpg);
  background-position: center;
  background-size: cover;
}


.history table {
	border-collapse: collapse;
	border-top: solid 1px #fff;
	font-size: 1.0rem;
	width:100%;

}

.history th {
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: solid 1px #fff;
  padding-right: 1rem;
  text-align: center;
  word-break: keep-all;/* CJK(中日韓)は改行しない */
}


.history td {
	line-height:150%;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	border-bottom: solid 1px #fff;
}





/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
  .history .container {
    display: flex;
		/* flex-direction: row-reverse; row-reverse = 左右逆 */
    max-width: 1200px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .history .photo-box {
    flex: 1;
  }

  .history .text-box {
    flex: 1;
    padding: 50px;
  }
  
  
	
.history th {
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: solid 1px #fff;
  padding-right: 1rem;
  text-align: center;
  word-break: keep-all;/* CJK(中日韓)は改行しない */
  font-size: 1.0rem;

}


.history td {
  line-height:150%;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: solid 1px #fff;
  font-size: 1.1rem;

}

} /* ← 閉じカッコ */












/* お問い合わせページ: 問い合わせ先 */
.contact-box {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 30px 20px 20px 20px;
	border: solid 0px #ddd;
	border: solid 0px var(--gray-color);
	text-align: center;
	background:#f0eeff;
	border-radius: 50%;
}

.contact-box span	{
	display: inline-block;
	margin-bottom: 20px;
	font-size: 4.0rem;
	width: 2em;
	line-height: 2em;
	border-radius: 5%;
	text-align: center;
	background-color: #330040;
	background-color: var(--dark-main-color);
	color: #fff;
	color: var(--icon-color);
}

.contact-box h2 {
	margin-top: 0;
	font-size: 1.2rem;
}

.contact-box a {
	font-size: 1.4rem;
	color: inherit;
	text-decoration: none;
}


/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {
	.contact-wrap {
		display: flex; /* .contact-box部分を display: flex で並べて １：１ で表示 */
	}

	.contact-box {
		flex: 1;
	}

	.contact-box:first-child {
		margin-right: 20px; /* ひとつめの.contact-boxのみ右側20px余白 */
	}
}


/* googlemap */
.location iframe {
  width:100%;
  height: 500px;
  vertical-align: bottom;
}

.location h2 {
  font-style:italic;
  font-size:2rem;
  font-weight:normal;
  font-family: 'Cantarell', sans-serif;
  padding: 10px;
  background-color:#330040;
  color: #fff;
  text-align: center;
}












/* list01ページ　list01（画像テキスト上下）  */

.list01 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:700px; /* max-width値の変更で段組数にも変化　例：max-width 1000 で 300widthのカード（上下型）が３段組　カードの個数（最後行のあまり等）に応じて都度変更も */
  margin-left:auto;
  margin-right:auto;
}

.list01 article {
  flex: 1 1 300px;
  display: flex;
}




.list01 a {
  flex: 1;
  margin: 10px;
  display: block;
  border: solid 0px #f0f0f0;
  color: inherit; /* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
  
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
  
}

.list01 a:hover {
    -webkit-transform: scale( 1.1 );
    -moz-transform: scale( 1.1 );
}

.list01 .photo-box {
  min-height: 200px;
  background-position: center;
  background-size: cover;
}

.list01 .text-box {
  line-height:180%;
  margin: 10px;
}

.list01 h2 {
  font-size: 18px;
}

.list01 p {
  font-size: 14px;
  opacity: 0.9;
}







/* list02ページ　list01（画像テキスト左右）  */

.list02 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1000px; /* max-width値の変更で段組数にも変化 */
  margin-left:auto;
  margin-right:auto;
}

.list02 article {
  flex: 1 1 384px; /* カード１つあたりを 384pxにすることで 384ｘ2＝768pxをブレークポイントに。＆ max-width値 1000pxなら 大きい画面でも最大２段組 */
  display: flex;
}




.list02 a {
  flex: 1;
 margin: 10px;
 display: flex; /* flexにして 子要素 .photo-box：.text-box 比率を指定　２：３ */
 border: solid 1px #cfcfcf;
 color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
	text-decoration: none;
}

.list02 a:hover {
  opacity: 0.8;
}

.list02 .photo-box {
  flex:2; /* 親要素 a のflexに対して 子要素 .photo-box：.text-box 比率を指定　２：３ */
  min-height: 150px; /* オリジナル追記　テキストの量が少ない場合に依存せず 高さを一定にする？ */
  background-position: center;
  background-size: cover;
}

.list02 .text-box {
  line-height:180%;
  flex:3; /* 親要素 a のflexに対して 子要素 .photo-box：.text-box 比率を指定　２：３ */
  margin: 10px;
}

.list02 h2 {
  font-size: 18px;
}

.list02 p {
  font-size: 14px;
  opacity: 0.9;
}









/* list03ページ　list03（画像半透明＆テキスト重ね表示）  */

.list03 .container {
  display: flex;
  flex-wrap: wrap;
  max-width:1200px; /* max-width値の変更で段組数にも変化 */
  margin:0px auto;
}

.list03 article {
  flex: 1 1 250px;
  display: flex;
}




.list03 a {
  position:relative;
  flex: 1;
  margin: 1px;
  display: block;
  border: solid 1px #cfcfcf;
  background-color:#006; /* （画像半透明にしたときの）aゾーン全体の bgカラー指定 */
  color: inherit;/* 通常では継承しない親要素のプロパティを → 強制的に継承　inheritにしないとルートのリンク色に */
  text-decoration: none;
}

.list03 a:hover {
  opacity: 0.8;
}

.list03 .photo-box {
  min-height: 250px;
  background-position: center;
  background-size: cover;
  opacity:0.5; /* photo-box自体を半透明にして 背景色のトーンに */
}

.list03 .text-box {
  line-height:180%;
  position:absolute;
  bottom:0px;
  left:0px;
  margin: 10px;
  color:#fff;
}

.list03 h2 {
  font-size: 18px;
  margin: 0px;

}

.list03 p {
  font-size: 14px;
  margin: 0px;
  opacity: 0.9;
}

































/* footer */

footer {
  color: #fff;
  background-image:linear-gradient(rgba(0,115,162,0.99), rgba(0,115,162,0.99)), url(../images/bg/bg_main/bg_main07.jpg) ;
  background-position:center center;
   /* background-color: #003;フッタ全体背景色 */
}




footer .container {
  padding: 40px 20px;
}

/* footer .container の メディアクエリ で.footer_inner1~3を各コントロール  　768px以上の大きい画面 */
@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.footer_inner1 {
		flex: 0 0 1%;
	}

	.footer_inner2 {
		flex: 0 0 99%;
	}

	.footer_inner3 {
		flex: 0 0 100%;
	}
}












/* footer_inner1 */

.footer_inner1 {
	margin-bottom: 30px;
}


.footer_inner1 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
  letter-spacing: 0.1em;
}

.footer_inner1 p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 20px;
line-height:150%;
}

.footer_inner1 a {
	color: inherit;
	text-decoration: none;
}






/* footer_inner2 */


.footer_inner2 div {
	margin-bottom: 40px;
}

.footer_inner2 h3 {
	margin-top: 0;
	margin-bottom: 10px;
  padding-bottom:6px;
	border-bottom: solid 1px currentColor;
	font-size: 18px;
  font-weight:100;
  font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}

.footer_inner2 ul {
	margin: 0;
	padding: 0;
	list-style: none;

}

.footer_inner2 a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 13px;
	text-decoration: none;
}

.footer_inner2 a:hover {
	background-color: rgba(255,255,100,0.95);
}



/* メディアクエリ 768px以上の大きい画面 */
@media (min-width: 768px) {

	.footer_inner2 {
		display: flex;
	}

	.footer_inner2 div {
		flex: 1;
	}

	.footer_inner2 div:not(:first-child) { /*  ← 初めのdivは除く  */
		margin-left: 40px;
	}


} /* ← 閉じカッコ */







/* footer_inner3 */

.footer_inner3 {
	font-size: 14px;
	text-align: center;
  font-weight:500;
  font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}




/* footer_inner4 */

.footer_inner4 {
	margin-top: 20px;
}

.footer_inner4 ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;

}

.footer_inner4 a {
	display: block;
	margin-right: 20px;
	padding: 2px;
	color: inherit;
	font-size: 30px;
	text-decoration: none;
	border: solid 0px #666;
	width: 2em;
	line-height: 2em;
	border-radius: 10%;
	text-align: center;
}

.footer_inner4 a:hover {
	background-color: rgba(0,0,0,0.8);
}







/* FadeThis.js関連 */

.box-wrap {
	width:1180px;
	margin-left:auto;
	margin-right:auto;
}
.box-wrap div {
	display:inline-block;
	width:360px;
	margin:0 10px 0 0;
	padding:0px;
}
.box-wrap div:last-child {
	margin:0;
}






/* table */



/* simple01　PC　left　SP　center */

.table_simple01 {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.table_simple01 th,
.table_simple01 td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:16px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: left;
}


.table_simple01 th {
  color:#000;
  font-size:18px;
  font-weight:500;
  background-color: #f0f0f0;
  text-align: center;
  width: 36%;
}

.table_simple01 td ul li {
  font-size:14px;
  margin-left:20px;
}




/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_simple01 {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_simple01 th {
    display: block;
    background-color: #eee;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_simple01 td {
    display: block;
    text-align: center;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    padding-bottom:40px;
    width: 100%;
	line-height:200%;
	font-size:small;
	color:#333;
  }
  
.table_simple01 td ul li {
  margin-left:20px;
  font-size:12px;
}
  
  
} /* ← 閉じカッコ*/







/* simple02　PC　left　SP　left */

.table_simple02 {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.table_simple02 th,
.table_simple02 td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:16px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: left;
}


.table_simple02 th {
  color:#000;
  font-size:18px;
  font-weight:500;
  background-color: #f0f0f0;
  text-align: center;
  width: 36%;
}

.table_simple02 td ul li {
  font-size:14px;
  margin-left:20px;
}




/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_simple02 {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_simple02 th {
    display: block;
    background-color: #eee;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_simple02 td {
    display: block;
    text-align: left;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    padding-bottom:40px;
    width: 100%;
	line-height:200%;
	font-size:small;
	color:#333;
  }
  
.table_simple02 td ul li {
  margin-left:20px;
  font-size:12px;
}
  
  
} /* ← 閉じカッコ*/









/* simple03　PC　center　SP　center */

.table_simple03 {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.table_simple03 th,
.table_simple03 td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:1rem;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: center;
}


.table_simple03 th {
  color:#000;
  font-size:1.2rem;
  font-weight:500;
  background-color: #f0f0f0;
  text-align: center;
  width: 36%;
}

.table_simple03 td ul li {
  font-size:1rem;
  margin-left:20px;
}




/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_simple03 {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_simple03 th {
    display: block;
    background-color: #eee;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_simple03 td {
    display: block;
    text-align: center;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    padding-bottom:40px;
    width: 100%;
	line-height:200%;
	font-size:small;
	color:#333;
  }
  
.table_simple03 td ul li {
  margin-left:20px;
  font-size:12px;
}
  
  
} /* ← 閉じカッコ*/









/* spec表　PC　center　SP　center */

.table_spec {
  border-collapse: collapse;
  border: 0px solid #aacc02;
  width: 100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.table_spec th,
.table_spec td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:1rem;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #aacc02;
  text-align: center;
}


.table_spec th {
  color:#fff;
  font-size:1.2rem;
  font-weight:500;
  background-color: #aacc02;
  border-bottom: 1px solid #fff;
  text-align: center;
  width: 36%;
}

.table_spec td ul li {
  font-size:1rem;
  margin-left:20px;
}




/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_spec {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_spec th {
    display: block;
    background-color: #A0E880;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_spec td {
    display: block;
    text-align: center;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    padding-bottom:40px;
    width: 100%;
	line-height:200%;
	font-size:small;
	color:#333;
  }
  
.table_spec td ul li {
  margin-left:20px;
  font-size:12px;
}
  
  
} /* ← 閉じカッコ*/




/* option表　　PC　left　SP　center */

.table_option {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}

.table_option th,
.table_option td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:16px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 30px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: left;
}


.table_option th {
  color:#000;
  font-size:18px;
  font-weight:500;
  padding: 20px 10px;
  background-color: #f0f0f0;
  text-align: center;
  width: 36%;
}

.table_option td ul li {
  font-size:14px;
  margin-left:20px;
}




/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_option {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_option th {
    display: block;
    background-color: #eee;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_option td {
    display: block;
    text-align: center;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    padding-bottom:40px;
    width: 100%;
	line-height:200%;
	font-size:small;
	color:#333;
  }
  
.table_option td ul li {
  margin-left:20px;
  font-size:12px;
}
  
  
} /* ← 閉じカッコ*/










/* corporatehistory表 */

.table_corporatehistory {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.table_corporatehistory th,
.table_corporatehistory td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:1.1rem;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 30px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: left;
}


.table_corporatehistory th {
  color:#000;
  font-size:1.2rem;
  font-weight:300;
  padding: 20px 10px;
  background-color: #f0f0f0;
  text-align: center;
  width: 25%;
}

.table_corporatehistory td ul li {
  font-size:14px;
  margin-left:20px;
}




/* （400px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 400px) {
  .table_corporatehistory {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_corporatehistory th {
    display: block;
    background-color: #eee;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_corporatehistory td {
    display: block;
    text-align: left;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding:1.5rem 1.0rem;
    padding-bottom:2.5rem;
    width: 100%;
	line-height:200%;
	font-size:1.1rem;
	color:#333;
  box-sizing: border-box;
  width: 100%;
  }
  
.table_corporatehistory td ul li {
  margin-left:20px;
  font-size:12px;
}
  
  
} /* ← 閉じカッコ*/








/* business-list　PC　left　SP　left */

.table_business-list {
  border-collapse: collapse;
  /* border: 1px solid #ddd; */
  width: 100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.table_business-list th,
.table_business-list td {
  vertical-align:middle;
  line-height:150%;
  color:#fff;
  font-size:1.2rem;
  /* font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
  font-weight:300;
  padding: 20px 10px;
  border-top: 0px solid #ddd;
  border-left: 0px solid #ddd;
  border-right: 0px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: left;
}


.table_business-list th {
  color:#fff;
  font-size:18px;
  font-weight:500;
  /* background-color: #f0f0f0; */
  text-align: center;
  width: 40%;
}

.table_business-list td ul li {
  font-size:1.1rem;
  margin-left:20px;
  line-height:180%;
}




/* （768px＝小さい画面の場合）縦に並べて表示  */
@media screen and (max-width: 768px) {
  .table_business-list {
    border: 0px solid #ddd;
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    width: 100%;
  }
  
  .table_business-list th {
    display: block;
    background-color: #def;
	color:#003;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    width: 100%;
  }
  
  .table_business-list td {
    display: block;
    text-align: left;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    padding: 12px 0px;
    padding-bottom:40px;
    width: 100%;
	line-height:200%;
	font-size:1.2rem;
	color:#fff;
  }
  
.table_business-list td ul li {
  margin-left:20px;
  font-size:1.0rem;
}
  
  
} /* ← 閉じカッコ*/












/* ------- フォームセットで  （table_form と input＆label等）------- */

.table_form {
  border-spacing: 0;
  border-collapse: collapse;
  width: 95%; /* 【SP版】では 横幅95％ 中央寄せ */
  margin:0px auto;
}


.table_form td{
  border-bottom: 0px solid #ccc;
  color:#333;
  font-size: 1.0rem;
  line-height: 200%;
  padding: 15px 5px;
  vertical-align:middle;
}


/* 【PC版】（768px＝iPad超の場合）form.html  */
@media (min-width: 768px) {

  .table_form {
    border-spacing: 0;
    border-collapse: collapse;
    width: 90%; /* 【PC版】では 横幅90％ 左寄せ */
    margin:20px 60px;
  }
  
} /* ← 閉じカッコ*/





/* PC版SP版兼用 メールフォーム input幅  input[type=text]の高さ・フォントサイズ指定　textareaのフォントサイズ指定  */

input.width100 {
  width: 100%;
  box-sizing: border-box;
}

input[type=text]{
  height:3.5em;/* テキスト入力フォーム 高さ指定 */
  font-size: 16px;/* iOSでは input要素に指定のフォントサイズが「16px」を下回るとカーソルを入れたときズームされる仕様 → 16px以上に設定 */
  /* transform: scale(0.8); transform:scale() で縮小表示して iOS側には16pxと認識させ且つ0.8表示 but！横幅が短くなる問題 */
}

input[type=submit]{
  height:2.5em;/* 高さ指定 */
  font-size: 16px;/* iOSでは この要素に指定のフォントサイズが「16px」を下回るとカーソルを入れたときズームされる仕様 → 16px以上に設定 */
}

input[type=reset]{
  height:2.5em;/* 高さ指定 */
  font-size: 16px;/* iOSでは この要素に指定のフォントサイズが「16px」を下回るとカーソルを入れたときズームされる仕様 → 16px以上に設定 */
}

textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;/* iOSでは この要素に指定のフォントサイズが「16px」を下回るとカーソルを入れたときズームされる仕様 → 16px以上に設定 */
}

/* select option 両方指定しないと メニューは×？  */
select {
  height:2.5em;/* 高さ指定 */
  font-size: 16px;/* iOSでは この要素に指定のフォントサイズが「16px」を下回ると ズームされる仕様 → 16px以上に設定 */
}
option {
  height:2.5em;/* 高さ指定 */
  font-size: 16px;/* iOSでは この要素に指定のフォントサイズが「16px」を下回ると ズームされる仕様 → 16px以上に設定 */
}


/* labelでテキストクリック可能 ＆ input要素の縦位置を揃える */
label{
  display:block;
  position:relative;
  padding-left:1em;
}
label input{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  margin:auto;
}


/* ------- ------- */













/* アコーディオン */

.acMenu dt{
    display:block;
    background:#fcfcfc;
    width:98%;
    line-height:200%;
    text-align:left;
	padding:12px 5px 8px 5px;
    border-bottom:#ccc 1px solid;
    cursor:pointer;
	font-size:1rem;
}

.acMenu dd{
    background:#ffeeff;
    width:98%;
    line-height:200%;
    text-align:left;
	padding:12px 5px 8px 5px;
	margin-bottom:10px;
    border-bottom:#fff 0px solid;
    display:none;
	font-size:1rem;
}



.acMenu02 {
	max-width:680px;
	margin-left:auto;
	margin-right:auto;
}

.acMenu02 dt{
    display:block;
    background:#def;
    width:98%;
    line-height:200%;
    text-align:left;
	padding:12px 5px 8px 5px;
    border-bottom:#ccc 0px solid;
    cursor:pointer;
	font-size:1rem;
	color:#36f;
	
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.acMenu02 dd{
    background:#8bf;
    width:98%;
    line-height:220%;
    text-align:left;
	padding:16px 5px 8px 5px;
	margin-top:8px;
	margin-bottom:10px;
    border-bottom:#fff 0px solid;
    display:none;
	font-size:1rem;
	color:#fff;
	
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}



/* box */

.box_ribbon01{
    display: block;
    position: relative;
    margin: 15px auto;
    padding: 2.0em 1.0em 1.2em 1.0em;
	width:100%;
    max-width: 520px;
    background: #f1f1f1;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
	text-align:center;
}

.box_ribbon01_area {
    position: absolute;
    top: 0;
    right: 0;
    width: 85px;
    height: 85px;
    overflow: hidden;
  }

.box_ribbon01_text {
    display: inline-block;
    position: absolute;
    padding: 10px 0 5px 0;
    left: -20px;
    top: 12px;
    width: 160px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    background: #39c3d4;
    color: #fff;
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px rgb(57, 195, 212);
    border-top: dashed 1px rgba(255, 255, 255, 0.65);
    border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}


/* 角丸box */
.box_radius_gray01 {
  margin: 1em auto;  
  padding: 1.5em 0.5em 1.2em 0.5em;
  width: 94%;
  color: #333;
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  
    font-size:1.2rem;
    line-height:200%;
    max-width:600px;
    text-align:center;
}


.box_radius_gray02 {
  margin: 1em auto;  
  padding: 1.5em 0.5em 1.2em 0.5em;
  width: 94%;
  color: #666;
  background-color: #eee;
  border: 2px solid #aaa;
  border-radius: 8px;
  
    font-size:1.2rem;
    line-height:200%;
    max-width:600px;
    text-align:center;
}







/* head-line */

.head-line_333{	color:#333;
  border-left: solid 0.6rem #ddd;/* 見出し左のライン */
  font-size: 1.2rem;
  padding:0.3rem 0.5rem 0px 1.0rem ;
}


.head-dashed_pink01 {
position: relative;
background: #ffdfef;
box-shadow: 0px 0px 0px 5px #ffdfef;
border: dashed 2px white;
padding: 0.5em 1.0em 0.2em 1.0em;
color: #f39;
}

.head-dashed_pink01:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ffa8d4;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}




.head-dashed_orange01 {
position: relative;
background: #fdb;
box-shadow: 0px 0px 0px 5px #fdb;
border: dashed 2px white;
padding: 0.5em 1.0em 0.2em 1.0em;
color: #f60;
}


.head-dashed_orange01:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #fa3;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}





.head-dashed_green01 {
position: relative;
background: #cfc;
box-shadow: 0px 0px 0px 5px #cfc;
border: dashed 2px white;
padding: 0.5em 1.0em 0.2em 1.0em;
color: #0b0;
}


.head-dashed_green01:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #0b0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}



.head-dashed_purple01 {
position: relative;
background: #ccf;
box-shadow: 0px 0px 0px 5px #ccf;
border: dashed 2px white;
padding: 0.5em 1.0em 0.2em 1.0em;
color: #609;
}


.head-dashed_purple01:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #609;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}




.head-dashed_blue01 {
position: relative;
background: #eaf3ff;
box-shadow: 0px 0px 0px 5px #eaf3ff;
border: dashed 2px white;
padding: 0.5em 1.0em 0.2em 1.0em;
color: #36f;
}


.head-dashed_blue01:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #36f;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}




/* 注意 */
.head-circle_blue01{
color: #505050; 
padding: 0.7em 1.0em 0.4em 1.0em;
display: inline-block; 
line-height: 1.5; 
background: #dbebf8; 
vertical-align: middle; 
border-radius: 25px 0px 0px 25px; 
width:90%; /* 要注意！ 98%などでは iPhone safariなどで 右に隙間あくことあり */
margin-bottom:6px;
}

.head-circle_blue01:before {
content: '●';
color: white;
margin-right: 8px;
}




.head-check_orange01 {
  display: flex;
  align-items: baseline;
  border-bottom: dashed 1px #f60;
  padding:0 10px;
  font-size:1.2rem;
  font-weight: 600;
  color:#333;
}

.head-check_orange01 span {
  margin-right: 1rem;
  font-size:1.3rem;
  color: #f60;
}







.head-square_purple01 {
  color: #333;
  font-size: 1.3rem;
  position: relative;
  padding: 0.5rem 0rem 0.2rem 2.5rem;
  border-bottom: 0.5px solid #96c;
}
.head-square_purple01:before,
.head-square_purple01:after {
  content: "";
  position: absolute;
  margin: auto;
}
.head-square_purple01:before {
  width: 12px;
  height: 12px;
  top: 0;
  left: 14px;
  background: #96c;
  transform: rotate(50deg);
}
.head-square_purple01:after {
  width: 8px;
  height: 8px;
  top: 18px;
  left: 6px;
  background: #c9f;
  transform: rotate(20deg);
}

















/* 見出し */

.head_under_006 {
  color:#066;
  text-align:center;
  margin:0px 5px;
  border-bottom:1px solid #ddd;
  padding-left:1.0rem;
  padding-bottom:12px;
  border-left: solid 0rem #669;
  font-size: 2.0rem;
  font-style:normal;
  font-weight:800;
  font-family: 'Cantarell', sans-serif;
}






/* head-line */

/* 養成講座・体験談 で使用 */

.head-check_pinkred01 {
  display: flex;
  align-items: baseline;
  border-bottom: dashed 1px #69f;
  padding:7px 10px 5px 10px;
  font-size:1.4rem;
  font-weight: 500;
  color:#69f;
}

.head-check_pinkred01 span {
  margin-right: 1rem;
  font-size:1.4rem;
  color: #69f;
}








/* 共有クラス */

svg {
  fill: currentColor;
}

.nowrap { white-space: nowrap; }



.rollover{
	
}

.left { text-align:left; }
.center { text-align:center; }
.right { text-align:right; }




/* list-style-type */

.desimal{
	list-style-type:decimal;
	margin-left:2em;
}

.disc{
	list-style-type:disc;
	margin-left:2em;
}
.circle{
	list-style-type:circle;
	margin-left:2em;
}
.square{
	list-style-type:square;
	margin-left:2em;
}

.list-style-none{
	list-style-type:none;
	margin-left:2em;
}




/* TOPページ TOPICSリスト形状 */

ul.topics {
  padding: 0;
  position: relative;
}

ul.topics li {
  color: #fff;
  font-weight:400;
  border-left: solid 12px #006;
  border-right: solid 12px #006;
  background: #6cf;
  margin-bottom: 12px;
  line-height: 1.5;
  padding: 0.8em 0.5em 0.5em 0.5em;
  list-style-type: none!important;/* リストマーク非表示 */
  
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
 
  transform:skew(-1deg , -1deg); /* 傾き */
  
    -webkit-transition: all 0.2s ease; /* 動き */
    -moz-transition: all 0.2s ease; /* 動き */
}

ul.topics li:hover {
    -webkit-transform: scale( 1.3 );
    -moz-transform: scale( 1.3 );
}


/* TOPページ TOPICS部分のリンク色 */

ul.topics li a:link {
    color: #fff;
}

ul.topics li a:visited {
    color: #fff;
}

ul.topics li a:hover{
    color: #fff;
}








/* border */


.border_666{
	border:solid 1px #666;
}

.border_999{
	border:solid 1px #999;
}

.border_ccc{
	border:solid 1px #ccc;
}



.border_radius10 {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.border_radius20 {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.border_radius30 {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}

.border_radius50 {
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}

.border_radius100 {
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}

.border_radius200 {
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
}

.border_radius250 {
    border-radius: 250px;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
}








.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
 
.clearfix { display: inline-table; }
 
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */







img.fl { float: left; }
img.fr { float: right; }

img.float_left { 
	float: left;
	margin-right:30px;
	margin-bottom:10px;
}

img.float_right { 
	float: right;
	margin-left:30px;
	margin-bottom:10px;
}





img.border_999 {
	border:solid 1px #999;
}

img.border_ccc {
	border:solid 1px #ccc;
}

img.border_ddd {
	border:solid 1px #ddd;
}

img.border_eee {
	border:solid 1px #eee;
}

img.border_fff {
	border:solid 1px #fff;
}





.letter-spacing_005em {letter-spacing: 0.05em;}
.letter-spacing_01em {letter-spacing: 0.1em;}
.letter-spacing_02em {letter-spacing: 0.2em;}
.letter-spacing_03em {letter-spacing: 0.3em;}
.letter-spacing_05em {letter-spacing: 0.5em;}
.letter-spacing_1em {letter-spacing: 1em;}
.letter-spacing_15em {letter-spacing: 1.5em;}
.letter-spacing_2em {letter-spacing: 2em;}
.letter-spacing_25em {letter-spacing: 2.5em;}
.letter-spacing_3em {letter-spacing: 3em;}


.lh120{line-height:120%;}
.lh130{line-height:130%;}
.lh140{line-height:140%;}
.lh150{line-height:150%;}
.lh160{line-height:160%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.lh220{line-height:220%;}
.lh240{line-height:240%;}
.lh260{line-height:260%;}
.lh280{line-height:280%;}
.lh300{line-height:300%;}
.lh360{line-height:360%;}
.lh400{line-height:400%;}
.lh500{line-height:500%;}


.font7 { font-size:7px; }
.font8 { font-size:8px; }
.font9 { font-size:9px; }
.font10 { font-size:10px; }
.font11 { font-size:11px; }
.font12 { font-size:12px; }
.font13 { font-size:13px; }
.font14 { font-size:14px; }
.font15 { font-size:15px; }
.font16 { font-size:16px; }
.font17 { font-size:17px; }
.font18 { font-size:18px; }
.font20 { font-size:20px; }
.font24 { font-size:24px; }
.font28 { font-size:28px; }
.font30 { font-size:30px; }
.font36 { font-size:36px; }
.font48 { font-size:48px; }
.font60 { font-size:60px; }


.font06rem { font-size:0.6rem; }
.font07rem { font-size:0.7rem; }
.font08rem { font-size:0.8rem; }
.font09rem { font-size:0.9rem; }
.font095rem { font-size:0.95rem; }
.font10rem { font-size:1.0rem; }
.font11rem { font-size:1.1rem; }
.font12rem { font-size:1.2rem; }
.font13rem { font-size:1.3rem; }
.font14rem { font-size:1.4rem; }
.font15rem { font-size:1.5rem; }
.font16rem { font-size:1.6rem; }
.font18rem { font-size:1.8rem; }
.font20rem { font-size:2.0rem; }
.font22rem { font-size:2.2rem; }
.font24rem { font-size:2.4rem; }
.font26rem { font-size:2.6rem; }
.font28rem { font-size:2.8rem; }
.font30rem { font-size:3.0rem; }
.font36rem { font-size:3.0rem; }
.font40rem { font-size:4.0rem; }
.font50rem { font-size:5.0rem; }





.font-xx-small { font-size:xx-small; }
.font-x-small { font-size:x-small; }
.font-small { font-size:small; }
.font-smaller { font-size:smaller; }
.font-larger { font-size:larger; }
.font-large { font-size:large; }
.font-x-large { font-size:x-large; }
.font-xx-large { font-size:xx-large; }


.normal { font-weight:normal; }
.bold { font-weight:bold; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }
.underline{ text-decoration:underline; }


.red1{ color: #f00; }
.red2{ color: #b03; }

.orange1{ color: #f60; }
.orange2{ color: #f93; }


.pink1{ color: #f09; }
.pink2{ color: #f3f; }
.pink3{ color: #f6f; }
.pink4{ color: #f9f; }
.pink5{ color: #faf; }
.pink5{ color: #fcf; }
.pink6{ color: #FF87A0; }


.purple1{ color: #90f; }
.purple2{ color: #93f; }
.purple3{ color: #96f; }


.yellow1{ color: #ff0; }


.blue1{ color: #00f; }
.blue2{ color: #36f; }
.blue3{ color: #0ff; }

.navy1{ color: #006; }


.green1{ color: #090; }
.green2{ color: #0c0; }
.green3{ color: #b8d200; }
.green4{ color: #0b8; }
.green5{ color: #00a597; }
.green6{ color: #00665e; }
.green7{ color: #00332f; }


.gray1{ color: #333; }
.gray2{ color: #666; }
.gray3{ color: #999; }
.gray4{ color: #ccc; }

.white1{ color: #fff; }
.black1{ color: #000; }


.pad5{ padding:0px 5px; }
.pad10{ padding:0px 10px; }
.pad15{ padding:0px 15px; }
.pad20{ padding:0px 20px; }
.pad25{ padding:0px 25px; }
.pad30{ padding:0px 30px; }
.pad40{ padding:0px 40px; }
.pad50{ padding:0px 50px; }
.pad60{ padding:0px 60px; }
.pad70{ padding:0px 70px; }
.pad80{ padding:0px 80px; }
.pad90{ padding:0px 90px; }
.pad100{ padding:0px 100px; }
.pad120{ padding:0px 120px; }
.pad150{ padding:0px 150px; }

.margin10 { margin-left:10px; }
.margin20 { margin-left:20px; }
.margin25 { margin-left:25px; }
.margin30 { margin-left:30px; }
.margin40 { margin-left:40px; }
.margin50 { margin-left:50px; }
.margin100 { margin-left:100px; }
.margin200 { margin-left:200px; }
.margin240 { margin-left:240px; }
.margin260 { margin-left:260px; }
.margin300 { margin-left:300px; }


.max-width240 { max-width:240px; margin:0 auto; }
.max-width300 { max-width:300px; margin:0 auto; }
.max-width400 { max-width:400px; margin:0 auto; }
.max-width450 { max-width:450px; margin:0 auto; }
.max-width600 { max-width:600px; margin:0 auto; }
.max-width700 { max-width:700px; margin:0 auto; }
.max-width800 { max-width:800px; margin:0 auto; }
.max-width860 { max-width:860px; margin:0 auto; }
.max-width900 { max-width:900px; margin:0 auto; }
.max-width960 { max-width:960px; margin:0 auto; }
.max-width1000 { max-width:1000px; margin:0 auto; }
.max-width1100 { max-width:1100px; margin:0 auto; }
.max-width1200 { max-width:1200px; margin:0 auto; }





/* 【PC版】（768px＝iPad超の場合）非表示にする  */
@media (min-width: 768px) {
.spNone { display: none;}
}


.openclose { ; } /* トグルボタンの命令用で内容無のクラス */





/* レスポンシブ改行クラス 横幅が768pxより大きな場合は「クラスbr-pcが有効」になり、横幅が768px以下の場合では「クラスbr-spが有効」になる*/

@media screen and (min-width: 768px){	
  .br-pc { display:inline; }
  .br-sp { display:none; }
}
@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-sp { display:inline; }
}



/* ウインドウ幅にピッタリ合わせてリサイズさせる div */
div.resizeimage {
    max-width: 1600px; /* 最大幅 */
    min-width: 240px; /* 最小幅 */
    margin-left: auto;
    margin-right: auto;
}

.resizeimage img { /* ウインドウ幅100％ */
  width: 100%;
}






/* ■■■順並び■■■ 画像とテキスト 大きい画面＝並列表記　→  小さい画面＝縦並び */

/* 大きい画面  */
.contents-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
/* odd＝奇数番目　even＝偶数番目 を リバース ※※※ 交互にする場合 ※※※
.contents-wrap:nth-child(odd) {
  flex-direction: row-reverse;
}
*/

.contents-text {
  width: 60%;
}
.contents-img {
  width: 35%;
}

.contents-text h2 {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.contents-img img {
	display: block;
	width: 100%;
	height: auto;
}



/* 小さい画面（768px以下）縦に並べて表示  */
@media screen and (max-width: 768px){
	.contents-wrap,
	.contents-wrap:nth-child(odd)  { /* PC画面で交互リバースの場合　odd＝奇数番目　even＝偶数番目 で戻す */
		flex-direction: column; /* フレックスコンテナの主軸を 上から下 */
	}

	.contents-text,
	.contents-img {
		width: 100%; /*flex: 1;*/
	}

	.contents-text {
		padding: 0rem;
	}

	.contents-text h2 { /* 小さい画面で h2  */
	text-align: left;
	}
	
} /* ← 閉じカッコ */





/* ■■■ 50:35　Twitter ■■■ 画像とテキスト 大きい画面＝並列表記　→  小さい画面＝縦並び */

/* 大きい画面  */
.contents-wrap_twitter {
  width:900px;
  margin-left:auto;
  margin-right:auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.contents-text_twitter {
  width: 50%;
  padding:0px 50px;
  font-size:1rem
}
.contents-img_twitter {
  width: 35%;
}

.contents-text_twitter h2 {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.contents-img_twitter img {
	display: block;
	width: 100%;
	height: auto;
}



/* 小さい画面（768px以下）縦に並べて表示  */
@media screen and (max-width: 768px){
	.contents-wrap_twitter,
	.contents-wrap_twitter:nth-child(odd)  { /* PC画面で交互リバースの場合　odd＝奇数番目　even＝偶数番目 で戻す */
	width:100%;
		flex-direction: column; /* フレックスコンテナの主軸を 上から下 */
	}

	.contents-text_twitter,
	.contents-img_twitter {
		width: 100%; /*flex: 1;*/
	}

	.contents-text_twitter {
		padding: 0rem;
	}

	.contents-text_twitter h2 { /* 小さい画面で h2  */
	text-align: left;
	}
	
} /* ← 閉じカッコ */











/* ■■■リバース■■■ 画像とテキスト 大きい画面＝並列表記　→  小さい画面＝縦並び */

/* 大きい画面  */
.contents-wrap_row-reverse {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-direction: row-reverse;
  
}

.contents-text_row-reverse {
  width: 60%;
}
.contents-img_row-reverse {
  width: 35%;
}

.contents-text_row-reverse h2 {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.contents-img_row-reverse img {
	display: block;
	width: 100%;
	height: auto;
}



/* 小さい画面（768px以下）縦に並べて表示  */
@media screen and (max-width: 768px){
	.contents-wrap_row-reverse,
	.contents-wrap_row-reverse:nth-child(odd)  { /* PC画面で交互リバースの場合　odd＝奇数番目　even＝偶数番目 で戻す */
		flex-direction: column; /* フレックスコンテナの主軸を 上から下 */
	}

	.contents-text_row-reverse,
	.contents-img_row-reverse {
		width: 100%; /*flex: 1;*/
	}

	.contents-text_row-reverse {
		padding: 0rem;
	}

	.contents-text_row-reverse h2 { /* 小さい画面で h2  */
	text-align: left;
	}
	
} /* ← 閉じカッコ */







/*  PC/SP 表示・非表示ブロック  */
.pc_area{
  display:block;
}
.sp_area{
  display:none;
}

/*-- 768px以下では逆  --*/
@media screen and (max-width: 768px){
.pc_area{
    display:none;
  }
.sp_area{
    display:block;
  }

} /* ← 閉じカッコ */





/*  PC = center / SP = left  */
.pc-center_sp-left{
	text-align:center;
}

/*-- 768px以下では left  --*/
@media screen and (max-width: 768px){
.pc-center_sp-left{
	text-align:left;
  }

} /* ← 閉じカッコ */






/*  PC = left / SP = center  */
.pc-left_sp-center{
	text-align:left;
}

/*-- 768px以下では center  --*/
@media screen and (max-width: 768px){
.pc-left_sp-center{
	text-align:center;
  }

} /* ← 閉じカッコ */






/*  PC = right / SP = left  */
.pc-right_sp-left{
	text-align:right;
}

/*-- 768px以下では center  --*/
@media screen and (max-width: 768px){
.pc-right_sp-left{
	text-align:left;
  }

} /* ← 閉じカッコ */





/* hover拡大 ！！不具合注意！！ */
.img-hover01 { /* div class="img-hover01"などで 段落をラップ */
	overflow: hidden;	/* 決められた大きさから 拡大した分 はみ出た部分を隠す */
	/*  width: 320px; */	/*画像の幅*/
	/*  height: 180px; */	/*画像の高さ*/
}

.img-hover01 img {
	/* display: block;  */     /* 各地で中央寄せなどに影響が出るため一時無効化 */
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.img-hover01 img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}










/* スクロール時 アニメーション CSS ＋ Script */
.animation01 {
visibility:hidden;/* 非表示にする */
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}







/* 読み込み時 アニメーション CSSのみ */


/* 右から左 righttoleft　※ 読み込み時（ファースト画面）のみ有効 */
@keyframes righttoleft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(50px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 適用箇所 */
.righttoleft {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: righttoleft;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し */
}




/* 上から下 toptobottom ※ 読み込み時（ファースト画面）のみ有効 */
@keyframes toptobottom {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* Y軸方向に-50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.toptobottom {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: toptobottom;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し */
}



/* 下から上 bottomtotop ※ 読み込み時（ファースト画面）のみ有効 */
@keyframes bottomtotop {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.bottomtotop {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: bottomtotop;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し */
}





/* 【ディレイ01】  */
@keyframes delay01 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.delay01 {
-webkit-animation: delay01 1s ease 0.0s 1 forwards;
  animation: delay01 1s ease 0.0s 1 forwards;
}

.delay01 {
  opacity: 0; /* 最初は透明 */
}




/* 【ディレイ02】  */
@keyframes delay02 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.delay02 {
-webkit-animation: delay02 1s ease 0.4s 1 forwards;
  animation: delay02 1s ease 0.4s 1 forwards;
}

.delay02 {
  opacity: 0; /* 最初は透明 */
}



/* 【ディレイ03】  */
@keyframes delay03 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.delay03 {
-webkit-animation: delay03 1s ease 0.7s 1 forwards;
  animation: delay03 1s ease 0.7s 1 forwards;
}

.delay03 {
  opacity: 0; /* 最初は透明 */
}




/* 【ディレイ04】  */
@keyframes delay04 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.delay04 {
-webkit-animation: delay04 1s ease 1s 1 forwards;
  animation: delay04 1s ease 1s 1 forwards;
}

.delay04 {
  opacity: 0; /* 最初は透明 */
}




/* 【ディレイ05】  */
@keyframes delay05 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 適用箇所 */
.delay05 {
-webkit-animation: delay05 1s ease 1s 1 forwards;
  animation: delay05 1s ease 1.3s 1 forwards;
}

.delay05 {
  opacity: 0; /* 最初は透明 */
}










/* hover-effects */

.hover-effects01 {
	display: inline-block;
	position: relative;
	color: #fff;
 	text-decoration: none;
}

.hover-effects01:before{
	content: "";
	position: absolute;
	 left: 0;
	bottom: -4px;
	width: 100%;
	height: 3px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.4s;
}

.hover-effects01:hover:before {
	transform: scale(1);
}





.hover-effects02 {
	display: inline-block;
	position: relative;
	color: #36f;
 	text-decoration: none;
}

.hover-effects02:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: #333;
	transform: scale(0, 1);
	transition: 0.4s;
}

.hover-effects02:hover:before {
	transform: scale(1);
}





/* スライドループ */

.bg_slide_loop {
  width: 100%;
  height: 240px; /* 高さ変更すると背景画像の横幅も同比で拡大 → 横幅がずれて 秒数によりLOOPの切れ目が× */
  position: relative;
  background: url("../images/bg/bg_slide_loop1518x240_01.png") repeat-x 0 0;
  background-size: auto 100%;
  animation: bg-slider 46s linear infinite; /* 1518px/23s  or  1518px/46s  横幅と秒数により 切れ目なくLOOP */
  margin: 0px 0px;
  padding: 0px;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -1518px 0; } /* 背景画像＝横幅1518px */
}












/* ★★★ 全面背景のときのみ使用 ★★★ */

/* -------------------- 

.fadeSlider {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fadeSlider span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
    span.fadeSlider_01 {
      background-image: url(../images/bg/test/example01.jpg);
      animation: fadeSlideImg01 15s ease-out infinite;
      animation-delay: 3s;
    }
    span.fadeSlider_02 {
      opacity: 0;
      background-image: url(../images/bg/test/example02.jpg);
      animation: fadeSlideImg02 15s ease-out infinite;
      animation-delay: 3s;
    }
    span.fadeSlider_03 {
      opacity: 0;
      background-image: url(../images/bg/test/example03.jpg);
      animation: fadeSlideImg03 15s ease-out infinite;
      animation-delay: 3s;
    }


@keyframes fadeSlideImg01 {
    0% { opacity: 1; }
    33% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeSlideImg02 {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes fadeSlideImg03 {
    0% { opacity: 0; }
    33% { opacity: 0; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

-------------------- */




/* 単独斜めクラス ＝ 段落にクラス指定する場合 */

.transform02 {
  transform:skew(-2deg , -2deg); /* 傾き */
}

.transform03 {
  transform:skew(-3deg , -3deg); /* 傾き */
}


/* 注意  TOPメニューのみテスト運用　★★★ 読み込み後 戻るため → メニューに直接 style指定（斜め02＋マージンTOP20）有★★★ */

/* 斜めメニュー（TOPのみ使用予定） マージンTOP20 フェードイン  ※ 読み込み時（ファースト画面）のみ有効 */
@keyframes menu-transform02 {
  0% {
    opacity: 0;/* 透明 */
  transform:skew(-7deg , -7deg); /* 傾き */
  margin-top:20px;
	
  }
  100% {
    opacity: 1;/* 不透明 */
  transform:skew(-2deg , -2deg); /* 傾き */
  margin-top:20px;
	
  }
}

/* 適用箇所 */
.menu-transform02 {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: menu-transform02;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し */
}







/*マーカーアニメーション CSS ＋ Script必要 */

/* TOPページ他 */
/* スクロール時に発動する Script記述が必要 */
.marker-animation.active{
    background-position: -100% 0.9em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(206,221,255) 50%); /* すべての色を変える */
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: -o-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: linear-gradient(to right, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-repeat: repeat-x;
    background-size: 200% .5em;
    background-position: 0 0.9em;
    transition: all 2.5s ease;
    font-weight: 500;
}


/* 各Profileページ ページ読み込み時に発動する Script記述が必要 */
.marker-animation02.active{
    background-position: -100% 1.5em;
}
 
.marker-animation02 {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: -o-linear-gradient(left, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-image: linear-gradient(to right, transparent 50%, rgb(238,221,255) 50%); /* すべての色を変える */
    background-repeat: repeat-x;
    background-size: 200% .1em;
    background-position: 0 1.5em;
    transition: all 1.5s ease;
    font-weight: 100;
}







/* TOPページ スライドループ（独立・リンク型） */

  .loop_css2 {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100vw;
    overflow: hidden;
  }

  .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .loop_css2 li {
    display: inline-block;
    width: calc(100vw / 2);
    min-width: 150px;
    margin: 0 20px 0 0;
    list-style: none;
    text-align: center;
  }

  .loop_css2 li a {
    display: block;
  }

  .loop_css2 li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .loop_css2 li a:hover {
    opacity: .5;
  }

  .loop_css2 ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_css2 ul + ul {
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
  }

  .loop_css2:hover ul {
    animation-play-state: paused;
  }

  @-webkit-keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @-webkit-keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  @keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

/*-- 768px以下では ズレるため 非表示  --*/
@media screen and (max-width: 768px){
.loop_css2{
    display:none;
  }

} /* ← 閉じカッコ */

















/* テスト　 スマホ用スクロールテーブル　テスト　 */


.scroll-table_price-plan {
  overflow: auto;
  white-space: nowrap;
  border: solid 1px #ddd;

  width: 100%;
  border-collapse: collapse;
  border: solid 1px #ddd;
  
  margin-left:auto;
  margin-right:auto;
  
}

.scroll-table_price-plan tr:hover{
  background: #eee;
}


.scroll-table_price-plan th {
  text-align: left;
}
.scroll-table_price-plan th, .scroll-table_price-plan td {
  padding: 10px;
}
.scroll-table_price-plan thead th {
  border-bottom: solid 2px #ccc;
}














/* PC　複数列レスポンシブテーブル */


.table_multi-row {
  border-collapse: collapse;
  border-top: 1px solid #69f;
  border-left: 0px solid #69f;
  border-right: 0px solid #69f;
  border-bottom: 0px solid #69f;
  width: 100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.table_multi-row th,
.table_multi-row td {
  vertical-align:middle;
  line-height:150%;
  color:#333;
  font-size:16px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:300;
  padding: 20px 0px;
  border-top: 0px solid #69f;
  border-left: 0px solid #69f;
  border-right: 0px solid #69f;
  border-bottom: 1px solid #69f;
  text-align: left;
}


.table_multi-row th {
  color:#000;
  font-size:18px;
  font-weight:500;
  background-color: #f0f0f0;
  text-align: center;
  width: 25%;
}

.table_multi-row td ul li {
  font-size:14px;
  margin-left:20px;
}




.table_multi-row td:first-child {
  background: #006;
  font-weight:800;
  color:#fff;
}




/* SP　複数列レスポンシブテーブル */

@media screen and (max-width: 640px) {
  .table_multi-row {
    width: 100%;
  }
  .table_multi-row .thead {
    display: none;
  }
  .table_multi-row tr {
    width: 100%;
  }
  .table_multi-row td {
    display: block;
    text-align: left;
    width: 100%;
	
	
  }
  .table_multi-row td:first-child {
    background: #006;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .table_multi-row td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}
 




/* FAQ BOX */

.boxQA {
    position: relative;
    margin: 1rem 0.5rem 1rem 1.1rem ;
    padding: 0.5em 0.5em;
    background: #EDF1F5;/*A文章部分背景色*/
    border-radius: 10px;
}

.boxQA .box-title {
    position: relative;
    background: #fff;/*Q文章部分背景色*/
    padding: 10px 5px 10px 40px;
    color: #454545;/*Q文章文字色*/
    border-radius: 10px;
	line-height:200%;
}
.boxQA .box-title:before {
    content: "Q";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;/*Q文字色*/
    background: #066;/*Q背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -1.2em;
    top: 20px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.boxQA .box-title:after {
    content: "A";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;/*A文字色*/
    background: #a3ca07;/*A背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -1.2em;
    bottom: -80px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}

.boxQA p {
    padding: 20px 20px 15px 40px;
    margin: 0;
}

.boxQA ul {
  padding: 0 1em;
  position: relative;
}
.boxQA ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 2.0em;
  list-style-type: none!important;
}

/* アイコン＝ FontAwesome の旧バージョンを利用する方法
.boxQA ul li:before {
  font-family: "FontAwesome";
  content: "\f138"; /*アイコン種類*★/
  position: absolute;
  left : 3.5em;
  color: #f39; /*Aのリストのアイコンの色*★/
}
*/  











/* STEP BOX */

.boxSTEP {
    position: relative;
    margin: 1rem 0.5rem 1rem 1.1rem ;
    padding: 0.5em 0.5em;
    background: #aacc02; /*全体背景色*/
    border-radius: 10px;
}

.boxSTEP .box-title {
    position: relative;
    background: #efd;/*タイトル文章部分背景色*/
    padding: 10px 5px 10px 40px;
    color: #333;/*タイトル文章文字色*/
    border-radius: 10px;
	line-height:200%;

}

.boxSTEP p {
    padding: 20px 20px 15px 2rem;
    margin: 0;
}

.boxSTEP ul {
  padding: 0 1em;
  position: relative;
}
.boxSTEP ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 4.0em;
  list-style-type: none!important;
}
.boxSTEP ul li:before {
  font-family: "FontAwesome";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 3.5em;
  color: #f39; /*Aのリストのアイコンの色*/
}




/* ロゴのウィンドウ幅連動 画像（段落）のリサイズ表示 */

/* .resizeimage は 他で使用中？ 注意！ */

.logo-resizeimage {
   max-width: 1100px; /* 最大幅 */
   min-width: 240px; /* 最小幅 */
}
.logo-resizeimage img { width: 100%; }







/* 蛍光ペン マーカー */

.marker1a-red {
  background-color: #FADBDA;
  padding: 0.2rem 0.1rem 0.1rem 0.05rem ;
}

.marker1a-orange {
  background-color: #FEECD2;
  padding: 0.2rem 0.1rem 0.1rem 0.05rem ;
}

.marker1a-yellow {
  background-color: #FFF9C9;
  padding: 0.2rem 0.1rem 0.1rem 0.05rem ;
}

.marker1a-green {
  background-color: #D5EAD8;
  padding: 0.2rem 0.1rem 0.1rem 0.05rem ;
}

.marker1a-bluegreen {
  background-color: #bfe;
  padding: 0.2rem 0.1rem 0.1rem 0.05rem ;
}

.marker1a-blue {
  background-color: #D3EDFB; padding:0.3rem; margin:0 0.2rem;;
}

.marker1a-purple {
  background-color: #D2CCE6;
  padding: 0.2rem 0.1rem 0.1rem 0.05rem ;
}
.marker1a-pink {
  background-color: #FFE2EF;
  padding: 0.2rem 0.1rem 0.1rem 0.12rem ;
}