@charset "UTF-8";


h2.top_tit{
max-width: 300px;
position: relative;
}
h2.top_subtit{
max-width: 60px;
}
@media only screen and (max-width:767px) {
h2.top_tit{
max-width: 250px;
}
h2.top_subtit{
max-width: 230px;
}
}

h3{
font-size: 40px;
font-weight: 700;
display: inline-block;
line-height: 100%;
}

h4{
color: #cb1818;
font-weight: 700;
font-size: 30px;
position: relative;
padding-left: 30px;
}
h4:before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 20px;
height: 4px;
background: #cb1818;
}


/* ----------------------------------------
	#　トップページ
---------------------------------------- */
#wrap{
width: 100%;
letter-spacing: 0.05em;
position: relative;
background: #ffe564;
background-image: url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/logo_bg01.png");
background-repeat: no-repeat;
background-size: 400px;
background-position: top right;
}
@media only screen and (max-width:1024px) {
#wrap{
background-image: none;
}
}

.pc{display: inline-block;}
.tab{display: none;}
.smp{display: none;}
@media only screen and (max-width:1024px) {
.tab{display: block;}
}
@media only screen and (max-width:767px) {
.pc{display: none;}
.smp{display: block;}
}


/* ----------------------------------------
	#　ヘッダーメニュー
---------------------------------------- */
header{
width: 100%;
display: flex;
align-items: center;
padding: 15px;
position: fixed;
z-index: 1000;
transition: background-color 0.3s ease;
background-color: transparent;
}
/* スクロールしたらヘッダーメニューのフォントカラー変更 */
header.is-header{
background-color: #ffe564;
}
@media only screen and (max-width:1024px) {
header{
background-color: #ffe564;
height: 70px;
padding: 0 15px;
}
}

.head_img{
max-width: 300px;
}
@media only screen and (max-width:1024px) {
.head_img{
max-width: 250px;
}
}
@media only screen and (max-width:767px) {
.head_img{
max-width: 200px;
}
}

.submenu{
width: 100%;
}

#head_menu{
width: 100%;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
@media only screen and (max-width:1024px) {
#head_menu{
width: 100%;
padding: 30px;
flex-direction: column;
}
}

#head_menu li{
margin-left: 30px;
}
@media only screen and (max-width:1024px) {
#head_menu li{
margin-left: 0;
width: 100%;
border-bottom: 1px dotted #000;
}
}

#head_menu li a{
padding-bottom: 5px;
font-weight: 500;
position: relative;
display: block;
}
#head_menu li a:after{
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000;
transform: scale(1, 1);
transform-origin: left top;
transition: transform .3s;
}
#head_menu li a:hover:after{
transform: scale(0, 1);
transform-origin: right top;
}
@media only screen and (max-width:1024px) {
#head_menu li a{
width: 100%;
padding: 25px 10px;
text-align: center;
font-size: 20px;
}
#head_menu li a:after{
display: none;
}
}



/* ----------------------------------------
	#　スマホメニュー
---------------------------------------- */
@media only screen and (max-width:1024px) {

#menu{
display: block;
position: fixed;
z-index: 5;
right: -150%;
top: 70px;
width: 70%;
height: 100svh;
transition: all .7s;
-ms-overflow-style: none;
scrollbar-width: none;
background: #ffe564;
}

#menu.active{
right: 0;
}

#icon{
display: flex;
position: fixed;
z-index: 1000;
top: 13px;
right: 10px;
width: 50px;
height: 50px;
flex-direction: column;
justify-content: center;
transition: all .3s ease 0s;
opacity: 1;
}

#icon span{
display: block;
margin: 0 auto;
width: 30px;
height: 3px;
background-color: #000;
opacity: 1;
transition: all .3s ease 0s;
}

#icon span:first-of-type{
margin-bottom:8px;
}

#icon span:last-of-type{
margin-top: 8px;
}

#icon.active span:nth-of-type(1){
transform: rotate(45deg);
margin-top: 11px;
opacity: 1;
}

#icon.active span:nth-of-type(2){
margin-left: 10px;
transform: rotate(-45deg);
margin-top: -11px;
opacity: 1;
}

#icon.active span:nth-of-type(3){
opacity: 0;
}
}

#content{
width: 100%;
position: relative;
overflow: hidden;
padding-top: 150px;
}
@media only screen and (max-width:1024px) {
#content{
padding-top: 100px;
}
}


/* ----------------------------------------
	#　スライダー
---------------------------------------- */
#splide01{

}

#splide01 img{
border-radius: 30px;
}

