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

	reset styles

-------------------------------------------------*/



HTML, BODY, DIV, H1, H2, H3, H4, H5, H6, BLOCKQUOTE, PRE, ADDRESS, UL, OL, LI, DL, DT, DD, TABLE, TH, TD, FORM, FIELDSET {margin: 0;padding: 0;}
OL, UL {padding-left:20px;}
A{outline:none 0 #000000;text-decoration: none; }
A.siteaddress{background:#ca5380; color:#ffffff; padding: 0 0.5em; border-radius:1.2em}
IMG {border:0; max-width: 100%;}
SUP,SUB{vertical-align: baseline;position: relative;}
SUP {top:-4px }
SUB {top: 4px }



/*-------------------------------------------------

	basic text

-------------------------------------------------*/

BODY * {
	font-size: 16px;
	line-height:2.2em;
	color: #333333;
	font-family: fot-tsukubrdgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;
}



section{margin: 0; padding: 0;}
h2, h2 *{font-family: fot-tsukubrdgothic-std, sans-serif;font-weight: 700;font-style: normal;font-size:36px;line-height:60px; letter-spacing:0.1em}
h2.tight{letter-spacing:0}
h3, h3 *{font-family: fot-tsukubrdgothic-std, sans-serif;font-weight: 700; font-size:24px;}
h3.white_bg{text-align: center; background-color: #fff; border-radius: 1.2em; padding:0 1em; width: 90%; margin:2em auto; box-sizing: border-box;}
h3.black_bg{text-align: center; background-color: #000; color:#fff; border-radius:0.7em; padding:0.5em 2em; line-height: 30px; max-width: 90%; margin:2em auto; box-sizing: border-box;display: inline-block}
h4, h4 *{font-family: fot-tsukubrdgothic-std, sans-serif;font-size: 20px; line-height:30px}

.font80{font-size: 80%; line-height: 1.6em}
.font90{font-size: 90%; line-height: 1.7em}
.font100{font-size:100%;}
.font140{font-size:140%; line-height:1.8em}
.font200{font-size:200%; line-height:2.2em}
.font220{font-size:220%; line-height:3em}
.font220_mini{font-size:220%; line-height:3em}
.font30min{
	font-size:150px; 
	line-height:150px; 
	font-weight: bold; 
	color:white;
	-webkit-text-stroke: 3px #CA5380;
	text-stroke: 3px #CA5380;
}
.bold{font-weight: 700}
.tenmincho, .tenmincho *{font-family: ten-mincho, serif;}

@media screen and (max-width:680px){
.font80{font-size:90%; line-height: 1.2em}
.font90{font-size: 90%; line-height: 1.4em}
.font140{font-size:120%; line-height:1.6em}
.font200{font-size:160%; line-height:1.8em}
.font220{font-size:190%; line-height:2.2em}
.font220_mini{font-size:120%; line-height:1.6em}
}


#shopname{display: inline-block; border: #555 dotted 1px; border-width: 1px 0 1px 0; padding: 0.5em 1em; font-size: 120%; margin-bottom: 1em; margin-top: 2em}
#shopname span{font-size: 90%}


/*-------------------------------------------------

	usefull margin

-------------------------------------------------*/

.mb0 { margin-bottom:0;}
.mbSS { margin-bottom:10px;}
.mbS { margin-bottom:20px;}
.mbM { margin-bottom:30px;}
.mbL { margin-bottom:50px; }
.pbM { padding-bottom:20px;}
.mt0 { margin-top:0; }
.mtS { margin-top:20px; }
.mtM { margin-top:30px; }
.mtNega { margin-top:-30px; }
.mtL { margin-top:50px; }
.mlS { margin-left:10px; }
.mlM { margin-left:20px; }
.mlL { margin-left:30px; }
.mrS { margin-right:10px;}
.mrM { margin-right:20px;}
.mrL { margin-right:30px;}
.mrNo { margin-right:0;}
.ml_negative { margin-left:-1em;}
.mt_negative{ margin-top:-6em; }

.ptS{padding-top: 2em}
.ptM{padding-top: 3em}
.ptL{padding-top: 8em}
.pbS{padding-bottom: 2em}
.pbM{padding-bottom: 3em}
.pbL{padding-bottom: 8em}

@media screen and (max-width: 680px){
	.mbM,.mbL{margin-bottom:20px;}
	.mtM,.mtL{margin-top:20px;}
	.mrM{margin-right:10px; }
	.mlM{margin-left:10px; }
	
	
.mt_negative{ margin-top:-4em; }

.ptS{padding-top: 1em}
.ptM{padding-top: 1.7em}	
.ptL{padding-top: 3em}
.pbS{padding-bottom: 1em}
.pbM{padding-bottom: 1.7em}
.pbL{padding-bottom:3em}
}


/*-------------------------------------------------

	usefull item

-------------------------------------------------*/

.tar {text-align:right;}
.tac {text-align:center;}
.tal {text-align:left;}
.taj{text-align: justify}
.fl_l {float:left;}
.fl_r {float:right;}
.fl_l_10 {float:left;margin-right:10px;}
.fl_l_20 {float:left;margin-right:20px;}
.fl_l_30 {float:left;margin-right:30px;}
.fl_r_10 {float:right;margin-left:10px;}
.fl_r_20 {float:right;margin-left:20px;}
.fl_l_sp{float:left;}
.fl_r_sp {float:right;}



.clearfix:after {

	height: 0;

	visibility: hidden;

	content: ".";

	display: block;

	clear: both;

}

.clearfix {

	_height: 1px;

	min-height: 1px;/*￥*//*/

  height: auto;

  overflow: hidden;

  /**/

}



.parenthesis{margin-left: -0.4em}

.spbr{display: none;}
@media screen and (max-width: 680px){
.spbr{display:block; height:1px; width: 1px;}
}



.pcbr{display:block; height:1px; width: 1px;}
@media screen and (max-width: 680px){
.pcbr{display: none;}
}


.img100{max-width: 100%}
.img90{max-width: 90%}
.img60{max-width: 60%}
.img40{max-width: 40%}
.coverimg{width: 100%}
img.imgintxt{display: inline-block}
img.lheight{height: 1.5em; width: auto; bottom:-0.2em; position: relative}

.sp_spacer{display: none;}
@media screen and (max-width: 680px){
.sp_spacer{display:block; padding-top: 3em;}
}





ruby rt{font-size: 80%}




@media screen and (max-width: 680px){
.sptal{text-align: left!important;}
}

/*-------------------------------------------------

	main

-------------------------------------------------*/

.main{width:100%;max-width:900px; margin: auto; overflow-x: hidden; position: relative; text-align: center}


/*-------------------------------------------------

	catch

-------------------------------------------------*/

#catch{width:100%;background-image:url(../img/mainimage.png);background-position: right 0px bottom; height:550px; text-align: center;
            -webkit-animation: bgscroll 15s linear;
            animation: bgscroll 15s linear;border-bottom-right-radius: 1500px 1000px;
border-bottom-left-radius: 1500px 1000px;
margin-left: -200px;
margin-right: -200px;
padding-left: 200px;
padding-right: 200px;
padding-top: 150px;
margin-bottom:60px;
}
			
    @-webkit-keyframes bgscroll {
        0% {
            background-position: right 100px bottom;
        }
        100% {
            background-position: right 0px bottom;
        } bottom;
        }
    }
    
    @keyframes bgscroll {
        0% {
            background-position: right 100px bottom;
        } bottom;
        }
        100% {
            background-position: right 0px bottom;
        } bottom;
        }
    }
			

