@charset "UTF-8";


h1.sec_hed{
width: 92%;
max-width: 1200px;
margin: 0 auto;
position: relative;
}

h1.sec_hed img.fit-image{
border-radius: 50px;
object-fit: cover;
height: 55vw;
max-height: 570px;
min-height: 350px;
}

h1.sec_hed p{
font-size: 65px;
writing-mode: vertical-rl;
white-space: nowrap;
color: #fff;
line-height: 120%;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
margin: 0 10%;
font-weight: 900;
}
@media only screen and (max-width:1024px) {
h1.sec_hed p{
margin: 0 15%;
}
}
@media only screen and (max-width:767px) {
h1.sec_hed p{
font-size: 45px;
margin: 0;
right: auto;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
}

h2{
color: #cb1818;
font-size: 35px;
text-align: center;
}

.link_more_large{
width: 30%;
min-width: 300px;
margin: 0 auto;
padding: 15px 80px 15px 30px;
border-radius: 30px;
background: #fff;
color: #cb1818;
position: relative;
display: block;
overflow: hidden;
z-index: 1;
}
.link_more_large:after{
background: #CB1818;
position: absolute;
top: 0;
left: 0;
content: '';
width: 101%;
height: 101%;
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
z-index: -1;
}
.link_more_large:hover{
color: #fff;
}
.link_more_large:hover:after{
transform: scale(1, 1);
transform-origin: left top;
}

.link_more_large span{
display: inline-block;
background: #CB1818;
border-radius: 100%;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
right: 10px;
transform: translate(0,-50%);
transition: transform .3s;
}
.link_more_large .arrow_right{
position: absolute;
vertical-align: middle;
display: inline-block;
width: 2px;
height: 20px;
background: #fff;
border-radius: 4px;
top: 50%;
left: 50%;
transform: translate(-50%,-46%) rotate(90deg);
}
.link_more_large .arrow_right:before,
.link_more_large .arrow_right:after{
position: absolute;
content: '';
top: -1.5px;
width: 2px;
height: 10px;
background: #fff;
border-radius: 4px;
transition: transform .3s;
}
.link_more_large .arrow_right:before{
left: 3px;
transform: rotate(-45deg);
}
.link_more_large .arrow_right:after{
right:3px;
transform: rotate(45deg);
}

.link_more_large:hover span{
background: #fff;
}
.link_more_large:hover .arrow_right{
background: #CB1818;
}
.link_more_large:hover .arrow_right:before,
.link_more_large:hover .arrow_right:after{
background: #CB1818;
}



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

	#　日南工業について

---------------------------------------- */
#about{}

.sec_abo_box{
width: 92%;
max-width: 1000px;
margin: 0 auto;
padding: 100px 0;
}
@media only screen and (max-width:1024px) {
.sec_abo_box{
padding: 80px 0;
}
}

.mess_box{
display: flex;
align-items: flex-end;
margin-top: 30px;
}
@media only screen and (max-width:767px) {
.mess_box{
flex-direction: column;
}
}

.mess_box > p{
flex: 1;
margin-right: 50px;
line-height: 250%;
text-align: justify;
}
@media only screen and (max-width:767px) {
.mess_box > p{
margin-right: 0;
line-height: 200%;
}
}

.mess_img{
width: 230px;
}
@media only screen and (max-width:767px) {
.mess_img{
width: 200px;
margin: 30px auto 0;
}
}

#about_brand{
background: #fff;
}

.rinen_box{
display: flex;
justify-content: space-between;
margin: 30px 0 50px;
}
@media only screen and (max-width:1024px) {
.rinen_box{
flex-direction: column;
}
}

.rinen_box li{
width: auto;
display: inline-flex;
}
@media only screen and (max-width:1024px) {
.rinen_box li{
margin-bottom: 15px;
}
}

.rinen_box li > div{
width: 40px;
height: 40px;
font-family: "Oswald", sans-serif;
font-size: 30px;
color: #fff;
background: #cb1818;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.rinen_box li > p{
font-size: 25px;
font-weight: 500;
margin-left: 15px;
flex: 1;
}

