@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}

body {
  line-height: 1.3;
  background:  url(../img/bg.png) no-repeat,no-repeat fixed ,linear-gradient(-135deg, #fff0f5, #fdffff);

  background-size: cover;
  color: #626063;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block;
}

nav ul, li {
  list-style: none;
}

.tag {
	color: #4496d3;
	font-weight: bold;
}

.pink {
	color: #ff3b9d;
}

.wrap .wrap-top{
	width: 100%;
	margin: 0 auto;
}

.okazu_logo {
	text-align: center;
}

.wrap-top h2 {
	font-size: 50px;
	color: #ff3b9d;

}


.baekago_h1 {
	font-size: 30px;
}

.accent {
	color: #ff3b9d;
	font-weight: bold;
}

.concept {
	width: 100%;
	padding: 0px 0;
	text-align: center;
	display: block;
}

.concept img {
	
	text-align: center;
	margin-bottom: 0;
}

.concept_t {
	display: block;
	width: 100%;
	background: linear-gradient(-135deg, #d5d4fc, #d4e2fc);
	border-top: 12px double #f0faff;
		border-bottom: 12px double #f0faff;
	padding: 70px 0;
	margin-top: 0;
}


.concept_t p {
	line-height: 2em;
	font-weight: bold;
	font-size:  20px;
	color: #3e5989;
}

 .concept .con_text {
	font-size: 20px;
	text-align: left;
	font-weight: normal;
	width: 79%;
	margin: 0 auto;
}

.con_text  {
	padding: 40px;
}

.cast_head {
	padding-top: 90px;
	padding-bottom: 30px;
}


.cast_head h3 {
	font-size: 55px;
	padding: 20px 0;
	letter-spacing: 0.08em;
	border-left: 10px double #afc8ce;
	border-right: 10px double #afc8ce;
	width: 85%;
	background: #ffffff;
		}


.contents_wrap {
	padding: 30px;
	/*background: #fafdff;*/
}

.cast {
	width: 90%;
	margin: 0 auto;
overflow: hidden;
padding-left: 5px;
}


.cast h4 {
	font-size: 25px;
	padding: 20px;
	background: linear-gradient(-135deg, #d5d4fc, #d4e2fc);
	color: #3e5989;
}

.cast_box {
	width: 30%;
	display: inline-block;
	float: left;
	padding-right: 28px;
	text-align: center;
		margin-top: 40px;
}

.sub {
	background: #666666;
}

.m_head h3 {
	font-size: 35px;
}

.m_head p {
	font-size: 25px;
	font-weight: bold;
}




.shop {
	width: 90%;
	margin: 0 auto;
	padding-left: 2%;
}

.shop a {
	text-decoration: none;
	color: #4496d3;
}


.shop_box {
	display: inline-block;
	margin-left: 1.5%;
	
	margin-top: 20px;
	width: 30%;
	overflow: hidden;
	background: #ffffff;
	margin-bottom: 30px;
		border-bottom: 8px double #afc8ce;
}

.shop_box img {
	width: 100%;
}

.shop_box h3 {
	overflow: hidden;
	height: 1.5em; 
	text-align: center;
	letter-spacing: 0.02em;
	color: #505d68;
	padding: 20px 0;
	font-size:16px;
	border-bottom: 1px #e7f5f7 solid;

}

.shop_box img {
	margin-bottom : 0;
}

.shop_box p {

	overflow: hidden;
	height: 1.5em; 
	font-size: 14px;
	text-align: center;
	padding: 20px 0;
	background: #ffffff;
	color: #666666;
	margin-top: 0;
	border-bottom: 1px #e7f5f7 solid;
}


blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

q:before, q:after {
  content: '';
  content: none;
}


table {
	width: 80%;
	margin: 0 auto;
	clear: both;
	margin-bottom: 100px;
}

table ul li {
	margin: 8px 0;
}

.link {
	color: #ed1e79;
	text-decoration: none;
	font-weight: bold;
}

.kkb {
	float: left; 
	display: inline;
	margin: 1% 0 1% 1%;
	
}

.kkb:hover{
	opacity: 0.9;
}

.link:hover {
	color: rgba(255,140,0,1);
}


}


.shop img {
	width: 100%;
}


a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}



.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pr0 {
  padding-right: 0px !important;
}

.pl0 {
  padding-left: 0px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mb8 {
  margin-bottom: 8px !important;
}

.mr8 {
  margin-right: 8px !important;
}

.ml8 {
  margin-left: 8px !important;
}

.pt8 {
  padding-top: 8px !important;
}

.pb8 {
  padding-bottom: 8px !important;
}

.pr8 {
  padding-right: 8px !important;
}

.pl8 {
  padding-left: 8px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mr16 {
  margin-right: 16px !important;
}

.ml16 {
  margin-left: 16px !important;
}

.pt16 {
  padding-top: 16px !important;
}

.pb16 {
  padding-bottom: 16px !important;
}

.pr16 {
  padding-right: 16px !important;
}

.pl16 {
  padding-left: 16px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mr24 {
  margin-right: 24px !important;
}

.ml24 {
  margin-left: 24px !important;
}

.pt24 {
  padding-top: 24px !important;
}

.pb24 {
  padding-bottom: 24px !important;
}

.pr24 {
  padding-right: 24px !important;
}

.pl24 {
  padding-left: 24px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.mr32 {
  margin-right: 32px !important;
}

.ml32 {
  margin-left: 32px !important;
}

.pt32 {
  padding-top: 32px !important;
}

.pb32 {
  padding-bottom: 32px !important;
}

.pr32 {
  padding-right: 32px !important;
}

.pl32 {
  padding-left: 32px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.mt48 {
  margin-top: 48px !important;
}

.mb48 {
  margin-bottom: 48px !important;
}

.mr48 {
  margin-right: 48px !important;
}

.ml48 {
  margin-left: 48px !important;
}

.pt48 {
  padding-top: 48px !important;
}

.pb48 {
  padding-bottom: 48px !important;
}

.pr48 {
  padding-right: 48px !important;
}

.pl48 {
  padding-left: 48px !important;
}

.mt56 {
  margin-top: 56px !important;
}

.mb56 {
  margin-bottom: 56px !important;
}

.mr56 {
  margin-right: 56px !important;
}

.ml56 {
  margin-left: 56px !important;
}

.pt56 {
  padding-top: 56px !important;
}

.pb56 {
  padding-bottom: 56px !important;
}

.pr56 {
  padding-right: 56px !important;
}

.pl56 {
  padding-left: 56px !important;
}

.mt64 {
  margin-top: 64px !important;
}

.mb64 {
  margin-bottom: 64px !important;
}

.mr64 {
  margin-right: 64px !important;
}

.ml64 {
  margin-left: 64px !important;
}

.pt64 {
  padding-top: 64px !important;
}

.pb64 {
  padding-bottom: 64px !important;
}

.pr64 {
  padding-right: 64px !important;
}

.pl64 {
  padding-left: 64px !important;
}

.mt72 {
  margin-top: 72px !important;
}

.mb72 {
  margin-bottom: 72px !important;
}

.mr72 {
  margin-right: 72px !important;
}

.ml72 {
  margin-left: 72px !important;
}

.pt72 {
  padding-top: 72px !important;
}

.pb72 {
  padding-bottom: 72px !important;
}

.pr72 {
  padding-right: 72px !important;
}

.pl72 {
  padding-left: 72px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mr80 {
  margin-right: 80px !important;
}

.ml80 {
  margin-left: 80px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pb80 {
  padding-bottom: 80px !important;
}

.pr80 {
  padding-right: 80px !important;
}

.pl80 {
  padding-left: 80px !important;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col-1 {
  width: 74.66667px;
}

.row .col-2 {
  width: 181.33333px;
}

.row .col-3 {
  width: 288px;
}

.row .col-4 {
  width: 394.66667px;
}

.row .col-5 {
  width: 501.33333px;
}

.row .col-6 {
  width: 608px;
}

.row .col-7 {
  width: 714.66667px;
}

.row .col-8 {
  width: 821.33333px;
}

.row .col-9 {
  width: 928px;
}

.row .col-10 {
  width: 1034.66667px;
}

.row .col-11 {
  width: 1141.33333px;
}

.row .col-12 {
  width: 1248px;
}

.row [class*='col-'] {
  float: left;
}

.cf, .wrap, .wrap-main {
  *zoom: 1;
}
.cf:after, .wrap:after, .wrap-main:after {
  content: "";
  display: table;
  clear: both;
}

.width-100 {
  width: 100%;
}

.font-xsmall {
  font-size: 13px;
  font-size: 0.8125rem;
}

.font-small {
  font-size: 15px;
  font-size: 0.9375rem;
}

.font-normal {
  font-size: 18px;
  font-size: 1.125rem;
}

.font-large {
  font-size: 22px;
  font-size: 1.375rem;
}
@media (max-width: 599px) {
  .font-large {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

.font-xlarge {
  font-size: 26px;
  font-size: 1.625rem;
}
@media (max-width: 599px) {
  .font-xlarge {
    font-size: 20px;
    font-size: 1.25rem;
  }
}

.font-bold {
  font-weight: bold;
}

.flL {
  float: left;
}

.flR {
  float: right;
}

.aL {
  text-align: left;
}

.aR {
  text-align: right;
}

.ac, .footer {
  text-align: center;
}

.color-red {
  color: red;
}

.color-pink {
  color: #ff3366;
}

.color-white {
  color: white;
}

.bg-red {
  background: red;
}

.bg-yellow {
  background: #fbc700;
}

.bg-skyblue {
  background: deepskyblue;
}

.bg-green {
  background: green;
}

.bg-gray {
  background: gray;
}

.bg-ghostwhite {
  background: ghostwhite;
}



.fab {
	margin-right: 15px;
}

@media (max-width: 1024px){
	.contents_wrap {
	width: 100%;
	padding: 0;
}

.cast_head {
	padding-top: 80px;
}


/*.shop {
	width: 100%;
}*/

.cast {
	margin-bottom: 15px;
}

.cast_box {
	margin-left: 40px;
	width: 25%;
	display: block;
	float:left;
	text-align: center;
	margin-top: 40px;
}

.cast_box h4 {
	height: 30px;
	font-size: 18px;
}

.shop_box {
	margin-left: 50px;
	
	/*width: 45%;*/
}
.shop_box p {
	font-size: 15px;
}
}

@media (max-width: 768px) {

.concept_t p{
	text-align: left;
	width: 95%;
	margin: 0 auto;
}

.cast_head {
	padding-top: 80px;
}

.m_head  h3 {
	margin-top: 0;
	font-size: 25px;
}

.m_head p {
	font-size: 20px;
}

.contents_wrap {
	width: 100%;
	padding: 0;
}

.shop {
	width: 100%;
}

.cast {
	margin-bottom: 15px;
}

.cast_box {
	margin-left: 17px;
	width: 26%;
	display: block;
	float:left;
	text-align: center;
	margin-top: 40px;
}

.cast_box h4 {
	height: 1.5em;
	font-size: 13px;
	
}

.shop_box {
	margin-left: 19px;
	width: 45%;
}
.shop_box p {
	font-size: 15px;
}

}



@media (max-width: 599px) {



.button2 a:hover {
  box-shadow: 0 3px 0 #007299;
  margin: 12px auto 8px;
  text-decoration: none;
}

.bg-lightgreen {
  background: #b8e6b8;
}

.line-teal {
  border: 2px solid #006a6c;
}

.bg-lightyellow {
  background: #ffffb3;
}

.line-kogane {
  border: 2px solid #e6b422;
}

html {
  font-family: Verdana,Meiryo,Hiragino Kaku Gothic Pro W3,Hiragino Kaku Gothic Pro,MS PGothic,sans-serif;
  word-wrap: break-word;
}
html a {
  text-decoration: underline;
}

body {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  background-color: #fcfcfc;
}

@media (min-width: 600px) and (max-width: 958px) {
  .wrap {
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 599px) {
  .wrap {
    width: 100%;
    margin: 0 auto;
  }
  
 }

table ul li {
	font-size: 10px;
}

.wrap {
	width: 100%;
}

.concept_t {
	padding-top: 0;
}

.m_head h3 {
	font-size: 25px;
}

.m_head p {
	font-size: 18px;
	padding: 8px;
}

.concept_t p {
	font-size: 15px!important;
	line-height: 2em;
	padding: 0 5px;
	margin-bottom: 30px;
}

.cast_head {
	padding-top: 80px;
	font-size: 30px;
}

.cast_head h3 {
	font-size: 20px;
	padding: 20px 0;
}

.contents_wrap {
	width: 100%;
	padding: 0;
}

.shop {
	width: 100%;
}

.shop img {
	width: 100%;
}

.cast {
	margin-bottom: 15px;
	padding: 0;
}

.cast_box {
	margin-left: 17px;
	width: 90%;
	display: block;
	float:left;
	text-align: center;
	margin-top: 40px;
}

.cast_box h4 {
	height: 30px;
	font-size: 18px;
}

.shop_box {
	margin-left: 19px;
	width: 90%;
}



.shop_box h3 {
	font-size: 13px;
}

.shop_box  p {
	font-size: 12px;
}

.wrap-top h2 {
	font-size: 25px;
}

}

.wrap-main {
  width: 90%;
  margin: 0 auto;
}

@media (max-width: 599px) {
	.wrap {
		width: 100%;
	}
	
}

@media (min-width: 600px) and (max-width: 958px) {
  .wrap-main {
        width: 100%;
  }


.pad {
	display: none;
}
  

  
}
@media (max-width: 599px) {
  .wrap-main {
        width: 100%;
  }
}

img {
  max-width: 100%;
}

.page-top {
	display: inline-block;
  position: fixed;
  bottom: 20px;
  right: 20px;
}


@media (max-width: 599px) {
  .page-top {
    position: fixed;
    bottom: 0px;
    right: 10px;
  }
}
@media (max-width: 599px) {
  .page-top img {
    width: 50px;
  }
}






h2 {
	font-size:30px;
	color: #333333;
}

@media (max-width: 599px) {
  h2 {
   font-size: 28px;
    font-size: 1.25rem;
  }
}

h3 {
  font-size: 20px;
  font-size: 1.25rem;
}

h4 {
  font-size: 16px;
  font-size: 1rem;
}

p, ul li, dl, dt, dd {
  font-size: 15px;
  font-size: 0.9375rem;
}



dl.pg-2 {
  width: 100%;
  line-height: 1.2;
}
@media (max-width: 599px) {
  dl.pg-2 {
    margin: 8px 0;
  }
}

.pg-2 dt {
  float: left;
  width: 50px;
  background: black;
  padding: 1px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.pg-2 dd {
  margin-top: 5px;
  margin-bottom: 5px;

}



.naiya-gaiya {
  width: 50%;
}

.footer {
	clear: both;
  padding: 20px 0;
  color: #ffffff;
  background-color: #333333;
}

.footer a {
	color: #eeeeee;
}


.footer a:hover {
	color: rgba(255,140,0,1);
}

@media (max-width: 599px) {
  .footer {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

.inv-table {
  width: 100%;
}
@media (max-width: 599px) {
  .inv-table {
    margin: 0 auto;
  }
}

.inv-table th {
  width: 40%;
  text-align: center;
}

.inv-table th, .inv-table td {
  box-sizing: border-box;
  padding: 16px;
  /*-border: 1px solid #000;-*/
}





.col {
  border: 0px solid transparent;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
}

@media screen and (min-width: 0px) {
  .col {
    margin-left: 1%;
    padding: 0 0%;
  }
  

  

  /* --- Gridpak variables ---*/
  .row .col:first-child {
    margin-left: 0;
  }

  .span-1 {
    width: 7.41667%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }

  .span-2 {
    width: 15.83333%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }

  .span-3 {
    width: 24.25%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }
  .span-4 {
    width: 32.66667%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }
  .span-5 {
    width: 41.08333%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }
  .span-6 {
    width: 49.5%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }
  .span-7 {
    width: 57.91667%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }
  .span-8 {
    width: 66.33333%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }

  .span-9 {
    width: 74.75%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }

  .span-10 {
    width: 83.16667%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }

  .span-11 {
    width: 91.58333%;
    border-left-width: 0;
    padding: 0 0%;
    margin-left: 1%;
  }

  .span-12 {
    margin-left: 0;
    width: 100%;
  }
}
@media screen and (min-width: 0px) and (max-width: 599px) {
  .span-3 {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  .span-4 {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  .span-5 {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  .span-6 {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  .span-7 {
    margin-left: 0;
    width: 100%;
  }
}