@charset "utf-8";
* { margin: 0; padding: 0; font-size: 16px; line-height: 1.8em;}
ul {list-style:none}
img {vertical-align: middle;}

html {
	text-align: left;
                                background:  #473b2e url("../images/bg.gif") center top repeat-y fixed;
                                background-size: 100%
}
body {

	color: #383022;
	margin: 0 auto;
	padding: 0;
	font-size: 15px;
	line-height: 1.6em;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica" , "Arial" ,"Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
                                font-feature-settings: "palt";
}		
* html body {
	font-size: 100%;
	padding-left: 1px;
}
*:first child+html body {
	font-size: 100%;
}
*:first child+html body {
	padding-left: 1px;
}

a {
                                word-break: break-all; 
                                transition: all .2s ease-out;
}

a:link,
a:visited {
	text-decoration: underline;
	font-weight: bold;
	font-size: inherit;
	color:#870536;
	}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	font-size: inherit;
	color: #ddd;
	}
a:active {
	text-decoration: none;
	font-weight: bold;
	font-size: inherit;
	text-decoration: none;
	color: #333;
	}
a.btn {
	text-decoration: none;
                                font-size: 16px;
                                border: 3px solid;/*線色*/
	font-weight: bold;
                                padding: 0.4em 0.5em 0.5em;/*文字周りの余白*/
                                border-radius: 30px;/*角丸*/
                                line-height: 1em;
                                display: block;
                                text-align: center;
                                max-width: 400px;
                                margin: 1em 0 0;
}
a.btn br {
                                line-height: 1.3;
}
a:hover.btn {
                                background: #870536;
	text-decoration: none;
                                color: #fff;
}

img {
	border:0;
	max-width: 100%;
}
p {
	margin: 1rem 0;
	padding: 0;
}
hr {
	clear: both;
	visibility: hidden;
}
hr.white {
	clear: both;
	visibility: visible;
                                height: 8px;
                                margin: 0;
                                padding: 0;
                                border: 0px none;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom: 5px;
}
h1 {
	line-height: 1;
}
h2 {
	font-size: 22px;
	line-height: 1.333;
	font-family: 'Kaisei Tokumin', serif;
                                font-weight: 700;
                                margin: 0 auto 1em;
                                text-align: center;
                                text-align: left;
                                border-bottom: double 6px;
	color:#870536;
}

h3 {
	font-size: 20px;
	line-height: 1.2;
	color:#870536;
                                border-bottom: 1px dotted #870536;
}
h4 {
	font-size: 18px;
	line-height: 1.2;
                                border: 3px solid;
                                border-width: 0 0 2px 8px;
                                color: #6f7a13;
                                margin: 0 auto 0.5em;
}
h5 {
                                font-weight: bold;
	line-height: 1.2;
}
.middle {
                                font-weight: 400;
	font-size: 85%;
}
.middle br{
	font-size: 85%;
}
.little {
                                font-weight: 400;
	font-size: 75%;
	line-height: 1.2;
}
.little br{
	font-size: 75%;
	line-height: 1.2;
}
.small {
	font-size: 65%;
	line-height: 1.5;
}
.right {
	text-align: right;
}



.red {
	font-size: 100%;
                                color: #b60918;
	line-height: 1;
}



.pc {
	display: none
}


div#wrapp {
	position: relative;
	margin: 0 auto 50px;
	padding: 0 10px;
	clear: both;
}

div#SNS {
	position: absolute;
	top: -5px; right:10px;
	line-height: 0;
	margin: 0 auto;
	z-index: 12000;
        width: 200px;
}
#SNS ul li {
	width: 80px!important;
	margin: 0;
	float: left;
	text-align: left;
	line-height: 0;
	padding: 16px 0 0;
}
#SNS ul li.twitter {
	padding: 0 10px 0 0;
	margin: -5px 0 0 0;
}
iframe.twitter-share-button {
	padding: 20px 0 0;
	width: 90px!important;
}



header {
                                position: relative;
                                margin: 0 auto;
                                padding: 40px 0 5px;
                                background:  url("../images/header_bg.gif") center top;
                                background-size: 1287px;
}
#header_photo {
                                background:  url("../images/header_photo.jpg") repeat-x center top;
                                background-size: 1287px;
                                padding: 300px 0 20px;
                                margin: 20px auto;
}
header h1 {
                                padding: 0 35px;
                                margin: 0 auto;
                                max-width: 350px;
                                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}



section {
                                margin: 0 10px 1rem;
                                padding: 0;
                                overflow: hidden;
                                position: relative;
}
section h1 {
                                text-align: center;
	font-family: 'Kaisei Tokumin', serif;
                                font-weight: 700;
                                font-size: 5vw;
                                color: #fff;
                                margin: 80px 10px 0;
                                padding: 0 0 0.5rem;
                                background:  url("../images/h1_bg.png") no-repeat center center;
                                background-size: 100%;
}