.brand_box{
margin: 30px 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
@media only screen and (max-width:1024px) {
.brand_box{
flex-direction: column;
margin: 30px 0 0;
}
}

.bra_img{
width: 100%;
max-width: 685px;
background: #ffebde;
padding: 30px;
text-align: center;
position: relative;
}
.bra_img img{
height: 100px;
width: auto;
}
.bra_img:after{
content: "";
width: 100%;
max-width: 85px;
height: 1px;
background: #000;
position: absolute;
top: 50%;
right: -10%;
transform: translate(0, -50%)
}
@media only screen and (max-width:1024px) {
.bra_img{
margin-bottom: 20px;
}
.bra_img:after{
max-width: 1px;
height: 30px;
top: auto;
right: auto;
bottom: -15px;
left: 50%;
transform: translate(-50%, 0%);
}
}
@media only screen and (max-width:767px) {
.bra_img{
padding: 30px 15px;
}
.bra_img img{
height: auto;
width: 100%;
}
}

.bra_txt{
font-size: 25px;
font-weight: 500;
text-align: center;
}

.com_table{
width: 100%;
max-width: 900px;
margin: 30px auto 70px;
}
.com_table th,
.com_table td{
padding: 20px;
border-bottom: 1px solid #000;
}
@media only screen and (max-width:767px) {
.com_table th,
.com_table td{
padding: 20px 0;
}
.com_table th{
width: 75px;
}
}

.enkaku_box{
width: 100%;
max-width: 900px;
margin: 30px auto 70px;
}
@media only screen and (max-width:767px) {
.enkaku_box{
margin-bottom: 30px;
}
}

.enkaku_box li{
border-left: 3px solid #000;
padding: 15px 20px;
display: flex;
align-items: flex-start;
position: relative;
}
.enkaku_box li:before{
content: "";
position: absolute;
top: 18px;
left: -11.5px;
width: 20px;
height: 20px;
background: #cb1818;
border-radius: 50%;
}
@media only screen and (max-width:767px) {
.enkaku_box li{
flex-direction: column;
}
}

.enkaku_box li .en01{
width: 130px;
position: relative;
}
.enkaku_box li .en01:after{
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 40px;
height: 1px;
background: #000;
}
@media only screen and (max-width:767px) {
.enkaku_box li .en01{
padding-bottom: 15px;
}
.enkaku_box li .en01:after{
top: auto;
right: auto;
bottom: 5px;
left: 0;
}
}

.enkaku_box li .en02{
flex: 1;
}

.enkaku_img{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.enkaku_img img{
width: 45%;
max-width: 260px;
margin: 0 15px;
}
@media only screen and (max-width:767px) {
.enkaku_img img{
margin: 15px auto 0;
}
}


#about_nanko{
background-color: #cb1818;
background-image: url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/bg_sozai.png");
background-repeat: repeat;
color: #fff;
position: relative;
}
@media only screen and (max-width:767px) {
#about_nanko{
padding-top: 70px;
margin-top: 70px;
}
}

#about_nanko h2{
color: #fff;
margin-top: 0;
}

#about_nanko p{
line-height: 200%;
margin: 30px 0;
text-align: center;
}

.abo_nanko_box{
width: 50%;
margin-left: auto;
}
@media only screen and (max-width:767px) {
.abo_nanko_box{
width: 100%;
}
}

img.abo_nanko{
position: absolute;
top: 50%;
right: 55%;
transform: translate(0,-50%);
max-width: 500px;
width: 50%;
}
@media only screen and (max-width:767px) {
img.abo_nanko {
top: -100px;
right: auto;
left: 50%;
transform: translate(-50%,0);
width: 70%;
}
}


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

	#　ナン子ちゃんについて

---------------------------------------- */
.nanko_abo h2{
text-align: left;
}
@media only screen and (max-width:1024px) {
.nanko_abo h2{
text-align: center;
}
}

.nanko_abo{
width: 92%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: flex-end;
}
@media only screen and (max-width:1024px) {
.nanko_abo{
flex-direction: column-reverse;
align-items: center;
}
}

