@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
/* =======================================================

* ======================================================= */

br.pc{display: inline;}
br.sp{display: none}

img.pc{display: inline;}
img.sp{display: none}


@media screen and (max-width: 760px) {
br.pc{display: none;}
br.sp{display: inline}
img.pc{display: none;}
img.sp{display: inline}
}
.boxed #fh5co-page{
max-width: 100%;
}

@media screen and (min-width: 1000px) {
a:hover{opacity: 0.8;}
}


.animate-fadeIn,
.animate-fadeIn2 {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.animate-is-fadeIn {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media screen and (max-width: 760px) {
.fh5co-section .container .row-bottom-padded-sm{
padding-bottom: 0;
}
}

/* =======================================================

* ======================================================= */
.page-menu{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 50px 0;
}
.page-menu ul{
text-align: center;
}
.page-menu ul li{
display: inline-block;
list-style: none;
line-height: 1;
}

.page-menu ul li:not(:last-child)::after {
content: "";
display: inline-block;
width: 1px;
height: 16px;
background-color: #ccc;
margin-left: 32px;
margin-right: 32px;
}

.page-menu ul li a{
color: #000;
font-weight: 600;
}

.page-menu ul li a:hover, .page-menu ul li a:active, .page-menu ul li a:focus {
  color: #FF5126;
}


@media screen and (max-width: 760px) {
.page-menu{
padding: 1.5em 0;
}
.page-menu ul{
text-align: left;
}

}




/* =======================================================
コンセプト
* ======================================================= */

#fh5co-concept{
width: 100%;
padding: 100px 0 50px;
background: #fcf8f1;
}

#fh5co-concept h1{
font-family: "Noto Serif JP", serif;
}
#fh5co-concept h1 .red{
color: #E94624;
}


#fh5co-concept .fh5co-lead{
color: #000;
font-family: "Noto Serif JP", serif;
}


.concept-detail h2{
padding: 0.8em 0em 0em;
font-size: 24px;
text-align: left;
/*border-bottom: 1px solid #ccc;*/
}


@media screen and (max-width: 760px) {
#fh5co-concept{
padding: 3em 0;
}

#fh5co-concept h1{
font-size: 22px;
}
#fh5co-concept .fh5co-lead{
font-size: 16px;
}
.concept-detail h2{
font-size: 20px;
margin-bottom: 0.5em;
}
#concept1,
#concept2,
#concept3,
#concept4,
#concept5{
padding-bottom: 0;
}
}



.concept-detail{
max-width: 1024px;
margin-left: auto;
margin-right: auto;
float: none;
}




/* =======================================================

* ======================================================= */
#fh5co-craftsmanship{
width: 100%;
padding: 100px 0 50px;
}


#fh5co-craftsmanship h1{
font-family: "Noto Serif JP", serif;
}
#fh5co-craftsmanship h1 .red{
color: #E94624;
}


#fh5co-craftsmanship .fh5co-lead{
color: #000;
font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 760px) {
#fh5co-craftsmanship{
padding: 3em 0;
}

#fh5co-craftsmanship h1{
font-size: 22px;
}
#fh5co-craftsmanship .fh5co-lead{
font-size: 16px;
text-align: left;
}
}

#fh5co-craftsmanship #text1-craftsmanship .fh5co-service{
padding-top: 50px;
}

@media screen and (max-width: 760px) {
#fh5co-craftsmanship #text1-craftsmanship .fh5co-service{
padding-top: 0;
}
}

#fh5co-craftsmanship #img-contents #img-contents1 .fh5co-service{
text-align: left;
}

#fh5co-craftsmanship #img-contents #img-contents3 .fh5co-service{
text-align: right;
}
#fh5co-craftsmanship #img-contents .fh5co-service img{
max-width: 300px;
}

@media screen and (max-width: 990px) {
#fh5co-craftsmanship #img-contents .fh5co-service{
text-align: center !important;
}
#fh5co-craftsmanship #img-contents .fh5co-service img{
max-width: 100%;
}
}





/* =======================================================
企業理念
* ======================================================= */


#fh5co-intro{
width: 100%;
background: #fcf8f1;
}

#fh5co-intro h1{
font-family: "Noto Serif JP", serif;
}
#fh5co-intro h1 .red{
color: #E94624;
}


#fh5co-intro .fh5co-lead{
color: #000;
font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 760px) {
#fh5co-intro{
padding: 3em 0 2.5em;
}

#fh5co-intro h1{
font-size: 22px;
}
#fh5co-intro .fh5co-lead{
font-size: 16px;
text-align: left;
}
}

