@charset "utf-8";

body {
    font-size:16px ;
    color: rgb(12, 27, 87);
    line-height: 1.8;
    letter-spacing: 0.03em;
    font-family: 'Shippori Mincho B1', serif;
    background-image: url(images/background.jpg);
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

img {
    width: 100%;
}

@media screen and (max-width: 600px) {
    body {
        font-size: 0.9em;
    }
}
@media screen and (max-width: 450px) {
    body {
        font-size: 0.95em;
    }
}

/* .width*/
.width {
    max-width: 1200px;
    margin: 0 auto ;
    margin-top: 100px;
}
@media screen and (max-width: 1200px) {
    .width {
        max-width: 85%;
    }
}

/* end .width*/

/* drawer */

.drawer-nav,
.drawer-navbar-header,
.drawer-navbar,
.drawer-dropdown-menu-item {
    background-color: rgb(249,248, 244) !important;
    z-index: 300;
}

#nav .drawer-nav ul li a {
    color: rgb(12, 27, 87);
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 500;
    transition: 0.3s;
    text-decoration: none;
    list-style: none;
}

.drawer-nav ul li a:hover {
    color: #476eb7;
    opacity: 0.7;
    text-decoration: none;
}

.drawer--right.drawer-open .drawer-hamburger {
    right: 0px!important;
}


.drawer-hamburger-icon,
.drawer-hamburger-icon::after,
.drawer-hamburger-icon::before {
    background-color: rgb(12, 27, 87) !important;
}

.drawer-open .drawer-hamburger-icon {
    background-color: transparent !important;
}

@media screen and (max-width: 640px) {
    .drawer--right .drawer-hamburger {
        right: 5px!important;
    }
}
/* end drawer */

/* menu */
#nav {
	z-index:900;
}
.drawer-hamburger {
	z-index:999;
}
.drawer-nav ul li {
	margin-top:1.2rem;
}
.drawer-nav ul li  a{
	color: rgb(12, 27, 87);
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 500;
    transition: 0.3s;
    text-decoration: none;
    list-style: none;
    font-size:1.1rem;
	padding-left:1.2rem;
    padding-right: 60px;
    }

.drawer-nav ul li {
  list-style: none;	
}
/* end menu */



/* top */
.logo_fadein {
background:rgb(249,248, 244);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999;
}
.logo_fadein p {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999;
width: 400px;
}
@media screen and (max-width: 600px) {
.logo_fadein p {
    width: 35%;
}
}
@media screen and (max-width: 450px) {
.logo_fadein p {
    width: 70%;
}
}


#slider {
width: 100%;
height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
@media screen and (max-width: 600px) {
#slider {
    height: 90vh;
}
}

#index h2{
position: absolute;
top: 40%;
left: 20%;
transform: translate(-50%, -50%);
text-align: left;
font-size:2.4vw;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgb(249,248, 244);;
}
@media screen and (max-width: 450px) {
    #index h2 {
        vertical-align: middle;
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: 0.1em;
        top: 60%;
        left: 40%;
    }
}


header {
    width: 100%;
    position: fixed;
    padding-top: 0rem;
    background-color: rgb(12, 27, 87 ,0.9);
    z-index: 200;
}

.top {
    position: absolute;
    left:2rem;
    top: 1.3rem;
    }
    .top img {
    width: 12rem;
    }
@media screen and (max-width: 450px) {
    .top {
        left:1.5rem;
        top: 1rem;
        }
    .top img {
        width: 11rem;
        }
        header {
            padding-top: 3.8rem;
        }
}