.nanko_abo_img{
max-width: 500px;
}

.nanko_abo_txt{
flex: 1;
margin-right: 30px;
}
.nanko_abo_txt p{
line-height: 200%;
margin: 30px 0;
}
@media only screen and (max-width:1024px) {
.nanko_abo_txt{
text-align: center;
margin-right: 0;
}
}

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

#nanko_shokai{
background-color: #cb1818;
background-image: url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/nanko_aida_bg01.png"),url("https://www.kikkonan.co.jp/wp/wp-content/themes/kikkonan/img/nanko_aida_bg02.png");
background-position: top center, bottom center;
background-repeat: no-repeat, no-repeat;
background-size: 100%, 100%;
padding: 200px 0;
text-align: justify;
}
@media only screen and (max-width:1024px) {
#nanko_shokai{
padding: 20vw 0;
}
}

#nanko_shokai h2{
color: #fff;
}

.shokai_box{
display: flex;
margin: 0 50px 80px;
position: relative;
}
@media only screen and (max-width:1024px) {
.shokai_box{
margin: 0 0 80px;
}
}
@media only screen and (max-width:767px) {
.shokai_box{
flex-direction: column;
}
}

.chara_nanko_txt{
position: absolute;
width: 80%;
max-width: 330px;
min-width: 300px;
top: 0;
left: 40%;
}
@media only screen and (max-width:767px) {
.chara_nanko_txt{
left: 0;
}
}

.shokai_img{
max-width: 360px;
width: 50%;
}
@media only screen and (max-width:767px) {
.shokai_img{
width: 80%;
margin: 100px auto 50px;
}
}

.shokai_txt{
width: 50%;
margin-left: 50px;
}
@media only screen and (max-width:767px) {
.shokai_txt{
width: 100%;
margin-left: 0;
}
}

.shokai_txt p{
background: #fff;
padding: 50px 35px;
margin-top: 120px;
border-radius: 30px;
font-size: 20px;
line-height: 180%;
position: relative;
}
.shokai_txt p:before{
content: "";
position: absolute;
top: 50%;
left: 0;
border-style: solid;
border-width: 15px 35px 15px 0;
border-color: transparent #fff transparent transparent;
translate: -100% -50%;
}
.shokai_txt p span{
font-size: 25px;
}
@media only screen and (max-width:767px) {
.shokai_txt p{
padding: 30px 5%;
margin-top: 0;
font-size: 16px;
}
.shokai_txt p:before{
top: 0;
left: 50%;
border-style: solid;
border-width: 0 15px 25px 15px;
border-color: transparent transparent #fff;
translate: -50% -100%;
}
.shokai_txt p span{
font-size: 21px;
}
}

.nanko_chara_img{
background: #fff;
padding: 5%;
margin: 30px 0 80px;
border-radius: 50px;
}

.nanko_friend{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 50px 50px 0;
}
@media only screen and (max-width:1024px) {
.nanko_friend{
margin: 50px 0 0;
}
}

.friend_inner{
width: 47%;
}
@media only screen and (max-width:767px) {
.friend_inner{
width: 100%;
}
}

.friend_inner > img{
display: block;
max-width: 375px;
margin: 0 auto;
}

.friend_txt{
display: flex;
align-items: flex-end;
margin-top: 30px;
}

.friend_txt p{
font-size: 16px;
flex: 1;
background: #fff;
padding: 20px;
margin-bottom: 30px;
margin-right: 25px;
border-radius: 30px;
position: relative;
}
.friend_txt p:after{
content: "";
position: absolute;
top: 65%;
right: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
translate: 100% -35%;
}

.nanko_memo{
max-width: 100px;
}


#nanko_rekisi{
background: #fff;
padding: 80px 0;
}

.rekisi_inner{
display: flex;
align-items: center;
justify-content: space-between;
margin: 50px 0;
}
.rekisi_inner:nth-of-type(2){
flex-direction: row-reverse;
}
@media only screen and (max-width:767px) {
.rekisi_inner,
.rekisi_inner:nth-of-type(2){
flex-direction: column;
margin: 30px 0;
}
}

