/*
Theme Name: 美・sion
Author: R-Labs Inc.
Version: 1.0.0
Text Domain: bi-sion
*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Belleza&family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&display=swap');

.bell {
  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-style: normal;
}

html {
  -webkit-font-smoothing: antialiased;
  font-size:16px;
}
body{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* ---------------------------------------------------------------------------------------------

　   メニュー

--------------------------------------------------------------------------------------------- */
#nav li a {
  display: block;
  color: #000;
  position: relative;
}
#nav .menu-item-has-children > a:after,#nav .menu-item-has-children > a:before {
  display: block;
  content: "";
  position: absolute;
  top: 0; 
  right: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 10px;
  height: 1px;
  background: #000;
  transition: .2s;
}
#nav .menu-item-has-children > a:after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
#nav .menu-item-has-children > a.open:before{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#nav .menu-item-has-children > a.open:after{
  background: transparent;
}
#nav .menu-item-has-children .sub-menu {
  display: none;
}
@media only screen and ( max-width : 899px ) {
  .overlay {
    width: 0;
    height: 0;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
    background: rgba(255,255,255,.7);
  }
  .overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #main {
    transition: all .5s;
    min-height: 100vh;
  }
  #main.open {
    position: fixed;
    width: 100%;
  }
  #menu_btn {
    top: 12px;
    right: 15px;
    transition: .3s;
    cursor: pointer;
    position: fixed;
    z-index: 9999;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-trigger {
    width: 18px;
    height: 16px;
    position: relative;
  }
  .menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transition: all .5s;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    width: 70%;
    top: 7px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
    #menu_btn.active .menu-trigger span{
        background:#fff;
    }
  #menu_btn.active .menu-trigger span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg);
  }
  #menu_btn.active .menu-trigger span:nth-of-type(2) {
    opacity: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(3) {
    transform: translateY(-7px) rotate(45deg);
  }
  #nav {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 90px 0;
    background: #fe6086;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12;
    transform: translate(100%);
    transition: all .5s;
  }
  #nav.open {
    transform: translateZ(0);
  }
  #nav li {
    padding: 0 20px;
  }
  #nav li a {
    position: relative;
    padding: 20px;
    color: #fff;
  }
  #nav .menu-item-has-children .sub-menu {
    padding: 20px;
  }
  #nav .menu-item-has-children > a.open:first-of-type {
    color: #000;
  }
  #nav .menu-item-has-children .sub-menu li {
    padding: 0;
    margin-bottom: 20px;
  }
  #nav .menu-item-has-children .sub-menu li:last-child {
    margin-bottom: 0;
  }
  #nav .menu-item-has-children .sub-menu li a {
    padding: 0;
  }
  #nav .menu-item-has-children > a:after,#nav .menu-item-has-children > a:before {
    background:#fff;
  }
   #nav .menu-item-has-children > a.open:first-of-type,#nav .current-menu-item a {
    color: #fff000;
  }
}

@media print, screen and ( min-width : 900px ) {
  #menu_btn,.overlay {
    display: none;
  }
  #nav ul {
    display: flex;
    flex-wrap: wrap;
  }
  #nav li {
    position: relative;
  }
  #nav li a {
    padding: 20px 40px;
  }
  #nav li.contactNavLink a {
    position: relative;
    padding: 10px 50px;
    color: #fff;
    background:#fe6086;
    top:10px;
    border-radius:100vmax
  }
  #nav .menu-item-has-children > a {
    padding-right: 40px;
  }
  #nav .menu-item-has-children > a.open:first-of-type,#nav .current-menu-item a {
    color: #000;
  }
  #nav .current-menu-item li a {
    color: #fff;
  }
  #nav li ul.sub-menu {
    flex-direction: column;
    background: #fff;
    position: absolute;
    width: 300px;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 10px 0;
  }
  #nav li ul.sub-menu li {
    width: 100%;
  }
  #nav li ul.sub-menu li a {
    line-height: 1.6em;
    color: #000;
    padding: 20px 20px;
  }
  #nav li ul.sub-menu li a:hover {
    color: #dad4ec;
  }
}


header {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

@media only screen and ( max-width : 899px ) {
  header {
    padding: 0 20px;
    height: 70px;
  }
  header #logo {
    width: 150px;
  }
}
@media print, screen and ( min-width : 900px ) {
  header {
    padding: 0 50px;
  }
  header #logo {
    width: 10%;
  }
}

