@charset "utf-8";
/* CSS Document */

/*----------------------
	デフォルトスタイル
-----------------------*/
body{
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size:1.2rem;
	background-color:#fff;
}

html {
  scroll-behavior: smooth;/* スムーズスクロール */
}


/* ■基本■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* アンカー直後に置いてページ内リンク調整 */
.height_100{height:60px;}




.main-contents {
max-width: 1000px;
margin: 0 auto;
text-align: left;
}

@media (max-width: 640px) {.main-contentsxxxxx {padding:0px 5px;}}




.h-01 {
	font-size: 1.5rem;
	background: #eaf5f9;
	padding: 10px 10px 10px 25px;
	position: relative;
	margin:0 0 5px 0;
	}
.h-01:before {
    position: absolute;
    top: 20%;
    left: 15px;
    width: 6px;
    height: 60%;
    content: '';
    border-radius: 3px;
    background: #006699;
}



A.call01{
  font-size:0.9rem;
  line-height:0.9rem;
  color: #000000;
  padding: 1px 15px;
  margin: 0;
  display: inline-block;
  background-image: linear-gradient(white,white,white,#f0f0f0);
  vertical-align: middle;
  border: solid 1px #cfcfcf;
  border-radius: 25px;
}

A.call01:before{
	content:url(/img/call01.png);
}





img.max {
	max-width:100%;
	min-width:10px;
	height:auto;
}



/* リンク色 */
a{
	color:#666666;
	text-decoration:none;
}

/*訪問後のリンク*/
a:visited {
    color:#666666;
    text-decoration:none;
}

/*■横幅で表示変更
--------------------*/

.PC{display:none;}
 
@media screen and (min-width:640px){
.SP{display:none;}
.PC{display:inherit;}
}


div.none{display:none;}

.fs07{font-size:0.7rem;}
.fs08{font-size:0.8rem;}
.fs09{font-size:0.9rem;}
.fs11{font-size:1.1rem;}
.fs12{font-size:1.2rem;}
.fs15{font-size:1.5rem;}
.fs20{font-size:2.0rem;}
.fs25{font-size:2.5rem;}

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

.white{color:#fff;}
.blue{color:#3399cc;}
.green{color:#2E7D32;}
.red{color:#FF0000;}
.orange{color:orange;}
.bold{font-weight:bold;}


.list01 {
    list-style-type: none;
    padding: 5px;
}

.list01 li {
    display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
	color:#339999;
}

.list01 li::before {
    display: inline-block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #339999;
    border-left: 2px solid #339999;
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}



.clear-both {clear:both;}

/* □基本□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */






/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
table.rental01{
	width:100%;
	padding:10px;	
}



/* □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */




/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */





/* ■prof.html■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

p.prof01{
	border-bottom:1px dotted #333;
	color:#336699;
	margin:20px 0 0;
	font-weight:bold;
}


/* □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */




/* ■INDEX.html■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

 
video.video {
 	top:0; 
 	width: 100%; 
 	height: 100%; 
 	background: #000; 
}



div.top01{
    color: #333;
    font-size: 1.5rem;
    margin: 0px 0px 10px;
    border-bottom: 1px #333 solid;
    padding: 10px;
    background: #fff;
}




span.item01{
font-size:1.2rem;
color:#333;
border-top:1px solid #333;
border-bottom:1px solid #333;
padding:10px 10px;
margin:0;
}


span.item02{
font-size:0.7rem;
color:#333;
}


span.item03{
font-size:0.9rem;
color:#333;
}






/* □INDEX.html□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */







/* ■pagetop■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/* ★フローティングボタン */
.fbutton{
    position: fixed;
    font-size: 0.8rem;
    font-weight:bold;
    z-index:999;
}

.fbutton a{
    background: #409EB5;
    text-decoration: none;
    color: #FFFFFF;
    border: 2px #FFFFFF solid;
    width: 80px;
    padding: 5px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}


.fbutton a:hover {
    text-decoration: none;
    background: #70D2F0;
    border: 2px #FFFFFF solid;
    color: #ffffff;
}

/*■上に戻るボタン　*/
.fbutton-1 {bottom: 10px; right: 10px;}

/*■トップページへ戻るボタン　*/
.fbutton-2 {bottom: 10px; left: 10px;}

/*■前のページへ戻るボタン　*/
.fbutton-3 {bottom: 46px; left: 10px;}



/* ★固定最上段 */

div#top{
padding-top: 50px;
}


#pc_head{
position: fixed;
top:0;
z-index:1001;
width:100%;
background:#fff;
opacity: 0.95; /* 不透明度を最大に */
border-bottom:1px solid #ccc;
}


.container {
display: flex;
justify-content: space-between;
}

.block01 {
            width: 230px;
            height: 50px;
            margin: 0px;
			display: flex;
            align-items: flex-end;
            padding: 0 5px;
justify-content: flex-start;  /* 左寄せ */
        }




.block02 {
            width: 230px;
            height: 50px;
            margin: 0px;
			display: flex;
            align-items: flex-end;
            padding: 0 5px;
flex-direction: column;
justify-content: flex-end;    /* 右寄せ */
margin-right: 100px;          /* 右端から100pxの間を空ける */
        }

@media (max-width: 800px) {.block02 {display:none;}}


.block03 {
            width: 40px;
            height: 40px;
            margin: 0px;
			display: flex;
            align-items: flex-end;
flex-direction: column;
justify-content: flex-end;    /* 右寄せ */
margin-top:5px;
margin-right: 100px;          /* 右端から100pxの間を空ける */
        }

@media (min-width: 800px) {.block03 {display:none;}}

@media (max-width: 400px) {.block03 {
    margin-right:60px;
    top: 5px;
    
}}




.topbox-04{ /* 電話番号 */
	font-size:30px;
	width:100%;
	color:#000;
	background:#fff;
    /* 垂直中央揃え */
    display: flex;
    justify-content: center;    /* 水平方向中央 */
    align-items: center;        /* 垂直方向中央 */
    height: 100px;              /* 高さを指定 */
	}






dialog:modal { /* モーダルウィンドウのカスタマイズ */
	border: 1px solid #000;
	background: #fff;
    border-radius:10px;
	max-width:900px;
	opacity: 1;
	max-height: 80vh;  /* ビューポートの90%までの高さ */
    overflow-y: auto;   /* 縦方向にスクロール */
}
 
dialog::backdrop { /* 背景となる部分のカスタマイズ */
	background: #000;
	opacity: .9;
}

/* ■■モーダル閉じるボタン */

button.close-btn{
width:60%;
border:1px solid #ccc;
background:#ff8000;
color:#fff;
font-size:20px;
    cursor :pointer;
    border-radius:15px;
}


/* ★メニューを開くボタン */

button.modal01 {
  display: block;
  position: fixed;
	top:0;
	right:0;
    padding:0;
    margin:0;
    background:none;
    border:0;
    font-size:0;
    line-height:0;
    overflow:visible;
    cursor:pointer;
  z-index: 1002;
}



/* 三本線メニューボタン */
.menu-button {
  display: block;
  position: fixed;
  top: 5px;
  right: 10px;
  cursor: pointer;
  background:#333;
  height: 40px;
  width: 40px;
  z-index: 1002;
}

.bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px 0;
  background-color: #fff;
}

.bar01 {
  margin: 10px 0 0 0;
}

/* 「MENU」文字表示ボタン */
.menu-btn2 { 
	color:#fff;
	font-size:10px;
    position: fixed;
    top: 5px;
    right: 50px;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 1090;
    background-color: #333;
}

@media (max-width: 400px) {.menu-btn2 {display:none;}}






p.menu03{
font-size:1rem;
font-weight:bold;
margin:10px 10px 0 10px;
border-bottom:1px dotted #ccc;
}

p.menu04{
font-size:0.8rem;
margin:0 10px;
}


p.menu05{
font-size:1.2rem;
color:#fff;
font-weight:bold;
background:#333;
border-left:15px solid #3399cc;
padding:3px 15px;
margin:30px 0 10px;
}


ul.cp_list {
  padding: 5px;
  list-style-type: none;
}


ul.cp_list li {
  position: relative;
  box-sizing: border-box;
  display: block;
  float: left;
  width: 100%;
  padding: 3px 0 3px 30px;
  margin-bottom:5px;
  border-bottom: 1px solid #ccc;
}



@media (min-width: 800px) {
  ul.cp_list li {
  width: 50%;    
  }
}







/* □pagetop□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */


















/* ■■box2個・幅100%縦並び→50%50%横並び */

.box5050-wrap{
  display: flex;
  flex-direction: column; /* デフォルトで縦並び */
}

.box5050-cmn{
width:95%;
margin-bottom:10px;
}

.box5050-1{
}

.box5050-2{
margin-left:3px;
margin-bottom:0;
}

@media (min-width: 1280px) {
  .box5050-wrap {
    flex-direction: row; /* 横並びに変更 */
    justify-content: space-between;
  }

  .box5050-cmn {
    width: 49%; /* 横並びの際の幅 */
    margin-bottom: 30px; /* 横並び時は余白をなくす */
  }
}