.rekisi_img01{
max-width: 460px;
margin-left: 50px;
}
.rekisi_img02{
max-width: 540px;
margin-right: 50px;
}
@media only screen and (max-width:1024px) {
.rekisi_img01,
.rekisi_img02{
width: 50%;
}
}
@media only screen and (max-width:767px) {
.rekisi_img01,
.rekisi_img02{
width: 100%;
margin: 0;
}
}

.rekisi_inner p{
flex: 1;
line-height: 200%
}
@media only screen and (max-width:767px) {
.rekisi_inner p{
margin-bottom: 30px
}
}

.nanko_end {
max-width: 600px;
margin: 0 auto;
}

.comic_hed{
background-color: #cb1818;
text-align: center;
}

.comic_hed img{
max-width: 1000px;
width: 100%;
}

.comic_list{
display: flex;
flex-wrap: wrap;
padding: 80px 0;
}

.comic_list li{
width: calc((100% - 30px * 3) / 4);
margin-right: 30px;
margin-bottom: 30px;
}
.comic_list li:nth-child(4n){
margin-right: 0;
}
@media only screen and (max-width:1024px) {
.comic_list li{
width: calc((100% - 30px * 1) / 2);
}
.comic_list li:nth-child(2n){
margin-right: 0;
}
}

.comic_thum img{
height: auto !important;
}

.comic_tit {
margin: 10px;
}

.comic_tit .number{
font-size: 14px;
display: block;
}

.comic_tit .tit{
font-size: 20px;
display: inline-block;
position: relative;
font-weight: 500;
padding-bottom: 5px;
}
.comic_tit .tit: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;
}
a:hover .comic_tit .tit:after{
transform: scale(0, 1);
transform-origin: right top;
}




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

	#　商品について

---------------------------------------- */
.prod_hed_box{
width: 85%;
max-width: 1000px;
margin: 0 auto;
padding: 100px 0;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
@media only screen and (max-width:767px) {
.prod_hed_box{
width: 92%;
padding: 80px 0;
flex-direction: column;
}
}

h2.hed_tit{
font-size: 50px;
writing-mode: vertical-rl;
white-space: nowrap;
text-align: left;
line-height: 130%;
}
@media only screen and (max-width:767px) {
h2.hed_tit{
font-size: 10vw;
}
}

.hed_txt p{
margin-right: 80px;
line-height: 200%;
text-align: justify;
}
@media only screen and (max-width:767px) {
.hed_txt p{
margin-right: 0;
margin-top: 30px;
}
}

#product_process{
background: #fff;
}

.sec_product_box{
width: 92%;
max-width: 1000px;
margin: 0 auto;
padding: 100px 0;
}
@media only screen and (max-width:767px) {
.sec_product_box{
padding: 80px 0;
}
}

.process_list li{
display: flex;
margin-top: 50px;
}
@media only screen and (max-width:767px) {
.process_list li{
flex-direction: column;
}
}

.process_img{
width: 40%;
margin-left: 40px;
}
.process_img img{
border-radius: 30px;
}
@media only screen and (max-width:767px) {
.process_img{
width: 100%;
margin-left: 0;
margin-top: 30px;
}
}

.process_txt{
flex: 1;
}

.process_tit{
display: flex;
margin-bottom: 20px;
}

.process_tit > div{
width: 40px;
height: 40px;
font-family: "Oswald", sans-serif;
font-size: 30px;
color: #fff;
background: #cb1818;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.process_tit > p{
font-size: 25px;
font-weight: 500;
margin-left: 15px;
flex: 1;
}

.product_item_list{
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width:767px) {
.product_item_list{
justify-content: space-between;
}
}

