/* ==============================================================
 「《model factory》わぁくす鶴岡 works Tsurugaoka」専用スタイルシート 
  Version1.0
  Updated By 円珠 2024.09.01
============================================================== */
/* ----- BODYタグ用 -------------------------------------------*/

.FORBody01 {
  /* BODYのマージン設定 */
  margin: 0px 0px 0px 0px; /* 上=0px、右=0px、下=0px、左=0px */
}

/* ----- 文字の詳細指定 ---------------------------------------*/
.STRING01 {  /* タイトル等の特大サイズ */
  /* 文字サイズ */
  font-size: 20pt; line-height: 180%; margin-top: 20pt;
  padding: 4pt 8pt 4pt 8pt;	/* 左から順に上右下左 */
  /* 文字太さ */
  font-weight: bold;
}

.STRING02 {  /* 本文 */
  font-size: 15pt; line-height: 180%; margin-top: 20pt;
  padding: 4pt 8pt 4pt 8pt;	/* 左から順に上右下左 */
}

.STRING03 {  /* 本文（小さ目） */
  font-size: 11pt; line-height: 120%; margin-top: 20pt;
  padding: 8pt 16pt 8pt 16pt;	/* 左から順に上右下左 */
}

.STRING04 {  /* 程よく大きいサブタイトル向け */
  font-size: 17pt; line-height: 180%; margin-top: 20pt;
  padding: 8pt 16pt 8pt 16pt;	/* 左から順に上右下左 */
  /* 文字太さ */
  font-weight: bold;
}

.POSTIT01 {    /* ふせんに乗せる文字用 */
  /* TABLE内背景画像 */
  background-repeat: no-repeat;
  background-position: left center;  /* 左から順に縦横 */
  /* 文字サイズ */
  font-size: 18pt; line-height: 180%; margin-top: 20pt;
  padding: 4pt 8pt 4pt 8pt;	/* 左から順に上右下左 */
  /* 文字太さ */
  font-weight: bold;
}

.POSTIT02 {    /* ふせんに乗せる文字用 */
  /* TABLE内背景画像 */
  background-repeat: no-repeat;
  background-position: left center;  /* 左から順に縦横 */
  /* 文字サイズ */
  font-size: 150%; line-height: 180%; margin-top: 20pt;
  padding: 4pt 8pt 4pt 8pt;	/* 左から順に上右下左 */
  /* 文字太さ */
  font-weight: bold;
}

/* ----- 背景画像の詳細指定 ----------------------------------*/
.WALL01 {    /* （主に）TABLE内背景画像 */
  background-repeat: no-repeat;
  background-position: left top;  /* 左から順に縦横 */
}

.WALL02 {    /* TABLE内背景画像 */
  background-repeat: no-repeat;
  background-position: left bottom;  /* 左から順に縦横 */
}

.WALL03 {    /* TABLE内背景画像 */
  background-repeat: repeat-x;  /* ヨコ方向に並べる */
}

.WALL04 {    /* TABLE内背景画像 */
  background-repeat: repeat-y;  /* タテ方向に並べる */
}

.WALL05 {    /* TABLE内背景画像 */
  background-repeat: no-repeat;
  background-position: right top;  /* 左から順に縦横 */
}

.WALL06 {    /* TABLE内背景画像 */
  background-repeat: no-repeat;
  background-position: right bottom;  /* 左から順に縦横 */
}

/* ----- 区切り線（点線）-----------------------------------*/
.DOTEDLINE_LBLUE {	/* 水色点線 */
	PADDING-BOTTOM: 6px; PADDING-TOP: 1px; MARGIN: 6px 15px;
	BORDER-BOTTOM: #40F4E7 1px dotted; FONT-STYLE: normal
}

.DOTEDLINE_RED {	/* 赤点線 */
	PADDING-BOTTOM: 6px; PADDING-TOP: 1px; MARGIN: 6px 15px;
	BORDER-BOTTOM: #FF0000 1px dotted; FONT-STYLE: normal
}

.DOTEDLINE_DBROWN {	/* こげ茶点線 */
	PADDING-BOTTOM: 6px; PADDING-TOP: 1px; MARGIN: 6px 15px;
	BORDER-BOTTOM: #69475A 1px dotted; FONT-STYLE: normal
}

.DOTEDLINE_LGRAY {	/* 薄グレー点線 */
	PADDING-BOTTOM: 1px; PADDING-TOP: 1px; MARGIN: 6px 15px;
	BORDER-BOTTOM: #888888 1px dotted; FONT-STYLE: normal
}

/* ----- 長文を省略して見せる ---------------------------*/
.TEXTOM {
  max-width: 500pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border 1px; #000 solid;
}

