@charset "utf-8";

/*?@???G?????Ή??@*/
@font-face {
  font-family: MyFontFamily;
  src: local("Hiragino Kaku Gothic ProN"),
       local("Meiryo");
}

@font-face {
  font-family: MyFontFamily;
  font-weight: bold;
  src: local("Hiragino Kaku Gothic ProN"),
       local("Meiryo Bold");
}

@font-face {
  font-family: MyFontFamily;
  src: local("Segoe UI Emoji"),
       local("Segoe UI Symbol"),
       local("Apple Color Emoji"),
       local("Noto Color Emoji"),
       local("Noto Emoji");
  unicode-range: /*U+23, U+2A, U+30-39,*/ U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2, U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E, U+2611, U+2614-2615, U+2618, U+261D, U+2620, U+2622-2623, U+2626, U+262A, U+262E-262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267B, U+267F, U+2692-2697, U+2699, U+269B-269C, U+26A0-26A1, U+26AA-26AB, U+26B0-26B1, U+26BD-26BE, U+26C4-26C5, U+26C8, U+26CE-26CF, U+26D1, U+26D3-26D4, U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733-2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F004, U+1F0CF, U+1F170-1F171, U+1F17E-1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201-1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250-1F251, U+1F300-1F321, U+1F324-1F393, U+1F396-1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F-1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595-1F596, U+1F5A4-1F5A5, U+1F5A8, U+1F5B1-1F5B2, U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB-1F6EC, U+1F6F0, U+1F6F3-1F6F8, U+1F910-1F93A, U+1F93C-1F93E, U+1F940-1F945, U+1F947-1F94C, U+1F950-1F96B, U+1F980-1F997, U+1F9C0, U+1F9D0-1F9E6, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

@font-face {
  font-family: MyFontFamily;
  font-weight: bold;
  src: local("Segoe UI Emoji"),
       local("Segoe UI Symbol"),
       local("Apple Color Emoji"),
       local("Noto Color Emoji")
       local("Noto Emoji");
  unicode-range: /*U+23, U+2A, U+30-39,*/ U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2, U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E, U+2611, U+2614-2615, U+2618, U+261D, U+2620, U+2622-2623, U+2626, U+262A, U+262E-262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267B, U+267F, U+2692-2697, U+2699, U+269B-269C, U+26A0-26A1, U+26AA-26AB, U+26B0-26B1, U+26BD-26BE, U+26C4-26C5, U+26C8, U+26CE-26CF, U+26D1, U+26D3-26D4, U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733-2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F004, U+1F0CF, U+1F170-1F171, U+1F17E-1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201-1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250-1F251, U+1F300-1F321, U+1F324-1F393, U+1F396-1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F-1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595-1F596, U+1F5A4-1F5A5, U+1F5A8, U+1F5B1-1F5B2, U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB-1F6EC, U+1F6F0, U+1F6F3-1F6F8, U+1F910-1F93A, U+1F93C-1F93E, U+1F940-1F945, U+1F947-1F94C, U+1F950-1F96B, U+1F980-1F997, U+1F9C0, U+1F9D0-1F9E6, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

.toCartButton {
/*ページ下部に固定*/
    position: fixed;
    bottom: 0px;
    width: 100%;
 
}


.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  margin:0 auto;
  text-decoration: none;
  background: #008000;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
    margin:0 auto;

}




html {
  font-family: MyFontFamily,'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','?q???M?m?p?S?V?b?N',YuGothic,'Yu Gothic','???C???I', Meiryo,'?l?r ?o?S?V?b?N','MS PGothic', sans-serif;
}

/*?@???G?????Ή??@*/


body{
background: #eee;
/*font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','?q???M?m?p?S?V?b?N',YuGothic,'Yu Gothic','???C???I', Meiryo,'?l?r ?o?S?V?b?N','MS PGothic' */
}

#container{
max-width: 600px;
margin: 0 auto;
background: #ddd;
}

#hedder{
background: #FFF;
padding:10px;
}

#hedder p{
font-size:0.6rem;
color:#999;
text-align:right;
margin:0;
padding:10px;
line-height: 1.2;
border-top: #eee solid 1px;
}

#wrapper{
margin: 0 auto;
padding: 0 5px;
}

#wrapper .box{
background: #FFF;
padding: 0px 10px;
}


div .img{
text-align: center;
margin: 0 0 20px;
}

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

h1 {
		font-size: 1.6rem;
		line-height: 1.2;
		font-weight: bold;
		text-align: justify;
		text-justify: inter-ideograph;
		padding: 10pt;
		border-bottom: solid 3px;
		margin: 0;
}

h2 {
    color: #a40000;
    font-size:1.2rem;
    font-weight: bold;
    line-height: 1.4em;
    margin: 60px 0 20px;
    padding: 0 10px 10px;
    border-bottom: #ba7878 solid 2px;
    border-left: #ba7878 solid 6px;
    text-align: justify;
    text-justify: inter-ideograph;
}

h3 {
    margin: 30px 0 20px;
    padding: 0.5em;
    background: #002265;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    text-align: justify;
    text-justify: inter-ideograph;
}


a{
  text-decoration: none;
/*  padding: 0 10px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(49, 170, 226) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
*/
}
/* 
a:hover{
  background-position: -100% 0;
  color: #fff;
}*/

.big{
font-size:1.2rem;
}

.big2{
font-size:2rem;
}

.small{
font-size:1rem;
}

.small2{
font-size:0.8rem;
}

.comments{
font-size:0.8rem;
text-align:right;
}