.product_item_list li{
width: calc((100% - 30px * 3) / 4);
margin-right: 30px;
margin-top: 50px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.product_item_list li:nth-child(4n){
margin-right: 0;
}
@media only screen and (max-width:767px) {
.product_item_list li{
width: 47%;
margin-right: 0;
}
}

.product_txt{
margin-bottom: 20px;
padding: 15px;
border-radius: 15px;
background: #fff;
font-size: 16px;
line-height: 130%;
position: relative;
display: flex;
align-items: center;
flex: 3;
height: 100%;
min-height: 0%;
}
.product_txt:after{
content: "";
position: absolute;
bottom: 1px;
left: 50%;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #fff transparent transparent;
translate: -50% 100%;
}
@media only screen and (max-width:767px) {
.product_txt{
font-size: 14px;
}
}

.product_name{
font-size: 20px;
font-weight: 700;
margin: 10px 0;
flex: 2;
height: 100%;
min-height: 0%;
}

.product_item_list li a{
font-size: 18px;
}


#product_recipi{
background: #db7d31;
}
#product_recipi h2{
color: #fff;
}

.prod_recipi_inner{
background: #fff;
padding: 15px;
margin-bottom: 30px;
border-radius: 30px;
display: flex;
align-items: center;
}
.prod_recipi_inner:first-of-type{
margin-top: 50px;
}
.prod_recipi_inner:last-of-type{
margin-bottom: 50px;
}
@media only screen and (max-width:767px) {
.prod_recipi_inner{
padding: 5%;
flex-direction: column;
}
}

.prod_recipi_inner .img{
width: 40%;
}
.prod_recipi_inner .img img{
border-radius: 30px;
height: 300px;
object-fit: cover;
}
@media only screen and (max-width:767px) {
.prod_recipi_inner .img{
width: 100%;
}
.prod_recipi_inner .img img{
height: 50vw;
max-height: 270px;
object-fit: cover;
}
}

.prod_recipi_inner .txt{
flex: 1;
margin: 0 30px 0 50px;
}
@media only screen and (max-width:767px) {
.prod_recipi_inner .txt{
width: 100%;
margin: 30px 0 15px;
}
}

.prod_recipi_inner .txt > p{
font-size: 20px;
}
@media only screen and (max-width:767px) {
.prod_recipi_inner .txt > p{
font-size: 18px;
}
}

.prod_recipi_inner .txt > h3{
margin: 30px 0;
font-size: 30px;
line-height: 130%;
}

.prod_recipi_inner .txt > div{
text-align: right;
}

.prod_menu{
display: flex;
justify-content: space-between;
max-width: 1100px;
width: 92%;
margin: 100px auto;
}
@media only screen and (max-width:767px) {
.prod_menu{
margin: 80px auto;
flex-direction: column;
}
}

.prod_menu li{
width: 30%;
position: relative;
}
@media only screen and (max-width:767px) {
.prod_menu li{
width: 100%;
max-width: 80%;
margin: 0 auto 30px;
}
.prod_menu li:last-child{
margin: 0 auto;
}
}

.prod_menu li span{
position: absolute;
margin: 30px;
top: 0;
right: 0;
color: #fff;
writing-mode: vertical-rl;
font-size: 25px;
font-weight: 700;
pointer-events: none;
}

.prod_menu a{
display: block;
width: 100%;
height: 190px;
opacity: 1;
transition-duration: 0.5s;
transition: .3s;
overflow: hidden;
border-radius: 30px;
}
.prod_menu a img{
transition-duration: 0.5s;
height: 190px;
object-fit: cover;
}

.prod_menu a img:hover{
transform: scale(1.2,1.2);
cursor: pointer;
}


#shouyu h1.sec_hed p{
color: #000;
}

.sec_tokucho_box{
width: 92%;
max-width: 1000px;
margin: 0 auto;
padding-bottom: 100px;
}

.tokucho_inner{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
}
.tokucho_inner:nth-of-type(even){
flex-direction: row-reverse;
}

.tokucho_txt{
line-height: 200%;
flex: 1;
}

.tokucho_img{
max-width: 500px;
width: 50%;
margin-left: 50px;
}
.tokucho_inner:nth-of-type(even) .tokucho_img{
margin-left: 0;
margin-right: 50px;
}

.tokucho_img img{
border-radius: 30px;
}

.uwaten_icon{
position: absolute;
max-width: 80px;
height: auto;
z-index: 1;
top: 15px;
right: 15px;
}

#uwaten h1.sec_hed p{
color: #000;
}