@charset "UTF-8"
/* CSS common.css / sakura */
/* 2018.7 var.1.0 */
/* 2025.10 var.2.0 */

/*.pc {display:block;}
/*.iphone {display:none;} */


/* common */
* {box-sizing: border-box;}
*,html {margin:0;padding:0;}
body {
  color: #077685;
  background-color:#ccc;
  border-top: 1px solid #ccc;
	font-size:16px;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	line-height:22px;
      width: 100%;
      background-image: url("../images/entity/bg_img.png");
}

header, main, footer{
  width: 480px;
  background-color:#fff;

  border-top: 1px solid #ccc;
  
}

@media screen and (min-width: 480px) {
  header, main, footer{
  }
}


/* 回り込み強制解除 */
.clear { clear:both; }
.clear hr { display:none; }



/* ▼ header ▼ */
header {
/*  position: fixed;
  display: flex;*/
  justify-content: space-between;
  align-items: center;
    margin: 0 auto;

/*  background: #eee;*/


  border-bottom: 1px solid #ccc;

}
/* △ header △ */

#logo {
  float: center;
  background-position: center;
	background-image: url("../images/entity/bg_img.png");
  background-repeat: no-repeat;
  height: 60px;
}

#nav {
  float: left ;
  display: inline-block;
}
#login_user {
  float: right;
height: 60px;
line-height: 60px;
padding-right: 20px;
  display: inline-block;
}


/* ▼ contents ▼ */
main {

  padding-bottom: 30px;
  text-align: center;
  line-height: 1.6;
  margin: 0 auto;
}
/* △ contents △ */

/* ▼ contents ▼ */
#contents {
/*  border-top: 1px solid #ccc;*/
}
/* △ contents △ */



/* ▼ footer ▼ */
footer {
    margin: 0 auto;
  padding: 20px 0;
  text-align: center;
}
/* △ footer △ */



/* ▼ form ▼ */
body,p,form,input {
  margin: 0;
}
#form {
  width: 320px;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #555;
}
#form .input {
  text-align: left;
  padding: 10px 0;
}
form p {
  font-size: 14px;
}
.form-title {
}
.mail,
.pass {
  margin-bottom: 20px;
}
input[type="email"],
input[type="password"] {
  width: 280px;
  padding: 4px;
  font-size: 14px;
}
.submit {
  text-align: right;
}