#catch img {max-width:100%; margin: auto; left: 0; rught:0}




/*-------------------------------------------------

	decotration

-------------------------------------------------*/


.parenthesis {
  position: relative;
  width:85%;
  max-width:500px;
  margin: auto;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
  position: absolute;
  top: 0;
  content: '';
  width: 20px;
  height: 100%;
  border-top: 3px solid #555;
  border-bottom: 3px solid #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before {
  left: 0;
  border-left: 3px solid #555;
}
.parenthesis::after {
  right: 0;
  border-right: 3px solid #555;
}



.parenthesis_tate {
  position: relative;
  margin: auto;
  padding:30px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;

}
.parenthesis_tate::before,
.parenthesis_tate::after {
  position: absolute;
  left:50%;
  margin-left: -5em;
  content: '';
  height: 20px;
  width:10em;
  border-right: 3px solid #555;
  border-left: 3px solid #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis_tate::before {
  top: 0;
  border-top: 3px solid #555;
}
.parenthesis_tate::after {
  bottom: 0;
  border-bottom: 3px solid #555;
}

.parenthesis_tate h2{text-align: left; writing-mode:vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;text-orientation: upright; margin: auto; }


.speech-bubble {
	display: inline-block;
	max-width: 300px;
	height: 65px;
	box-sizing: border-box;
	position: relative;
	border-radius:0.5em;
	background-color: #ffffff;
	line-height: 60px;
	margin-left: 3em;
	padding: 0 1em;
	margin-bottom:30px;
	border: #000000 2px solid;
	font-size:30px
	}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #ffffff;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -16px;
}