.bold{
    font-weight: bold;
}

.red{
color:#ff0000;
}

.yellow {
    background: #ffff4d;
}


.blue2 {
    background: #59c9f2;
}

.blue {
    background: #b8c9e6;
}

.pink {
    background: #f4859d;
}

.pink2 {
    background: #ffe6ea;
}

.fff{
color:#ffffff;
}

.under {
    text-decoration: underline;
}

.wave_red {
background:url(./images/wave-red.png) bottom repeat-x; 
background-size: 20px;
}

.center{
text-align:center;
}

p{
font-size: 1rem;
line-height: 2;
text-align: justify;
text-justify: inter-ideograph;
margin: 0px 0 20px;
text-align: justify;
text-justify: inter-ideograph;
}

dd{
line-height: 1.8;
text-align: justify;
text-justify: inter-ideograph;
margin: 10px;
}

dd img{
text-align: center;
margin: 0;
width: 100%;
max-width: 100%;
}

dt{
line-height: 1.8;
text-align: justify;
text-justify: inter-ideograph;
margin: 0 0 10px 0;
background: #000;
color:#fff;
}

ul{
    background: #edf0f6;
    padding: 20px;
    list-style:none;
    line-height: 1.8;
}

dl{
background: #eee;
text-align: justify;
padding: 20px;
}

/*?{?^??*/
.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #668ad8;/*?{?^???F*/
    color: #FFF;
    border-bottom: solid 4px #627295;
    border-radius: 3px;
}
.square_btn:active {/*?{?^???韂????Ƃ?*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*???ɓ???*/
    border-bottom: none;/*?・・B?*/
}

.ptop20{
padding-top:20px;
}


/*?A?j???[?V????*/

div.animationBtn img{

/*?f?U?C??
display:block;
width:80%;*/


/*?A?j???[?V?????{?^???p*/
animation: animScale 3s infinite ease-out;
transform-origin: 50% 50%;
animation-play-state:running;
    width: 100%;
    margin: auto;
    position: absolute;
    top: 36%;
    left: 0%;
}

/**/
@keyframes animScale {
0% { transform: scale(1, 0.9); }
5% { transform: scale(1, 1.1); }
10% { transform: scale(1, 1); }
15% { transform: scale(1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

.joi{
    background-image: url("./images/joi_bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%;
    padding-top: 55%;
    position: relative;
}


div.animationBtn2 img{

/*?f?U?C??
display:block;
width:80%;*/


/*?A?j???[?V?????o?[?p*/
animation: animScale 3s infinite ease-out;
transform-origin: 50% 50%;
animation-play-state:running;

}

/**/
@keyframes animScale {
0% { transform: scale(1, 0.9); }
5% { transform: scale(1, 1.1); }
10% { transform: scale(1, 1); }
15% { transform: scale(1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}


/*???K???T???A?j??*/
-------------------------------------
@-webkit-keyframes bounceIn {
  from {
    opacity: 0;
  }

  35% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  40% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  70% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  80% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from {
    opacity: 0;
  }

  35% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  40% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  70% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  80% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {

  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;

  -webkit-animation-duration: 6.00s;
  animation-duration: 6.00s;

  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
-------------------------------------

@-webkit-keyframes zoomOut {
  from {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  35% {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1.0);
    transform: scale3d(1.0, 1.0, 1.0);
  }

  40% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  35% {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1.0);
    transform: scale3d(1.0, 1.0, 1.0);
  }

  40% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-duration: 6.00s;
  animation-duration: 6.00s;
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

-------------------------------------


.relative {
    position: relative;
}

.absolute-a {
    position: absolute;
    left:0;
    top:0;
}

/*???K???T???A?j??*/

/*??css?A?j??*/
.album {
	margin: auto;
	background-image: url(http://www.nis2011.com/page/article_cct02/gold/chacotta_d/img/0424smp/smp_video_bg.jpg);
	background-size: 100%;
	background-color: white;
	position: relative;
}

.album img {
	width: 80%;
	animation-name: album;
	-webkit-animation-name: album;

	animation-duration: 20s;
	-webkit-animation-duration: 20s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;

	opacity: 0;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:1.5s;
	-webkit-animation-delay:1.5s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img3 {
	animation-delay:3s;
	-webkit-animation-delay:3s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img4 {
	animation-delay:4.5s;
	-webkit-animation-delay:4.5s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img5 {
	animation-delay:6s;
	-webkit-animation-delay:6s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img6 {
	animation-delay:7.5s;
	-webkit-animation-delay:7.5s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img7 {
	animation-delay:9s;
	-webkit-animation-delay:9s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img8 {
	animation-delay:10.5s;
	-webkit-animation-delay:10.5s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img9 {
	animation-delay:12s;
	-webkit-animation-delay:12s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img9_1 {
	animation-delay:13.5s;
	-webkit-animation-delay:13.5s;
	position: absolute;
	top: 0;
	left: 10%;
}

.album .img10 {
	animation-delay:15s;
	-webkit-animation-delay:15s;
	position: absolute;
	top: 0;
	left: 10%;
}


.album .img11 {
	animation-delay:16.5s;
	-webkit-animation-delay:16.5s;
	position: absolute;
	top: 0;
	left: 10%;
}

@keyframes album {
	0% {
		opacity: 1;
	}
	
	8.3% {
		opacity: 1;
	}

	20% {
		opacity: 0;
	}

}

@-webkit-keyframes album {
	0% {
		opacity: 1;
	}
	
	8.3% {
		opacity: 1;
	}

	20% {
		opacity: 0;
	}













}