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

@media screen and (max-width: 599px) {/*スマホ*/
}
@media screen and (min-width: 600px) and (max-width: 1023px) {/* タブレット */
}
/*maincolor:#233f7c*/

/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/
*{box-sizing:border-box}
html{font-size:14px;color:#000;}
body{margin:0;padding:0;font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka,"sans-serif";line-height: 1.8em;}
img{vertical-align:bottom;}
ul{list-style: none;}
h1{margin:0;padding:0;}
a{text-decoration:none;color:#233f7c}
a:hover{text-decoration:none;color:#000}
a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)"}
.sp{display: none !important}
.pc{display: block}

@media screen and (max-width: 1023px) {
.sp{display: block !important}
.pc{display: none !important}
}

/*!大枠
-------------------------------------*/
#stage{margin:0 auto;padding:0;width:100%;text-align:center;position: relative;}

/*!ヘッダー
-------------------------------------*/
header{margin: 0 auto;padding:0;width:100%;background-color: #fff;position: fixed;z-index:10000;opacity: 0.9}
#h_box{margin: 0 auto;padding: 1em 0;width: 1000px;text-align: left;display: flex;align-items: center;justify-content: space-between;}

@media screen and (max-width: 1023px) {
#h_box{padding: 1em;width:100%;}
#h_box img{width:80%;max-width: 339px} 
}

/*!nav
-------------------------------------*/
nav{margin:0;padding:0;width:100%;}
nav ul{margin:0 auto;padding: 0.5em 0;width:700px;display: flex;flex-flow: row nowrap;justify-content: space-between;}
nav ul li{margin: 0;padding: 0.6em 0;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;width:25%;}
nav ul li a{display: block; width:100%;color:#000;text-align: center}
nav ul li a span{display: block;font-size: 0.8em;color:#233f7c;line-height: 0.9em;}
nav.hamburger{display: none;}
nav ul li a:hover{color:#233f7c}

@media screen and (max-width: 1023px) {
nav{display: none;position: absolute; z-index:10000}
nav ul{padding:0;width:100%;display: block;background:#233f7c;}
nav ul li{margin:0;padding:0;width:100%;border-left:none;}
nav ul li a{display: block;padding: 10px;text-decoration: none;box-sizsing: border-box;width: 100% !important;border-bottom: 1px solid #ccc;color:#fff}
nav ul li a span{color:#999}

.sp-menu {display: block;height: 44px;}
.sp-menu .menu-trigger,.sp-menu .menu-trigger2,.sp-menu .menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
.sp-menu .menu-trigger{position: relative;width: 44px;height: 44px;}
.sp-menu .menu-trigger2{position: relative;}
.sp-menu .menu-trigger span {position: absolute;left: 0;right: 0;margin: auto;width: 70%;height: 3px;background-color: #233f7c;border-radius: 10px;}
.sp-menu .menu-trigger span:nth-of-type(1) {top: 10px;}
.sp-menu .menu-trigger span:nth-of-type(2) {top: 20px;}
.sp-menu .menu-trigger span:nth-of-type(3) {top: 30px;}
.sp-menu .menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(10px) rotate(-45deg);transform: translateY(10px) rotate(-45deg);}
.sp-menu .menu-trigger.active span:nth-of-type(2) {opacity: 0;}
.sp-menu .menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-10px) rotate(45deg);transform: translateY(-10px) rotate(45deg);}
.sns{display: block;padding: 10px;text-decoration: none;box-sizsing: border-box;width: 100% !important;border-bottom: 1px solid #999}
.sns a{display: inline;padding: 0 10px;border-bottom:none !important}
}

/*!main_img
-------------------------------------*/
.bx-wrapper{margin:0 auto;}
#main_img{margin:0 auto;padding:0;min-width:100%;overflow:hidden;position: relative}
#main_img .bx-viewport {left: 0;box-shadow: none;border: none;}
#main_img ul li{height: 600px;background-size: cover;}
.bx-viewport li { min-height: 1px; min-width: 1px; }

.main_img01{background: url("../img/main_01.jpg")50% 0 no-repeat;}
.main_img02{background: url("../img/main_02.jpg")50% 0 no-repeat;}
.main_img03{background: url("../img/main_03.jpg")50% 0 no-repeat;}

/*ボカシ*/
.bokashi{margin:auto;padding: 3em 0 0;width:100%;position: absolute;bottom:0;left:0;right:0;background:url("../img/bg_bokashi.png") center top no-repeat;background-size: cover;min-height: 113px;}

@media screen and (max-width: 1023px) {
.bx-pager{display: none}
#main_img ul li{height: 350px;background-size: cover;}
	
/*ボカシ*/
.bokashi{margin:auto;padding: 3em 0 0;width:100%;position: absolute;bottom:0;left:0;right:0;background:url("../img/bg_bokashi.png") center top no-repeat;background-size: cover;}
}

@media screen and (max-width: 699px) {
/*ボカシ*/
.bokashi{max-height: 60px;min-height: 60px;}
.bokashi p{position: absolute;top: 1em;margin: auto;bottom: 0;left: 0;right: 0;width: 40%;}
.bokashi p img{width:100%;max-width: 218px;}
}

article{position: relative}

/*!福和商事について
-------------------------------------*/
section#t_about{margin:0;padding:7em 0;background: url("../img/bg_kumo.jpg")top center no-repeat;background-size: cover;}
section h2,section h3{font-family: 'Sawarabi Mincho', sans-serif;font-size: 2.4em;font-weight: 100;}
section h2 span,section h3 span{margin:0.3em;display: block;color:#233f7c;font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka,"sans-serif";font-size: 0.3em;font-weight: bold;}
section#t_about p.box{margin:0 auto;padding:0;text-align: center;width:1000px;}
section#t_about p.btn a{margin: 3em auto;padding: 1em;text-align: center;width: 250px;background-color: #233f7c;color: #fff;display: block}
section#t_about p.btn a::before{font-family:'Font Awesome 5 Free';content :'\f105';font-weight: 900;margin: 0 0.5em 0 0;font-size: 1.2em;vertical-align: bottom;}
section#t_about p.btn a:hover{background-color: #000;}


@media screen and (max-width: 1023px) {
section#t_about p.box{margin:0 auto;padding:0;text-align: left;width:90%}
}

@media screen and (max-width: 699px) {
section#t_about{padding:4em 0 1em;}
section#t_about p.btn a{width: 90%;}
section h2,section h3{font-size: 1.6em;}
}


/*!催事情報
-------------------------------------*/
section#t_event{margin:0;padding:3em 0 10em;background:url("../img/bg_nami.png")top left no-repeat}
section#t_event ul{margin: 0 auto;padding:0;display: flex;flex-flow: row wrap;justify-content:center;width:700px;}
section#t_event li:nth-child(odd){margin: 0 auto;padding:0.5em;width:20%;text-align:left;border-bottom:1px solid #000}
section#t_event li:nth-child(even){margin: 0 auto;padding:0.5em;width:80%;text-align: left;border-bottom:1px solid #000}
section#t_event p{width: 700px;margin: 0 auto;text-align: right;}
section#t_event p a{margin: 1em auto;padding: 0.2em 0.8em;text-align: center;background-color: #233f7c;color: #fff;display: inline-block;}
section#t_event p a:hover{background-color: #000;}

@media screen and (max-width: 699px) {
section#t_event{padding:0 0 5em;background: url(../img/bg_nami.png)top right no-repeat;background-size: cover;}
section#t_event ul,section#t_event p{width:90%}
section#t_event li:nth-child(odd){padding:0.5em 0 0 0.5em;width:100%;border-bottom:none}
section#t_event li:nth-child(even){padding:0 0 0.5em 0.5em;width:100%;}
}

/*!取扱商品
-------------------------------------*/
section#t_product{margin:0;padding:3em 0 5em;background:url("../img/bg_shippou.gif")}
section#t_product h3,section#t_product h3 span{color: #fff;}
section#t_product ul{margin: 0 auto;padding: 0;display:flex;justify-content: space-between;width:1000px}
section#t_product ul li{margin: 0;padding: 0;width:32%}
section#t_product a{margin: 0;padding: 0;display: block;width:100%;}
section#t_product a p.picture{margin: 0;padding: 0;border:10px solid #fff;}
section#t_product a img{width:100%;}
section#t_product a p.box{margin: 0;padding: 0.2em 0.2em 0.5em;background-color: #fff;font-family: 'Sawarabi Mincho', sans-serif;font-size: 2.4em;text-align: left;color: #000;}

@media screen and (max-width: 699px) {
section#t_product{}
section#t_product ul{flex-flow: row wrap;width:90%;}
section#t_product ul li{width:100%;margin-bottom:1em}
section#t_product a p.box{font-size: 1.8em;}
}
/*!footer
-------------------------------------*/
footer{margin: 0 auto;padding:0;width:100%;background-color: #fff;}
footer ul#sns{margin: 1em 0;}
footer ul{margin: 0 auto;padding:0;display: flex;flex-flow: row nowrap;justify-content:center;}
footer ul li{padding:0 1em;}
footer dl{margin:1em 0 2em;padding:0;text-align: center;display: flex;justify-content: center;align-items: center}
footer dd{text-align: left;}
footer dd p{margin: 0;padding: 0;line-height: 1.4em;font-size: 0.9em;}
footer dd p.tel{font-size: 2.4em;color:#233f7c;}
footer dd p.tel::before {content: url(../img/f_tel.png);margin: 0 0.1em 0 0;position: relative;top: 0.1em;}
footer #copy{margin:0;padding:0;text-align: center;font-size: 0.8em;}

@media screen and (max-width: 699px) {
footer{margin: 2em auto 0;width:90%}
footer#f_kasou{margin: 1em auto 0;width: 90%;border-top: 1px solid #233f7c;padding-top: 0.5em;}
footer ul{font-size: 0.8em;}
footer ul li{padding:0 0.5em;}
footer dl{flex-flow: row wrap}
footer dt,footer dd{margin: 0;padding: 0;width:100%;text-align: center;font-size: 0.8em;}
}

/*!ページトップ
-------------------------------------*/
#pageTop{position:fixed;bottom: 0;right: 10px;z-index:999;}
#pageTop a{display:block;z-index:999;padding:4px;border-radius:30px;width:35px;height:35px;background-color:#fff;color:#233f7c;font-weight:bold;text-decoration:none;text-align:center}
#pageTop a:hover{text-decoration:none;opacity:.7}
#pageTop i{font-size:2em;}

@media screen and (max-width: 699px) {
	#pageTop {bottom:20px;right:20px;}
}

/*!------------------------------------------------
下層ページ
-------------------------------------------------*/
h2#company_img{margin:0 auto;padding:0;min-width:100%;overflow:hidden;height: 400px;background-size: cover;background: url("../img/company_img.jpg")center bottom no-repeat;position: relative;font-size: 14px}
h2#event_img{margin:0 auto;padding:0;min-width:100%;overflow:hidden;height: 400px;background-size: cover;background: url("../img/event_img.jpg")center bottom no-repeat;position: relative;font-size: 14px}
h2#product_img{margin:0 auto;padding:0;min-width:100%;overflow:hidden;height: 400px;background-size: cover;background: url("../img/product_img.jpg")center bottom no-repeat;position: relative;font-size: 14px}
h2#contact_img{margin:0 auto;padding:0;min-width:100%;overflow:hidden;height: 400px;background-size: cover;background: url("../img/contact_img.jpg")center bottom no-repeat;position: relative;font-size: 14px}

@media screen and (max-width: 1023px) {
h2#company_img,h2#product_img,h2#event_img,h2#contact_img{height: 350px;background-size: cover;}
}

/*メニュー*/
nav#kasou ul{margin: 0 auto;padding: 0;width: 90%;display: flex;flex-flow: row nowrap;justify-content: space-between;}

/*ぱんくず*/
ul#pan{margin:0 auto;padding:0;text-align: left;font-size: 0.9em;width:1000px;}
ul#pan li {margin: 0;padding: 0;display: inline-block;}
ul#pan li:after {font-family: "Font Awesome 5 Free";content: "\f105";color: #000;margin: 0 1em;font-weight: 900;}
ul#pan li:last-child:after {display: none;}

@media screen and (max-width: 1023px) {
#contents{background:none;}
#contents section{width:100%;}
/*ぱんくず*/
ul#pan {margin: 0 1em 1em;padding: 0;width:auto;}
}

/*テーブル*/
table {border-collapse: collapse;border-spacing: 0;width: 700px;margin: 0 auto 5em;}
table th{background: #f8f8f8;font-weight: 100;border: 1px solid #999;padding: 0.5em;text-align: left;vertical-align: top;width: 16%;}
table td{border: 1px solid #999;padding: 0.5em;background: #fff;text-align: left;}

/*h4*/
section h4{font-family: 'Sawarabi Mincho', sans-serif;font-size: 1.8em;font-weight: 100;border-bottom: 1px solid #000;width: 700px;
    margin: 1em auto;text-align: left;}
section h4 span{margin:0.3em;color:#233f7c;font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka,"sans-serif";font-size: 0.3em;font-weight: bold;}
	
/*一般的なsectionボックス*/
section.box{margin:0;padding:7em 0 4em;background: url("../img/bg_kumo.jpg")top center no-repeat;background-size: cover}
section.box p.box{margin:0 auto;padding:0;text-align: center;width:700px;}
section.box p.white_box{margin:0 auto;padding:1em;text-align: left;width:700px;background-color: #fff;}
p.white_box span.tel,p.white_box span.fax{font-size: calc(16 * ((100vw - 320px) / 1600) + 24px);color:#233f7c;display: inline-block;margin-right: 0.5em;}
p.white_box span.tel::before {content: url(../img/tel.png);margin: 0 0.1em 0 0;position: relative;top: 0.1em;}
p.white_box span.fax::before {content: url(../img/fax.png);margin: 0 0.1em 0 0;position: relative;top: 0.1em;}

@media screen and (max-width: 1023px) {
section.box p.box{margin:0 auto;padding:0;text-align: left;width:90%}
section.box p.white_box{width:90%}
}

@media screen and (max-width: 699px) {
section h4,table{width: 90%;}
table{font-size: 0.9em}
table th{width: 24%;}
section.box{padding:4em 0 1em;}
}

/*催事情報*/
.past_event{margin:0 auto;padding:0;width:700px;display: flex;justify-content: space-between;font-size: 0.8em;flex-flow: row wrap;}
.past_event li a{display: block;position: relative}
.past_event li span{position: absolute;display: block;bottom: 0;width: 100%;background-color: #233f7c;color: #fff;opacity: 0.8;}
.past_event li p{margin:0;padding:0;}
.event_none{width:150px;}

@media screen and (max-width: 699px) {
.past_event{width: 90%;justify-content: space-around;}
.past_event li{margin-bottom: 2em;}
.event_none{display: none}
}

/*取扱商品*/
#product{margin:0 auto;padding:0;width:700px;display: flex;justify-content: space-between;flex-flow: row wrap;}
#product p.img{margin:0;padding:0;display: block;position: relative}
#product p.img span{position: absolute;display: block;bottom: 0;width: 100%;background-color: #000;color: #fff;opacity: 0.4;}
#product p.text{margin:0 auto;padding:0;text-align: left}
#product li img{width:100%}
#product li:nth-child(2),#product li:nth-child(3){width:48%}
#product li{margin-bottom:2em}

@media screen and (max-width: 699px) {
#product{width: 90%;}
#product li:nth-child(2),#product li:nth-child(3){width:100%}
}

/*お問い合わせ*/
h4.error{border-bottom: none;font-size: 1.6em;width: 100%;text-align: center;}
input[type="submit"],input[type="reset"],input[type="button"]{background: #233f7c;border: 0;color: #fff;padding: 0.5em 2em;}
input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background: #000;}

@media screen and (max-width: 699px) {
textarea{width:100%;vertical-align: bottom;}
}