.slider_box{
position: relative;
width: 80%;
max-width: 1200px;
}
@media only screen and (max-width:767px) {
.slider_box{
width: 92%;
margin: 0 auto;
}
}

.chara01{
position: absolute;
width: 25%;
max-width: 290px;
bottom: 0;
right: -20%;
}

.splide__arrow{-ms-flex-align:center;align-items:center;background:#fff;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;width:50px;height:50px;border:2px solid #cb1818;-ms-flex-pack:center;justify-content:center;padding:0;position:absolute;top:50%;transform:translateY(-50%);z-index:1}

.splide__arrow--prev{
display: none !important;
}
@media only screen and (max-width:767px) {
.splide__arrow--prev{
display: flex !important;
}
}

.splide__arrow--next{
left: 7.5%;
transform: rotate(180deg) translateY(50%);
}
@media only screen and (max-width:767px) {
.splide__arrow--next{
left: auto;
right: -0.5em;
transform: rotate(0) translateY(-50%);
}
.splide__arrow--prev{
left: -0.5em;
}
}

.splide__arrow--next:before,
.splide__arrow--next:after,
.splide__arrow--prev:before,
.splide__arrow--prev:after{
content: "";
position: absolute;
}
.splide__arrow--next:before,
.splide__arrow--prev:before{
content: "";
left: 50%;
width: 30px;
height: 2px;
background: #cb1818;
transform: translate(-50%,0);
}
@media only screen and (max-width:767px) {
.splide__arrow--next:before,
.splide__arrow--prev:before{
width: 20px;
}
}

.splide__arrow--next:after,
.splide__arrow--prev:after{
width: 10px;
height: 10px;
}
.splide__arrow--next:after{
right: 10px;
border-top: 2px solid #cb1818;
border-right: 2px solid #cb1818;
transform: rotate(45deg);
}
@media only screen and (max-width:767px) {
.splide__arrow--prev:after{
left: 10px;
border-bottom: 2px solid #cb1818;
border-left: 2px solid #cb1818;
transform: rotate(45deg);
}

.splide__arrow{
width: 40px;
height: 40px;
}
}


/* ----------------------------------------
	#　TOP - 日南工業について
---------------------------------------- */
#top_about{
padding: 100px 0;
}
@media only screen and (max-width:1024px) {
#top_about{
background-image: url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/logo_bg02.png");
background-repeat: no-repeat;
background-position: top 10% center;
background-size: 70%;
}
}

.top_about_box{
display: flex;
align-items: center;
}
@media only screen and (max-width:1024px) {
.top_about_box{
flex-direction: column-reverse;
}
}

.top_about_img img{
object-fit: cover;
object-position: left center;
height: 700px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
@media only screen and (max-width:1024px) {
.top_about_img img{
height: auto;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}

.top_about_txt{
min-width: 600px;
margin-right: auto;
display: flex;
flex-direction: column;
align-items: center;
}
@media only screen and (max-width:1024px) {
.top_about_txt{
width: 92%;
min-width: auto;
margin: 0 auto 50px;
text-align: center;
}
}

.top_about_txt p{
line-height: 250%;
font-size: 18px;
margin: 30px 0;
}
@media only screen and (max-width:1024px) {
.top_about_txt p{
line-height: 200%;
}
}

.link_more{
padding-bottom: 5px;
color: #cb1818;
font-weight: 700;
font-size: 20px;
position: relative;
display: inline-block;
}
.link_more:after{
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #cb1818;
transform: scale(1, 1);
transform-origin: left top;
transition: transform .3s;
}
.link_more:hover:after{
transform: scale(0, 1);
transform-origin: right top;
}



/* ----------------------------------------
	#　商品紹介
---------------------------------------- */
#top_item{
background-color: #fff;
background-image: url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/aida_bg01.png"),url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/aida_bg02.png");
background-position: top center, bottom center;
background-repeat: no-repeat, no-repeat;
background-size: 100%, 100%;
padding: 200px 0;
}
@media only screen and (max-width:1024px) {
#top_item{
padding: 20vw 0;
}
}
@media only screen and (max-width:767px) {
#top_item{
padding: 30vw 0;
}
}

.top_item_box{
width: 92%;
max-width: 1000px;
margin: 0 auto;
}

