@charset "UTF-8";
/* CSS Document */
/*--------------------
01.共通
02.ヘッダー
03.フッター
04.
--------------------*/

/*----------
01.共通
----------*/
html {
    scroll-behavior: smooth;
}
@font-face {
font-family: 'Roboto-Medium';
src:url('../font/Roboto-Medium.woff') format('woff'),
url('../font/Roboto-Medium.ttf') format('truetype'),
url('../font/Roboto-Medium.otf')format('opentype'); /* ttf - Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Roboto-Regular';
src:url('../font/Roboto-Regular.woff') format('woff'),
url('../font/Roboto-Regular.ttf') format('truetype'),
url('../font/Roboto-Regular.otf')format('opentype'); /* ttf - Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Koburina-Gothic-Std';
src:url('../font/Koburina-Gothic-Std.otf')format('opentype'), url('../font/Koburina-Gothic-Std.woff') format('woff'),
url('../font/Koburina-Gothic-Std.ttf') format('truetype'); /* ttf - Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}


body{
-webkit-font-smoothing: antialiased;
}

*{
box-sizing: border-box;
}

*:focus {
outline: none;
}

#wrapper{
width: 100%;
overflow: hidden;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
font-weight: 400;
color: #2D2E2A;
}

.pc{
display: block;
}

.sp{
display: none;
}

.contents_in{
max-width: 1080px;
width: 89.33%;
margin: 0 auto;
}
.under_page{
margin-top: 59px;
}
.under_header + .header_nav + .under_page{
margin-top: 86px;
}
a{
color: #2D2E2A;
}

a:hover{
color:#2D2E2A;
}

a:link{
color:#2D2E2A;
}

img{
width: 100%;
height: auto;
display: block;
}
img.pc{
display: block;
}
img.sp{
display: none;
}
button{
appearance: none;
border: none;
color: transparent;
background-color: transparent;
}
.cnt_img{
overflow: hidden;
}

.flex_box{
display: flex;
}
.en_font{
font-family: 'Roboto-Medium',sans-serif;
}
.ja_font{
font-family: 'Noto Sans JP', sans-serif;
}
.h2_ptn_01.ja_font{
font-family: 'Noto Sans JP', sans-serif;
}
.h2_ptn_01{
font-family: 'Roboto-Medium',sans-serif;
font-weight: 500;
text-align: center;
font-size: 22px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 27px;
padding: 0 0 33px;
position: relative;
margin: 0 0 40px;
}
.h2_ptn_01::after{
content: "";
display: inline-block;
position: absolute;
width: 1px;
height: 15px;
background-color: #A5BCE1;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}

.border_title{
font-size: 14px;
line-height: 20px;
font-weight: 500;
padding: 0 21.97px 0 6px;
position: relative;
}
.border_title::before, .border_title.has_arrow::after{
content: '';
display: inline-block;
}
.border_title::before{
width: 2px;
height: 70%;
background-color: #A5BCE1;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.border_title.has_arrow::after{
width: 8.17px;
height: 9.83px;
position: absolute;
top: 6px;
right: 0;
background: center/contain no-repeat url(../img/arrow_black.png);
}
.black_btn, .white_btn{
font-size: 14px;
line-height: 20px;
text-align: center;display: block;
max-width: 215px;

margin: 0 auto;
position: relative;
}
.black_btn{
padding: 10px 0;
background-color: #2D2E2A;
color: #fff;
}
.black_btn:link{
color: #fff;
}
.black_btn::after{
content: "";
display: inline-block;
width: 7px;
height: 8.42px;
background: center/contain no-repeat url(../img/arrow_white.png);
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.black_btn:hover{
color: #fff;
}
.black_btn:hover::after{
right: 8px;
transition: 0.3s;
}

.white_btn{
color: #2D2E2A;
padding: 9px 0;
border: 1px solid #2D2E2A;
}
.white_btn::after{
content: "";
display: inline-block;
width: 7px;
height: 8.42px;
background: center/contain no-repeat url(../img/arrow_black.png);
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.white_btn:hover{
color: #2D2E2A;
}
.white_btn:hover::after{
right: 8px;
transition: 0.3s;
}

.img_scale img{
transition: 0.3s;
}
.img_scale:hover img{
transition: 0.3s;
transform: scale(1.1);
}


.common_title{
text-align: center;
line-height: 1.8;
font-size: 22px;

}
.common_title .contents_in{
border-bottom: 1px solid #A5BCE1;
padding: 60px 0;
}

#fixed_btn{
display: none;
background-color: rgba(255,255,255,0.6);
padding: 13.8px 20px;
align-items: center;
bottom: 0;
width: 100%;
}
#fixed_btn a{
margin: 0;
max-width: initial;

}
#fixed_btn img{
max-width: 100px;
margin: 0 auto;
}
#fixed_btn .insta{
max-width: 33.28px;
margin-right: 16.7px;
}
#fixed_btn a:not(.insta){
width: 42.08%;
text-align: center;
padding: 10.5px 0;
}
#fixed_btn .black_btn{
margin-right: 10px;
border: 2px solid #2D2E2A;
line-height: 41.93px;
}
#fixed_btn .white_btn::after {
right: 18px;
background-image: url(../img/arrow_black.png);
}
#fixed_btn a:not(.insta).white_btn{
line-height: 41.93px;
    font-weight: 700;
    background: #fff;
}

#fixed_btn a:not(.insta) {
padding: 5.5px 0;
}

#fixed_btn a:not(.insta).white_btn:hover::after{
right: 8px;
transition: 0.3s;
}

#fixed_btn.fixed{
display: flex;
position: fixed;

}
#fixed_btn.fixed.none{
display: none;
}



#fixed_btn .flex_box{
max-width: 620.15px;
justify-content: center;
margin: 0 auto;
align-items: center;
width: 48.47%;
}

.slick-dots{
display: flex;
justify-content: center;
}
.slick-dots li{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #B5B5B5;
margin: 0 10px;
}
.slick-dots li.slick-active{
background-color: #A5BCE1;
}
/*----------
02.ヘッダー
----------*/
header{
position: fixed;
width: 100%;
top: 0;
z-index: 10;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
header .kitchen_logo{
max-width: 130px;
}
header h1{
max-width: 160px;
}
header .contents_in{
width: 96%;
max-width: 1200px;
justify-content: space-between;
align-items: center;
}
header .bg_nav ul{
display: none;
}
header .no_icon{
margin-right: 10px;
font-weight: 500;
}
header nav ul{
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
font-size: 14px;
}
.header_nav .has_icon{
font-size: 14px;
line-height: 19px;
font-weight: 500;
position: relative;
font-family: 'Roboto-Medium','Noto Sans JP', sans-serif;
}
header .has_icon a, header .has_icon div{
padding: 20px 8px;
display: flex;
cursor: pointer;
align-items: center;
}
header .has_icon div{
display: flex;
}
header .has_icon:hover{
background-color: #F7F7F7;
}

header .has_icon:hover .small_nav{
display: block;
transition: 0.4s;
}

header .has_icon p{
position: relative;
display: inline-block;
}
header .has_icon_a::after{
content: "";
display: inline-block;
width: 18.77px;
height: 18.77px;
background: center/contain no-repeat url(../img/plus.png);
margin-left: 10px;
}
header .has_icon:hover .has_icon_a::after{
transition: 0.3s;
background: center/contain no-repeat url(../img/minus.png);
}
header nav ul .has_icon:first-of-type{
width: 29.973%;
}
header nav ul .has_icon:nth-of-type(2){
width: 37.5%;
}
header nav ul .has_icon:nth-of-type(3),header nav ul .has_icon:nth-of-type(4){
width: 27%;
}
header .small_nav{
position: fixed;
display: none;
z-index: 10;
padding: 5px 0;
background-color: #F7F7F7;
font-size: 12px;
line-height: 17px;
width: 321px;
font-weight: 400;
font-family: 'Roboto-Regular','Noto Sans JP', sans-serif;
transition: 0.4s;
}

header .small_nav ul{
display: block;
}
header .small_nav a{
padding: 7.5px 12.5px;

justify-content: space-between;
position: relative;
width: 100%;
position: relative;
}
header .small_nav a::after{
content: "";
display: inline-block;
width: 5.28px;
height: 8.42px;
background: center/contain no-repeat url(../img/arrow_black.png);
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
}
header .small_nav a:hover{
background-color: #E3E0E0;
}
header nav .has_icon{
transition: 0.4s;
}
/* header p:nth-child(2) {
translate: none;
rotate: none;
scale: none;
transform: translate(0px, 0px);
background-position: 100% 0%;
} */

.sample_link12{
display: inline-block;
perspective-origin: 50% 50%;
vertical-align: bottom;
overflow: hidden;
}
.sample_link12 span{
display: inline-block;
position: relative;
transition: .4s;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.sample_link12:hover span{
-webkit-transform: translate3d(0, 0, -30px) rotateX(90deg);
transform: translate3d(0, 0, -30px) rotateX(90deg);
}
.sample_link12 span::before{
display: inline-block;
position: absolute;
left: 0;
top: 0;
content: attr(data-text);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d(0, 105%, 0) rotateX(-90deg);
transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
header .header_bottom{
display: block;
text-align: center;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.03em;
padding: 5px 10px;
font-weight: 500;
}
/*----------
03.フッター
----------*/
footer{
background-color: #2D2E2A;
}
footer .contents_in{
padding: 29px 0 29.4px;
align-items: center;
max-width: 918px;
justify-content: space-between;
}
footer a, footer a:link{
color: #fff;
}
footer a:hover{
opacity: 0.7;
color: #fff;
}
footer ul{
display: flex;
width: 57.73%;
justify-content: space-between;
}
footer .line{
display: block;
max-width: 63px;
}
footer .copy_right{
font-size: 12px;
line-height: 17px;
text-align: center;
color: #fff;
padding: 3.6px 0 6px;
border-top: 1px solid #6A6A6A;
font-weight: 300;
}

footer .insta{
margin-right: 20px;
}

footer .insta img {
width: 40px;
height: 40px;
}

footer .line {
max-width: 40px;
}
@media only screen and (max-width:1225px){
header .has_icon p::after {
width: 15px;
height: 15px;
margin-left: 5px;
}
header nav ul {
font-size: 13px;
}
}
@media only screen and (max-width:1200px){
/*----------
02.ヘッダー
----------*/
header .contents_in {
padding-top: 13.5px;
flex-direction: column;
}
header nav {
width: 100%;
margin-right: 0;
}
header nav ul .has_icon:nth-of-type(2){
width: 33%;
}
header nav ul .has_icon:first-of-type {
width: 23%;
}
header nav ul .has_icon:nth-of-type(3), header nav ul .has_icon:nth-of-type(4) {
width: 22%;
}

.header-logo-menu{
width: 100%;
}
}
@media only screen and (max-width:1075px){
/*----------
01.共通
----------*/
.under_page{
margin-top: 100.5px;
}
.under_header + .header_nav + .under_page{
margin-top: 127.5px;
}
}
@media only screen and (max-width:1050px){
/*----------
02.ヘッダー
----------*/
header nav ul .has_icon:nth-of-type(2) {
width: 31.5%;
}
header nav ul .has_icon:first-of-type {
width: 23.5%;
}
header nav ul .has_icon:nth-of-type(3) {
width: 23.5%;
}



}
@media only screen and (max-width:1024px){

/*----------
03.フッター
----------*/
footer ul{
width: 70%;
}

}
@media only screen and (max-width:900px){
/*----------
02.ヘッダー
----------*/
header .no_icon {
margin-right: 5px;
}
.header_nav .has_icon{
font-size: 11px;
}
header nav ul {
font-size: 11px;
}

header nav ul .has_icon04 .small_nav{
width: auto;
min-width: 170px;
}

}
@media only screen and (max-width:750px){

/*----------
01.共通
----------*/

.pc{
display: none;
}

.sp{
display: block;
}

#wrapper{
font-size: 14px;
}
img.pc{
display: none;
}
img.sp{
display: block;
}
.contents_in{
width: 89.33%;
}
.h2_ptn_01{
font-size: 16px;
letter-spacing: 0.1em;
line-height: 19px;
padding: 0 0 35px;
margin: 0 0 20px;
}

#fixed_btn .flex_box {
width: 100%;
}

#fixed_btn a:not(.insta){
padding: 0;

}

#fixed_btn a:not(.insta).white_btn{
    line-height: 45.13px;
}

.common_title .contents_in{
padding: 40px 0;
line-height: 26px;
font-size: 18px;
}

.under_page {
margin-top: 63px;
}
.under_header + .header_nav + .under_page{
margin-top: 78px;
}
/*----------
02.ヘッダー 750
----------*/
header .kitchen_logo{
max-width: 110px;
}
header nav.pc{
display: none;
}
header .contents_in {
padding: 18px 0 17px;
position: relative;
z-index: 15;
}
header.under_header .contents_in{
padding: 18px 0 5px;
}
header .open{
display: block;
width: 21.87px;
height: 14px;
position: absolute;
right: 20px;
top: 50%;
cursor: pointer;
transform: translateY(-50%);
}
header .open span{
display: block;
width: 100%;
height: 2px;
background-color: #2D2E2A;
position: absolute;
transition: 0.3s;
}
header .open span:nth-child(2){
top: 7px;
}
header .open span:nth-child(3){
top:14px;
}
header .open.on{
width: 11.88px;
height: 11.88px;
}
header .open.on span:nth-child(1){
transform: rotate(-45deg);
top: 5px;
width: 16.8px;
}
header .open.on span:nth-child(2){
opacity: 0;
}
header .open.on span:nth-child(3){
top: 5px;width: 16.8px;
transform: rotate(45deg);
}
header + nav.sp{
display: none;
}
header + nav.sp.fixed{
position: fixed;
height: calc(100% - 60px);
background: #fff;
top: 60px;
bottom: 0;
display: block;
overflow-y: auto;
left: 0;
right: 0;
z-index: 9;
}
.for_kithen + nav.sp.fixed{
top: 79.8px;
height: calc(100% - 79.8px);
}

.sp_header + nav.sp.fixed{
top: 90px;
height: calc(100% - 90px);
}

.header_nav ul {
display: block;
}
.header_nav ul .has_icon:nth-of-type(1) div,.header_nav ul .has_icon:nth-of-type(2) div,.header_nav ul .has_icon:nth-of-type(3) div{
width: 100%;
border-bottom: 1px solid #DBDBDB;
padding: 25px 20px;
cursor: pointer;
font-size: 14px;
}
.header_nav .small_nav{
display: none;
padding: 12.5px 0;
background-color: #F7F7F7;
}
.header_nav .small_nav a{
padding: 12.5px 30px;
font-size: 12px;
line-height: 17px;
display: block;
width: 100%;
}
.header_nav .small_nav a::after{
content: "";
display: inline-block;
width: 5.28px;
height: 8.42px;
background: center/contain no-repeat url(../img/arrow_black.png);
position: absolute;
right: 30px;
}
.header_nav .has_icon label::after{
content: "";
display: inline-block;
width: 18.77px;
height: 18.77px;
background: center/contain no-repeat url(../img/plus.png);
position: absolute;
top: 25px;
right: 13px;
transition: 0.3s;
}

.header_nav input:checked + label::after{
transition: 0.3s;
background: center/contain no-repeat url(../img/minus.png);
}
.header_nav .small_nav ul {
padding: 12.5px 0;
background-color: #EAEAEA;
}
.header_nav .small_nav ul a{
padding: 12.5px 30px;
}
.header_nav .small_nav02{
padding: 0;
}
.header_nav .sub_title a{
padding: 25px 30px;
}

header .header_bottom{
font-size: 12px;
padding: 0;
padding-bottom: 10px;
}
.header_nav .no_icon a, header nav ul .has_icon label{
width: 100%;
border-bottom: 1px solid #DBDBDB;
padding: 25px 20px;
cursor: pointer;
font-size: 14px;
display: block;
}

.header_nav .has_icon, .header_nav .no_icon a{
font-family: 'Roboto-Regular','Noto Sans JP', sans-serif;
font-weight: 400;
}

header .has_icon_a::after{
content: none;
}

header nav ul .has_icon:nth-of-type(3), header nav ul .has_icon:nth-of-type(4),header nav ul .has_icon:nth-of-type(2){
width: 100%;
}

header .has_icon a, header .has_icon div {
padding: 0;
}

header nav ul .has_icon:nth-of-type(4), header nav ul .has_icon label{
padding: 25px 20px;
display: block;
}

header .small_nav{
position: static;
width: 100%;
}

header .has_icon:hover .small_nav, header .has_icon input,header .has_icon a.pc, header .has_icon div.pc{
display: none;
}

header nav ul .has_icon:nth-of-type(4):hover .small_nav{
display: block;
}


header nav ul .has_icon:first-of-type{
width: 100%;
}

header nav ul .has_icon04 .small_nav {
width: auto;
min-width: 170px;
display: block;
padding: 0;
background: #fff;
}

.header_nav .has_icon04::after, .header_nav .has_icon04 .small_nav a::after{
content:none;
}

header nav ul .has_icon:nth-of-type(4){
padding: 0;
}



.header_nav input + .small_nav{
display: none;
}
.header_nav input:checked + label + .small_nav {
display:block;
padding: 0;
}
.header_nav #check01, .header_nav #check02, .header_nav #check03{
display:none;
}