#fh5co-sidebar{
padding-top: 44px;
}
@media screen and (max-width: 991px) {
#fh5co-sidebar{
padding-top: 0;
}
#fh5co-sidebar .fh5co-service{
margin-bottom: 0;
}
#fh5co-sidebar .fh5co-service img{
margin-bottom: 0;
}
}
/* =======================================================
概要
* ======================================================= */
#fh5co-outline{
width: 100%;
padding: 100px 0 50px;
}
#fh5co-outline h1{
font-family: "Noto Serif JP", serif;
}

#fh5co-outline table.outline{
width: 100%;
}
#fh5co-outline table.outline th{
width: 10em;
font-weight: 600;
}
#fh5co-outline table.outline td{
border-left: 10px solid #fff;
}
#fh5co-outline table.outline th,
#fh5co-outline table.outline td{
padding: 0.6em;
border-bottom: 1px solid #ccc;
}




@media screen and (max-width: 760px) {
#fh5co-outline{
padding: 3em 0;
}
#fh5co-outline h1{
font-size: 22px;
}
#fh5co-outline table.outline th{
display: block;
width: 100%;
padding-top: 1em;
border-bottom:none;
}
#fh5co-outline table.outline td{
padding-top: 0;
padding-bottom: 1em;
display: block;
width: 100%;
border-left: none;
}
}


/* =======================================================
沿革
* ======================================================= */

#fh5co-history{
width: 100%;
padding: 100px 0 50px;
}
#fh5co-history h1{
font-family: "Noto Serif JP", serif;
}

#history2{
padding-top: 100px;
}
@media screen and (max-width: 760px) {
#fh5co-history{
padding: 3em 0;
}
#fh5co-history h1{
font-size: 22px;
}
#history2{
padding-top: 60px;
}
}



#fh5co-history table.histry-list{
width: 100%;
}
#fh5co-history table.histry-list th{
width: 10em;
font-weight: 600;
}
#fh5co-history table.histry-list td{
border-left: 10px solid #fff;
}
#fh5co-history table.histry-list th,
#fh5co-history table.histry-list td{
padding: 0.6em;
border-bottom: 1px solid #ccc;
}




@media screen and (max-width: 760px) {
#fh5co-history table.histry-list th{
display: block;
width: 100%;
padding-top: 1em;
border-bottom:none;
}
#fh5co-history table.histry-list td{
padding-top: 0;
padding-bottom: 1em;
display: block;
width: 100%;
border-left: none;
}
}


/* =======================================================
社長挨拶
* ======================================================= */


#fh5co-greet{
width: 100%;
padding: 100px 0 50px;
background: #fcf8f1;
}

#fh5co-greet h1{
font-family: "Noto Serif JP", serif;
}
#fh5co-greet h1 .red{
color: #E94624;
}



@media screen and (max-width: 760px) {
#fh5co-greet{
padding: 3em 0 2.5em;
}

#fh5co-greet h1{
font-size: 22px;
}
#fh5co-greet .fh5co-lead{
font-size: 16px;
text-align: left;
}
}

#fh5co-sidebar-greet{

}
@media screen and (max-width: 991px) {
#fh5co-sidebar-greet{
padding-top: 0;
}
#fh5co-sidebar-greet .fh5co-service{
margin-bottom: 0;
}
#fh5co-sidebar-greet .fh5co-service img{
margin-bottom: 0;
}
}

/* =======================================================
直営店
* ======================================================= */

#fh5co-shop{
width: 100%;
padding: 100px 0 50px;
}

#fh5co-shop h1{
font-family: "Noto Serif JP", serif;
}
#fh5co-shop h1 .red{
color: #E94624;
}


#fh5co-shop .fh5co-lead{
color: #000;
font-family: "Noto Serif JP", serif;
}


#fh5co-shop .shopimg img{
max-width: 100%;
}



#fh5co-shop .shop-guide th{
width: 5.5em;
vertical-align: top;
}
#fh5co-shop .shop-guide td{
vertical-align: top;
}
#fh5co-shop .shop-guide td a i{
margin-left: 0.4em;
color: #000;
font-size: 75%;
}



@media screen and (max-width: 760px) {
#fh5co-shop{
padding: 3em 0;
}
#fh5co-shop h1{
font-size: 22px;
}
#fh5co-shop .fh5co-lead{
font-size: 16px;
text-align: left;
}

#fh5co-shop .shop-guide td a{
display: block;
}
}


.fh5co-slider{
margin: 0 0 1em;
}
@media screen and (max-width: 990px) {
.fh5co-slider{
margin: 0 0 0.1em;
}
}
@media screen and (max-width: 700px) {
.fh5co-slider{
margin: 0 0 0.5em;
}
}

@media screen and (max-width: 990px) {
.row .shopimg{
padding-top: 1em;
}
}
@media screen and (max-width: 540px) {
.row .shopimg iframe{
height: 270px;
}
}