.top_item_txt{
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
@media only screen and (max-width:1024px) {
.top_item_txt{
flex-direction: column;
align-items: center;
text-align: center;
}
}
@media only screen and (max-width:767px) {
.top_item_txt{
margin-bottom: 30px;
}
}

.top_item_txt p{
line-height: 250%;
font-size: 18px;
margin: 30px 0;
}
@media only screen and (max-width:1024px) {
.top_item_txt p{
line-height: 200%;
margin-top: 50px;
}
}

.top_item_list li{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 80px;
}
.top_item_list li:nth-child(odd){
flex-direction: row-reverse;
}
.top_item_list li:last-child{
margin-bottom: 0;
}
@media only screen and (max-width:767px) {
.top_item_list li,
.top_item_list li:nth-child(odd){
flex-direction: column;
}
}

.item_exp{
width: 45%;
margin-right: 5%;
text-align: justify;
}
.top_item_list li:nth-child(even) .item_exp{
margin-left: 5%;
margin-right: 0;
}
@media only screen and (max-width:767px) {
.item_exp,
.top_item_list li:nth-child(even) .item_exp{
width: 100%;
margin: 20px 5% 0;
}

.top_item_list li.item_other .item_exp{
text-align: right;
}
}

.item_img{
flex: 1;
}

.item_exp p{
line-height: 200%;
margin: 30px 0;
}
.item_exp > div{
text-align: right;
}
@media only screen and (max-width:767px) {
.item_exp p{
line-height:180%;
margin: 15px 0;
}
}

.item_other .item_img{
max-width: 400px;
}

.chara_kao01{
position: absolute;
max-width: 200px;
bottom: -50px;
right: -40%;
}
@media only screen and (max-width:1024px) {
.chara_kao01{
bottom: -20px;
}
}
@media only screen and (max-width:767px) {
.chara_kao01{
width: 60%;
right: -30%;
}
}


/* ----------------------------------------
	#　レシピ集
---------------------------------------- */
#top_recipe{
background: #db7d31;
padding: 80px 0 100px;
}

.top_recipe_box{
width: 92%;
max-width: 1200px;
margin-left: auto;
display: flex;
}
@media only screen and (min-width:1400px) {
.top_recipe_box{
margin-right: auto;
}
}
@media only screen and (max-width:1024px) {
.top_recipe_box{
margin: 0 auto;
}
}
@media only screen and (max-width:767px) {
.top_recipe_box{
flex-direction: column;
}
}

.top_recipe_con{
flex: 1;
margin: 30px 5% 0;
}
@media only screen and (max-width:1024px) {
.top_recipe_con{
margin-right: 0;
}
}
@media only screen and (max-width:767px) {
.top_recipe_con{
margin-left: 0;
}
}

.top_recipe_con p{
color: #fff;
font-size: 18px;
}

.top_recipe_list{
display: flex;
justify-content: space-between;
margin: 30px 0 20px;
flex-wrap: wrap;
}
@media only screen and (max-width:767px) {
.top_recipe_list{
flex-direction: column;
}
}

.top_recipe_list li{
width: calc(33% - 10px);
margin-bottom: 30px;
}
.top_recipe_list li:last-child{
display: none;
}
@media only screen and (max-width:1024px) {
.top_recipe_list li{
width: 48%;
}
.top_recipe_list li:last-child{
display: block;
}
}
@media only screen and (max-width:767px) {
.top_recipe_list li{
width: 100%;
max-width: 500px;
margin: 0 auto 30px;
}
.top_recipe_list li:last-child{
display: none;
}
}

.top_recipe_list li a{
display: flex;
flex-direction: column;
background: #fff;
padding: 10px;
border-radius: 30px;
}

.top_recipe_list li img{
border-radius: 20px;
height: 20vw;
max-height: 280px;
object-fit: cover;
}
@media only screen and (max-width:1024px) {
.top_recipe_list li img{
min-height: 230px;
}
}

.cat_box{
padding: 10px 5px;
}