/* ----- その他各種カスタマイズ用 ---------------------------*/
.SUBPAGETITLE01 {    /* サブページタイトル用 */
  /* 文字カラー */
  color: #FFFFFF;
  /* 文字サイズ */
  font-size: 20pt; line-height: 80%;
  /* 文字太さ */
  font-weight: none;
}

.IMG_TRANCE:hover { /* マウスオーバーで画像が半透明になる */
  opacity: 0.5;
}

.H1_HIDDEN { /* H1タグ対策 */
  display: none;
}

/* ----- カルーセル機能ここから -----------------------------*/
.carousel {    /* 全体 */
  /* 水平方向中央寄せ */
  display: flex;
  justify-content: center;
}
.contains {    
  width: 800px;  /* スライド幅サイズ */
  height: 1300px; /* スライド縦サイズ */
  overflow: hidden;
  position: relative;
  padding: 0;
  list-style: none;
}
.slide_select {  /* スライド切り換え用ラジオボタンは常に非表示 */
  display: none;
}
/* 各スライド設定 */
.slide {
  width: 800px;  /* スライド幅サイズ */
  height: 1300px; /* スライド縦サイズ */
  position: absolute;
  opacity: 0;
}

.scroll_button {  /* Prev・Nextボタン */
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  /* 縦中央から20px上の位置 */
  top: 50%;
  margin-top: -20px;
/* 上辺と右辺のみ幅5pxの枠線 */
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #C0C0C0;
  cursor: pointer;
  /* 普段はボタンはやや薄くする */
  opacity: 0.5;
  /* スライドよりも前面にする */
  z-index: 3;
}
.scroll_button:hover {  /* ホバー時にボタンを強調 */
  opacity: 1;
}

.scroll_prev {  /* 前へボタン */
  left: 15px;
  /* 上辺と右辺の枠線を回転して"＜"にする */
  transform: rotate(-135deg);
}

.scroll_next {  /* 次へボタン */
  right: 15px;
  /* 上辺と右辺の枠線を回転して"＞"にする */
  transform: rotate(45deg);
}

.move_controler {  /* スライド移動ボタンエリア */
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.button_move {  /* スライド移動の各ボタン */
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: -20 2px;
  border-radius: 100%;
  cursor: pointer;
  /* 普段はやや薄くする */
  opacity: 0.5;
  /* スライドより前面にする */
  z-index: 2;
}

.button_move:hover {  /* ホバー時はやや明るくする */
  opacity: 0.75;
}
.button_move {  /* スライド移動ボタンの色 */
  background-color: #C0C0C0;
}

/* スライド1枚目の透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
  opacity: 1;
}
/* スライド1枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(1):checked
  ~ .move_controler
  .button_move:nth-of-type(1) {
  opacity: 1;
}

/* スライド2枚目の透明度を0にして表示する */
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
  opacity: 1;
}
/* スライド2枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(2):checked
  ~ .move_controler
  .button_move:nth-of-type(2) {
  opacity: 1;
}

/* スライド3枚目の透明度を0にして表示する */
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
  opacity: 1;
}
/* スライド3枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(3):checked
  ~ .move_controler
  .button_move:nth-of-type(3) {
  opacity: 1;
}

/* スライド4枚目の透明度を0にして表示する */
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
  opacity: 1;
}
/* スライド4枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(4):checked
  ~ .move_controler
  .button_move:nth-of-type(4) {
  opacity: 1;
}

/* スライド5枚目の透明度を0にして表示する */
.slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
  opacity: 1;
}
/* スライド5枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(5):checked
  ~ .move_controler
  .button_move:nth-of-type(5) {
  opacity: 1;
}

/* スライド6枚目の透明度を0にして表示する */
.slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
  opacity: 1;
}
/* スライド6枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(6):checked
  ~ .move_controler
  .button_move:nth-of-type(6) {
  opacity: 1;
}

/* スライド7枚目の透明度を0にして表示する */
.slide_select:nth-of-type(7):checked ~ .slide:nth-of-type(7) {
  opacity: 1;
}
/* スライド7枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(7):checked
  ~ .move_controler
  .button_move:nth-of-type(7) {
  opacity: 1;
}

/* スライド8枚目の透明度を0にして表示する */
.slide_select:nth-of-type(8):checked ~ .slide:nth-of-type(8) {
  opacity: 1;
}
/* スライド8枚目の前へ次へボタンの領域を確保 */
.slide_select:nth-of-type(8):checked
  ~ .move_controler
  .button_move:nth-of-type(8) {
  opacity: 1;
}

/* ----- カルーセル機能ここまで -----------------------------*/