.scrolldown1{
/*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;
bottom:10px;
/*全体の高さ*/
height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
/*描画位置*/
position: absolute;
left:-15px;
top: -15px;
/*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
content: "";
/*描画位置*/
position: absolute;
top: 0;
/*線の形状*/
width: 1px;
height: 40px;
background: #eee;
/*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.8s ease-in-out infinite;
opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
    height:0;
    top:0;
    opacity: 0;
}
30%{
    height:30px;
    opacity: 1;
}
100%{
    height:0;
    top:50px;
    opacity: 0;
}
}

/* end top */




/* news */
#news {
    padding-bottom: 60px;
}
#news .news {
    width: 60%;
    margin: 0 auto;
    border-bottom: solid #476eb7 0.2px;
}
#news h3 {
    text-align: center;
    font-size: 1.2rem;
    padding-top: 20px;
    margin-bottom: 20px;
    color: rgb(12, 27, 87);
}
#news a {
    text-decoration: none;
    color: rgb(12, 27, 87);
}
#news a:hover {
    opacity: 0.7;
}
#news .news-box {
    display: flex;
    align-items: center;
    padding-top: 10px;
    border-top: solid #476eb7 0.4px;
    padding-bottom: 10px;
}
#news .title-p {
    font-size: 1.1rem;
}
#news .news_time {
    padding-right: 20px;
}
@media screen and (max-width: 600px) {
    #news .news {
    width: 90%;
}
}

/* end news */



/* story */
#story {
    background-image: url(images/back_akagiyama.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    color: rgb(249,248, 244);
    margin-top: -100px;
}
#story p {
    text-shadow: 1px 1px 20px rgb(35, 79, 167);
    margin-bottom: 30px;
}
.kakaatenka {
    text-shadow: 1px 1px 20px rgb(35, 79, 167);
    font-size: 36px;
    padding: 60px 0 30px;
}
#story figure {
    margin: 0 auto;
    max-width: 90%;
    display: flex;
    justify-content:space-around;
}
#story figure img {
    width: 45%;
    padding-bottom: 60px;
}
#story figure figcaption {
    padding-top: 80px;
    text-shadow: 1px 1px 20px rgb(35, 79, 167);
}

@media screen and (max-width: 600px) {
    #story figure {
        display: block;
        text-align: center;
        width: 85%;
    }
    .kakaatenka {
        font-size: 30px;
    }
    #story figure img {
        width: 90%;
    }
    #story figure figcaption {
        padding-top: 10px;
        padding-bottom: 30px;
        text-align:left;
    }
}
/* end story */




/* item--prosciutto */

#item {
    width: 80%;
    margin: 0 auto;
    padding-top: 240px;
}

#item .p_position_1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

#item .p_position_1::before {
    content: url(images/namabuta.png);
    transform: scale(1);
    position: absolute;
    top: -140px;
    right: 0;
}

#item .image-width {
    flex-basis:48%;
}

.prosciutto_text {
    flex-basis: 50%;
    padding-left: 0rem;
    padding-bottom: 4rem;
}

.prosciutto_text h3 {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.prosciutto_text h3 span {
    font-size: 2rem;
}


#item .p_position_2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding-bottom: 220px;
}

#item .p_position_2 p {
    padding-right: 2rem;
    padding-bottom: 2rem;
}




.slider{
    width:55%;
    margin:0 auto;
}

/*------ スライダー画像 ------*/
.slider img{
    width:100%;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide{
    height:auto!important;
}

/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}

/* btn */
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}

.more_btn span {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}


.more_btn,
a.more_btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.7s;
transition: all 0.7s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: rgb(12, 27, 87);
border-radius: 0.5rem;
}

a.btn-svg {
font-weight: 700;
line-height: 45px;

width: 204px;
height: 54px;
padding: 0;

cursor: pointer;
text-decoration: none;

background-color: transparent;
}

a.btn-svg svg {
position: absolute;
top: 0;
left: 0;

width: 100%;
height: 100%;
}

a.btn-svg svg rect {
-webkit-transition: all 400ms ease;
transition: all 400ms ease;

stroke: rgb(12, 27, 87);
stroke-width: 2;
stroke-dasharray: 200px, 16px;
stroke-dashoffset: 70px;
}

a.btn-svg:hover svg rect {
stroke-dashoffset: 284px;
}

