@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);



/* 
このCSSを 無断でダウンロード・複製・転載することはご遠慮ください。
（C） AMUMO98 All rights reserved.
 */
 



/* ルート */
:root {
	--main-color: #cccccc; /* メインカラー（Key Color） */
	--accent-color: #999999; /* アクセントカラー（やや深い） */
	--dark-main-color: #333333; /* 本来ダークカラー（濃い） */
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ccc;
	--gray-color: #ccc;
	--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 */








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


/* 部分的にフォント変更 */

/* メイリオ数字 */
.fontfamily01 {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
}

/* TOPページ 各タイトルフォント */
.fontfamily02 {
  font-family:'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
}

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




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

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

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






/* (スクリーンリーダ使用時のみ表示) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}






/* PageTopへ戻るボタン */

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

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

#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.5);
    text-decoration: none;
    color: #fff;
    width: 70px;
    line-height: 0px;
    padding: 16px 0px 16px 0px;
    text-align: center;
    display: block;
    border-radius: 50px;
  }

  #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: #4E4854;
	/* background-color: var(--dark-main-color); */
	color: #fff;
	color: var(--text-bright-color);
	font-size: 16px;
    font-weight:200;
	text-decoration: none;
	
	transform:skew(-3deg , -3deg); /* 傾き */
	
}


.button01:hover	{
	background-color: #220000;
	color: #fff;
	color: var(--text-bright-color);
	background-image: linear-gradient(
		rgba(255,255,255,0.0),
		rgba(0,0,0,0.8)/* ← 下部の濃さ */
	);
-webkit-transition: 0.3s; /* 以下 ロールオーバ時 フェード設定 */
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
} /* ← 閉じカッコ */





.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: #660000;
	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 .5s;
  transition: all .5s;
}

.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: #333; /* hover時 背景色 */
}







/* 開くボタン */

a.button04 {
	display: inline-block;
	position: relative;
	width: 200px;
	padding: 1.0em 0.5em 0.8em 0.5em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border:1px solid #00a597;
	background: #00a597;
	overflow: hidden;
	z-index: 1 !important;
	
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	
	line-height:200%;
	font-size:1.2rem;
	
}

a.button04:after {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
	
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	
}

a.button04:hover {
	color: #00a597;
}

a.button04:hover:after {
	height: 250%;
	opacity: 1;
}

a.button04:active:after {
	height: 350%;
	opacity: 1;
}







a.button05 {
	display: inline-block;
	position: relative;
	width: 200px;
	padding: 1.0em 0.5em 0.8em 0.5em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border:1px solid #fff;
	/* background: #93d; */
	overflow: hidden;
	z-index: 1 !important;
	
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	
	line-height:200%;
	font-size:1.2rem;
	
}

a.button05:after {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
	
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	
}

a.button05:hover {
	color: #00a597;
}

a.button05:hover:after {
	height: 250%;
	opacity: 1;
}

a.button05:active:after {
	height: 350%;
	opacity: 1;
}












/* 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(50,30,12,0.5); /* 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.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 {
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(50,30,12,0.5);/* PC版 上部バー 背景 */
  }


} /* ← 閉じカッコ */











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

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


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


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











/* header2 */

.header2 ul {
  line-height: 40px;
  padding: 0px;
  list-style: none;
  text-align:center;
  font-style:normal;
  font-weight:500;
  background-image: url(../images/bg/bg_.jpg);
  background-position:center top;
  background-color: rgba(50,30,12,0.8); /* 小さい画面でのみ トグルでスライドインする ul の背景色を指定 */
}

.header2 a {
  display: block;
  padding: 16px; /* トグルするメニュー各項目 の 高さ調整にも  */
  color: #fff;
  font-size: 16px;
  font-style:normal;
  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,0,0,0.7);
}



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

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

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

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


} /* ← 閉じカッコ */






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


/* メディアクエリ  767pxまで(max-width: 2599px) の 小さい画面 */
@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: 28vh;
  min-height: 580px;
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/bg/bg_main/bg_main007.jpg);
  background-position: center 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: right top;
    background-repeat: no-repeat;
    background-size: cover;
}
    span.fadeSlider_01 {
      background-image: url(../images/bg/bg_.jpg);
	  animation: fadeSlideImg01 16s ease-out infinite;
      animation-delay: 3.9s;
    }
    span.fadeSlider_02 {
      opacity: 0;
      background-image: url(../images/bg/bg_.jpg);
      animation: fadeSlideImg02 16s ease-out infinite;
      animation-delay: 3.9s;
    }
    span.fadeSlider_03 {
      opacity: 0;
      background-image: url(../images/bg/bg_.jpg);
      animation: fadeSlideImg03 16s ease-out infinite;
      animation-delay: 3.9s;
    }
    span.fadeSlider_04 {
      opacity: 0;
      background-image: url(../images/bg/bg_.jpg);
      animation: fadeSlideImg04 16s ease-out infinite;
      animation-delay: 3.9s;
    }
    span.fadeSlider_05 {
      opacity: 0;
      background-image: url(../images/bg/bg_.jpg);
      animation: fadeSlideImg05 16s ease-out infinite;
      animation-delay: 3.9s;
    }