.cat_box span{
font-size: 13px;
display: inline-block;
padding: 3px 10px;
margin-right: 5px;
border-radius: 5px;
line-height: 100%;
}
.cat_box span.cat01{background: #efaf18; border: 2px solid #efaf18;}
.cat_box span.cat02{border: 2px solid #db7d31;}

.top_recipe_tit{
font-size: 18px;
font-weight: 500;
padding: 0 5px 15px;
text-align: justify;
}

.top_recipe_con .link_more{
color: #fff;
}
.top_recipe_con .link_more:after{
background: #fff;
}

.top_recipe_list a:hover{
opacity: 0.7;
}

.recipe_none{display: none;}
@media only screen and (max-width:1024px) {
.recipe_none{display: block;}
}
@media only screen and (max-width:767px) {
.recipe_none{display: none;}
}



/* ----------------------------------------
	#　お知らせ
---------------------------------------- */
#top_news{
padding: 100px 0;
}

.top_news_box{
width: 92%;
max-width: 1200px;
margin-left: auto;
display: flex;
}
@media only screen and (min-width:1400px) {
.top_news_box{
margin-right: auto;
}
}
@media only screen and (max-width:1024px) {
.top_news_box{
margin: 0 auto;
}
}
@media only screen and (max-width:767px) {
.top_news_box{
flex-direction: column;
}
}

.top_news_con{
flex: 1;
margin: 15px 5% 0;
}
@media only screen and (max-width:1024px) {
.top_news_con{
margin-right: 0;
}
}
@media only screen and (max-width:767px) {
.top_news_con{
margin-left: 0;
}
}

.top_news_inner:first-child{
margin-bottom: 70px;
}

.top_news_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}

.top_news_list li{
width: calc(25% - 15px);
margin-bottom: 30px;
}
@media only screen and (max-width:767px) {
.top_news_list li{
width: 48%;
}
}

.top_news_list li img{
border-radius: 20px;
object-fit: cover;
}

.top_news_list .date{
font-size: 14px;
padding: 10px 0;
font-weight: 500;
line-height: 100%;
}

.top_news_tit{
font-size: 18px;
}

.top_news_list a:hover{
opacity: 0.7;
}


/* ----------------------------------------
	#　フッター
---------------------------------------- */
footer{
padding-bottom: 30px;
}

.foot_img{
width: 100%;
padding: 100px 0 120px;
background-image: url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/bottom_img.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

.foot_img > div{
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-align: right;
}
.foot_img > div p{
display: inline-block;
text-align: left;
font-size: 23px;
color: #fff;
line-height: 200%;
}
@media only screen and (max-width:1024px) {
.foot_img > div{
text-align: left;
}
}

.foot_box{
width: 92%;
max-width: 1200px;
margin: -30px auto 80px;
padding: 50px;
background: #fff;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-width:1024px) {
.foot_box{
width: 100%;
margin: 0 auto 30px;
border-radius: 0;
flex-direction: column;
}
}

.foot_add{
text-align: center;
}
.foot_add img{
max-width: 190px;
}
.foot_add p{
margin-top: 15px;
font-size: 14px;
}

.foot_menu{
margin-left: 5%;
display: grid;
}
@media only screen and (max-width:1024px) {
.foot_menu{
margin-left: 0;
}
}

.foot_menu li{
min-width: 240px;
margin-bottom: 15px;
margin-left: 50px;
}
.foot_menu li.about{
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.foot_menu li.item{
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.foot_menu li.recipe{
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.foot_menu li.contact{
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.foot_menu li.news{
grid-column: 2 / 3;
grid-row: 3 / 4;
}

.foot_menu li > a{
position: relative;
display: block;
font-weight: 500;
border-bottom: 2px solid #000;
padding: 7px 30px 7px 0;
}
.foot_menu li > a:after{
content: "";
position: absolute;
vertical-align: middle;
width: 10px;
height: 10px;
top: 50%;
right: 10px;
transform: translate(0, -50%);
border: 5px solid transparent;
border-left: 7px solid #000;
box-sizing: border-box;
}

.foot_menu li > div{
font-size: 14px;
margin-top: 10px;
margin-left: 15px;
}
.foot_menu li > div a{
margin: 5px 0;
display: block;
}

@media only screen and (max-width:1024px) {
.foot_menu li{
display: none;
}
}

.foot_box .sns{
display: flex;
justify-content: flex-end;
}
.foot_box .sns a{
width: 40px;
height: 40px;
padding: 10px;
background: #666666;
border-radius: 50%;
margin-left: 20px;
display: flex;
}
@media only screen and (max-width:1024px) {
.foot_box .sns{
justify-content: center;
margin-top: 15px;
}
.foot_box .sns a{
margin: 0 10px;
}
}

footer a:hover{
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}

.copy{
width: 92%;
margin: 0 auto;
font-size: 13px;
text-align: center;
}
@media only screen and (max-width:767px) {
.copy{
width: 80%;
max-width: 270px;
margin: 0 15% 0 5%;
text-align: left;
}
}

#topBtn {
position: fixed;
bottom: 20px;
right: 10px;
display: block;
z-index: 99;
}

.topBtn {
width: 120px;
height: 120px;
display: inline-block;
color:#fff;
vertical-align: middle;
}
@media only screen and (max-width:767px) {
.topBtn {
width: 80px;
height: 80px;
}
}