a.btn-svg span {
color: rgb(12, 27, 87);
}
/* end btn */

.prosciutto_btn {
    position: relative;
}
a.btn-svg  {
    position: absolute;
    right: 2rem;
}


@media screen and (max-width: 600px) {
    #item {
        padding-top: 168px;
    }
    #item .p_position_1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    #item .p_position_1::before {
        transform: scale(0.7);
        top: -140px;
    }
    #item .p_position_2 {
        display: flex;
        flex-direction: column;
    }
    #item .p_position_2 p {
        padding-right: 0rem;
        padding-bottom: 1rem;
    }
    .slider{
        width:100%;
    }
    .prosciutto_text {
        padding-bottom: 1rem;
    }
    .prosciutto_text h3 {
        margin-top: 1rem;
    }
    a.btn-svg  {
        right: 0rem;
    }
    
}


/* item--salame */

#item .salame_position {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
#item .salame_position .img-wrap {
    width: 100%;
}

#item .salame_position img {
    width: 100%;
}

#item .salame_position p {
    padding-right: 2rem;
    padding-top: 1rem;
    margin-bottom: 1rem;
}

#item .salame_position::before {
    content: url(images/chouzume.png);
    transform: scale(1);
    position: absolute;
    top: -120px;
    left: 0;
}


@media screen and (max-width: 600px) {
    #item .salame_position {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    #item .salame_position img {
        width: 100%;
    }
    #item .salame_position::before {
        transform: scale(0.7);
    }
    #item .salame_position p {
        padding-right: 0rem;
    }
    
}

/* store info */

/* button */
.button006 {
    padding: 80px 40px ;
}
/* 006 */
.button006 a {
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 20px;
    color: rgb(12, 27, 87);
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button006 a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: rgb(12, 27, 87);
    transition: 0.3s;
}
.button006 a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: rgb(12, 27, 87);
    transition: 0.3s;
}
.button006 a:hover:before, .button006 a:hover:after {
    right: -2.5em;
}
.button006 a:hover {
    background: #fff;
    color: rgb(12, 27, 87);
}


/* article */

hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

hr {
    height: 8px;
    background-image: repeating-linear-gradient(45deg, #ccc 0, #476eb7 1px, transparent 0, transparent 50%), repeating-linear-gradient(135deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%);
    background-size: 8px 8px;
}

#article {
    margin-top: 80px;
    background-color: rgba(238, 235, 227, 0.7);
    padding-bottom: 40px;
}


.chef_menu_text {
    width: 80%;
    margin: 0 auto;
    padding-top: 60px;
    margin-bottom: 40px;
}

.chef_menu_text h3 {
    font-size: 2rem;
    line-height: 3rem;
}


/* 共通 */
.changeCard ul {
    /* background-color: rgb(249,248, 244); */
    padding: 0;
    list-style: none;
    border: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 20px;

    width: 80%;
    margin: 0 auto;
}
.changeItemTxt {
    width: 62%;
}
.changeItemTxt p.itemTitle {
    line-height: 1.56;
    margin: 0;
    font-weight: bold;
    color: rgb(12, 27, 87);
    margin-bottom: 10px;
}
.changeItemTxt ul.itemTag li {
    background: #f1f1f1;
    color: #707070;
    font-size: 0.7rem;
    padding: 2px 10px;
    position: relative;
}
p.itemCat {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgb(12, 27, 87);
    color: #FFF;
    font-size: 0.7rem;
    display: inline-block;
    padding: 1px 12px 0px;
    z-index: 2;
}
.pubdate {
    color: rgb(12, 27, 87);
    font-size: 0.7rem;
}
/* 共通ここまで */