.fv{
    background:#ffede2;
    width:100%;
    height:100vh;
    padding-top:80px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.fv img{
    width:45%;
}
@media (min-width:600px) and (max-width:899px){
     .fv img{
    width:70%;
}
}
@media (max-width:599px){
    .fv img{
    width:90%;
}
}
.container{
    width:80%;
    margin-inline:auto;
}

#sec2{
    width:100%;
    background:url(img/png/sec2bg.png) no-repeat center center / cover;
}
#sec2 p{
    color:#fff;
    font-size:2rem;
    font-weight: bold;
}
#sec2 h2{
    color:#fff;
    font-size:4rem;
    margin-bottom:0.5em;
}
p.btn1 a{
    color:#a1d5c2;
    background:#fff;
    font-size:0.6em!important;
    padding:0.6em 3em;
    border-radius:100vmax
}
p.btn1 a span{
    position:relative;
}
p.btn1 a span::after{
    content:'';
    width:1em;
    aspect-ratio: 1/1;
    display: inline-block;
    background:url(img/png/arrow.png) no-repeat center/cover;
    position:relative;
    top:0.1em;
    margin-left:1em;
}
@media (min-width:600px) and (max-width:899px){
   #sec2{
    width:100%;
    background:url(img/png/sec2bg2.png) no-repeat center bottom / cover;
} 
.container{
    width:90%;
}
#sec2 p{
    font-size:1.3rem;
}
#sec2 h2{
    font-size:2.5rem;
}
}
@media (max-width:599px){
#sec2{
    width:100%;
    background:url(img/png/sec2bg2.png) no-repeat center bottom / cover;
}
.container{
    width:94%;
}
#sec2 p{
    font-size:1rem;
}
#sec2 h2{
    font-size:1.5rem;
    margin-bottom:0.5em;
}
}
#sec3{
    background:#ffede2;
}
.sTitle{
    font-size:2.5rem;
    color:#fe6086;
    margin-bottom:80px;
}
.sTitle span{
    font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#1a1a1a;
}
.bizIntrolist{
    position:relative;
    aspect-ratio: 1.25/1;
    background:url(img/png/bizsecBg.png) no-repeat center / contain;
    display: flex;
    align-items: center;
    padding:0 4%;
    margin-bottom:80px;
    width:48%;
}

.bizIntrolist::after{
    content:'';
    aspect-ratio:1/0.622;
    width:20%;
    position:absolute;
    left:5%;
    top:-10%;
    background:url(img/png/wakaba.png) no-repeat center/contain;
}

.bizIntrolist h2{
    color:#fe6086;
    font-size:1.25rem;
    margin-bottom:1em;
}
.bizInfoInner1{
    width:65%;
}
.bizInfoInner1 p{
    font-size:0.8rem;
}
.bizInfoInner2{
    width:35%;
}
.btn2 a{
    background:#fe6086;
    color:#fff;
    display: inline-block;
    padding:0.5em 2em;
    border-radius:100vmax;
    position:relative;
}
.btn2 a::after{
    content:'';
    aspect-ratio: 1/1;
    display: inline-block;
    background:url(img/png/arrow2.png)no-repeat center / contain;
    width:1em;
    position:relative;
    top:0.1em;
    margin-left:1em;
}
@media (min-width:600px) and (max-width:899px){
    .bizIntrolist h2{
        font-size:0.8rem;
    }
     .bizInfoInner1 p{
    font-size:0.5rem;
}
}
@media (max-width:599px){
    .bizIntrolist{
        width:100%;
    }
    .bizIntrolist h2{
        font-size:1rem;
    }
    .bizInfoInner1 p{
    font-size:0.6rem;
}
}
#footer{
    padding:80px 0 20px;
}
.footerLogo{
    width:30%;
    margin-bottom:25px;
}
.footNav li a{
    padding:1em 0;
    display: inline-block;
}
.footSubNav{
    font-size:0.8rem;
}
.copyRight{
    text-align: center;
}
.cName{
    font-size:1.2rem;
}
.footTel{
    font-size:1.2rem;
    font-weight: bold;
}
@media (min-width:600px) and (max-width:899px){
    .footNav li{
        width:45%;
        font-size:0.9rem;
    }
    .footSubNav li {
        width:100%;
}
}
@media (max-width:599px){
    .footNav li{
        width:100%;
    }
    .footNav li a{
    padding:0.5em 0;
    display: inline-block;
}
}
#conceptSec1{
    background:#a1d5c2;
}
.vTitle1{
    color:#fff;
    font-size:1.4rem;
}
.conceptTitle{
    color:#fff;
    font-size:1.5rem;
    font-weight: 600;
}
.conceptMain{
    font-size:3rem;
    color:#fff;
}
@media (max-width:599px){
    .conceptTitle{
    font-size:1.2rem;
    }
   .conceptMain{
    font-size:1.6rem;
} 
}
.wBox{
    background:#fff;
    border-radius:60px;
    padding:80px;
}
.conceptTitle2{
    font-size:2.5rem;
}
.conceptTitle2 span{
    color:#fe6086;
}
.conTxt{
    font-size:1.4rem;
}
@media (min-width:600px) and (max-width:899px){
    .conTxt{
    font-size:1rem;
}
}
@media (max-width:599px){
    .wBox{
    border-radius:20px;
    padding:40px 8vw
}
.conceptTitle2{
    font-size:1.25rem;
}
.conTxt{
    font-size:1.1rem;
}
}