@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: 80vh; /* ヘッダ画像 の 高さ指定 */
  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_news {
  height: 500px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url(../images/bg/bg_news.jpg) ;
  background-position:center top;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_news {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.005), rgba(0,0,0,0.005)), url(../images/bg/bg_news.jpg) ;
  background-position:left center;
  color:#000;
}

} /* ← 閉じカッコ */








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


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_f-movie {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url(../images/bg/heroimage_f-movie.jpg) ;
  background-position:center top;
  color:#000;
}

} /* ← 閉じカッコ */






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


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_j-movie {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url(../images/bg/heroimage_j-movie.jpg) ;
  background-position:center top;
  color:#000;
}

} /* ← 閉じカッコ */






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


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_publishing {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url(../images/bg/heroimage_publishing.jpg) ;
  background-position:center center;
  color:#000;
}

} /* ← 閉じカッコ */






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


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_form {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url(../images/bg/heroimage_form.jpg) ;
  background-position:center center;
  color:#000;
}

} /* ← 閉じカッコ */










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


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_company {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_company.jpg) ;
  background-position:left top;
  color:#000;
}

} /* ← 閉じカッコ */








.contents1.lowheight_rensai {
  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_rensai.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_rensai {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_rensai.jpg) ;
  background-position:left top;
  color:#000;
}

} /* ← 閉じカッコ */






.contents1.lowheight_fukuri {
  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_fukuri.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_fukuri {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_fukuri.jpg) ;
  background-position:right center;
  color:#000;
  justify-content: flex-end; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 右寄せ 　*//* justify-content: flex-end; フレックスアイテムを末尾に寄せる */
  padding-right:11%; /* オリジナル追記 　大きい画面版 は 右11%　*/
}

} /* ← 閉じカッコ */












.contents1.lowheight_communication {
  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_communication.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: center ; /* オリジナル追記 　小さい画面版 は 　list0Xページ サブタイトル 中央寄せ 　*/
}


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_communication {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_communication.jpg) ;
  background-position:right center;
  color:#000;
}

} /* ← 閉じカッコ */






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


/* 【PC版】（768px＝iPad超の場合）大きい画面版 */
@media (min-width: 768px) {
.contents1.lowheight_sample {
  height: 380px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/heroimage_sample.jpg) ;
  background-position:center center;
  color:#000;
  justify-content: flex-end; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 右寄せ 　*//* justify-content: flex-end; フレックスアイテムを末尾に寄せる */
  padding-right:8%; /* オリジナル追記 　大きい画面版 は 右 ★ ページ毎に調整可能 ★　*/
}

} /* ← 閉じカッコ */












/* 途中段落挿入用 イメージ付きヘッダ 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%; /* オリジナル追記 　大きい画面版 は 左XX%　*/
}

} /* ← 閉じカッコ */



.contents1.lowheight_bg-image02 {
  height: 200px; /* ヘッダ画像 の 高さ指定 */
  min-height: 0;
  background-image:linear-gradient(rgba(0,0,255,0.5), rgba(0,0,255,0.1)), url(../images/bg/heroimage_contact.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(0,0,255,0.5), rgba(0,0,255,0.1)), url(../images/bg/heroimage_contact.jpg) ;
  background-position:top center;
  color:#fff;
  justify-content: flex-start; /* オリジナル追記 　大きい画面版 は 　list0Xページ サブタイトル 左寄せ 　*/
  padding-left:10%; /* オリジナル追記 　大きい画面版 は 左 XX%　*/
}

} /* ← 閉じカッコ */



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


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

} /* ← 閉じカッコ */



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


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

} /* ← 閉じカッコ */



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


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

} /* ← 閉じカッコ */







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


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

} /* ← 閉じカッコ */








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


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

} /* ← 閉じカッコ */








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


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

} /* ← 閉じカッコ */









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


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

} /* ← 閉じカッコ */
















/* 汎用 カラー背景ヘッダ　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%; /* オリジナル追記 　大きい画面版 は 左15%　*/
}

} /* ← 閉じカッコ */













/* 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: 10vw;
  font-weight:300;
  letter-spacing: 0em;
  margin-left: 0.1em; /* letter-spacing使用時 右にspaceが入ってしまうため、左に同数値のmarginをとり、中央に揃える */
  line-height:130%;
  
  
  text-shadow: 1px 1px 12px rgba(60,5,5,0.8), /* 影 4方向 */
  -1px 1px 12px rgba(60,5,5,0.8), /* 影 4方向 */
  1px -1px 12px rgba(60,5,5,0.8), /* 影 4方向 */
  -1px -1px 12px rgba(60,5,5,0.8);  /* 影 4方向 */

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