div.mainContents {
                               background: #c2bba7;
                                border: 5px solid #383022;
                                border-radius: 10px;
                                padding: 1rem 15px;
	transition: .5s;
}
.half_contents {
                                margin: 0;
                                padding: 0 0 10px;
}

.contents {
                                margin: 0 auto;
	transition: .5s;
}
section#about {
                                margin: 1.5rem 10px  1rem;
                                padding: 0;
}
#about h2 {
                                background: url("../images/line_top.png") repeat-x top center;
                                background-size: 42px;
	font-size: 14px;
	line-height: 1.8;
                                margin: 0 auto;
                                text-align: left;
                                text-align: justify;
                                font-weight: 400;
                                color: #fff;
                                padding: 25px 15px;
                                background-image: url("../images/line_top.png"), url("../images/line_bottom.png");
	background-position: left top, left bottom;
	background-size: 45px, 45px;
	background-repeat: repeat-x, repeat-x;
                                border-bottom: 0;
}


#whatsnew h2 {
                               margin: 0 auto 0.5rem;
                                font-weight: 400;
                                text-align: left;
                                border-bottom: double 6px;
}
dl {
                               margin: 0 0 1rem;
                               height: 400px;
                               overflow-y: scroll;scrollbar-color: #709a82;
                                 padding: 0;
}
dt {
                               margin: 0;
                                padding: 1em 0 0;
                                font-size: 18px;
                                font-weight: bold;
}
dd {
                                margin: 0;
                                padding: 0 1em 1em 0;
				line-height: 1.4em;
                                border-bottom: 1px dotted #000;
}

div#melody {
                                border-bottom: 2px solid #163a80;
                                margin: 0 0 1em;
}

div#twitter h2 {
	font-size: 18px;
	line-height: 1.1;
                                margin: 0 auto 0.6em;
}



iframe {
                                width: 100%;
                                height: 230px;
}
div#melody iframe, iframe.melody{
                                width: 100%;
                                height: 60px;
}
div#twitter_window {
                                max-width: 400px;
                                margin: 0 auto;
}


/* osusume ----------------------------------------*/
#osusume ul.backnumber li  {
                                margin: 0 0 1em;
}
#osusume div.backnumber  {
                                margin: 0 0 1em;
}

/* info ----------------------------------------*/
div.infoContents {
                                margin:0 0 3rem;
}
#info ul {
                                margin:0 0 3rem;
}
#info ul li {
                                margin:0 0 1.5em;
}


/* products ----------------------------------------*/
.products {
                                margin:0 auto;
                                line-height: 1.2;
                                text-align: center;
}
.products hr {
	clear: both;
	visibility: hidden;
                                height: 30px;
}
.products ul li {
                                width:48%;
                                float: left;
                                font-size: 13px;
                                line-height: 1.2;
                                padding: 10px 1% 20px 1%;
}
.products ul li br {
                                line-height: 1.2;
}
.products ul li h3 {
	font-size: 17px;
                                border-bottom: 1px solid
}
.products img {
                                margin: 0 auto 5px;
                                display: block;
}


#profile h2 ,#link h2 {
                                color: #fff;
}
#profile p {
                                line-height: 2;
                                letter-spacing:0.8pt;
                                text-align: justify;
}

.slider{
    margin: 30px auto;
    width: 80%;
max-width: 450px;
}
.slider img{
    height: auto;
                                margin: 0 auto;
max-height: 450px;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
p.comment{
                                text-shadow:none;
                                font-size: 13px;
                                padding:3px 5px;
                                text-align: center;
                                margin: 0 auto;
}


img.kazari_p {
                                display: none;
}

/* column ----------------------------------------*/
#column p {
                                max-width: 650px;
                                margin: 1rem auto 
}

/* yukari ----------------------------------------*/
#yukari ul li {
                                margin:0 0 3em;
                                letter-spacing:0.8pt;
                                text-align: justify;
                                min-height: 300px;
}
div.yukari_photo {
                                display: block;
                                margin: 0.5em auto;
                                text-align: center;
}
div.yukari_photo img{
                                height: 200px
}



#link {
                                text-align: center;
}
#link ul li {
                                margin: 0 auto 1em;
                                text-align: center;
}
#link a.btn {
                                margin: 0 auto;
                                text-align: center;
}


footer {
	margin: 30px auto 0;
	padding: 30px 5px 80px;
	text-align: center;
	clear: both;
                                color: #fff;
                                font-size: 13px;
}
footer a.q_a {
                                color: #ac3a94;
                                padding: 3px;
	text-decoration: none;
                                border: 1px solid
}
footer a:hover.q_a {
                                opacity: 0.8;
                                background: #fff
}

