@charset "UTF-8";

/*
*******************************************************************************************************
# style_2017.css

  -- override
  -- module
  -- wrp (header footer )
  -- pagelayout
*******************************************************************************************************
*/

/* ------------------------------------
  * override
* ------------------------------------ */
body {
	padding: 0;
	margin: 0;
	background: #fff;
	font-size: 14px;
	color: #333;
}
#wrapper {
	min-width: 980px;
	padding-bottom: 160px;
	background: url(../../img/hokuo/2017/foot_bg.png) no-repeat bottom;
}


/* ------------------------------------ *
	* module
* ------------------------------------ */
/* clearfix */
.clearfix:after {
	content: '';
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
.cBoth {
	clear: both;
}

/* text関連 */
.alnCenter {
	text-align: center;
}

.flL {
	float: left;
}
.flR {
	float: right;
}

.mt0 {
	margin-top: 0 !important;
}
.pt0 {
	padding-top: 0 !important;
}

/* txtbox パターン枠付き */
.modTxtbox {
	padding: 3px;
	margin: 0;
	border-radius: 10px;
	background: url(../../img/hokuo/2017/main_bg.png) repeat;
}
.modTxtbox .modTxtboxIn {
	padding: 10px 37px;
	border-radius: 7px;
	background: #fff6fa;
}
.modTxtbox .modTxtboxIn .txt {
	line-height: 1.85;
}
.modTxtbox .modTxtboxIn .txt .txtTtl {
	display: block;
	font-size: 18px;
	color: #0779c4;
	font-weight: normal;
	margin: 4px 0;
}
.modTxtbox .modTxtboxIn .txtName {
	text-align: right;
}
.modTxtbox.bgPattern {
	position: relative;
	overflow: hidden;
}
.modTxtbox.bgPattern:after {
	display: block;
	content: '';
	width: 100%;
	height: 27px;
	background: url(../../img/hokuo/2017/pattern_img.png) repeat-x left top;
	position: absolute;
	top: 0;
	left: 0;
}
.modTxtbox.bgPattern .modTxtboxIn {
	padding-top: 34px;
}

/* expand btn */
.modExbtn {
	display: block;
	height: 65px;
	padding: 4px;
	border-radius: 15px;
	background: #056baf;
	position: relative;
}
.modExbtn .icn {
	border-top-left-radius: 13px;
	border-bottom-left-radius: 13px;
	position: absolute;
	bottom: 4px;
	left: 4px;
	overflow: hidden;
}
.modExbtn .txt {
	margin: 0 16px 0 0;
	border-top-left-radius: 13px;
	border-bottom-left-radius: 13px;
	background: url(../../img/hokuo/2017/btn_expand.png) no-repeat right center;
	overflow: hidden;
}
.modExbtn:hover .txt {
	background: url(../../img/hokuo/2017/btn_expand_on.png) no-repeat right center;
}
.expandWrp.open .modExbtn {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.expandWrp.open .icn {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.expandWrp.open .modExbtn .txt {
	border-bottom-left-radius: 0;
	background: url(../../img/hokuo/2017/btn_expand_open.png) no-repeat right center;
}

/* ------------------------------------ *
	* header & footer
* ------------------------------------ */
/* header */
#header {
	width: 100%;
	min-width: 980px;
	background: url(../../img/hokuo/2017/head_bg.png) no-repeat center top;
}
#header .headerIn {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 40px 10px 16px;
}
#header .headerIn .hlogo {
	position: absolute;
	top: 40px;
	left: 40px;
}
#header .pageTtl {
	text-align: center;
}

/* footer */
#copyright .copyrightIn {
	width: 980px;
	margin: 0 auto;
	padding: 15px 0;
}
#copyright .copyrightIn .flogo {
	float: left;
	padding-left: 10px;
}
#copyright .copyrightIn .foplogo {
	float: left;
	padding-left: 21px;
}
#copyright .copyrightIn .fhokuologo {
    float: left;
    padding-left: 21px;
}
#copyright .copyrightIn .fcopy {
	float: right;
	padding-top: 5px;
	font-size: 72%;
}


/* ------------------------------------ *
	* pagelayout
* ------------------------------------ */
.ctsArea {
	width: 960px;
	padding: 0 10px;
	margin: 0 auto;
}

/* intro */
.ctsIntro  {
	padding: 0 70px 26px;
}
.ctsIntro .modTxtbox .modTxtboxIn {
	background: #fff9fc;
}

/* map */
.ctsMap {
	padding: 50px 0 47px;
	background: url(../../img/hokuo/2017/border_01.png) no-repeat center bottom;
}
.ctsMap .ctsTtl {
	padding: 0 0 24px;
}
.ctsMap .mapList {
	padding: 23px 50px 0 70px;
}
.ctsMap .mapList ul li {
	width: 400px;
}
.ctsMap .mapList ul li .txt {
	line-height: 1.29;
	padding: 6px 0 18px;
}