.conceptTitle3{
    font-size:1.8rem;
    font-weight: bold;
}
.conceptTitle3 span{
    color:#38b6ff;
    display: inline-block;
    margin-bottom:1em;
}
.cBizTitle{
    color:#fe6086;
    font-size:1.3rem;
    text-align: left;
    display: inline-block;
    font-weight: bold;
}
.last30{
    position:relative;
}
.last30::after{
    content:'';
    width:30%;
    display: inline-block;
}
@media (min-width:600px) and (max-width:899px){
    .conceptTitle3{
    font-size:1.5rem;
}
.cBizTitle{
    font-size:0.8rem;
}
}
@media (max-width:599px){
    .conceptTitle3{
    font-size:1.2rem;
}
}

.subFv{
    aspect-ratio: 1/0.45;
    position:relative;
    margin-top:60px;
}
.lunchBox{
    background:url(img/png/bentoTop.png) no-repeat center center / cover;
}
.lunchInner{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.college{
    background:url(img/png/shokudo.png) no-repeat center /cover;
}
.collegeInner{
    display: flex;
    align-items: center;
}
.shop{
    background:url(img/png/oasis3.png) no-repeat center /  cover;
}
.shopInner{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.kinokoInner{
     display: flex;
    align-items: center;
}
.kinoko{
    background:url(img/png/matsutop.png) no-repeat center/ cover;
}
.sticker{
    width:30%;
}
.mainTitle1{
    color:#fe6086;
    font-weight: bold;
    font-size:1.5rem;
    margin-bottom:1em;
}
.wrapper p{
    font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1.2rem;
}

@media (max-width:599px){
    .subFv{
    aspect-ratio: 1/1;
}
.sticker{
    width:70%;
}
.lunchInner,.collegeInner,.shopInner,.kinokoInner{
    justify-content: center;
}

.mainTitle1{
    font-size:1.3rem;
}
.wrapper p{
    font-size:1.1rem;
}
.kinoko{
    background:url(img/png/matsutop.png) no-repeat right center/ cover;
}

}

.internal{
    color:#fe6086
}
.tasteBox{
    background:#f5f5f5;
    padding:3em;
}
.tasteBox h3{
    font-size:1.3rem;
    margin-bottom:1em;
}
@media (max-width:599px){
    .tasteBox{
    padding:2em;
}
.tasteBox p{
    font-size:0.9em;
}
}

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

　   固定ページ (page.php)

--------------------------------------------------------------------------------------------- */
.pageHeader {
    background: #ffede2;
    margin-top: 60px;
    padding: 60px 0;
    text-align: center;
}
.pageHeader .bell {
    color: #fe6086;
    font-size: 1rem;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 0.5em;
}
.pageHeader h1 {
    font-size: 2rem;
    color: #1a1a1a;
    font-weight: bold;
	font-family: "Noto Sans JP", sans-serif;
	
}
.pageContent {
    padding: 8vw 0;
}
.pageContent h2 {
    color: #fe6086;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1em;
    padding-bottom: 0.2em;
    border-bottom: 2px solid #ffede2;
}
.pageContent h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.8em;
    margin-top: 2em;
}
.pageContent p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 1.5em;
    color: #414141;
}
@media (max-width: 599px) {
    .pageHeader {
        padding: 40px 0;
    }
    .pageHeader h1 {
        font-size: 1.4rem;
    }
    .pageContent {
        padding: 15vw 0;
    }
	.pageContent h2 {
		font-size:1.2rem;
	}
}
.contactList dt{
	width:30%;
}
.contactList dt p{
	font-weight:bold;
}
.contactList dd{
width:70%;
}
.contactList dt span{
	font-size:0.6em;
	padding:0.1em 2em;
	border-radius:100vmax;
	position:relative;
	top:-0.2em;
	margin-left:1em;
	display:inline-block;
	background:#ff0000;
	color:#fff;
	font-weight:bold;
}
.contactList input[type="text"],.contactList input[type="tel"],.contactList input[type="email"],textarea{
-webkit-appearance:none;
	appearance:none;
	width:100%;
	border:solid 2px #999;
	font-size:1.1rem;
	padding:0.6em;
}
.sendBox{
	text-align:center;
	padding:50px 0;
}
input[type="submit"]{
	-webkit-appearance:none;
	appearance:none;
	background:#fe6086;
	color:#fff;
	border:solid 1px #fe6086;
	font-size:1.2rem;
	font-weight:bold;
	padding:1em 4em;
}
.wpcf7-spinner{
display:none;}

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