.contents0 p.catch1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family:'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;

  font-size: 1.5rem;
  font-weight:500;
  letter-spacing:0.05em;
  text-shadow: 1px 1px 12px rgba(60,5,5,0.8), /* 影 4方向 */
  -1px 1px 12px rgba(60,5,5,0.8), /* 影 4方向 */
  1px -1px 12px rgba(60,5,5,0.8), /* 影 4方向 */
  -1px -1px 12px rgba(60,5,5,0.8);  /* 影 4方向 */
  
 /*  transform:skew(-3deg , -3deg); 傾き */
}


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

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

} /* ← 閉じカッコ */











/* list関連ページでは ヘッダ部分 ＝ h1.title_sub */
.contents1 h1.title_sub {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.5rem 0;
  font-size:15vw;
  font-weight:800;
  font-style:italic;
font-family:'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  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_noshadow {
  margin-top: 0;
  margin-bottom: 0;
  font-size:6vw;
  font-weight:500;
  font-style:normal;
  /* text-shadow: 影無 */
  letter-spacing: 0.05em;
  line-height:200%;

}



.contents1 h1.title_sub_s { /* Sサイズ */
  margin-top: 0;
  margin-bottom: 0;
  font-size:5.2vw;
  font-weight:600;
  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:4.0rem;
  font-weight:800;
  font-style:italic;
}

  .contents1 h1.title_sub_noshadow {  /* list関連ページでは ヘッダ部分 ＝ h1.title_sub_noshadow 大きい画面版 */
  font-size:30px;
  font-weight:500;
  letter-spacing: 0.05em;
}

  .contents1 h1.title_sub_s {   /* Sサイズ */
  font-size:1.6rem;
  font-weight:500;
}

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

} /* ← 閉じカッコ */








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


.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自体を半透明にして 背景色のトーンに */
    border-radius: 10px;
}

.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;
}










/* contents1-list04（リスト項目04ゾーン） */　/* Gallery4つ並び仕様 */

/* .text-boxの設定（サムネイルにテキスト重ねて表示）あるが HTML側で<div class="text-box">段落削除中  */


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


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

.contents1-list04 div {
  flex: 1 1 240px;
  display: flex;
}


.contents1-list04 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-list04 a:hover {
  opacity: 0.8;
}

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

.contents1-list04 .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-list04 h2 {
  font-size: 27px;
  text-align:center;
  margin: 0px;
  font-style:normal;
}

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























/* contents2 */


.contents2 {
  /* background-color: #fff; */
}


.contents2 .container {
	padding-top: 6.0rem;
	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: 1.5rem;
  font-family:  Arial,Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
}

.contents2 p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.0rem;
	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 );   /* ホバー拡大を表現 */
	
}




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

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

} /* ← 閉じカッコ */














/* contents2-98 ★ 段落でのホバー拡大を削除 ★ */


.contents2-98 {
  background-color: #fff;
}


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


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







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

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





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




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

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

} /* ← 閉じカッコ */














/* contents2-list-styleXX */

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

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

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




/* リストスタイル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: #efefef; 色違い03 透明 */
}

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



.contents2-list-style03 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;
  
}

.contents2-list-style03 a:hover {
    -webkit-transform: scale( 1.05 );
    -moz-transform: scale( 1.05 );
}





.contents2-list-style04 { /* 背景 画像バージョン */
    align-content: center;
    padding: 20px 0px;
    max-width: 100%;
    position: relative;
    background-color: #999;
  background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.96)), url(../images/bg/heroimage_f-movie.jpg) ;
  background-size:100% auto;
  background-position:left top;
  color:#fff;
}

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





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



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

.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:24.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/cut/cut_mainmenu600_02.png);
  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:1.1rem;
  line-height:240%;
  color:#666;
}

.contents4 .photo-box {
  min-height: 400px;
  background-image: url(../images/cut/cut_mainmenu600_02.png);
  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: 200px;
  }

  .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:#ffffff;
  color:#000;
}

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

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

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

.contents5 .photo-box {
	min-height: 300px;
	background-image: url(../images/cut/cut_mainmenu600_02.png);
	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:1000px;
    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:url(../images/bg/heroimage_beginner.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(10,60,200,0.8), 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;
  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.6), rgba(0,0,0,0.3)), url(../images/bg/bg_radioinfo.jpg) ;
  background-position:center center;
  -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: #ccc;  /* 反対側 斜め背景色 */
  -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: 30px 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: 1.1rem;
	line-height: 200%;;
}

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










/* .history */

.history {
  background-color: #9cf;
  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_mainmenu600_02.png);
  background-position: center;
  background-size: cover;
}


