#wrap{
  background-color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;

}

img{
  max-width: 100%;
   height: auto;
    margin: 0 auto;

  } 

.bunner-img{
max-width: 100%;



}

.top{


}

@charset "utf-8";

* {
	padding: 0;
	margin: 0;
}

html{
	height: 100%;

    overflow-x : hidden;
    -webkit-overflow-scrolling: touch;

}


body {
	width: 500px;
	color: #111;
	background-color: #fff;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	word-wrap: break-word;
	height: auto;
	margin-right: auto;
  margin-left: auto;

	
    -webkit-overflow-scrolling: touch;
}



header {
	
	width:100%;
	background-color: #FFF;

	z-index: 300;

}

header h1 a img {
	display: block;
	position: relative;
	width: 30%;
	float: right;
	align-items: center;
	margin :10px 20px 0 0;

}

header p{
	text-align: center;
	margin-top: -15px;

}


p{
	color: #000;
}

h3{
	color: #000;
	font-family: serif;
	padding:30px 0 0 20px;	
}


li {
	list-style-type: none;
}


a {
	color: #0066CC;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
	text-decoration: none;
}
a:hover {
	color: #0099CC;
	text-decoration: none;
}

li p{

	color: #fff;
	padding: 10px;
	text-align: center;
}




#top {
	padding-top: 100px;
	background-color:  #007095;
	padding-bottom: 5px;
}


/*footer {
	background-color:	#320C00;
	color:#eee8aa;
	clear: both;
	max-width: 100%;
	display: block;

}

footer h4{
	text-align: center;
	font-size:16px;
}

footer p{
	font-size:10px;
	text-align: center;

}*/

*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	min-height: 100%;
	position: relative;
}
body {
	margin-bottom: 5em;
}

footer {
	position: -webkit-sticky;
	position: fixed;
	bottom: 33px;
	left: 0;
	width: 500px;

	text-align: center;

}

footer .sns {
	float: right;
	width: 100%;
	margin-bottom:-40px;
filter: drop-shadow(2px 4px 11px rgba(0,0,0,0.6));
text-align: center;



}




footer .sns a {
	font-weight: bold;
	
	float: left;
	-webkit-transition: all, 0.3s;
	        transition: all, 0.3s;
	text-align: center;
	text-decoration: none;
	color: white;
}
footer .sns a:hover {
	-webkit-transition: all, 0.3s;
	        transition: all, 0.3s;
	background-color: #000;
}
footer .sns .insta {
	font-size: 1.2em;
	width: 20%;
	background-color: #000;
}
footer .sns .fb {
	font-size: 1.2em;
	width: 20%;
	background-color: #000;
}
footer .sns .tw {
	font-size: 1.2em;
	width: 20%;
	background-color: #000;
}
footer .sns .contact {
	font-size: 0.7em;
	width: 50%;
	background-color: #fff;
	color:#ffff00;
}


@media (max-width: 600px) {
	body{
		width: 100%;
	}
	.contents {
		margin-bottom: 200px;
	}
	footer {
		height: auto;
		margin-top: 60px;
		width: 100%;


	}
	footer .copyright {
		width: 100%;

	}
	footer .copyright p {
		padding: 0;
		text-align: center;
		background-color: #000;


	}
	footer .sns {
		width: 100%;
				position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
	}



}

.map_u {
	background-color:#000;
	color:#fff;
	clear: both;
	max-width: 100%;
	display: block;
	text-align: center;
	padding: 20px;

}

.map_u h4{
	text-align: center;
	font-size:16px;
}
.map_u p{
	font-size:12px;
	text-align: center;

}
/*
トップピックアップバナー
-------------------------------------------*/
.pick {
	max-width: 100%;

}

.pickup {
	background-color: #000;
	
}



