@charset 'utf-8';
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0;
	padding: 0;
	border: 0;
}
html, body {
	height: 100%;
}
html {
	font-size: 62.5%;
	box-sizing: border-box;
}
body {
	line-height: 2;
	background: #fff;
	font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium","游ゴシック体","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	color: #333;
}
ol, ul {
	list-style: none;
}
a {
	color: #1D3994;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.color1 {
	color: #d70035;
}
.color2 {
	color: #000;
	font-weight: bold;
}
/*ヘッダー*/
header {
	position: fixed;
	top: 0;
	left: 200px;
	width: 100%;
	height: 70px;
	background: #fff;
	z-index: 1000;
	border-left: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}
h1 {
	position: fixed;
	top: 2px;
	left: 14px;
	font-family: 'Playball', cursive;
	font-size: 3rem;
	line-height: 40px;
}
.h1_1 {
	position: fixed;
	top: 20px;
	left: 30px;
}
.h1_2 {
	position: fixed;
	top: 55px;
	left: 30px;
}
h1 a {
	color: #c3e684;/*photostudioヘッタｰ*/
	text-decoration: none;
}
h1 a:hover {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	text-decoration: none;
}
.h1_subcol {
	color: #76ba07;
}
/*レイアウト*/
.wrapper {
	float: right;
	width: 100%;
	margin-top: 70px;
	margin-left: -200px;
}
.main {
	width: 100%;
	float: left;
	margin-right: -340px;
}
.content {
	width: 100%;
	float: right;
	margin-left: -220px;
}
.top_content_inner {
	margin-left: 200px;
	margin-right: 340px;
	border-left: solid 1px #ddd;
}
.content_inner {
	margin-left: 200px;
	border-left: solid 1px #ddd;
}
.rightside {
	width: 320px;
	float: right;
	margin: 50px 0 0;
	padding-right: 20px;
}
footer {
	clear: both;
	position: relative;
	width: auto;
	height: 250px;
	margin-left: 200px;
	background: #339900;
}

/* ----- コンテンツ ----- */

/*斜線（ドット）*/
.box4 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:dotted 3px #0000cd;/*線の種類・太さ・色*/
}

.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #70ccff;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 22px;
background: #FFF;
color: #70ccff;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
} 


.post {
	clear: both; /*floatの回り込みを解除*/
	width: auto; /*幅指定(autoは初期値に戻す)*/
}



.post ul {
	margin-bottom: 20px; /*ボックス外側下の余白*/
	font-size: 1.5em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
}

.post ul li {
	padding-left: 15px; /*ボックス内側左の余白*/
}


.newlist {
	margin-bottom: 15px; /*ボックス外側下の余白*/
}

.newlist dl {
	width: auto; /*幅指定(autoは初期値に戻す)*/
	height: 200px; /*領域の高さ指定*/
	overflow: auto; /*領域に入りきらない内容の処理(autoはブラウザに依存(通常はみ出す場合はスクロール表示))*/
	padding-left: 5px; /*ボックス内側左の余白*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.newlist dd {
	border-bottom: solid 1px #cccccc; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin: 5px 10px 10px 5px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}


div.sample p {
   line-height: 15%;
}

@media screen and (max-width: 768px) {
/*ヘッダー*/
header {
	left: 0;
	height: 50px;
	border-left: none;
	overflow: hidden; /*横のはみ出し防止(画像の幅を固定させる)*/
}
h1 {
	font-size: 2rem;
	width: auto;
	z-index: 1100;
	height: 50px;
	line-height: 50px;
}
.h1_1 {
	position: fixed;
	top: 2px;
	left: 50px;
}
.h1_2 {
	position: fixed;
	top: 2px;
	left: 140px;
}
/*レイアウト*/
.wrapper {
	margin: 50px 0 0 0;
}
.main, .content, .content_inner, .top_content_inner {
	margin: 0;
}
.rightside {
	width: 100%;
	margin: 20px;
	padding: 0 0 0 40px;
}
footer {
	margin-left: 0;
}
}
@media screen and (min-width: 769px) and (max-width: 1280px) {
.rightside {
	margin: 20px 0 0;
	padding-right: 20px;
}
}
.center{
  text-align: center;
  border: 0px dashed #999; /*text-align: center;は画像の中央よせ *//* borderは囲み枠 */
}

/* ----- コンテンツ ----- */

.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #8fcc14;
border-radius: 4px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 20px;
background: #FFF;
color: #8fcc14;
font-weight: bold;
}
.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #fff;
    color: #aa0055;
    font-weight: bold;
}
.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #fff;
    width: 0;
    height: 0;
}
.box24 p {
    margin: 0; 
    padding: 0;
}
/*文字中央寄せ*/
P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 12em
}

/* シンプルボックス枠 1*/
.kakomi-box1 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #fff; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}


/*カレンダー用テーブル
---------------------------------------------------------------------------*/
/*テーブル全体の設定*/
.cal {
	border: 1px solid #a2a2a2;	/*枠線の幅、線種、色*/
	background: #FFF;			/*テーブル内の背景色*/
	font-size: 11px;			/*文字サイズ*/
	margin-right: auto;
	margin-left: auto;
}
.cal td, .cal th{
	border: 1px solid #a2a2a2;	/*枠線の幅、線種、色*/
	line-height: 1;				/*行間*/
	text-align: center;			/*文字をセンタリング*/
	padding: 5px;				/*ボックス内の余白*/
}
/*テーブル内のth(曜日)設定*/
.cal th{
	background: #ebebeb;	/*背景色*/
}
/*休日の設定*/
.cal .off {
	background: #ffced8;	/*背景色*/
	color: #666;			/*文字色*/
}
/*日曜日の設定*/
.cal .sun {
	color: #FF5C7F;			/*文字色*/
}