.history table {
	border-collapse: collapse;
	border-top: solid 1px #fff;
	font-size: 1rem;
}

.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: left;
  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: 1000px;
    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: left;
  word-break: keep-all;/* CJK(中日韓)は改行しない */
  font-size: 0.9rem;

}


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

}

} /* ← 閉じカッコ */












/* お問い合わせページ: 問い合わせ先 */
.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:800px; /* 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: #000;
  background-image:linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(../images/bg/bg_footer001.jpg) ;
  background-position:center top;
  background-repeat: no-repeat;
  background-color: #eee;/* フッタ全体背景色 */
}




footer .container {
  padding: 100px 20px 30px 20px;
}

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

	.footer_inner1 {
		flex: 0 0 100%;
	}

	.footer_inner2 {
		flex: 0 0 100%;
	}

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












/* footer_inner1 */

.footer_inner1 {
	text-align:center;
	margin-bottom: 10px;
  font-family:'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
}


.footer_inner1 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.3rem;
  letter-spacing: 0.01em;
    font-weight:500;
	/* font-style:italic; */
}

.footer_inner1 p {
	margin-top: 0rem;
	margin-bottom: 0;
	font-size: 3.5rem;
line-height:150%;
    font-weight:800;
	/* font-style:italic; */
}

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






/* footer_inner2 */


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

.footer_inner2 h3 {
	margin-top: 0;
	margin-bottom: 10px;
  padding-bottom:6px;
	border-bottom: solid 1px currentColor;
	font-size: 1.3rem;
    font-weight:100;
	font-style:italic;
}

.footer_inner2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.3rem;
	font-style:italic;
}

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

.footer_inner2 a:hover {
	background-color: rgba(0,0,0,0.5);
}



/* メディアクエリ 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 {
	margin-top: 30px;
	font-size: 0.8rem;
	text-align: center;
  font-weight:500;
	font-style:italic;
}




/* 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: none;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.table_spec th,
.table_spec td {
  vertical-align: middle;
  line-height: 1.5;
  color: #fff;
  font-size: 1rem;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 300;
  padding: 20px 10px;
  border-bottom: 1px solid #999;
  text-align: center;
}
.table_spec th {
  font-weight: 500;
  background-color: #333;
  border-bottom: 1px solid #fff;
  width: 36%;
}
.table_spec td ul li {
  font-size: 1rem;
  margin-left: 20px;
}
@media screen and (max-width: 400px) {
  .table_spec {
    border: none;
    width: 100%;
  }
  .table_spec th,
  .table_spec td {
    display: block;
    width: 100%;
    border: none;
    padding: 12px 0;
    text-align: center;
  }
  .table_spec th {
    background-color: #333;
  }
  .table_spec td {
    padding-bottom: 40px;
    line-height: 2;
    font-size: small;
    color: #fff;
  }
  .table_spec td ul li {
    margin-left: 20px;
    font-size: 12px;
  }
} /* ← 閉じカッコ*/








/* spec表02　PC　center　SP　center */

