@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,500,700');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');


body {
    font-family: 'Noto Sans JP', 'Open Sans', Arial, Verdana, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;    
	font-weight:400;
    font-size: 18px;
    line-height: 36px;
    color:#3c0100;
}

/* reset */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP', 'Open Sans', Arial, Verdana, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;        
}
#mainNav .navbar-nav .nav-item .nav-link {
    font-family: 'Noto Sans JP', 'Open Sans', Arial, Verdana, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
    font-weight: 700;
    font-size: .9rem;
}
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
    color: #D70050;
}
#mainNav .navbar-nav .nav-item .nav-link.active {
    color: #D70050!important;
}
.page-section {
    padding: 4rem 0;
    background:#FEF6EA;
}
.navbar-light .navbar-toggler {
    border:0
}
.bg-dark {
  background-color: #f4f7fa !important;
}
header.masthead {
  /*height:50%;*/
  padding-top: 1rem;
  padding-bottom: calc(10rem - 72px);
  background: url("../img/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

main {
    width: 100%;
    overflow: hidden;
}
.reset_wrap .kv {
    position: relative;
}
.reset_wrap .kv img {
    width: 100%;
}

@media (max-width: 768px) {
    body{
        font-size: 16px;
    }
    header.masthead {
        padding:0;
        padding-bottom:20px;
        width:100%;
        height:auto;
        background: url("../img/header-sp.jpg");
    }
    .page-section {
        padding: 2rem 0;
    }
    .text-left-sl {
        text-align: left;
    }
}

/* common */
.sp { display:none }
.aka { color:#D70050 }
a { color:#3c0100 }
a:hover {
    color:#D70050;
    text-decoration:underline;
}
a:hover img  {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
span.line {
    background: linear-gradient(transparent 60%, #fff100 30%);
    /*display: inline-block;*/
    font-weight: 700;
}

span.ttl {
    margin-bottom:20px;
    display: block;
    font-size: 1.8em;
}
span.ttl::before {
    content: '';
    width: 22px;
    height: 42px;
    margin-right: 15px;
    background: url(../img/common/ttl_left.png) bottom center no-repeat;
    display: inline-block;
    position: relative;
    top: 10px;
}
span.ttl::after {
    content: '';
    width: 22px;
    height: 42px;
    margin-left: 15px;
    background: url(../img/common/ttl_right.png) bottom center no-repeat;
    display: inline-block;
    position: relative;
    top: 10px;
}

div.boxline {
 	--border-color:black;/*カッコの色*/
	margin: 2em auto;
	padding:2em;/*内側余白*/
	position: relative;
    background:#F2E3DB;
    /*background-image: repeating-linear-gradient(-45deg,#f2ddd1 0, #f2f3f7 3px,transparent 3px,transparent 6px);*/
}
div.boxline::before,
div.boxline::after{
    content: '';
	width: 20px;
	height: 30px;
	position: absolute;
}
div.boxline::before {
	border-left: solid 1px var(--border-color);
	border-top: solid 1px var(--border-color);
	top: 0;
	left: 0;
}
div.boxline::after {
	border-right: solid 1px var(--border-color);
	border-bottom: solid 1px var(--border-color);
	bottom: 0;
	right: 0;
}

.btn-box {
    margin-top:20px;
}
.btn {
    display: block;
    border-radius: 100vh;
    padding: 0.8em 0.6em;
    background: #ED6952;
    
    color: #fff;
    font-size: 1.6em;
    font-weight: 700;
    
    text-decoration:none;
    border-bottom: 5px solid #f29f63;
}
.btn-h {
    padding: 0.50em;
    font-size: 1.4em;
}
.btn-s{
    padding: 0.3em 0 0.6em;
    font-size: 1.0em;
    line-height: 1.2em;
    border-radius: 1vh;
}
.btn:hover {
  color:#3c0100;
  margin-bottom: 3px;
  border-bottom: 2px solid #f29f63;
}
.btn-h:before {
  display: inline-block;
  content: url('../img/common/cart.svg');
  width: 36px;
  padding-right: 10px;
}

/* section */
section a {
    text-decoration: underline;
}
section img {
   width:100%;
}
h2 {
    font-weight: 700;
}
h2.box {
    position: relative;
    padding: 1rem 2rem calc(1rem + 10px);
    background: #c6f1af;
    margin-bottom: 1.4em;
    text-align: center;
    color: #3c0100;
}
h2.box:before {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 100%;
    height: 100%;
    content: '';
    border: 4px solid #3c0100;
}

h3 {
    font-weight: 600;
    font-family: 'Noto Sans JP';
    text-align: center;
}

.pb--1 {
    padding-bottom: 2rem!important;
}

@media (max-width: 768px) {
    .pc {display: none}
    .sp {display: block}
    h2.box {
        font-size: 1.5em;
        padding: 1rem 0.9rem calc(0.9rem + 10px);
        margin-bottom: 1.0em;
        text-align: left;
    }
    .mb-5 {
        margin-bottom: 1rem !important;
    }
    section img {
	   width:100%;
	   height: auto;
	}
}

/**/
.masthead .vec {
    padding:0 40px;
    font-size: 50px;
    color:#8a8e8e;
}
.masthead h1 span {
    font-size:2.3rem;
}
@media (max-width: 768px) {
    .masthead h1 span { font-size:1.8rem; }
}

/* section */
h1.copy,
p.copy {
    font-size:2.2em;
    font-weight: 600;
    line-height: 1.2em;
    text-align:center;
}
	@media (max-width: 768px) {
		h1.copy,
		p.copy {
			font-size: 1.5em;
			/*text-align: left;*/
		}
	}
	
#lineup {}
.lineup-box {
	background: #fff;
	text-align: center;
	padding-top: 40px;
}
.lineup-box img {
	padding: 0 15px 15px;
}
.lineup-description {
	font-size: 0.8em;
	text-align: left;
	line-height: 1.8em;
	padding: 30px 30px 30px;
    background: #F2E3DB;
    background-image: repeating-linear-gradient(-45deg, #f2ddd1 0, #f2f3f7 3px, transparent 3px, transparent 6px);
}
.lineup-description span {
	display: block;
	font-weight: 700;
	font-size: 1.2em;
}
	@media (max-width: 768px) {
		.lineup-box {
			padding-top: 20px;
		}
		.lineup-box .small {
			font-size: 0.7em;
		}
		.lineup-description {
			padding: 22px;
		}
	}

#column { background:#e3fce3 }
#column img {
	width: auto!important;
}
.column-img {
	text-align: center;
	margin: 20px 0 46px;
}
.column-img-caption {
	display: block;
	font-size: 0.7em;
	margin-top: 10px;
	line-height: 1.5em;
}
	@media (max-width: 768px) {
		#column h3 {
			font-size: 1.35em;
		}
	    #column img {
	    	width: 100%!important;
		}
	}

#product{}
#product .copy {
    font-size:2.2em;
    font-weight: 600;
    line-height: 1.2em;
}
	@media (max-width: 768px) {
		#product .copy {
			font-size: 1.5em;
			text-align: center;
		}
	}

#yellow-curry {}
.ranking-source {
	padding-top:10px;
	font-size:0.7em;
	line-height:1.6em;
}


#s05 .row {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(253, 246, 246, 1) 5px, rgba(253, 246, 246, 1) 11px );
}
#s06 .row {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(245, 243, 226, 1) 5px, rgba(245, 243, 226, 1) 11px );
}
#s10{padding-top:0}
#s11{background:#f7e9ee}