/* about */
.ctsAbout {
	width: 820px;
	padding: 60px 0 0;
	margin: 0 auto;
}
.ctsAbout .expandWrp {
	margin-bottom: 30px;
}
.ctsAbout .expandWrp .expandElm {
	background: #dcf0ff;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

/* HOKUOのパンができるまで */
.ctsAbout .expandWrp01 .expandElm .img {
	padding: 0 0 30px;
	margin-left: -3px;
}

/* トムティの紹介 */
.ctsAbout .expandWrp02 .expandElm .img {
	padding: 35px 24px 53px 48px;
}

/*  report */
.ctsReport {
	width: 960px;
	padding: 50px 0 0;
	margin: 0 auto;
	background: url(../../img/hokuo/2017/report_bg.png) no-repeat center 123px;
}
.ctsReport .ctsLead {
	font-size: 16px;
	line-height: 1.88;
	padding: 20px 130px;
}
.reportBox {
	padding: 70px 0 60px;
	background: url(../../img/hokuo/2017/border_02.png) no-repeat center top;
}
.reportBox .reportTxt {
	width: 390px;
}
.reportBox .reportTxt .txt {
	line-height: 1.86;
}
.reportBox .reportComment {
	padding: 40px 130px 0;
}
.reportBox .reportComment.col2 {
	padding-left: 120px;
	padding-right: 120px;
}
.reportBox .reportComment.col2 .modTxtbox {
	width: 345px;
}

/* report アイコン設定 */
.reportBox .reportTxt .ttl {
	position: relative;
	padding-bottom: 32px;
	z-index: 3;
}
.reportBox .reportTxt .ttl:before {
	display: block;
	content: '';
	position: absolute;
	z-index: 2;
}
.reportBox01 .reportTxt .ttl.icnHat:before { /* コック帽子 */
	top: 2px;
	right: 25px;
	width: 76px;
	height: 74px;
	background: url(../../img/hokuo/report_icn_hat.png) no-repeat right top;
}
.reportBox .reportTxt .ttl.icnClean:before { /* クリーンルーム */
	top: -45px;
	right: 7px;
	width: 119px;
	height: 110px;
	background: url(../../img/hokuo/report_icn_clean.png) no-repeat right top;
}
.reportBox .reportTxt .ttl.icnPizza:before { /* ピザ */
	top: 44px;
	right: 15px;
	width: 92px;
	height: 66px;
	background: url(../../img/hokuo/report_icn_pizza.png) no-repeat right top;
}
.reportBox .reportTxt .ttl.icnBread:before { /* パン */
	top: -16px;
	right: 51px;
	width: 106px;
	height: 108px;
	background: url(../../img/hokuo/report_icn_bread.png) no-repeat right top;
}
.reportBox .reportTxt .ttl.icnEpi:before { /* エピ */
	top: -8px;
	right: -47px;
	width: 123px;
	height: 157px;
	background: url(../../img/hokuo/report_icn_epi.png) no-repeat right top;
}
.reportBox .reportTxt .ttl.icnGear:before {/* 歯車 */
	top: -56px;
	right: 38px;
	width: 107px;
	height: 91px;
	background: url(../../img/hokuo/report_icn_gear.png) no-repeat right top;
}
.reportBox .reportTxt .ttl.icnBreadcolor:before { /* パン色付き */
	top: -16px;
	right: -50px;
	width: 175px;
	height: 179px;
	background: url(../../img/hokuo/report_icn_breadcolor.png) no-repeat right top;
}

/* report 個別余白指定 */
.reportBox01 {
	padding-top: 33px;
	background: none;
}
.reportBox01 .reportImg {
	padding-top: 10px;
}
.reportBox02 .reportTxt {
	padding-top: 26px;
}
.reportBox03 .reportTxt {
	padding-top: 8px;
}
.reportBox03 .reportTxt .ttl {
	padding-bottom: 22px;
}
.reportBox04 .reportImg {
	padding-top: 3px;
}
.reportBox05 .reportImg {
	padding-top: 15px;
}
.reportBox06 .reportTxt {
	padding-top: 3px;
}
.reportBox07 .reportTxt {
	padding-top: 12px;
}

/* 参加者コメント */
.ctsParticipant .ctsTtl {
	padding: 15px 0 40px;
}
.ctsParticipant .participantComment {
	padding-bottom: 35px;
	margin: 0 30px;
	background: url(../../img/hokuo/2017/border_01.png) no-repeat center bottom;
}
.ctsParticipant .participantComment .modTxtbox {
	width: 414px;
	margin-bottom: 30px;
}

/* 従業員コメント */
.ctsEmployee {
	margin: 80px 80px 15px;
}
.ctsEmployee .employeeComment {
	position: relative;
}
.ctsEmployee .employeeComment .employeeImg {
	margin-left: -81px;
	position: absolute;
	left: 50%;
	top: -130px;
	z-index: 1;
}
.ctsEmployee .employeeComment .employeeName {
	font-size: 32px;
	color: #e85298;
	line-height: 1.4;
	position: absolute;
	left: 504px;
	top: 32px;
	z-index: 1;
}
.ctsEmployee .employeeComment .employeeName .jobCategory {
	display: block;
	font-size: 18px;
	color: #026ac3;
}
.ctsEmployee .employeeComment .modTxtbox .modTxtboxIn {
	padding-top: 115px;
	padding-bottom: 30px;
}

.employeeName .grade {
	font-size: 18px;
	position: absolute;
	left: 0;
	top: 45px;
}

/* 店舗一覧ボタン */
.ctsShopBtn {
}
.ctsShopBtn .btn {
	width: 620px;
	margin: 60px auto 40px;
}
.ctsShopBtn .btn > a {
	display: block;
	position: relative;
}
.ctsShopBtn .btn > a .icn {
	display: block;
	position: absolute;
	top: -26px;
	left: -15px;
	z-index: 1;
}
.ctsShopBtn .btn > a:hover {
	background: url(../../img/hokuo/2017/btn_hokuoshop_on.png) no-repeat left top;
}
.ctsShopBtn .btn > a:hover > img {
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
}
.ctsShopBtn .btn > a:hover .icn {
	background: url(../../img/hokuo/2017/btn_hokuoshop_icn_on.png) no-repeat left top;
}
.ctsShopBtn .btn > a:hover .icn > img {
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
}