.table_spec02 {
  border-collapse: collapse;
  border: none;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.table_spec02 th,
.table_spec02 td {
  vertical-align: middle;
  line-height: 1.5;
  color: #666;
  font-size: 1.1rem;
  letter-spacing: 0.03em; text-indent: 0.03em;
  
  font-family: 'Noto Sans JP', 'Kosugi Maru', 'Noto Sans JP', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  /* アンチエイリアス・スムージング指定 */
  -webkit-font-smoothing: antialiased;   /* Chrome/Safari用 */
  -moz-osx-font-smoothing: grayscale;    /* Firefox(Mac)用 */
  text-rendering: optimizeLegibility;
  /* 応急処置: 文字のふちどりや影で視認性向上 */
  -webkit-text-stroke: 0.45px rgba(0,0,0,0.1);
  
  text-shadow: #fff 0px 1px 1px;
  font-weight: 500;
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.table_spec02 th {
  color: #333;
  font-weight: 500;
  background: #eee;
  border-bottom: 1px solid #ccc;
  width: 36%;
}
.table_spec02 td ul li {
  font-size: 1rem;
  margin-left: 20px;
}
@media screen and (max-width: 400px) {
  .table_spec02 {
    border: none;
    width: 100%;
  }
  .table_spec02 th,
  .table_spec02 td {
    display: block;
    width: 100%;
    border: none;
    padding: 12px 0;
    text-align: center;
  }
  .table_spec02 th {
    background: #eee;
    font-size: 1.3rem;
  }
  .table_spec02 td {
    padding-bottom: 40px;
    line-height: 2;
    font-size: 1.2rem;
  }
  .table_spec02 td ul li {
    margin-left: 20px;
    font-size: 12px;
  }
} /* ← 閉じカッコ*/







/* spec表03　PC　center　SP　center */

.table_spec03 {
  border-collapse: collapse;
  border: none;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.table_spec03 th,
.table_spec03 td {
  vertical-align: middle;
  line-height: 1.5;
  color: #000;
  font-size: 1rem;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 300;
  padding: 20px 10px;
  border-bottom: 1px solid #999;
  text-align: center;
}
.table_spec03 th {
  color: #000;
  font-weight: 700;
  background: #ececec;
  border-bottom: 1px solid #999;
  width: 36%;
}
.table_spec03 td ul li {
  font-size: 1rem;
  margin-left: 20px;
  color: #000;
}
@media screen and (max-width: 400px) {
  .table_spec03 {
    border: none;
    width: 100%;
  }
  .table_spec03 th,
  .table_spec03 td {
    display: block;
    width: 100%;
    border: none;
    padding: 12px 0;
    text-align: center;
    color: #000;
  }
  .table_spec03 th {
    background: #ececec;
  }
  .table_spec03 td {
    padding-bottom: 40px;
    line-height: 2;
    font-size: small;
    color: #000;
  }
  .table_spec03 td ul li {
    margin-left: 20px;
    font-size: 12px;
    color: #000;
  }
} /* ← 閉じカッコ*/










/* ------- フォームセットで  （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;
}






/* dashed BOX (Biography) */

.box_radius_bluegreen01 {
    margin: 1em auto;  
    padding: 0.5em 0.5em 0.5em 0.5em;
    width: 94%;
    color: #565656;
    background: #99eeec;
    box-shadow: 0px 0px 0px 10px #99eeec;
    border: dashed 2px #fff;
    border-radius: 8px;
	
    line-height:200%;
    max-width:600px;
    text-align:center;
	
}


.box_radius_bluegreen01 h3 {
	color: #00665e;
    font-size:1.6rem;
    margin: 0; 
    padding: 0.8em 0.5em 0.5em 0.5em;
	text-align:center;
	font-weight:300;
}

.box_radius_bluegreen01 p {
    font-size:0.9rem;
    margin: 0; 
    padding: 0.1em 0.8em 0.2em 0.8em;
	text-align:left;
}







/* セロテープ風 */


.box-scotchtape_blue{
margin: 2em auto; /* ボックスの余白 */
background-color: #cef; /* ボックス背景色 */
padding:2.5em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
  border-radius: 20px;
  max-width:480px;
}

.box-scotchtape_blue .box-title {
background-color: rgba(0,90,255,.5);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
transform: rotate(-3deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
color: #fff; /*タイトル文字色 */
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -15px; /*上から（-10px）移動*/
left: 30px; /*左から(20px)移動*/
}
/* ニュースレター2024（青系の枠内）のみリンク色変更 */
.box-scotchtape_blue a:link { color:#36f; }
.box-scotchtape_blue a:visited { color:#36f; }
.box-scotchtape_blue a:hover { color:#ccc; }




.box-scotchtape_pink{
margin: 2em auto; /* ボックスの余白 */
background-color: #ffeeef; /* ボックス背景色 */
padding:2.5em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
  border-radius: 20px;
  max-width:480px;
}
.box-scotchtape_pink .box-title {
background-color: rgba(255,5,90,.5);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
transform: rotate(-3deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
color: #fff; /*タイトル文字色 */
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -15px; /*上から（-10px）移動*/
left: 30px; /*左から(20px)移動*/
}



.box-scotchtape_gray{
margin: 2em auto; /* ボックスの余白 */
background-color: #eee; /* ボックス背景色 */
padding:2.5em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
  border-radius: 10px;
  max-width:530px;
}
.box-scotchtape_gray .box-title {
background-color: rgba(90,90,90,.5);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
transform: rotate(-3deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
color: #fff; /*タイトル文字色 */
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -15px; /*上から（-10px）移動*/
left: 30px; /*左から(20px)移動*/
}




/*少しずらしたボックス*/
.box-bg07{
margin: 0.5em auto;
padding:2em 0.8em 2em 2.2em;/*内側の余白*/
background: none;/*元のボックス背景色なし*/
border:3px solid #9cf ;/*線の太さ・種類・色*/
position: relative;/*配置（基準）*/
  border-radius: 10px;
  max-width:738px;
}
.box-bg07:after{
background-color:#def;/*ずらしたボックスの背景色*/
border:none;
content: '';
position: absolute;/*配置（ここを動かす）*/
top: 8px;/*上から7pxずらす*/
left: 8px;/*左から7pxずらす*/
width: 100%;
height: 100%;
z-index: -1;
  border-radius: 10px;
  max-width:800px;

}

















/* 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-line */

.head-check_yellowgreen01 {
  display: flex;
  align-items: baseline;
  border-bottom: dashed 1px #8a0;
  padding:7px 10px 5px 10px;
  font-size:1.3rem;
  font-weight: 500;
  color:#8a0;
}

.head-check_yellowgreen01 span {
  margin-right: 0.7rem;
  font-size:1.6rem;
  color: #8a0;
}




.head-check_blue01 {
  display: flex;
  align-items: baseline;
  border-bottom: dashed 1px #8a0;
  padding:7px 10px 5px 10px;
  font-size:1.3rem;
  font-weight: 500;
  color:#8a0;
}

.head-check_blue01 span {
  margin-right: 0.7rem;
  font-size:1.6rem;
  color: #8a0;
}













/* 注意 */
.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-line */

/* news.html で使用 */



.head-line_blue01 {
  /* display: flex; */
  align-items: baseline;
  border-bottom: solid 1px #9bf;
  padding:14px 10px 8px 12px;
  font-size:1.5rem;
  font-weight: 800;
  color:#8bf;
  line-height:2.2rem;
}
















/* 共有クラス */

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;
}







/* border */


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

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

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

.border_e1e1e1{
	border:solid 1px #e1e1e1;
}

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



.border_radius5 {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.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;
}



img.border_movie {
	border:solid 4px #fff;
}






.letter-spacing_005em {letter-spacing: 0.05em; text-indent: 0.05em;}
.letter-spacing_01em {letter-spacing: 0.1em;; text-indent: 0.1em;}
.letter-spacing_02em {letter-spacing: 0.2em;; text-indent: 0.2em;}
.letter-spacing_03em {letter-spacing: 0.3em;; text-indent: 0.3em;}
.letter-spacing_05em {letter-spacing: 0.5em; text-indent: 0.5em;}
.letter-spacing_075em {letter-spacing: 0.75em; text-indent: 0.75em;}
.letter-spacing_1em {letter-spacing: 1.0em; text-indent: 1.0em;}
.letter-spacing_15em {letter-spacing: 1.5em;; text-indent: 1.5em;}
.letter-spacing_2em {letter-spacing: 2em;; text-indent: 2em;}
.letter-spacing_25em {letter-spacing: 2.5em;; text-indent: 2.5em;}
.letter-spacing_3em {letter-spacing: 3em;; text-indent: 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; }
.font25rem { font-size:2.5rem; }
.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: #69f; }

.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 { ; } /* トグルボタンの命令用で内容無のクラス */





/* レスポンシブ改行クラス 横幅が850pxより大きな場合は「クラスbr-pcが有効」になり、横幅が850px以下の場合では「クラス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 = left / SP = center  */
.pc-right_sp-center{
	text-align:right;
}

/*-- 768px以下では center  --*/
@media screen and (max-width: 768px){
.pc-right_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.7s;	/*変化に掛かる時間*/
}

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






/* スクロール時 アニメーション CSS ＋ Script ← ★ ページのヘッダに記述あり注意 ★  */

/* アニメーション01 上から下 */

.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); }
}




/* アニメーション02 左から右 */

.animation02 {
visibility:hidden;/* 非表示にする */
}

.fadeInLeft {
 -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: fadeInLeft ;
 animation-name: fadeInLeft ;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft  {
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}





/* アニメーション03 下から上 */

.animation03 {
visibility:hidden;/* 非表示にする */
}

.fadeInUp {
 -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: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 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); }
}





/* アニメーション04 右から左 */

.animation04 {
visibility:hidden;/* 非表示にする */
}

.fadeInRight {
 -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: fadeInRight ;
 animation-name: fadeInRight ;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight  {
 0% { opacity: 0; -webkit-transform: translateX(20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(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: translateX(100px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

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

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




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

/* 適用箇所 */
.delay04 {
-webkit-animation: delay04 1s ease 1.2s 1 forwards;
  animation: delay04 1s ease 1.2s 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: #f69;
 	text-decoration: none;
}

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

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










/* スライドイン */
/* ヘッダ等で使用 */

@keyframes slideInRight01 {
  from {
    opacity: 0;
    transform: translateX(600px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInRight01 {
  animation-name: slideInRight01;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  line-height:150%;
}

#keyvisual01 {
  overflow: hidden
}




@keyframes slideInRight02 {
  from {
    opacity: 0;
    transform: translateX(-500px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInRight02 {
  animation-name: slideInRight02;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

#keyvisual02 {
  overflow: hidden
}



@keyframes slideInRight03 {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInRight03 {
  animation-name: slideInRight03;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  line-height:150%;
}

#keyvisual01 {
  overflow: hidden
}















/* スライドループ */

.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); /* 傾き */
}

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

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


/* 注意  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;
  }

} /* ← 閉じカッコ */











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

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

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
















/* News TOPページ */


.news_container {
width: 90%;
max-width:800px;
margin: 50px auto;

}

/*  
.news_title {
color: #00a597;
text-align: right;
font-size: 2.0rem;
font-weight: bold;
font-style:italic;
}
*/

.news_list {
margin: 20px 0;
border-top: 0px dotted #c9e;
border-bottom: 0px dotted #c9e;
font-size:1.2rem;
font-weight:700;
color:#666;
}
.news_list li {
padding: 1.5rem 1rem;
border-bottom: 1px solid #ccc;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.date {
font-size: 16px;
margin-left: 1.0rem;
margin-right: 1.0rem;
}
.category {
display: inline-block;
color: #000;
width: 6rem;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #ccc;
border-radius: 6px;
}
.news_text a {
color: #666;
}
.news_btn {
text-align: center;
margin-top: 50px;
}
.news_btn a {
color: #000;
}
.btn {
color: #fff;
padding: 20px 30px 15px 30px;
background: #fff;
border: 2px solid #000;
border-radius: 10px;
transition: all 0.5s;
}
.btn:hover {
color: #fff;
background: #333;
}
.btn:after {
font-family: 'Font Awesome 5 Free';
content: "\f0da";
font-weight: 900;
padding-left: 10px;
}

@media screen and (max-width: 599px) {
.news_container {
/* width: 100%; */
font-size:1.1rem;
}

.date {
font-size:1.1rem;
}

.category {
padding: 6px 5px 2px 5px;
font-size:0.8rem;
}

.news_text a {
display: block;
margin-top: 10px;
text-overflow: ellipsis;
overflow: hidden;
}
}











/* 見出し 両側ボーダー */


h2.border-both-sides {
  position: relative;
  text-align: center;
  margin: 0 2.5rem;
}
h2 span.border-both-sides {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
  font-size:1.5rem;
}
h2.border-both-sides::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

@media screen and (max-width: 599px) { /* 小さい画面 テキストサイズ小 */
h2 span.border-both-sides {
  font-size:1.2rem;
}
}













/* New！ リスト表示 */

/* リスト表示 works */

ul.list-works{
  padding: 0 0 0 0.5rem; /* SP表示 左余白 */
  font: 14px/1.8 'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  width:100%;
  max-width:680px;
  list-style: none;
  margin: 0 auto;
}


ul.list-works li{
  position: relative;
  padding: 0.5em 1.2em 0.5em 2.5em;
  margin-bottom:5px;
  color: #00a597 ;
  font-size: 15px;
  border-bottom: 1px dashed rgba(32,178,170, 0.5);
  text-align:left;
}

/*-- 小さい画面 --*/
@media screen and (max-width: 599px){
ul.list-works li{
font-size:1.0rem; /* フォントサイズ小 */
}

} /* ← 閉じカッコ */



ul.list-works li:after,
ul.list-works li:before{
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul.list-works li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(32,178,170,0.5);
}
ul.list-works li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(32,178,170,0.3);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}



/* 入れ子リスト */

ul.list-works li ul li{
list-style: none;
font-size:0.9rem;
}

ul.list-works ul li{
  position: relative;
  padding: 0.5em 1em 0.5em 0.5em; /* ← リストマークがあった部分 つめる */
  margin-bottom:5px;
  color: rgb(32,178,170);
  font-size: 15px;
  border-bottom: 1px dashed rgba(32,178,170, 0.5);
  text-align:left;
}
ul.list-works li ul li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(32,178,170,0.0); /* ← リストマーク透明 */
}
ul.list-works li ul li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(32,178,170,0.0);  /* ← リストマーク透明 */
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}










/* リスト表示 Online */

ul.list-online {
  padding: 0 0 0 0.5rem; /* SP表示 左余白 */
  font: 1.2rem/1.8 'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  width:100%;
  max-width:800px;
  list-style: none;
  margin: 0 auto;
}


ul.list-online li{
  position: relative;
  padding: 0.5em 1.2em 0.5em 2.5em;
  margin-bottom:5px;
  color: #333 ;
  font-size: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255, 0.9);
  margin-right: 1.1rem; /* 各liのアンダーライン 右端調整 */
  text-align:left;
}

/*-- 小さい画面 --*/
@media screen and (max-width: 599px){
ul.list-online li{
font-size:1.0rem; /* フォントサイズ小 */
}

} /* ← 閉じカッコ */



ul.list-online li:after,
ul.list-online li:before{
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul.list-online li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(32,150,255,0.5);
}
ul.list-online li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(32,150,255,0.3);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}



/* 入れ子リスト */

ul.list-online li ul li{
list-style: none;
font-size:0.9rem;
}

ul.list-online ul li{
  position: relative;
  padding: 0.5em 1em 0.5em 0.5em; /* ← リストマークがあった部分 つめる */
  margin-bottom:5px;
  color: rgb(32,178,170);
  font-size: 15px;
  border-bottom: 1px dashed rgba(32,178,170, 0.5);
  text-align:left;
}
ul.list-online li ul li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(32,178,170,0.0); /* ← リストマーク透明 */
}
ul.list-online li ul li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(32,178,170,0.0);  /* ← リストマーク透明 */
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}









/* リスト表示 plice */

ul.list-price {
  padding: 0 0 0 0.5rem; /* SP表示 左余白 */
  font: 1.2rem/1.8 'Josefin Sans', 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  width:100%;
  max-width:800px;
  list-style: none;
  margin: 0 auto;
}


ul.list-price li{
  position: relative;
  padding: 0.5em 1.2em 0.5em 2.5em;
  margin-bottom:5px;
  color: #333 ;
  font-size: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255, 0.9);
  margin-right: 1.1rem; /* 各liのアンダーライン 右端調整 */
  text-align:left;
}

/*-- 小さい画面 --*/
@media screen and (max-width: 599px){
ul.list-price li{
font-size:1.0rem; /* フォントサイズ小 */
}

} /* ← 閉じカッコ */



ul.list-price li:after,
ul.list-price li:before{
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul.list-price li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(255,135,160,0.8);
}
ul.list-price li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(255,135,160,0.6);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}



/* 入れ子リスト */

ul.list-price li ul li{
list-style: none;
font-size:0.9rem;
}

ul.list-price ul li{
  position: relative;
  padding: 0.5em 1em 0.5em 0.5em; /* ← リストマークがあった部分 つめる */
  margin-bottom:5px;
  color: rgb(32,178,170);
  font-size: 15px;
  border-bottom: 1px dashed rgba(255,135,160,0.5);
  text-align:left;
}
ul.list-price li ul li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(255,135,160,0.0); /* ← リストマーク透明 */
}
ul.list-price li ul li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(255,135,160,0.0);  /* ← リストマーク透明 */
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}











/* シンプルgallery　２～３コ並び（４コ並びも） */

.col_flex {
    width: 100%;
    display: flex;
}

.col_flex img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;
}




/* 【SP版】（767px以下＝モバイル） */
@media (max-width: 767px) {

.col_flex {
    display: block;
    }

}




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

.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 ;
}






