@charset "UTF-8";

.quotation {
  text-align: right;
  margin-right: 150px;
  margin-top: 20px;
  margin-left: auto;
}

/*引用、クォ−テ−ション*/
.q {
  text-align: right;
  margin-right: 150px;
  margin-top: 20px;
  margin-left: auto;
}

/*引用、クォ−テ−ション*/
.qt {
  text-align: right;
  margin-right: 150px;
  margin-top: 20px;
  margin-left: auto;
}

/*引用、クォ−テ−ション*/
.cr {
  text-align: right;
  margin-right: 30px;
  margin-top: 100px;
  margin-left: auto;
}

/*コピーライト用*/
.qaz {
  border-width: 3px;
  border-style: solid;
}

/*通常のテーブルボーダーの太さ、タイプ*/
.tdn {
  text-decoration: none;
}

/*ハイパーリンクなどの線を消す*/
.tdu {
  text-decoration: underline;
}

/*下線表示*/
.tdub {
  text-decoration: underline blue;
}

.tdo {
  text-decoration: overline;
}

/*上線表示*/
.tdlt {
  text-decoration: line-through;
}

/*打ち消し線*/
.move {
  position: relative;
  top: 2px;
  left: 2px;
}

/*テキストがオンマウスで少し動く*/
.hide {
  display: none;
}

/*要素を消す、レイアウトも消える*/
.hidden {
  visibility: hidden;
}

/*要素を隠す、レイアウトは残る*/
.n {
  font-weight: normal;
}

/*通常の太さ*/
.b {
  font-weight: bold;
}

/*太字*/
.i {
  font-style: italic;
}

