@charset "UTF-8";
/* CSS Document */
@font-face {
font-family: "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-family: 'Roboto', sans-serif;
    

font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
         url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
         url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
         url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}

/*フォントサイズを変更しやすくするための設定*/
/*16px x 62.5% =10px*/
html{
    font-size: 62.5%;
}

/*フォント種類・フォントカラー・フォントサイズの指定*/
body{
    font-family: "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #333333;
    font-size: 1.6rem;
    line-height: 1.5;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media all and (-ms-high-contrast:none){
	body{
		font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	}
}

/*画像のレスポンシブ対応*/
img{
  width: 100%;
  height: auto; 
}

/*画面表示サイズの指定＆画面の中央表示*/
.inner{
    max-width: 1120px;
    margin: auto;
}

.text-center{
    text-align: center;
}

.br-pc{
    display: block;
}
    
.br-sp{
    display: none;
}

.flexbox{
    display: flex;
    justify-content: space-between;
}

/***************
* アニメーション
***************/
/*slideIn*/
.slideIn{
  animation-name:slide-in;
  animation-duration:3s;
  animation-timing-function: ease;
  animation-delay:0.5s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
@keyframes slide-in {
  0% {opacity: 0; transform: translate3d(0,100px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

/*************
* ヘッダー
*************/
.header{
	position: relative;
    width: 100%;
    height: 17vw;
	background-image: url("../image/kodawari-food/header-bg.png");
    background-size: cover;
}

.headerText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.pageTitle{
    font-size: 5rem;
    color: #fff;
    display: inline-block;
    border-top: solid #fff 1px;
    border-bottom: solid #fff 1px;
    line-height: 1;
    margin-bottom: 10px;
}

@media all and (-ms-high-contrast:none){
	.pageTitle{
		font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif !important;
	}
}

.header-text{
    color: #fff;
    text-align: left;
}

.header-text span{
    font-family: Roboto;
}

.headerLogo {
    width: 92px;
    padding: 10px;
    position: fixed;
    top: 0;
    z-index: 5;
}

.headerLogo img{
	filter: drop-shadow(0px 3px 10px rgba(250,250,250,0.8));
}

/*トリガーメニュー 〜ここから〜*/
.btn-trigger {
    background-color: #562e00;
    position: fixed;
    right: 0;
	color: #fff;
	padding: 9px 19px;
	text-align: center;
	cursor: pointer;
    z-index: 10;
}

.btn-trigger::after{
	content: 'menu';
}

.btn-trigger.active {
    background-color: transparent;
    position: fixed;
    right: 0;
	color: #333;
	padding: 9px 25px;
	text-align: center;
	cursor: pointer;
	z-index: 20;
}

.btn-trigger.active::after {
    content: 'close';
    position: absolute;
    top: 48px;
    left: 21px;
}

.btn-trigger span{
	display: block;
	width: 30px;
	height: 1px;
	background-color: #fff;
    margin: 10px auto;
}

.btn-trigger span:last-of-type{
	margin-bottom: 5px;
}

.btn-trigger.active span:first-of-type{
	transform: translateY(11px) rotate(-45deg);
    background-color: #333;
}

.btn-trigger.active span:nth-of-type(2){
	transform: translateY(0px) rotate(45deg);
    background-color: #333;
}

.btn-trigger.active span:last-of-type{
	display: none;
    background-color: #333;
}

.btn-trigger-text{
	font-family: Roboto;
    color: #fff;
    line-height: 0;
}

.btn-trigger-text span{
	vertical-align: -0.2em;
}

.nav {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	transform: translate(100%);
}

.nav-list{
    margin-bottom: 6vh;
}

.nav-inner{
    display: flex;
    width: 100%;
    height: 100vh;
}

.nav-image{
    width: 50%;
    height: 100vh;
    background-image: url("../image/kodawari-food/TriggerNav-image.jpg");
    background-size: cover;
    background-position: center;
}

.nav-image img{
    max-width: none;
    height: 100vh;
}

.nav-right{
    width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;		
}

.nav-right-inner{
	position: relative;
}

.triggerNav-logo{
    width: 100%;
    text-align: center;
    margin-bottom: 6vh;
}

.triggerNav-logo img{
    width: auto;
}

.triggerNav-info-wrapper{
    text-align: center;
}

.triggerNav-tel{
    margin-bottom: 20px;
}

.triggerNav-tel img{
    width: auto;
}

.triggerNav-info{
    margin-bottom: 15px;
}

.triggerNav-info:last-of-type{
    margin-bottom: 0;
}

.triggerNav-info span{
    font-weight: 700;
    margin-left: 5px;
}

.triggerNav-sns{
    display: inline-block;
	width: 60px;
    position: absolute;
    bottom: 0;
    right: -30%; 
}

.nav.open {
  transform: translateZ(0);
}

.nav li {
    font-size: 2rem;
    color: #fff;
    text-align: center;
    padding: 20px 0;
	line-height: 1;
}

.nav-list a{
	color: #333;
    display: inline-block;
}

.nav-list li a:after{
    content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 3px solid #000;
	display: block;
    padding-top: 3px;
}

.nav-list li a:hover:after{
    width: 100%;
    border-bottom: solid 3px #562e00;
}

/*トリガーメニュー 〜ここまで〜*/

/***********************
* プロフィール -profile-
***********************/
.profile{
	padding: 100px 0;
}

.profile-flexbox {
    display: flex;
    width: 80%;
    margin: 0 auto;
}

.profile-image{
	width: 50%;
}

.profile-right{
	width: 50%;
	display: flex;
	align-items: center;
}

.profile-info {
    width: 80%;
    background-image: url(../image/kodawari-food/profile-bg-1400.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 6% 4vw;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
    position: relative;
    left: -25px;
    opacity: 0;
}

.profile-info-title{
	font-size: 3.5rem;
	margin-bottom: 20px;
}

.profile-info-name{
	font-weight: 700;
	margin-bottom: 20px;
}

.profile-info-text span{
	font-family: Roboto;
}

/*********************
*　こだわり -kodawari-
*********************/
.kodawari-flexbox{
	 display: flex;
}

.kodawari-image{
	width: 65%;
    opacity: 0;
}

.kodawari-info{
	width: 35%;
	background-image: url(../image/kodawari-food/kodawari-bg.png);
	background-repeat: repeat;
	position: relative;
}

.kodawari-bg-item01{
    width: 60%;
    opacity: 0.8;
}

.kodawari-bg-item02{
    width: 80%;
    margin: 0 auto;
    opacity: 0.8;
}

.kodawari-text {
    width: 60%;
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    line-height: 3vw;
}

.deux .kodawari-image{
    order: 2;
}

.deux .kodawari-info{
    order: 1;
}

/******************
* sec03
******************/

.sec03 {
    width: 100%;
    height: 55vw;
    background-image: url(../image/kodawari-food/sec03-bg.jpg);
    background-size: cover;
	position: relative;
}

.sec03-text {
    font-size: 2.5vw;
    color: rgba(86,46,0,0.7);
    writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
    font-feature-settings: normal;
    text-shadow: 1px 2px 2px #BFC5CA;
    position: absolute;
    left: 18%;
    transform: translateY(22%);
}

.sec03-text span {
    display: block;
    padding: 0 10px 0;
}

/******************
* フッター -footer-
******************/

.footer{
    padding: 50px 0;
	background-image: url(../image/kodawari-food/footer-bg.jpg);
	background-repeat: repeat;
}

.footer-top{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 30px;
    border-bottom: solid 1px rgba(86,46,0,0.30);
}

.footer-top-tel{
    margin-right: 100px;
    padding-top: 5px;
}

.footer-top-tel-text{
    background-color: #fff;
    border: solid 1px #562e00;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.footer-top-tel-num{
    font-family: Roboto;
    font-size: 3.5rem;
    text-decoration: none;
}

.footer-top-tel-num::before{
    content: '';
    display: inline-block;
    width: 50px;
    height: 60px;
    background-image: url(../image/kodawari-food/icon-sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 10px;
}

.footer-top-tel a{
    color: #333333;
    text-decoration: none;
}

.footer-top-info p{
    margin-bottom: 10px;
}

.footer-top-info i{
    margin-right: 5px;
}

.footer-bottom{
    padding-top: 40px;
    position: relative;
}

.footer-nav-list{
    display: flex;
    justify-content:center;
    margin-bottom: 45px;
    box-sizing: border-box;
    padding: 4px 0;
}

.footer-nav-list li{
    margin-right: 50px;
}

.footer-nav-list li:last-of-type{
    margin: 0;
}

.footer-nav-list li a{
    text-decoration: none;
	padding-bottom: 3px;
	display: block;
}

.footer-nav-list a{
	color: #333333;
}

.footer-nav-list li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 2px solid #562e00;
	display: block;
}
.footer-nav-list li a:hover:after {
	width: 100%;
	border-bottom: 2px solid #562e00;
}

.footer-insta{
    width: 15%;
    position: absolute;
    bottom: 0;
    left: 30px;
}

.footer-logo{
    width: 20%;
    margin: 0 auto;
}

.copyright{
    display: block;
    color: #fff;
    background-color: #562e00;
    padding: 5px;
}

/*************************
* ページトップへ戻るボタン
*************************/
.pageTop {
    width: 110px;
    position: fixed;
    right: -100px;
    bottom: 50px;
    background-image: url(../image/kodawari-food/pageTop-before.png);
    background-position: center;
    opacity: 1;
    background-size: cover;
    z-index: 2;
}
.pageTop:hover {
    background-image: url("../image/kodawari-food/pageTop-after.png");
}

.pageTop a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
.pageTop a::before {
    content: 'PAGE TOP';
    color: #000;
    font-size: 1.2rem;
    position: absolute;
    width: 115px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.pageTop a::after {
    content: '';
    display: inline-block;
    width: 29px;
    height: 24px;
    background-image: url(../image/kodawari-food/pagetop-arrow-sp.png);
    background-size: cover;
    vertical-align: middle;
    position: absolute;
    top: -29px;
    right: -22px;
}

.pageTop a:hover::after {
    top: -35px;
}

/***************
* アニメーション
***************/
/*fadeIn*/
.fadeIn {
  opacity: 0;
  transition : all 1500ms;
}
.fadeIn.scrollin{
  opacity: 1;
}

@media screen and (min-width:641px) and (max-width:1024px){
    
    /******************************
    * ページトップボタン -PAGE TOP-
    ******************************/  
    .pageTop {
        background-image: none;
        background-color: rgba(86,46,0,0.5);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        width: 70px;
        height: 70px;
        border-radius: 100%;
        padding: 10px;
        box-sizing: border-box;
        bottom: 5px;
    }
    
    .pageTop:hover{
        background-image: none;
    }
    
    .pageTop a {
        position: relative;
        display: block;
        width: auto;
        height: auto;
        text-decoration: none;
        top: 10px;
        right: -10px;
    }
    
    .pageTop a::before{
        content: 'PAGE TOP';
        color: #fff;
        font-size: 1.2rem;
        position: absolute;
        width: 50px;
        top: 1px;
        bottom: 0;
        right: 0;
        left: -20px;
        margin: auto;
        text-align: center;
        line-height: 1.3;
    }
    
    .pageTop a::after{
        content: none;
    }

    
    /***********************
    * ヘッダー -header-
    ***********************/
    .header{
        height: 30vw;
    }
    
    .headerText{
        width: 100%;
    }
    
    .header-text{
        text-align: center;
    }
    
    .nav{
        width: 100%;
        background-color: #fff;
    }
    
    .nav-list li a::after {
        display: none;
    }
    
    .nav-image{
        display: none;
    }
    
    .nav-right{
        width: 100%;
        margin: auto 0;
    }
    
    .triggerNav-sns{
        bottom: 0;
    }
    
    /***********************
    * プロフィール -profile-
    ***********************/
    .profile{
        padding: 70px 0;
    }
    
    .profile-flexbox{
        display: block;
    }
    
    .profile-image{
        width: 100%;
    }
    
    .profile-right{
        width: 100%;
    }
    
    .profile-info{
        width: 100%;
        left: 0;
        position: relative;
        top: -20px;
        padding: 10% 4vw 8%;
    }
    
    /***********************
    * こだわり -kodawari-
    ***********************/
    .kodawari-flexbox{
        display: block;
    }
    
    .kodawari-flexbox.trois{
        margin-bottom: 0;
    }
    
    .kodawari-image {
        width: 100%;
    }
    
    .kodawari-info{
        width: 100%;
        height: 30vw;
    }
    
    .kodawari-bg-item01 {
        width: 35%;
    }
    
    .kodawari-bg-item02 {
        width: 35%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%);
    }
    
    .kodawari-text {
        width: 50%;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-15%);
        line-height: 5vw;
    }
    
    /***********************
    * sec03
    ***********************/
    .sec03{
        height: 82vw;
        background-image: url(../image/kodawari-food/sec03-bg-tb.jpg);            
    }
    
    .sec03-text{
        font-size: 4.5vw;
        left: 8%;
        transform: translateY(15%);
    }
    
    /******************
    * フッター -footer-
    ******************/
    .footer-top{
        width: 90%;
    }
    
    .footer-top-tel-num{
        font-size: 2.5rem;
        padding-left: 10px;
    }
    
    .footer-top-tel{
        margin-right: 5%;
        padding-top: 10px;
    }
    
    .footer-nav-list li a:after{
        transition: none;
		display: none;
    }
    
}
  
@media screen and (max-width:640px){
    body{
        font-size: 1.5rem;
    }

    .inner{
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    
    .wrapper{
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    
    img{
        width: 100%;
        height: auto;
    }
    
    .br-pc{
        display: none;
    }
    
    .br-sp{
        display: block;
    }
    
    /******************************
    * ページトップボタン -PAGE TOP-
    ******************************/  
    .pageTop {
        background-image: none;
        background-color: rgba(86,46,0,0.5);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        padding: 10px;
        box-sizing: border-box;
        bottom: 5px;
    }
    
    .pageTop:hover{
        background-image: none;
    }
    
    .pageTop a {
        position: relative;
        display: block;
        width: auto;
        height: auto;
        text-decoration: none;
        top: 0px;
        right: -10px;
    }
    
    .pageTop a::before{
        content: 'PAGE TOP';
        color: #fff;
        font-size: 1.2rem;
        position: absolute;
        width: 50px;
        top: 1px;
        bottom: 0;
        right: 0;
        left: -20px;
        margin: auto;
        text-align: center;
        line-height: 1.3;
    }
    
    .pageTop a::after{
        content: none;
    }

    /******************
    * ヘッダー
    ******************/
    .header{
        height: 52vw;
        background-image: url("../image/kodawari-food/header-bg-sp.jpg");
    }
    
    .headerLogo{
        width: 60px;
    }
    
    .headerText{
        width: 90%;
    }
    
    .pageTitle{
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    
    .header-text{
        text-align: left;
    }
    
    .btn-trigger {
        padding: 8px 15px;
    }
    
    .btn-trigger span:last-of-type {
        margin-bottom: 10px;
    }
    
    .btn-trigger::after {
        display: none;
    }
    
    .btn-trigger.active span:first-of-type {
        transform: translateY(11px) translatex(9px) rotate(-45deg);
    }
    
    .btn-trigger.active span:nth-of-type(2) {
        transform: translateY(0px) translatex(9px) rotate(45deg);
    }
    
    .nav{
        width: 100%;
        background-color: #fff;
    }
    
    .nav-list{
        margin-bottom: 10%;
    }
    
    .nav li{
        font-size: 1.5rem;
		margin-bottom: 0;
		padding: 15px 0;
    }
    
    .nav-list li a::after {
        display: none;
    }
    
    .nav-image{
        display: none;
    }
    
    .nav-right{
        width: 100%;
        padding: 0;
        margin: auto 0;
    }
    
    .triggerNav-logo {
        width: 60%;
        margin: 0 auto 10%;
    }
    
    .triggerNav-logo img{
        width: 100%;
    }
    
    .nav-list-item{
        margin-bottom: 5px;
    }
    
    .triggerNav-tel{
        width: 80%;
        margin: 0 auto 10%;
    }
    
    .triggerNav-tel img{
        width: 100%;
    }
    
    .triggerNav-sns {
        display: none;
    }
    
    .triggerNav-sns::before{
        display: none;
    }
    
    .triggerNav-info{
        display: block;
    }
    
    /***********************
    * プロフィール -profile-
    ***********************/
    .profile{
        padding: 50px 0;
    }

    .profile-flexbox {
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    .profile-image{
        width: 100%;
    }

    .profile-right{
        width: 100%;
    }

    .profile-info {
        width: 100%;
        padding: 45px 20px 20px;
        left: 0;
        top: -20px;
    }

    .profile-info-title{
        font-size: 2.5rem;
        margin-bottom: 20px;
        line-height: 1;
    }

    .profile-info-name{
        margin-bottom: 20px;	
    }

    /*********************
    *　こだわり -kodawari-
    *********************/
    
    .kodawari-flexbox{
        display: block;
    }
    
    .kodawari-flexbox.trois{
        margin-bottom: 0;
    }
    
    .kodawari-image{
        width: 100%;
        margin: 0 auto;
    }
    
    .kodawari-info {
        width: 100%;
        background-image: url(../image/kodawari-food/kodawari-bg.png);
        background-repeat: repeat;
        position: relative;
        margin: 0 auto;
    }
    
    .kodawari-bg-item02 {
        width: 70%;
    }
    
    .kodawari-text {
        width: 80%;
        line-height: 10vw;
    }
    
    /*********************
    *　sec03
    *********************/
    .sec03 {
        height: 95vw;
        background-image: url(../image/kodawari-food/sec03-bg-sp.jpg);
        position: relative;
    }

    .sec03-text {
        font-size: 1.6rem;
        left: 12%;
        transform: translateY(18%);
    }


    .sec03-text span {
        padding: 0 3px 0;
    }
    
    /******************
    * フッター -footer-
    ******************/
    .footer-inner{
        width: 90%;
        margin: 0 auto;
    }
    .footer-top{
        display: block;
        width: 100%;
        border-bottom: none;
    }
    
    .footer-top-tel{
        margin-right: 0;
        margin-bottom: 30px;
    }
    
    .footer-top-tel-text{
        box-sizing: border-box;
        width: 290px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    
    .footer-top-tel-num{
        font-size: 3rem;
        text-align: center;
    }
    
    .footer-top-info{
        text-align: center;
    }
    
    .footer-top-info p{
        margin-bottom: 5%;
    }
    
    .footer-bottom{
        padding-top: 0;
    }
    
    .footer-nav-list{
        display: none;
    }
    
    .footer-logo{
        width: 60%;
    }
    
    .footer-insta{
        width: 15%;
        left: 0;
    }
}