/* 書籍関連button */



/* ボタン群の中央揃え用ラッパー */
.purchase-buttons-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ボタン群本体 */
.purchase-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 660px; /* 200px*3+gap*2 */
  width: 100%;
}

/* ボタン */
.purchase-btn {
  width: 200px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding-top: 14px;
  padding-bottom: 10px;
  box-sizing: border-box;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* ボタン色追加 */
.amazon-btn { background: #FF9900; }
.rakuten-btn { background: #BF0000; }
.yodobashi-btn { background: #222; }
.bookwalker-btn { background: #4CB050; }
.kinokuniya-btn { background: #1B5E9E; }
.maruzen-btn { background: #0086B6; }
.hmvbooks-btn { background: #E6007E; }
.honyaclub-btn { background: #223b80; }
.booklive-btn { background: #F36C21; }
.ehon-btn { background: #0099A1; }

.dbook-btn { background: #3cb65e; }
.cocorobooks-btn { background: #d24ca2; }
.honto-btn { background: #0085cd; }



.purchase-btn:hover {
  opacity: 0.8;
}

/* 1行3つずつ並べる。2行目以降で端数が出た場合は左寄せ */
.purchase-buttons {
  justify-content: center;
}

/* 端数の行だけ左寄せにする */
.purchase-buttons::after {
  content: "";
  flex: auto;
}

/* 3の倍数個のときは最後の行も中央揃え */
.purchase-buttons:has(.purchase-btn:nth-child(3n):last-child),
.purchase-buttons:has(.purchase-btn:nth-child(3n+1):last-child),
.purchase-buttons:has(.purchase-btn:nth-child(3n+2):last-child) {
  justify-content: center;
}
.purchase-buttons:has(.purchase-btn:nth-child(3n+1):last-child)::after {
  display: none;
}
.purchase-buttons:has(.purchase-btn:nth-child(3n+2):last-child)::after {
  display: none;
}

/* 端数（4,5,7,8個など）の場合、最後の行だけ左寄せ */
.purchase-buttons:has(.purchase-btn:nth-child(3n+1):last-child) {
  justify-content: flex-start;
}
.purchase-buttons:has(.purchase-btn:nth-child(3n+2):last-child) {
  justify-content: flex-start;
}

/* レスポンシブ対応　レスポンシブ時（700px以下）は1列に並ぶ */
@media (max-width: 700px) {
  .purchase-buttons-wrapper {
    justify-content: center;
  }
  .purchase-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
  }
  .purchase-btn {
    width: 90vw !important;
    min-width: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}






/* 作品情報 基本仕様（白ベース／黒ベース） main にて使用 */


.title-info{
background-color:#000;
color:#fff;
}


.title-info02 {
background-color:#fff;
color:#666;
}




/* 
このCSSを 無断でダウンロード・複製・転載することはご遠慮ください。
（C） AMUMO98 All rights reserved.
 */