footer small {
	line-height: 1em;
                                font-size: 13px;
}
footer small br{
	line-height: 1em;
}



iframe {
                                max-width: 450px;
                                height: 300px;
}


#page-top {
                                display: none;
}


/*768px以上 ----------------------------------------*/

@media screen and (min-width:768px){


.sp {
	display: none
}
.pc {
	display: block;
}



div#wrapp {
	clear: both;
}

.half_contents {
                                width: 46%;
                                padding: 20px 2%;
                                float: left;
                                margin: 0;
}
.half_contents:nth-of-type(2n) {
                                margin: 0 0 0 0;
}



#page-top {
	position: fixed;
	display: block;
	right: 10px;
	bottom: 20px;
	padding: 0;
	z-index: 777;
	height: 80px;
	width: 80px;
	font-family: 'Kaisei Tokumin', serif;
                                font-weight: bold;
	text-align: center;
                                font-size: 30px;
                                line-height: 1em;
	color:#fff;
}
#page-top a {
	text-decoration: none;
	line-height: 1.5;
	padding: 0;
	display: block;
	opacity: 0.8;
	color:#fff;
	height: 50px;
	width: 50px;
                                background: #ac3a94;
                                border-radius: 25px;/*角丸*/
}
#page-top a:hover {
	opacity: 1;
	text-decoration: none;
}

div.yukari_photo {
                                display: block;
                                float: right;
                                margin: 0.5em 1em 0 2em;
}
div.yukari_photo img{
                                height: 300px
}


}


/*990px以上 ----------------------------------------*/

@media screen and (min-width:980px){



h2 {
	font-size: 24px;
}

h3 {
	font-size: 20px;
}

div#SNS {
	top: 55px; right: 10px;
}

section {
                               width: 1080px;
                                margin: 0 auto;
                                padding: 2rem auto 5rem;
}
section#about {
                                margin: 1.5rem auto 2rem;
                                padding: 0;
                               width: 980px;
}
#about h2 {
                                font-size: 20px;
                                text-align: center;
                                padding: 40px 0;
}

section h1 {
                                font-size: 40px;
                                margin: 80px auto 1rem;
                                padding: 10px 0 1rem;
                                background:  url("../images/h1_bg.png") no-repeat center center;
                                background-size: contain;
                                width: 600px;
                                letter-spacing: 0.2rem;
}
div.mainContents {
                               width: 900px;
                                margin: 0 auto;
                                padding: 40px
}
#melody h2 {
                                margin: 0.2em auto 0.3em;
}
section#head {
                                padding: 0;
}
.contents {
}


header {
                                margin: 0 auto 50px;
                                padding: 30px 0 3px;
                                background-size: 1387px;
}
#header_photo {
                                background-size: 1387px;
                                padding: 360px 0 0;
                                margin: 20px auto;
}
header h1 {
                                padding: 0 35px;
                                max-width: 380px;
}

.half_contents {
                                width: 400px;
                                float: left;
                                margin: 0 10px;
                                padding: 0;
}
.half_contents:nth-of-type(2n) {
                                margin: 0 0 0 0;
}
#whatsnew {
                                width: 460px;
                                height: 460px;
                                margin: 0 30px 0 10px;
}
ul.backnumber  {
}
.backnumber li  {
                                width: 48%;
                                margin: 0 1% 1em;
                                display: inline-block;
                                padding: 0 1%;
                                vertical-align: top;
}
#osusume div.backnumber  {
                                width: 45%;
                                margin: 0 0 1em;
                                display: inline-block;
                                padding: 0 2%;
                                vertical-align: top;
}

.products ul li {
                                width:260px;
                                margin: 0 20px 20px;
                                float: left;
                                font-size: 13px;
                                padding: 10px 0;
                                height: 580px;

}


img.kazari_p {
                                display: block;
                                position: absolute;
                                width: 240px;
}
#kazariA {
                                top: 600px; right: 100px;
}
#kazariB {
                                top: 1850px; right: 100px;
}
#kazariC {
                                top: 3350px; right: 100px;
}
#kazariD {
                                top: 3730px; left: 100px;
}
#kazariE {
                                bottom: 2150px; right: 120px;
}
#profile .p_text {
                                letter-spacing:0.8pt;
                                font-size: 17px;
                                width: 75%;
                                margin: 0 auto 2em;
}
#profile p.comment{
                                text-align: center;
}
div.infoContents {
                                margin:0 0 4em;
}

}


.list{
	overflow: hidden;
}
.list li{
	transition: .5s;
}
.list-mv07 {
	opacity: 0;
	transform: translate(0,150px); 
	-webkit-transform: translate(0,150px); 
}
.mv07 {
	opacity: 1;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}