@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;
}
ol {}
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-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;    
}


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

h3 {
    font-weight: 400;
    font-family: 'Noto Sans JP';
}

.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;
    }
    
}

/**/
.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 */
#s01 {}
#s03 {background:#b4e1f8}
#s04 {background:#e3fce3}
#s05,#s06 {background:#fff}
#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;
}


@media (max-width: 768px) {
    #s05.page-section,
    #s06.page-section{ 
        padding:5px
    }
    #message-section .col-lg-10 {
    	padding:0;
    }
    #message-section p {
    	padding: 10px 14px;
    	font-size: 0.9em;
    	line-height: 1.8em;
    }

}

/**/
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%;
    }
}
/* s01 */
.copy {
	text-align: center;
}
@media (max-width: 768px) {
	.copy {
		font-size: 1.8em;
	}
}

/* s04 */
.s04-copy {
    font-size:2.2em
}
/* s05,s06 */
.product {
    border:3px solid #3c0100;
    padding-top:3em;
    background:#FEF6EA;
}
.package-img {
    width: 50%;
}
@media (max-width: 768px) {
    #s05 h2,
    #s06 h2 {
        font-size:1.75em;
    }
}

/* s07 */
.taglist {
    border:3px solid #3c0100;
    padding: 0.5em 0;
    margin: 0 15px;
    display: flex;
    flex-wrap: wrap;
}

/* 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;
}

/* s11 */
h3.recipe-title {
  position: relative;
  padding: 0 0 1rem 0;   
}
h3.recipe-title::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #3c0100, #3c0100 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #3c0100, #3c0100 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#s11 ol {
    padding: 0;
    padding-left:24px;
}

@media (max-width: 768px) {
    .s04-copy {
        font-size:1.8em
    }
    .package-img {
        width: 100%;
     }
}

/**/
.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

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

/**/
.service-image {
    display: table;
    position: relative;
    background: url(../img/service-image.jpg) no-repeat center center fixed;
    min-height: 600px;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
@media (max-width: 768px){
    .service-image {
        background-attachment: scroll;
        min-height: 200px;
    }
}



/**/
#company {
    background: #bfecf0;
}
#company a {
    color:#333;
    text-decoration: none;
}
#company a:hover {
    color:#D70050;
}

/* footer */
#footer_area {
     background: #00757F;
}
#logo_w{
    width:100%;
}

.footer__link a:last-child {
    border:0
}
footer {
    background: #2C2C2C;
    font-size: 0.9rem
}


/* 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;      
    }
}

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