#nav-drawer {
position: relative;
width: 100%;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}

/*アイコンのスペース*/
#nav-open {
display: block;
width: 25px;
height: 20px;
position: absolute;
top: -25px;
cursor: pointer;
right: 0;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:nth-child(2){
top: 8px;
}

#nav-open span:nth-child(3){
bottom: 0;

}

input:checked + #nav-open span:first-child{
transform: rotate(45deg);
top: 9px;
}

input:checked + #nav-open span:nth-child(2){
opacity: 0;
}

input:checked + #nav-open span:nth-child(3){
transform: rotate(-45deg);
top: 9px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 63px;
left: 0;
z-index: 10;
width: 100%;
height: calc(100% - 63px);
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}

.header-logo-menu{
display: flex;
display: -moz-flex;
display: -o-flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
-moz-flex-direction: row;
-o-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
width: 100%;
}
/*----------
03.フッター 750
----------*/
footer .contents_in{
padding: 20px 0 2px;
}
footer ul{
flex-direction: column;
width: 58%;
}
footer ul li{
margin-bottom: 20px;
}
footer .copy_right{
padding: 3px 0 7px;
}

}
@media only screen and (max-width:360px){
/*----------
03.フッター 360
----------*/
footer ul{
width: 60%;
}

footer .contents_in{
flex-direction: column;
margin-bottom: 30px;
}
}