/*イタリック*/
.navimenu {
  list-style: none;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/*transform: translate(X,Y); transform: translateX(); transform: translateY();*/
.posi {
  display: block;
  transform: translateY(35px);
}

.re-posi {
  display: block;
  transform: translateY(-15px);
}

.menufont {
  display: block;
  transform: translateY(10px);
}

/*フォント色指定*/
.kazu {
  color: #dc143c
}

/*crimson*/
.slime {
  color: #00ffff
}

/*cyan*/
/*フォント色指定、通常はks〜*/
.ks {
  color: #000000
}

/*black*/
/*フォント青系*/
.ksb {
  color: #0000ff
}

/*blue*/
.ksaq {
  color: #00ffff
}

/*aqua*/
/*フォント緑系*/
.ksgr {
  color: #008000
}

/*green*/
.ksl {
  color: #00ff00
}

/*lime*/
.kssg {
  color: #00ff7f
}

/*springgreen*/
/*フォント赤系*/
.ksr {
  color: #ff0000
}

/*red*/
.ksm {
  color: #ff00ff
}

/*magenta*/
.kslc {
  color: #f08080
}

/*lightcoral*/
.kshp {
  color: #ff69b4
}

/*hotpink*/
.ksdp {
  color: #ff1493
}

/*deeppink*/
.ksor {
  color: #ff4500
}

/*orangered*/
.kspi {
  color: #ffc0cb
}

/*pink*/
/*フォント黄色系*/
.ksy {
  color: #ffff00
}

/*yellow*/
.ksg {
  color: #ffd700
}

/*gold*/
/*フォント紫系*/
.ksp {
  color: #dda0dd
}

/*plum*/
/*フォント白系*/
.kss {
  color: #fffafa
}

/*snow*/
.ksa {
  color: #f0ffff
}

/*azure*/
.ksanti {
  color: #fadeb7
}

/*antiquewhite*/
.kslcy {
  color: #e0ffff
}

/*lightcyan*/

.lsnone {
  list-style: none;
}

/*	表示しない (C2/e/Fx/Ch/Op/Sa)*/
.lsdisk {
  list-style: disc;
}

/*		黒丸(●) (C2/e/Fx/Ch/Op/Sa)*/
.lscir {
  list-style: circle;
}

/*	白丸(○) (C2/e/Fx/Ch/Op/Sa)*/
.lssqu {
  list-style: square;
}

/*		黒四角(■) (C2/e/Fx/Ch/Op/Sa)*/
.lsbox {
  list-style: box;
}

/*		白四角(□) (C3)*/
.lsche {
  list-style: check;
}

/*	チェックマーク(?) (C3)*/
.lsdia {
  list-style: diamond;
}

/*		ダイヤモンドマーク(◆) (C3)*/
.lsdash {
  list-style: dash;
}

/*		ダッシュ(?) (C3)*/
.ls1 {
  list-style: decimal;
}

/*		数字(1, 2, 3...) (C2/e/Fx/Op/Sa)*/
.ls0 {
  list-style: decimal-leading-zero;
}

/*		0付き数字(01, 02, 03...) (C2/e/Fx/Ch/Op/Sa)*/
.lsci {
  list-style: cjk-ideographic;
}

/*		漢数字(一, 二, 三...) (C3/Fx/Ch/Sa)*/
.lsur {
  list-style: upper-roman;
}

/*		大文字ローマ数字(I, II, III...) (C2/e/Fx/Ch/Op/Sa)*/
.lslr {
  list-style: lower-roman;
}

/*		小文字ローマ数字(i, ii, iii...) (C2/e/Fx/Ch/Op/Sa)*/
.lsua {
  list-style: upper-alpha;
}

/*		大文字アルファベット(A, B, C...) (C2/e/Fx/Ch/Op/Sa)*/
.lsla {
  list-style: lower-alpha;
}

/*		小文字アルファベット(a, b, c...) (C2/e/Fx/Ch/Op/Sa)*/
.lsul {
  list-style: upper-latin;
}

/*		大文字ラテン文字(A, B, C...) (C2/e/Fx/Ch/Op/Sa)*/
.lsll {
  list-style: lower-latin;
}

/*	小文字ラテン文字(a, b, c...) (C2/e/Fx/Ch/Op/Sa)*/
.lsug {
  list-style: upper-greek;
}

/*		大文字ギリシャ文字(Α, Β, Γ...) (C2/e/Ch/Sa)*/
.lslg {
  list-style: lower-greek;
}

/*		小文字ギリシャ文字(α, β, γ...) (C2/e/Fx/Ch/Op/Sa)*/
.lshira {
  list-style: hiragana;
}

/*		ひらがな(あ, い, う...) (C2/Fx/Ch/Sa)*/
.lskata {
  list-style: katakana;
}

/*		カタカナ(ア, イ, ウ...) (C2/Fx/Ch/Sa)*/
.lshiro {
  list-style: hiragana-iroha;
}

/*		ひらがな-いろは(い, ろ, は...) (C2/Fx/Ch/Sa)*/
.lskiro {
  list-style: katakana-iroha;
}

/*		カタカナ-イロハ(イ, ロ, ハ...) (C2/Fx/Ch/Sa)*/
.lsjaf {
  list-style: japanese-formal;
}

/*		日本-公式(壱, 弐, 参...) (C3)*/
.lsjai {
  list-style: japanese-informal;
}

/*		日本-非公式(一, 二, 三...) (C3)*/
.lschf {
  list-style: simp-chinese-formal;
}

/*		簡体字中国語-公式(壹, ?, ?...) (C3)*/
.lschi {
  list-style: simp-chinese-informal;
}

/*		簡体字中国語-非公式(一, 二, 三...) (C3)*/
.lstcf {
  list-style: trad-chinese-formal;
}

/*		繁体字中国語-公式(壹, 貳, 參...) (C3)*/
.lstci {
  list-style: trad-chinese-informal;
}

/*		繁体字中国語-非公式(一, 二, 三...) (C3)*/
.lskhf {
  list-style: korean-hangul-formal;
}

/*		韓国ハングル-公式(?, ?, ?...) (C3)*/
.lskhjf {
  list-style: korean-hanja-formal;
}

/*		韓国漢字-公式(一, 二, 三...) (C3)*/
.lskhji {
  list-style: korean-hanja-informal;
}

/*		韓国漢字-非公式(壹, 貳, 參...) (C3)*/
.lscir1 {
  list-style: circled-decimal;
}

/*		丸数字(?, ?, ?...) (C3)*/
.lsdot1 {
  list-style: dotted-decimal;
}

/*		ドット付き数字(?, ?, ?...) (C3)*/
.lsdc1 {
  list-style: double-circled-decimal;
}

/*		二重丸数字(?, ?, ?...) (C3)*/
.lsfc1 {
  list-style: filled-circled-decimal;
}

/*		黒丸数字(?, ?, ?...) (C3)*/
.lspare1 {
  list-style: parenthesized-decimal;
}

/*		括弧付き数字(?, ?, ?...) (C3)*/
.lsen {
  list-style: ethiopic-numeric;
}

/*		エチオピア数字(?, ?, ?...) (C3)*/
.lsheb {
  list-style: hebrew;
}

/*		ヘブライ数字(?, ?, ?...) (C2.0/Fx/Ch)*/
.lsarm {
  list-style: armenian;
}

/*		アルメニア数字(?, ?, ?...) (C2/e/Fx/Ch/Op)*/
.lsgeo {
  list-style: georgian;
}

/*		グルジア数字(?, ?, ?...) (C2/e/Fx/Ch/Op)*/

.ls_movie {
  list-style: none;
}

.ls_movie li {
  position: relative;
}

.ls_movie li:before {
  content: "♪";
  position: absolute;
  left: -10px;
}

.ls_movie li:nth-child(odd) {
  background-color: lightcyan;
  border-radius: 20px;
}

.ls_movie li:nth-child(even) {
  background-color: antiquewhite;
  border-radius: 20px;
}

.ls_blog {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.ls_blog li:nth-child(odd) {
  background-color: lightcyan;
  border-radius: 20px;
}

.ls_blog li:nth-child(even) {
  background-color: antiquewhite;
  border-radius: 20px;
}

.ls_news {
  list-style: none;
}

.ls_news li {
  position: relative;
}

.ls_news li {
  position: relative;
}

.ls_news li:before {
  content: "#";
  position: absolute;
  left: -10px;
}

.ls_news li:nth-child(odd) {
  background-color: mistyrose;
  border-radius: 20px;
}

.ls_news li:nth-child(even) {
  background-color: ivory;
  border-radius: 20px;
}

.ls_news2 {
  list-style: none;
}

.ls_news2 li {
  position: relative;
}

.ls_news2 li {
  position: relative;
}

.ls_news2 li:before {
  content: "#";
  position: absolute;
  left: -10px;
}

.ls_news2 li:nth-child(odd) {
  background-color: lightcyan;
  border-radius: 20px;
}

.ls_news2 li:nth-child(even) {
  background-color: antiquewhite;
  border-radius: 20px;
}


/*ボーダースタイル*/
.bsn {
  border-style: none
}

/*線を表示せず、線幅は0。他のセルの線と重なる場合は、他のセル線が優先。*/
.bsh {
  border-style: hidden
}

/*線を表示せず、線幅は0。他のセルの線と重なる場合は、hidden が優先。*/
.bsdt {
  border-style: dotted
}

/*点線で表示。*/
.bsds {
  border-style: dashed
}

/*破線で表示。*/
.bss {
  border-style: solid
}

/*実線で表示。*/
.bsdb {
  border-style: double
}

/*二重線で表示。*/
.bsg {
  border-style: groove
}

/*線が窪んで見えるような線で表示。*/
.bsr {
  border-style: ridge
}

/*線が突起して見えるような線で表示。*/
.bsi {
  border-style: inset
}

/*領域全体が窪んで見えるような線で表示。*/
.bso {
  border-style: outset
}

/*領域全体が突起して見えるような線で表示。*/
.bc4 {
  border-color: red blue green gold;
}

/*ボーダーカラー4原色*/
.br10 {
  border-radius: 10px;
}

.br20 {
  border-radius: 20px;
}

.bwth {
  border-width: thick;
}

/*線を太くする*/
.bsadd {
  border-collapse: collapse;
  border: 3px solid green;
}

.bsaddr {
  border-collapse: collapse;
  border: 3px solid red;
}

.bstable {
  border-collapse: collapse;
  border: 3px solid black;
}

.bstable th,
.bstable td,
.bsadd th,
.bsadd td,
.bsaddr th,
.bsaddr td {
  padding: 2px;
  border-color: black;
}

/*子孫セレクタ*/

.jump {
  height: 25px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
}

.more {
  height: 25px;
  border: 2px solid blue;
  border-radius: 10px;
  text-decoration: none;
  background-color: lime;
  display: inline-block;
}

/*もっと見るボタン*/
.author,
.cutpc {
  display: none;
}

/*cutpcスマホのみ表示*/
.cut {
  display: block;
}

/*スマホ非表示*/

/*スタイルシート応用*/
.xdn {
  display: none;
}

/*要素を消す、レイアウトも消える*/
.xfl {
  float: left;
}

/*左寄せ テキストを右に回り込ませる*/
.xfr {
  float: right;
}

/*右寄せ テキストを左に回り込ませる*/
.xoh {
  overflow: hidden;
}

/*float要素に被せるとレイアウトの崩れを防げる。かなり重要*/
.xcb {
  clear: both;
}

/*回り込み解除。*/
.xdi {
  display: inline;
}

/*ブロック要素をインライン要素として横に並べる、mar10とセットで使うと自動調整で便利*/
.xdb {
  display: block;
}

/*ブロックボックスとして表示*/
.xdbnm {
  display: block;
  text-decoration: none;
  background: black;
  transition: 1s;
}

.xdbnm:hover {
  background: dimgray;
}

/*ホバーで変化*/
.xdib {
  display: inline-block;
}

/*インラインボックスの様に前後で改行されず、ブロックボックスの様に高さ、横幅を指定可能なボックス*/
.xdli {
  display: list-item;
}

/*リストアイテム*/
.xdit {
  display: inline-table;
}

/*インラインテーブル*/
.xdt {
  display: table;
}

/*テーブル要素にする。*/
.overlay {
  width: 100%;
  height: 100%;
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
}

.xol1 {
  opacity: 0.1;
}

/*オーバーレイ透過度 透明に近い*/
.xol2 {
  opacity: 0.2;
}

.xol3 {
  opacity: 0.3;
}

.xol4 {
  opacity: 0.4;
}

.xol5 {
  opacity: 0.5;
}

.xol6 {
  opacity: 0.6;
}

.xol7 {
  opacity: 0.7;
}

.xol8 {
  opacity: 0.8;
}

.xol9 {
  opacity: 0.9;
}

/*オーバーレイ透過度 不透明に近い*/

.xdflex {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/*中央寄せで揃えて配置*/

.xflexc {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/*スマホで消えるコンテナ。中央寄せで揃えて配置*/
.xflexsa {
  display: flex;
  justify-content: space-around;
  align-items: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/*スマホで消えるコンテナ。均等配置*/
.xflexsb {
  display: flex;
  justify-content: space-between;
  align-items: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/*スマホで消えるコンテナ。均等配置、両端はコンテナ端へ*/
.xfbcalc2 {
  width: calc(100% / 2);
}

.xfbcalc3 {
  width: calc(100% / 3);
}

.xfbcalc4 {
  width: calc(100% / 4);
}

.xfbcalc5 {
  width: calc(100% / 5);
}

.xfbk050 {
  width: 50px;
}

.xfbk100 {
  width: 100px;
}

.xfbk150 {
  width: 150px;
}

.xfbk200 {
  width: 200px;
}

.xfbk225 {
  width: 225px;
}

.xfbk250 {
  width: 250px;
}

.xfbk300 {
  width: 300px;
}

.xfbk350 {
  width: 350px;
}

.xfbk400 {
  width: 400px;
}

.xfbk450 {
  width: 450px;
}

.xfb90 {
  flex-basis: 90%;
}

/*コンテナ内の幅比率*/
.xfb80 {
  flex-basis: 80%;
}

.xfb70 {
  flex-basis: 70%;
}

.xfb60 {
  flex-basis: 60%;
}

.xfb50 {
  flex-basis: 50%;
}

.xfb40 {
  flex-basis: 40%;
}

.xfb30 {
  flex-basis: 30%;
}

.xfb20 {
  flex-basis: 20%;
}

.xfb10 {
  flex-basis: 10%;
}

.mc {
  margin-right: auto;
  margin-left: 0 auto
}

/*ブロック自動調整*/
.ml10 {
  margin-left: 10px
}

.ml20 {
  margin-left: 20px
}

.ml30 {
  margin-left: 30px
}

.ml40 {
  margin-left: 40px
}

.ml50 {
  margin-left: 50px
}

.ml60 {
  margin-left: 60px
}

.ml70 {
  margin-left: 70px
}

.ml80 {
  margin-left: 80px
}

.ml90 {
  margin-left: 90px
}

.ml100 {
  margin-left: 100px
}

.mr10 {
  margin-right: 10px
}

.mr20 {
  margin-right: 20px
}

.mr30 {
  margin-right: 30px
}

.mr40 {
  margin-right: 40px
}

.mr50 {
  margin-right: 50px
}

.mr60 {
  margin-right: 60px
}

.mr70 {
  margin-right: 70px
}

.mr80 {
  margin-right: 80px
}

.mr90 {
  margin-right: 90px
}

.mr100 {
  margin-right: 100px
}

.mp0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mp20 {
  margin-bottom: 20px;
}

/*吹き出し、classにboxと方向を指定する*/
.box {
  position: relative;
  background: gold;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px;
  width: 500px;
  border: 1px solid lime;
  border-radius: 10px;
  color: black;
  font-size: 80%;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  display: block;
}

.box.top:after {
  top: -9px;
  left: 5px;
  border-bottom: 10px solid gold;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.box.bottom:after {
  bottom: -9px;
  left: 5px;
  border-top: 10px solid gold;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.box.left:after {
  top: 10px;
  left: -9px;
  border-top: 5px solid transparent;
  border-right: 10px solid gold;
  border-bottom: 5px solid transparent;
}

.box.right:after {
  top: 10px;
  right: -9px;
  border-top: 5px solid transparent;
  border-left: 10px solid gold;
  border-bottom: 5px solid transparent;
}

.wbox {
  width: 520px;
}

/*boxを囲う*/
.inbox {
  width: 520px;
  text-align: left;
  margin-right: auto;
  margin-left: 0px;
  display: table;
}

/*boxの中を囲う、右すらりんの時だけ*/
.suraboxl {
  float: left;
  margin-top: 10px;
}

/*左すらりんを囲う*/
.suraboxr {
  float: right;
  margin-top: 10px;
}

/*右すらりんを囲う*/
.kazubox {
  overflow: hidden;
  width: 800px;
}

/*吹き出し要素1回分を囲う*/

.mdl {
  vertical-align: middle;
}

.left {
  text-align: left;
  margin-right: auto;
  margin-left: 0px;
}

/*左揃えテキスト*/
.tl {
  text-align: left;
  margin-right: auto;
  margin-left: 0px;
}

/*左揃えテキスト*/
.center {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

/*中央揃えテキスト*/
.tc {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

/*中央揃えテキスト*/
.tcfits {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*子要素を上下左右中央揃え*/
.right {
  text-align: right;
  margin-right: 0px;
  margin-left: auto;
}

/*右揃えテキスト*/
.tr {
  text-align: right;
  margin-right: 0px;
  margin-left: auto;
}

/*右揃えテキスト*/
.tlmc {
  text-align: left;
  margin-right: auto;
  margin-left: auto;
}

/*左揃えテキスト ブロック中央寄せ kやconと併用*/
.trmc {
  text-align: right;
  margin-right: auto;
  margin-left: auto;
}

/*右揃えテキスト ブロック中央寄せ kやconと併用*/
.ml80 {
  margin-right: auto;
  margin-left: 80px;
}

.ms {
  font-family: Comic Sans MS, sans-serif;
}

/*筆記体のポップな文字 英数のみ*/
.mono {
  font-family: monospace;
}

/*等幅フォント 英数はmsを使う*/
.web {
  font-family: webdings;
}

/*特殊絵文字*/
.wing {
  font-family: wingdings;
}

/*特殊絵文字*/
.wts {
  text-shadow: 1px 1px 0px #000000, 3px 3px 2px azure;
}

/*白系テキストの影効果*/
.i {
  font-style: italic;
}

/*イタリック体　 影との併用は出来ない*/
.b {
  font-weight: bold;
}

/*太字*/
.cur1 {
  cursor: url(//www.room-kazu.com/_gl_images_/slime/FXDIPFS0.cur), auto;
}

/*カーソル指定スライム*/
.cur2 {
  cursor: url(//www.room-kazu.com/_gl_images_/slime/XQ678BZX.cur), auto;
}

/*カーソル指定ベホマスライム*/
.cur4 {
  cursor: url(//www.room-kazu.com/_gl_images_/slime/T611USLH.cur), auto;
}

/*カーソル指定メタルスライム*/

/*背景画の指定*/
.metalslime {
  background-image: url(//www.room-kazu.com/_gl_images_/slime/metalimages.jpg)
}

.slimeback {
  background-image: url(//www.room-kazu.com/_gl_images_/slime/20140220_961598.png)
}

.stars {
  background-image: url(//www.room-kazu.com/_gl_images_/deco/stars.jpg)
}

.stars2 {
  background-image: url(//www.room-kazu.com/_gl_images_/deco/stars2.jpg)
}

.stars3 {
  background-image: url(//www.room-kazu.com/_gl_images_/deco/starsback.jpg)
}

.stars4 {
  background-image: url(//www.room-kazu.com/_gl_images_/deco/castle.jpg)
}

.stars5 {
  background-image: url(//www.room-kazu.com/_gl_images_/deco/milkyway.jpg)
}

.stars6 {
  background-image: url(//www.room-kazu.com/_gl_images_/deco/21_01.jpg)
}

/*内側余白指定*/
.pad10 {
  padding: 10px;
}

/*左側余白指定*/
.padl20 {
  padding-left: 20px;
}

/*外側余白指定*/
.mar10 {
  margin: 10px;
}

/*背景色指定*/
.bgkazu {
  background-color: crimson;
}

.bgslime {
  background-color: cyan;
}

/*背景色指定、通常はbgks〜*/
.bgks {
  background-color: black;
}

.bgksdim {
  background-color: dimgray;
}

/*背景色指定、青系*/
.bgksb {
  background-color: blue;
}

/*背景色指定、緑系*/
.bgksgr {
  background-color: green;
}

.bgksl {
  background-color: lime;
}

.bgkssg {
  background-color: springgreen;
}

.bgkslsg {
  background-color: lightseagreen;
}

.bghd {
  background-color: honeydew;
}

/*背景色指定、赤系*/
.bgksr {
  background-color: red;
}

.bgksm {
  background-color: magenta;
}

.bgkslc {
  background-color: lightcoral;
}

.bgkshp {
  background-color: hotpink;
}

.bgksdp {
  background-color: deeppink;
}

/*背景色指定、黄色系*/
.bgksy {
  background-color: yellow;
}

.bgksg {
  background-color: gold;
}

/*背景色指定、紫系*/
.bgksp {
  background-color: plum;
}

/*背景色指定、白系*/
.bgkss {
  background-color: snow;
}

.bgksa {
  background-color: azure;
}

.bgksanti {
  background-color: antiquewhite;
}

.bgkslcy {
  background-color: lightcyan;
}

.bgkslab {
  background-color: lavenderblush;
}

/*背景色グラデーション指定*/
.bgheadkf {
  background: linear-gradient(to right, seagreen 15%, skyblue 30%, mediumblue 40%, mediumblue 60%, skyblue 70%, seagreen 85%);
}

.bgheadks {
  background: linear-gradient(to right, lime 20%, green 60%, lime 80%);
}

.bgheadts {
  background: linear-gradient(to right, hotpink 20%, plum 60%, hotpink 80%);
}

/*上スペースの間隔、s〜はスペース関連の数値*/
.s10 {
  margin-top: 10px;
  display: table;
}

.s0308025 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.s25 {
  margin-top: 25px;
}

.s0308050 {
  margin-top: 50px;
  margin-bottom: 25px;
}

.s50 {
  margin-top: 50px;
}

.s0308075 {
  margin-top: 75px;
  margin-bottom: 25px;
}

.s75 {
  margin-top: 75px;
}

.s0308 {
  margin-top: 100px;
  margin-bottom: 25px;
}

.s100 {
  margin-top: 100px;
}

.s0308125 {
  margin-top: 125px;
  margin-bottom: 25px;
}

.s125 {
  margin-top: 125px;
}

.s0308150 {
  margin-top: 150px;
  margin-bottom: 25px;
}

.s150 {
  margin-top: 150px;
}

.s0308175 {
  margin-top: 175px;
  margin-bottom: 25px;
}

.s175 {
  margin-top: 175px;
}

.s0308200 {
  margin-top: 200px;
  margin-bottom: 25px;
}

.s200 {
  margin-top: 200px;
}

.s0308250 {
  margin-top: 250px;
  margin-bottom: 25px;
}

.s250 {
  margin-top: 250px;
}

.s0308300 {
  margin-top: 300px;
  margin-bottom: 25px;
}

.s300 {
  margin-top: 300px;
}

.s0308400 {
  margin-top: 400px;
  margin-bottom: 25px;
}

.s400 {
  margin-top: 400px;
}

.s0308500 {
  margin-top: 500px;
  margin-bottom: 25px;
}

.s500 {
  margin-top: 500px;
}

/*幅指定、k〜が数値*/
.con100 {
  width: 100%
}

.con95 {
  width: 95%
}

.con90 {
  width: 90%
}

.con85 {
  width: 85%
}

.con80 {
  width: 80%
}

.con75 {
  width: 75%
}

.con70 {
  width: 70%
}

.con65 {
  width: 65%
}

.con60 {
  width: 60%
}

.con55 {
  width: 55%
}

.con50 {
  width: 50%
}

.con45 {
  width: 45%
}

.con40 {
  width: 40%
}

.con35 {
  width: 35%
}

.con30 {
  width: 30%
}

.con25 {
  width: 25%
}

.con20 {
  width: 20%
}

.k050 {
  width: 50px
}

.k100 {
  width: 100px
}

.k150 {
  width: 150px
}

.k200 {
  width: 200px
}

.k225 {
  width: 225px
}

.k4 {
  width: 225px
}

.k250 {
  width: 250px
}

.k300 {
  width: 300px
}

.k3 {
  width: 300px
}

.k350 {
  width: 350px
}

.k400 {
  width: 400px
}

.k450 {
  width: 450px
}

.k2 {
  width: 450px
}

.k500 {
  width: 500px
}

.k500in {
  width: 500px;
}

.k550 {
  width: 550px;
}

.k550out {
  width: 550px;
  padding: 10px;
}

.k600 {
  width: 600px
}

.k650 {
  width: 650px
}

.k700 {
  width: 700px
}

.k750 {
  width: 750px
}

.k800 {
  width: 800px
}

.k850 {
  width: 850px
}

.k900 {
  width: 900px
}

.k1 {
  width: 900px
}

.k950 {
  width: 950px
}

.k0 {
  width: 1000px
}

.k1000 {
  width: 1000px
}

.k1050 {
  width: 1050px
}

.k1100 {
  width: 1100px
}

.k1150 {
  width: 1150px
}

.k1200 {
  width: 1200px
}

.kh20 {
  height: 20px;
}

/*高さ指定*/
.kh30 {
  height: 30px;
}

.kh40 {
  height: 40px;
}

.kh50 {
  height: 50px;
}

.kh60 {
  height: 60px;
}

.kh70 {
  height: 70px;
}

.kh80 {
  height: 80px;
}

.kh90 {
  height: 90px;
}

.kh100 {
  height: 100px;
}

.kh110 {
  height: 110px;
}

.kh120 {
  height: 120px;
}

.kh130 {
  height: 130px;
}

.kh270 {
  height: 270px;
}

.khts {
  height: 400px;
}

/*k〜のBOX指定の余分な余白を除去、padding指定時必須*/
.k-inout {
  box-sizing: border-box;
}

/*フォントサイズ指定、ks〜が数値*/
.ks60 {
  font-size: 62.5%
}

.ks70 {
  font-size: 70%
}

.ks75 {
  font-size: 75%
}

.ks80 {
  font-size: 80%
}

.ks90 {
  font-size: 90%
}

.ks100 {
  font-size: 100%
}

.ks110 {
  font-size: 110%
}

.ks120 {
  font-size: 120%
}

.ks125 {
  font-size: 125%
}

.ks140 {
  font-size: 140%
}

.ks150 {
  font-size: 150%
}

.ks160 {
  font-size: 160%
}

.ks180 {
  font-size: 180%
}

.ks200 {
  font-size: 200%
}

.ks220 {
  font-size: 220%
}

.ks240 {
  font-size: 240%
}

.ks250 {
  font-size: 250%
}

.ks260 {
  font-size: 260%
}

.ks280 {
  font-size: 280%
}

.ks300 {
  font-size: 300%
}

.ks320 {
  font-size: 320%
}

.ks340 {
  font-size: 340%
}

.ks360 {
  font-size: 360%
}

.ks380 {
  font-size: 380%
}

.ks400 {
  font-size: 400%
}

.ks420 {
  font-size: 420%
}

.ks440 {
  font-size: 440%
}

.ks460 {
  font-size: 460%
}

.ks480 {
  font-size: 480%
}

.ks500 {
  font-size: 500%
}

.ks600 {
  font-size: 600%
}

.ks700 {
  font-size: 700%
}

.ks750 {
  font-size: 750%
}

.frame {
  width: 580px;
  height: 340px;
}

.maps {
  width: 100%;
  height: 400px;
}

.logof {
  font-size: 40px;
  font-weight: bold;
  opacity: 0.7;
  font-family: sans-serif;
}

.videos {
  width: 800px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slideBox {
  width: 800px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

a.page_number a.pagination a.now_page_number {
  text-decoration: none;
}

.page_number {
  font-size: 120%;
  text-decoration: none;
  word-break: keep-all;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 25px;
}

.now_page_number {
  font-size: 140%;
  text-decoration: underline;
  font-weight: bold;
}

.page_feed {
  width: 25px;
  margin: 0px 0px;
  padding: 5px 5px;
  text-align: center;
  background: #b8b8b8;
  color: black;
}

.first_last_page {
  width: 25px;
  margin: 0px 0px;
  padding: 5px 5px;
  text-align: center;
  background: #f0f0f0;
  color: black;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  35% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    z-index: 9;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  35% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    z-index: 9;
  }

  100% {
    opacity: 0;
  }
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(40px);
  opacity: 0;
}

.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(-40px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

.scroll_left.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(40px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

.scroll_right.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

/* タイミング*/
.timing02 {
  transition-delay: .2s;
}

.timing03 {
  transition-delay: .4s;
}

.timing04 {
  transition-delay: .6s;
}

.timing05 {
  transition-delay: .8s;
}

/*タブコンテンツ全体の要素,0入りは３タブ*/
#item01,
#item02,
#item03 {
  display: none;
}

#item1,
#item2,
#item3,
#item4,
#item5 {
  display: none;
}

.tab_content {
  width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

/*タブ部分の基本設定*/
.tab_list {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.tab3_item {
  width: calc(100% / 3);
  background-color: #ddd;
  border: solid 1px #000;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  bottom: -1px;
  box-sizing: border-box;
}

.tab5_item {
  width: calc(100% / 5);
  background-color: #ddd;
  border: solid 1px #000;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  bottom: -1px;
  box-sizing: border-box;
}

.tab3_item label,
.tab5_item label {
  padding: 8px 0;
  display: block;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

/*チェックが入ったときのタブ部分の指定*/
#item01:checked~.tab_list .tab_item01,
#item02:checked~.tab_list .tab_item02,
#item03:checked~.tab_list .tab_item03,
#item1:checked~.tab_list .tab_item1,
#item2:checked~.tab_list .tab_item2,
#item3:checked~.tab_list .tab_item3,
#item4:checked~.tab_list .tab_item4,
#item5:checked~.tab_list .tab_item5 {
  box-sizing: border-box;
  background-color: #fff;
  border: solid 1px #000;
  border-bottom-color: #fff;
  z-index: 2;
}

#item01:checked~.tab_list .tab_item01 label,
#item02:checked~.tab_list .tab_item02 label,
#item03:checked~.tab_list .tab_item03 label,
#item1:checked~.tab_list .tab_item1 label,
#item2:checked~.tab_list .tab_item2 label,
#item3:checked~.tab_list .tab_item3 label,
#item4:checked~.tab_list .tab_item4 label,
#item5:checked~.tab_list .tab_item5 label {
  cursor: auto;
  box-sizing: border-box;
}

/*コンテンツ部分の基本設定*/
.content_wrap {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px 10px;
  display: none;
  background-color: #fff;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  box-sizing: border-box;
}

/*チェックが入ったときのコンテンツ部分の指定*/
#item01:checked~.content_wrap .content01,
#item02:checked~.content_wrap .content02,
#item03:checked~.content_wrap .content03,
#item1:checked~.content_wrap .content1,
#item2:checked~.content_wrap .content2,
#item3:checked~.content_wrap .content3,
#item4:checked~.content_wrap .content4,
#item5:checked~.content_wrap .content5 {
  display: block;
  box-sizing: border-box;
}

/*ナビメニュー*/
#navTgl {
  display: none;
}

label.open,
label.close {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
}

.open {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  z-index: 10;
  background-color: lightSeaGreen;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
}

.open span,
.open span:before,
.open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}

.open span:before {
  bottom: 8px;
}

.open span:after {
  top: 8px;
}

#navTgl:checked~.open span {
  background-color: rgba(255, 255, 255, 0);
}

#navTgl:checked~.open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#navTgl:checked~.open span::after {
  top: 0;
  transform: rotate(-45deg);
}

#navTgl:checked+.open {
  background-color: indianRed;
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}

.close {
  pointer-events: none;
  z-index: 8;
  width: 100%;
  height: 100%;
  transition: background-color .6s;
}

#navTgl:checked~.close {
  pointer-events: auto;
  background-color: rgba(0, 0, 0, .3);
}

/* :::::: drawer menu :::::: */

.menu {
  scroll-snap-type: x mandatory;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, .6);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .6s;
  transition: transform .6s;
}

#navTgl:checked~.menu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.menu p,
.menu li a {
  color: white;
}

.menu p {
  text-align: center;
}

.menu ul {
  padding: 0;
  list-style-type: none;
}

.menu li {
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  line-height: 1.4;
}

.menu li:first-child {
  border-top: 1px solid rgba(255, 255, 255, .6);
}

.menu li a {
  display: block;
  padding: 1em 2em;
  text-decoration: none;
  transition: background-color .6s;
}

.menu li a:hover {
  background-color: black;
}

/* スマホ用のCSS */
@media screen and (max-width: 768px) {
  .tab_content {
    width: 100%;
    margin: 0 auto;
  }

  .xoh {
    width: 100%;
    margin-top: 25px;
  }

  .xfl,
  .xfr {
    clear: both;
    width: 100%;
    margin-top: 25px;
  }

  .frame,
  .maps {
    width: 100%;
    height: 300px;
  }

  .cut {
    display: none;
  }

  /*スマホは非表示*/
  .cutpc {
    display: block;
  }

  .author {
    display: block;
    transform: translateY(75px);
  }

  .k500in {
    width: 100%;
  }

  .k550out {
    width: 100%;
    margin-top: 25px;
    padding: 10px;
  }

  .k-inout {
    overflow: hidden;
    box-sizing: border-box;
  }

  .videos {
    text-decoration: none;
    border-style: none;
    max-width: 100%;
    height: 300px;
  }

  .k2 {
    width: 100%
  }

  .k500 {
    width: 100%
  }

  .k550 {
    width: 100%
  }

  .k600 {
    width: 100%
  }

  .k650 {
    width: 100%
  }

  .k700 {
    width: 100%
  }

  .k750 {
    width: 100%
  }

  .k800 {
    width: 100%
  }

  .k850 {
    width: 100%
  }

  .k900 {
    width: 100%
  }

  .k1 {
    width: 100%
  }

  .k950 {
    width: 100%
  }

  .k0 {
    width: 100%
  }

  .k1000 {
    width: 100%
  }

  .k1050 {
    width: 100%
  }

  .k1100 {
    width: 100%
  }

  .k1150 {
    width: 100%
  }

  .k1200 {
    width: 100%
  }

  *[class^="xflex"] {
    clear: both;
    width: 100%;
    margin-top: 25px;
  }

  *[class^="xfb"] {
    width: 80%;
  }
}

/*ここまでスマホ用*/

.btn-mail {
  position: relative;
  display: block;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  text-align: center;
  background: #f75065;
  padding: 5px 0;
  margin: auto;
  max-width: 250px;
}

.btn-tel {
  position: relative;
  display: block;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  text-align: center;
  background: #f75065;
  padding: 5px 0;
  margin: auto;
  max-width: 250px;
}

.btn-tel::after {
  content: "";
  background: url(//svgsilh.com/svg/1831922.svg) no-repeat center;
  background-size: contain;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: 15px;
}


@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}