.pickup ul {
	display: block;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
		margin-bottom: -10px;
	
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.pickup ul{
	display: flex;
    justify-content: center;

}
.pickup ul li {
	max-width: 100%;


}
.pickup ul li a .pu_icon {
	position: absolute;
	top: -5px;
	left: -5px;
	background-color: #0085B2;
	color: #FFF;

	font-weight: bold;

}

.pickup p{
	width: 100%;
padding:10px; 
background-color:#fff;
text-align: center;
margin-bottom:10px; 
border-radius: 20px;

}

hr {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #db7093;
}




.menu_btn,
.btn_close {
	display: none;
}

@media screen and (max-width:460px){


input,
textarea {
	max-width: 300px !important;
}

.content table.table_01 th,
.content table.table_01 td {
	max-width: 100%; !important;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#sub_top {
	font-size: 16px;
}

.content h2 {
	font-size: 24px;
}

.map{
max-width: 100%;	
}



}
/*(/～460)*/


/*
エフェクト
-------------------------------------------*/
.effect {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
	transform: translateY(20px);
	-webkit-transform: translateY(20px);  
    -moz-transform: translateY(20px); 
	-webkit-transition: 1.0s ease-out;
	-moz-transition: 1.0s ease-out;
	transition: 1.0s ease-out;
}
.effect.d_02 {
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
}
.effect.d_04 {
transition-delay:0.4s;
-webkit-transition-delay:0.4s;
}
.effect.d_06 {
transition-delay:0.6s;
-webkit-transition-delay:0.6s;
}
.effect.d_08 {
transition-delay:0.8s;
-webkit-transition-delay:0.8s;
}
.effect.start {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	transform: translateY(0px);
	-webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);    
}
.content p.check {
	color: #FF3333;
}
.content p.p_st {
	font-size: 20px;
	color: #CA28B1;
}

.flex_test-box {
    background-color: #eee;     /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
}
 
.flex_test-item {
    padding: 10px;
    color:  #fff;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 100%;                 /* 幅指定 */
}
 
.flex_test-item:nth-child(1) {
    background-color:  #ff69b4; /* 背景色指定 */
}
 
.flex_test-item:nth-child(2) {
    background-color:  #ff69b4; /* 背景色指定 */
}
 
.flex_test-item:nth-child(3) {
    background-color: #ff69b4; /* 背景色指定 */
}

/* メモ　クリップ　Ａ */
.clip-box-a {
 position: relative;
 margin: 1.5em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #B8860B; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}
.clip-box-a::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-a::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #B8860B; /*背景色と同じ色にする*/
 z-index: 2;
}

.reflection-img{
position    :relative;
    overflow    :hidden;
}

.reflection {
    height      :100%;
    width       :20px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 4s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 4s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 4s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 4s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 4s ease-in-out infinite;
}

@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* くまBOX B*/
.kuma-box-b {
 position: relative;
 margin: 4.5em auto 3em;
 padding: 20px 30px;
 width: 90%; /* ボックス幅 */
 background: #DFC29D; /* ボックス背景色 */
 color: #543f32; /* 文字色 */
 font-weight: bold; /* テキスト太字（不要なら行を削除） */
 text-align: center; /* テキスト中央（不要なら行を削除） */
 border: 10px solid #DFC29D; /* ボックス枠線(太さ・線種・色) */
 border-radius: 50px;
 box-shadow: 0 0 3px 2px #cccccc; /* ボックス影（不要なら行を削除） */
 z-index: auto;
}
.kuma-box-b::before, 
.kuma-box-b::after {
 height: 20px;
 width: 30px;
 border-radius: 50%;
 position: absolute;
 content:'';
 top: -45px;
 box-shadow: 0 0 3px 2px #cccccc; /* 耳の影（不要なら行を削除） */
 z-index: -10;
}
.kuma-box-b::before {
 left: 10px;
 background: #A27F6A; /* 左耳背景色 */
 border: 20px solid #DFC29D; /* 左耳枠線(太さ・線種・色) */
}
.kuma-box-b::after {
 right: 10px;
 background: #A27F6A; /* 右耳背景色 */
 border: 20px solid #DFC29D; /* 右耳枠線(太さ・線種・色) */
}
.kuma-wrap-b{
 background-color: transparent;
 position: relative;
 z-index: 0;
}
.area {
background-image: url(vio-bg01.png);
margin-top:-40px;
background-size: 100%;
background-repeat: no-repeat;

}