/* GridCard変更後 */
li.changeItem.gridCard {
    width: 43.5%;
    margin-bottom: 30px;
}
li.changeItem.gridCard a {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 2px;
    background-color: rgb(249,248, 244);
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    height: 100%;
    padding: 0;
    position: relative;
    text-decoration: none;
}
li.changeItem.gridCard a:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
li.changeItem.gridCard a p.itemCat {
    top: 0px;
    left: 0px;
}
li.changeItem.gridCard a .changeItemTxt {
    width: 90%;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
}
li.changeItem.gridCard a img {
    width: 100%;
    margin: 0 0 12px;
}
li.changeItem.gridCard .changeItemTxt ul.itemTag {
    display:none;
}

@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
li.changeItem.gridCard {
    width: 100%;
    margin-bottom: 20px;
}
.chef_menu_text h3 {
    font-size: 1.6rem;
    line-height: 2.4rem;
}
li.changeItem.gridCard a .changeItemTxt {
    width: 88%;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
}
}





.instagram p {
    margin-top: 2rem;
    margin-bottom: 1rem;
}



/* 全幅指定 */
.full-width {
    margin: 0 calc(50% - 50vw);
    padding: 0em calc(50vw - 50%);
}
/* pタグの余白を削除 */
.wpcf7-form p {
    margin-bottom: 0;
    width:100%;
}
/* 背景色（お好きな色に） */
section.contact {
    background-color: rgb(249,248,244);
}
/*  フォームの幅（自由に変えてOK） */
.contactForm {
    max-width: 700px;
    margin: 0 auto;
}
/* 各項目の下部余白 */
.contact_item {
    margin-bottom: 2.5rem;
}
/* 項目名 */
.label {
    display: block;
    font-size: 01rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    margin-bottom: .4rem;
    font-weight: bold;
}
/* 必須タグと任意タグ共通のスタイル */
.label_tag {
    font-size: 0.7rem;
    color: #ffffff;
    border-radius: .3rem;
    margin-right: 1rem;
    padding: 5px 10px;
}
/* 必須タグ */
.label_must {
    background-color: rgb(12,27,87);
}
/* 任意タグ */
.label_option {
    background-color: #888988;
}
/* 名前やメールアドレスなどユーザーが入力する箇所 */
.inputs {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="text"],input[type="email"] {
    border: solid 1px rgb(12,27,87);;
    padding: .5rem;
    font-size: 1.2rem;
	width:100%;
}
/* お問い合わせ内容を入力する箇所 */
textarea.form-control {
    border: solid 1px #707070;
    padding: .5rem;
    height: 207px;
    font-size: 1.8rem;
}
.wpcf7-textarea {
	width:100%;
}


/* Instagram */
#contact .instagram {
    text-align: center;
    width: 80%;
    margin: 0 auto;
}


#contact .instagram img {
    width: 6%;
}


/* ボタン */
.btnArea {
    text-align: center;
}
.wpcf7-spinner {
	display:none;
}
input[type="submit"]{
    background: rgb(12,27,87);
    border: 2px solid #ffffff;
    width: 280px;
    color: #ffffff;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: .3em;
    text-indent: .3em;
    font-weight: bold;
    padding: 1.1rem 0;
    margin-top: 2rem;
    cursor: pointer;
    border-radius: .3rem;
    transition: all .3s;
	   
}
/* ボタンにホバーした時 */
input[type="submit"]:hover {
    color: rgb(12,27,87);
    background-color: #ffffff;
    border-color: rgb(12,27,87);
}
/* ローダー */
.wpcf7 .ajax-loader {
    display: block;
    margin: 0 auto;
}
 .sec__heading_contact {
text-align:center	;
}

/* モバイル版 */
@media screen and (max-width: 480px) {
	.full-width {
    margin: 0 calc(50% - 50vw);
    padding: 5em calc(50vw - 50%);
		padding-bottom: 0;
		width:80%;
		margin:0 auto;
}
    .contact_item {
        margin-bottom: 1.6rem;
    }
    .label {
        font-size: 1.2rem;
        margin-bottom: .4rem;
    }
    .label_tag {
        font-size: 0.7rem;
    }
    input[type="text"],input[type="email"] {
        padding: .4rem;
        font-size: 1rem;
    }
    textarea {
        padding: .4rem;
        font-size: 1.1rem;
    }
    input[type="submit"]{
        font-size: 1rem;
			    width:80%;
        margin:0 ;
    }
	.wpcf7-form p {
    margin-bottom: 0;
    width:95%;
}
	
	#contact .instagram img {
    width: 12%;
}
	header {
		    background-color: #dddddd36;
	}
}