.speech-bubble:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #000000;
	border-bottom: 0;
	border-left: 0;
	margin-left: -12px;
	margin-bottom: -20px;

}

.hige {
  position: relative;
	bottom:-1.7em;
  display: inline-block;
  width:auto;
  max-width:500px;
  margin:2em auto 0;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.hige::before,
.hige::after {
  position: absolute;
  bottom:-10px;
  content: '';
  width:auto;
  height: 100%;

}
.hige::before {
  left: -20px;
  content:url(../img/hige_before.png);
}
.hige::after {
  right:-20px;
  content:url(../img/hige_after.png);
}



.border_dot{display: inline-block;border: #3F3F3F dotted 4px; padding:0 1em; background-color:#F8DBE5; height: 2em; line-height:2em; margin: auto; border-radius: 0.7em; font-size: 24px; font-weight: 700 }
.bg_ygreen{background-color: #DCE775; font-size: 200%; letter-spacing: 0.2em; width: 200px;}

/*-------------------------------------------------

	originalsection

-------------------------------------------------*/


#onayami{background-image: url(../img/bg_onayami.png); background-repeat: no-repeat; background-position:right 200px bottom; background-size:70% auto; position: relative;
border-bottom-right-radius: 1500px 1000px;
border-bottom-left-radius: 1500px 1000px;
margin-left: -200px;
margin-right: -200px;
padding-left: 200px;
padding-right: 200px;
padding-top:10%;
padding-bottom:60%;
margin-bottom:60px;
background-color:#c4d9ec;}
#onayami img{max-width:60%;position: relative}
#onayami img:nth-child(1),#onayami img:nth-child(3){left:-3em}
#onayami img:nth-child(2),#onayami img:nth-child(4){right:-3em}
@media screen and (max-width: 480px){
#onayami{padding-bottom:320px}
}


.textsec{text-align: justify; padding-bottom: 150px}
p{padding:1.5em; font-size: 14pt}
p.nopad{padding:0}
@media screen and (min-width: 481px){
p.nopad{padding:1em}
}

.emphasis{color:#CA5380; font-size:150%; font-weight: 700}
.bborder_p{border-bottom: 2px solid #CA5380;}
.bborder_b{border-bottom: 1px solid #555555; max-width: 90%; margin: auto; padding-bottom:1em}

#toha{background-image: url(../img/bg_toha.png); background-repeat: no-repeat; position: relative; background-size: cover;
padding-bottom:60%;
margin-bottom:60px;
background-color:#e3e4e9;}


.br_orange{border: #FFAB91 15px solid; padding:1em; box-sizing: border-box; margin: 7em auto;}

.br_gray{border: #8A8A8A 15px solid; padding:1em; box-sizing: border-box; margin: 7em auto;}

.arrow{position: relative; z-index: 500; display: block; margin: auto; top:-100px; background-image: url(../img/arrow.png); background-repeat: no-repeat; width:120px; height:190px; margin-bottom: -100px;}

/*-------------------------------------------------

	bgcolor

-------------------------------------------------*/

.bg_blue{background-color:#c4d9ec; position: relative }
.bg_blue_cir{background-color:#c4d9ec; position: relative;border-bottom-right-radius: 1500px 1000px;
border-bottom-left-radius: 1500px 1000px;
margin-left: -200px;
margin-right: -200px;
padding-left: 200px;
padding-right: 200px;
padding-bottom:100px;
margin-bottom:60px;}
.bg_gray{background-color:#e3e4e9; position: relative }
.bg_pink_cir{background-color:#F8DBE5; position: relative;
border-bottom-right-radius: 1500px 1000px;
border-bottom-left-radius: 1500px 1000px;
margin-left: -200px;
margin-right: -200px;
padding-left: 200px;
padding-right: 200px;
padding-bottom:100px;
margin-bottom:60px;}


/*-------------------------------------------------

	footer

-------------------------------------------------*/

#footer{width:100%; padding:1em 0; border-top: #bcbcbc solid 1px;margin: 2em 0 0; }
#footer .inner *{ line-height:1em;}
#footer .inner{max-width:1100px;margin:auto;display: table}
#footer .inner img{width:120px;display:table-cell;}
#footer .inner span.logotext{font-size:1.4em; padding: 0 0 0 20px;display:table-cell; vertical-align: middle; }
#footer .inner p.address{font-size:0.8em; padding: 0 0 0 20px;  display:table-cell; vertical-align: middle; }
.copy{margin-top:1em; font-size: 80%; text-align: center}


#footer .inner{text-align: center; display:block; padding:1.5em}
#footer .inner img{width:80px;display:block; float: left; margin-right: 1em; margin-bottom: 2em}
#footer .inner span.logotext{font-size:1.2em;text-align: left; display:block; margin-bottom: 0.5em}
#footer .inner p.address{display:block;}
#footer .inner:after{clear: both}
.copy{margin-top:0.5em;}




/*-------------------------------------------------

	link

-------------------------------------------------*/
a.bt_like{ display:inline-block; border:#555 3px solid; padding:0 1em; text-align: center; width: 75%; max-width: 500px; background-color: #fff; height: 2.5em; line-height: 2.5em; font-size:26px; margin:2em auto; text-decoration: none; font-weight: 700; position: relative}
a.bt_like:after{
  content: "";
  position: absolute;
  top: 50%;
  right:20px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #555;
  border-right: 3px solid #555;
  transform: rotate(45deg);
  margin-top: -5px;
}

a.bt_like_mini{font-size:15px;}


/*-------------------------------------------------

	data

-------------------------------------------------*/

dl.price{display:flex; max-width:70%; margin:1em auto 100px;position: relative;flex-wrap: wrap;}
dl.price dt,dl.price dd{display: block; box-sizing: border-box; font-size:18px; border-top:1px solid #555;height:5em; line-height: 5em;}
dl.price dt{padding-right: 0.5em; font-weight: 700;text-align: center; border-right:1px solid #555; width:190px; }
dl.price dd{font-size: 0.95em; padding:0.5em 0 0 0.5em; width:calc(100% - 190px);}
dl.price dd .yen{font-size:1.8em;}
dl.price dd.sololine{line-height:5em; padding: 0 0 1em 1em}
dl.price dt:first-child{border-top: none}
dl.price dd:nth-child(2){border-top: none}

@media screen and (max-width: 680px){
dl.price{width:95%; max-width: 100%}
dl.price dd{line-height:1.6em;}
dl.price dd .yen{line-height:1.4em;}	
}