/* font */
#form p {
  color: #077685;
  font-weight: bold;
}
#form .form-title {
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 30px;
  color: #4eb4c2;
} /* skin */
#form {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 1px 10px #488a9e;
  -moz-box-shadow: 0px 1px 10px #488a9e;
  box-shadow: 0px 1px 10px #488a9e;
  border: solid #4eb4c2 1px;
  background: #fafafa;
}
#form .form-title {
  padding-bottom: 6px;
  border-bottom: 2px solid #4eb4c2;
  margin-bottom: 20px;
}
.btnset {
	display: flex;
	justify-content: center;
}
.submit input {
/*  float: right;*/
  margin: 15px 1px;
	font-family: "SF Pro JP", Arial, Verdana, sans-serif;
  color: #ffffff;
  padding: 5px 10px;
  text-decoration: none;
  box-shadow: 0px 8px 6px #e3e3e3;
  border: 0px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#61c7e0), to(#418da8));
  background: -moz-linear-gradient(top, #61c7e0, #418da8);
}
.back input {
/*  float: right;*/
  margin: 15px 1px;
	font-family: "SF Pro JP", Arial, Verdana, sans-serif;
  color: #ffffff;
  padding: 5px 10px;
  text-decoration: none;
  box-shadow: 0px 8px 6px #e3e3e3;
  border: 0px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), to(#999));
  background: -moz-linear-gradient(top, #bbb, #999);
}
.submit input:hover {
  background: #37a4bf;
}
.back input:hover {
  background: #aaa;
}
/* △ form △ */





/* ▼ global ▼ */
.btn {
	text-align:center;
	font-size:12px;
	margin:0px;
	padding:0px;
	width:50px;
	height:20px;
	border:1px solid gray;
	color:white;
	background-color:#09c;
}
.f12 {
	font-size: 12px;
	line-height: 15px;
}

a:link { color: #555; text-decoration: none;}
a:visited { color: #555; text-decoration: none;}
a:hover { color: hotpink; text-decoration: none;}
a:active {color: hotpink; }
a img { border:none;}

.center {text-align:center;}
.mail {
	font-size:11px;
	line-height:20px;
	padding-left:20px;
	background:url(../images/entry/pomo_icon/mail.gif) no-repeat;
}
.dl {
	font-size:11px;
	line-height:20px;
	padding-left:20px;
	background:url(../images/entry/pomo_icon/download.gif) no-repeat;
}

.img_l {float:left;margin-right:15px;}
.img_r {float:right;margin-left:10px;}

.f16 {font-size:18px;}
.f20 {font-size:28px;}
.center {text-align:center;}
.clear {clear:both;}

/*p {margin-left:20px;}*/
p.arrow {
	margin:5px 0 0 0;
	padding:0;
	text-align:right;
	margin-right:10px;
	line-height: 15px;
}
h1 {clear:both;
  display: inline-block;
  color: #077685;
	font-size:36px;
	padding-left:5px;
	border-top:1px solid #077685;
	border-bottom:1px solid #077685;
}

h2 {
/*	background:url(/example.png) no-repeat 3px 3px;*/
  color: #077685;
	padding-left: 25px;
	font-size:12px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
h3 {
	font-size:14px;
	padding-top:2px;
	padding-left:15px;
	border-top:1px solid #888;
	border-bottom:1px solid #888;
}
h4 {

	background-color:#ff6;
	width:168px;
	text-align:center;
	margin-bottom:5px;
	line-height:25px;
	font-size:12px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
/* タイトルネコ用 */
.rotete {
  display: inline-block;
  transform: scaleX(-1);
}

/* △ global △ */







/* ▼ karte ▼ */
#karte {
  display: block;
  margin: 0 25px auto;
  border: 1px solid #ccc;
/*  border-radius: 10px;*/
  box-shadow: 0px 1px 10px #ccc;
  table {
  width: 100%;
  margin: 0;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  }
  th, td {
    border-bottom: 1px solid #ccc;
  }
  th {
    background-color: #eee;
  }
  td {
    border-left: 1px solid #ccc;
  }
  .left {
    text-align: left;
    padding-left: 10px;
  }
  tr:last-child th,
  tr:last-child td {
    border-bottom: none;
  }
}



div.registration {
  display: inline-block;
  margin: 0 auto;
/*  background-position: left;
	background-image: url("../images/entity/icon_add_cat.svg");
  background-repeat: no-repeat;
  padding-left: 30px;*/
}






/* △ karte △ */








.red {color: red};
p.blue {color: #077685};
p.green {color: green};
p.gray {color: gray};























/* テスト用 *

p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 60px auto 40px;
}
table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {

    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}
*/





/* トプ画関係 */
div.cat_img {
  display: block;
  margin: 25px auto;
}
div.cat_img_main img {
  display: block;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0px 1px 10px #ccc;
  margin: 25px auto;
  max-width: 100%;
  height: auto;
}
div.cat_img_thumb img {
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 25px auto;
  width: 90px;
  height: auto;
}




#top_image {
  display: block;
  margin: 0 20px;
}

.gallery {/*親*/
  display: flex;
  margin: 0 auto;
/*  max-width: 480px;*/
  position: relative;
  left: ;
/*  padding-top: 66.6666666667%;*/
  padding-top: 450px;
}
.gallery__item{
  display: flex;
  margin: 0 auto;
}
.gallery__img {/*表示される大きな画像。エフェクト付き*/
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: block;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0px 1px 10px #ccc;
  margin: 25px auto;
  max-width: 100%;
  height: auto;
}
.gallery__thumb {/*サムネイル*/
  padding-top: 6px;
  margin: 6px;
  display: block;
}
.gallery__thumb img {/*サムネイル画像*/
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 25px auto;
  width: 90px;
  height: auto;
}
.gallery__selector {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.gallery__selector:checked + .gallery__img {/*大きな画像は全て透明にしておき、チェックが入ったら表示させる*/
  opacity: 1;
}
.gallery__selector:checked ~ .gallery__thumb > img {/*サムネは選択されたら枠が表示されるように*/
  box-shadow: 0 0 0 3px #0be2f6;
}