.pagetop-h2 {
    display: flex;
    justify-content: center;
    align-items:center;
    padding-top: 110px;
    margin-bottom: 40px;
}

.pagetop-h2 h2 {
    font-size: 2.2rem;
    padding: 0 2rem;
}

.pagetop-h2 .img {
    width: 4rem;
}

.pagetop-h2 img {
    width: 100%;
}
@media screen and (max-width: 600px) {
    .pagetop-h2 {
        display: flex;
        justify-content: center;
        align-items:center;
        padding-top: 60px;
        margin-bottom: 40px;
    }
    
    .pagetop-h2 h2 {
        font-size: 1.4rem;
        padding: 0 1rem;
    }
    
    .pagetop-h2 .img {
        width: 2.6rem;
    }
    
    .pagetop-h2 img {
        width: 100%;
    }
}



#contact .pagetop-h3 {
    display: flex;
    justify-content: center;
    align-items:center;
    padding-top: 110px;
    margin-bottom: 40px;
}

#contact .pagetop-h2 h3 {
    font-size: 2.2rem;
    padding: 0 2rem;
}

#contact .pagetop-h2 .img {
    width: 4rem;
}

#contact .pagetop-h2 img {
    width: 100%;
}
@media screen and (max-width: 600px) {
    #contact .pagetop-h2 {
        display: flex;
        justify-content: center;
        align-items:center;
        padding-top: 60px;
        margin-bottom: 0px;
    }
    
    #contact .pagetop-h2 h3 {
        font-size: 1.4rem;
        padding: 0 2rem;
    }
    
    #contact .pagetop-h2 .img {
        width: 2.6rem;
    }
    
    #contact .pagetop-h2 img {
        width: 100%;
    }
}

.reCAPTCHA  {
    padding: 40px!important;
    }


/* footer */
.footer {
    color: #808080;
    background: #e5e5e5;
    text-align: center;
    padding: 30px;
    margin-top: 60px;
    }
    .footer a {
        color: rgb(12, 27, 87);
        text-decoration: none;
    }
    .footer a:hover {
        text-decoration: none;
        color: rgb(249,248, 244);
        transition: 0.3s;
    }

    .footer .menu {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer .menu li {
        margin: 0;
        padding: 0 0px;
    }
    .footer .copyright {
        margin: 0;
        padding: 20px 0 0 0;
        color: rgb(12, 27, 87);
    }


/* endfooter */


#page-top {
	display: block;
	position: fixed;
	right: 20px;
    bottom: 20px;
	width: 70px;
	height: 70px;
	line-height: 70px;
	background: rgb(12, 27, 87);
	color: rgb(249,248, 244);
	font-size: 35px;
	text-align: center;
	text-decoration: none;
    opacity: 0.8;
	transition: 0.3s;
}

#page-top i {
    padding-top: 14px;
}

#page-top:hover {
	opacity: 0.5;
}

@media screen and (max-width: 640px) {
	#page-top {
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 28px;
		right: 20px;
		bottom: 20px;
        opacity: 0.8;
	}
    #page-top i {
        padding-top: 11px;
    }
}


/* 左からスライド */
.img-wrap {
    opacity: 1;
    animation-delay: .8s;
}

.img-animation {
animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
overflow: hidden;
position: relative;
}

.img-animation:before {
animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
background: rgb(249,248, 244);
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

@keyframes img-opacity {
100% {
    opacity: 1;
}
}

@keyframes img-animation {
100% {
    transform: translateX(100%);
}
}