/*テーブル１
---------------------------------------------------------------------------*/
/*テーブル全体の設定*/
body {
  font-family: "Open Sans", sans-serif;
}

table.table1 {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 600px;
  table-layout: auto;      /*初期=table-layout: fixed;テーブル固定レイアウト・ auto;テーブル自動レイアウト*/
}

table.table1 tr{
  background-color: #fff;
  border: 1px solid #bbb;
  padding: .25em;
}
table.table1 th,
table.table1 td {
  padding: 0.5em 10px 0.5em 0em;
  border-right: 1px solid #bbb;
}
table.table1 th {
  font-size: .85em;
}
table.table1 thead tr{
  background-color: #eee;
}
.txt{
   text-align: center;
   font-size: .85em;
}
.price{
   text-align: right;
}
@media screen and (max-width: 600px) {
  table.table1 {
    border: 0;
    width:70%			/*スマホ時の幅・max100%*/
  }
  table.table1 th.s1-1{			/*予約表・日付の背景色・平日*/
    background-color: #eee;
    display: block;
    border-right: none;
  }
  table.table1 th.s1-2{			/*予約表・日付の背景色・土曜*/
    background-color: #c5e7f5;
    display: block;
    border-right: none;
  }
  table.table1 th.s1-3{			/*予約表・日付の背景色・日陽*/
    background-color: #f8d6d8;
    display: block;
    border-right: none;
  }
  table.table1 thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.table1 tr {
    display: block;
    margin-bottom: .625em;
  }
  
  table.table1 td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: .8em;
    text-align: center;			/*○×の位置*/
    position: relative;
    padding: .200em .625em .200em 4em;
    border-right: none;
  }
  
  table.table1 td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
  
  table.table1 td:last-child {
    border-bottom: 0;
  }
}

/*改行スペース・コード
---------------------------------------------------------------------------*/
p.ue1{
	margin-top:1em;　　　　/*上にスペースを作る〜<p class=”ue1″>文章</p>*/
	}

p.shita1{
	margin-bottom:1em;　　/*下にスペースを作る〜<p class=”ue1″>文章</p>*/
	}	

p.us1{
	margin-bottom:1em;　　/*上下にスペースを作る〜<p class=”ue1″>文章</p>*/
	margin-top:1em;
}

/*続きを読む・見る・コード
---------------------------------------------------------------------------*/
/*続きを読む〜七五三画像など*/
.readmore{
    position: relative;
    box-sizing: border-box;
    /*以下お好み*/
    /* ボーダーを付ける場合 */
    padding: 0px;
    border: 0px solid #CCC;
}

.readmore-content{
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 1040px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 130px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}

/* 続きを読むボタン */
.readmore-label{
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 0 10px;
    background-color: #ff7777;
    border-radius: 10px;
    color: #FFF;
}
.readmore-label:before{
    content: '続きを見る';
}

.readmore-check{
    display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
    content: '';			/*最後に閉じるを表示する場合 content: '閉じる'; */
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
    display: none;
}

/*Q&Aコード
---------------------------------------------------------------------------*/

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa dt {
	position: relative;
	margin: 0 0 1.5em 0;
}
.cp_qa dd {
	position: relative;
	margin: 0 0 2em 0;
	padding: 0 0 1.5em 2em;
	border-bottom: 1px dotted #0097a7;
}
.cp_qa dt::before, .cp_qa dd::before {
	font-size: 1.2em;
	margin: 0 0.5em 0 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.2em;
}
.cp_qa dt::before {
	padding: 0.1em 0.3em;
	content: '\f128';
	background: #f57c00;
}
.cp_qa dd::before {
	padding: 0.12em 0.45em;
	content: '\f12a';
	background: #0097a7;
}
.cp_qa dt::after, .cp_qa dd::after {
	position: absolute;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-width: 5px 0 5px 5px;
	border-style: solid;
}
.cp_qa dt::after {
	left: 1.5em;
	border-color: transparent transparent transparent #f57c00;
}
.cp_qa dd::after {
	left: 3.5em;
	border-color: transparent transparent transparent #0097a7;
}

/*ボックスの変形・2020.9
---------------------------------------------------------------------------*/
.ripped:before, .ripped:after {
    content: "";
    height: 3px;
    width:100%;
    position: absolute;
    left: 0;
    right: 0;
    clip-path: polygon( 0 0, 5% 100%, 10% 0, 15% 100%, 20% 0, 25% 100%, 30% 0, 35% 100%, 40% 0, 45% 100%, 50% 0, 55% 100%, 60% 0, 65% 100%, 70% 0, 75% 100%, 80% 0, 85% 100%, 90% 0, 95% 100%, 100% 0);
}
.ripped:before{
    background:#fff;
    top:0;
    z-index:10;
}
.ripped:after{
    background:inherit;
    bottom:-3px;
}
.ripped{
    position:relative;
    background:#f4f9ff;
    color:#fff;
    box-shadow: 0 0 8px white;
    padding:0rem;
}

html { scroll-behavior: smooth;}


/*背景パターン・方眼紙2023.7
---------------------------------------------------------------------------*/
.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: -1;
}
.Paper_v2 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),
 
    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}