#message-section {
	background:#E1E1E1!important;
	padding: 20px;
}
#message-section p {
	border:4px solid #3c0100;
	padding:10px 20px;
	background:#fff;
	margin:0;
}



/**/
img.sq {
    border-radius: 1.5em;
    /*border: double 10px #3c0100;*/
    border: solid 5px #fff;
}
.img-circle {
    border-radius: 50%;
}
.img-radius {
    border-radius: 20px;
}
.img-frame {
  display: inline-block;
  box-shadow: 10px 10px 5px #bbbbbb;
  /*transform: rotate(2deg)*/
}
.img-frame:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border-image-source: repeating-linear-gradient(45deg, #ddd, #ddd 3px, rgba(0 0 0 / 0) 0, rgba(0 0 0 / 0) 6px);
	border-image-slice: 20;
	border-image-repeat: round;
	border-style: solid;
	border-width: 20px;
}
@media (max-width: 768px) {
    .img-circle {
        width:80%;
    }
}



/* s08 */
.service_point {
    position: relative;
    font-size: 2em;
    font-weight: 700;
}
.service_point::before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #000;
}
.service_point span{
  position: relative;
  padding: 0 0.8em 0 0;
  background: #FEF6EA;
}
.point-text {
    font-weight: 600;
    font-size: 1.3em;
    line-height: 2em;
}

/* s09 */
h3.set-title {
    font-weight: 600;
    font-size:1.5em;
    text-align: center;
}
.set-box {
    background: #fff;
    padding: 2em 20px;
    border-radius: 20px;
}
.set-price {
    font-size:2em;
    font-weight: 700;
    text-align: center;
    line-height: 0.5em;
    padding-top:20px;
}
.set-price span {
    font-size:0.4em;
}



/**/
.price_text {
    font-size: 1.2em;
}
.price_text span {
    text-align: center;
    font-size: 2em;
    font-weight: 500
}

/* Footer */
footer {
    background: #2C2C2C;
    font-size: 0.9rem;
}


/* fixed footer */
#navi {
    background: #2c2c2cc4;
    width: 100%;
    height: 90px;
    bottom: 0;
    position: fixed;
    z-index: 999;
    margin: 0 auto;
    padding: 10px;
    display:none;
}
    #navi .btn-box {
    	margin-top:0;
    }

/* pagetop */
#pagetop {
    position: fixed;
    right: 14px;
    bottom: 146px;
    margin: 0;
    z-index: 3;
    width: 60px;
    height:60px;
    border-radius: 50%;
    background:rgba(255,255,255,0.8);
    display:none;
}
#pagetop a {
    display: block;
    color:#8f8d8d;
    font-size: 30px;
    line-height: 0px;
    padding:16px;
}

@media (max-width: 768px){
    #pagetop {
        width: 40px;
        height:40px;
    }
    #pagetop a {
        font-size: 22px;
        padding:10px;
    }
    #navi {
    	height: 70px;
    	padding: 0;
    }
    #navi .btn-box {
    	margin-top:10px;
    }
    #navi .btn {
    	padding: 0.4em;
    	font-size: 1.2em;
    }
}