@charset "utf-8";

/**
 * 汎用クラス
 */

.ins-lp05LayoutA {
  margin-right: auto;
  margin-left: auto;
  width: 1000px;
}

.ins-lp05LayoutB {
  margin-right: auto;
  margin-left: auto;
  width: 1200px;
}

#ins-lp05 .ins-lp05Serif {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#ins-lp05 .ins-lp05TextFormated {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ins-lp05 .ins-lp05TextFormated .ins-lp05Serif {
  font-family: "Yu Mincho", YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#ins-lp05 .ins-lp05FL {
  float: left;
}

#ins-lp05 .ins-lp05FR {
  float: right;
}

#ins-lp05 .ins-lp05Marked {
  background: #fcfcc2;
}

/**
 * レイアウト
 *
 * note: 以下、セレクタの冒頭に #ins-lp04 指定があるものは、共通系CSS内に定義されたセレクタとの詳細度の兼ね合いで指定しているものとする。
 */

#ins-lp05 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #111;
  background-color: #fff;
}

/* Header, Title*/
.ins-lp05Visual {
  position: relative;
  height: 700px;
  background: url(/assets/img/lp/mizuhiki/bg-title-texture.png) center repeat;
}

.ins-lp05VisualInner {
  height: 700px;
  background: url(/assets/img/lp/mizuhiki/bg-title_2.png) center no-repeat;
  background-size: 100%;
  background-size: cover;
}

.ins-lp05VisualInner .ins-lp05LayoutA {
	position:relative;
}

#ins-lp05 .ins-lp05Logo {
  padding: 22px 0 24px;
}

#ins-lp05 .ins-lp05Title {
  margin: 25px 0;
}

#ins-lp05 .ins-lp05Visual .ins-lp05Caution {
  margin: 20px 0 0 0;
  font-size: 12px;
}
#ins-lp05 .ins-lp05Visual .bn-specialwrapping {
    position: absolute;
    right: -9px;
    top: 14px;
}

/* block 1 */
.ins-lp05Block1 {
  position: relative;
  height: 568px;
  padding: 140px 0 150px;
  text-align: center;
  background: url(/assets/img/lp/mizuhiki/bg-b1.png) bottom center no-repeat;
  background-size: 100%;
  background-size: cover;
}

.ins-lp05Block1:after {
  content: '';
  display: block;
  position: absolute;
  top: 829px;
  left: 50%;
  z-index: 20;
  margin-left: -43px;
  width: 170px;
  height: 86px;
  background: url(/assets/img/lp/mizuhiki/bg-b1-arrow.png) 0 0 no-repeat;
}

#ins-lp05 .ins-lp05Block1 .ins-lp05BlockTitle {
  margin-bottom: 30px;
  padding-bottom: 60px;
  background: url(/assets/img/lp/mizuhiki/bg-separator-01_2.png) center bottom no-repeat;
}

#ins-lp05 .ins-lp05Block1 .ins-lp05BlockContents p {
  font-size: 108%;
  text-shadow: 1px 1px rgba(0, 0, 0, .2);
}

#ins-lp05 .ins-lp05Block1 .ins-lp05BlockContents p + p {
  margin-top: 15px;
}

#ins-lp05 .ins-lp05Block1 .ins-lp05Quoted {
  margin-top: 40px;
  position: relative;
  display: inline-block;
  padding: 0 30px;
  font-size: 133%;
}

#ins-lp05 .ins-lp05Block1 .ins-lp05Quoted:before,
#ins-lp05 .ins-lp05Block1 .ins-lp05Quoted:after {
  content: '';
  display: block;
  position: absolute;
  width: 24px;
  height: 20px;
}

#ins-lp05 .ins-lp05Block1 .ins-lp05Quoted:before {
  top: -10px;
  left: 0;
  background: url(/assets/img/lp/mizuhiki/tt-b1-quote-open.png) 0 0 no-repeat;
}

#ins-lp05 .ins-lp05Block1 .ins-lp05Quoted:after {
  bottom: -10px;
  right: 0;
  background: url(/assets/img/lp/mizuhiki/tt-b1-quote-close.png) 0 0 no-repeat;
}

/* block 2 */
.ins-lp05Block2 {
  position: relative;
  height: 924px;
  padding: 0;
  background: url(/assets/img/lp/mizuhiki/bg-b2_2.jpg) center no-repeat;
  background-size: 100%;
  background-size: cover;
}

.ins-lp05Block2 .ins-lp05LayoutA {
  position: relative;
}

.ins-lp05Block2:before,
.ins-lp05Block2:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
}

.ins-lp05Block2:before {
  width: 440px;
  height: 360px;
  top: 0;
  left: 0;
  background: url(/assets/img/lp/mizuhiki/bg-b2-texture-1.png) 0 0 no-repeat;
}

.ins-lp05Block2:after {
  width: 330px;
  height: 450px;
  bottom: 0;
  right: 0;
  background: url(/assets/img/lp/mizuhiki/bg-b2-texture-2.png) 0 0 no-repeat;
}

#ins-lp05 .ins-lp05Block2 .ins-lp05BlockTitle {
  position: absolute;
  top: 135px;
  right: 0;
  z-index: 10;
  padding-top: 70px;
  background: url(/assets/img/lp/mizuhiki/bg-separator-02_2.png) center top no-repeat;
}

#ins-lp05 .ins-lp05Block2 .ins-lp05BlockContents {
  position: absolute;
  top: 205px;
  right: 255px;
  z-index: 10;
  height: 600px;

  writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /writing-mode: tb-rl;
  _writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;            /* IE用      */
  -moz-writing-mode: vertical-rl;     /* firefox用 */
  -webkit-writing-mode: vertical-rl;  /* chrome用  */
  -o-writing-mode: vertical-rl;       /* opera用   */
}

#ins-lp05 .ins-lp05Block2 .ins-lp05BlockContents p {
  font-size: 108%;
  line-height: 1.8;

}

#ins-lp05 .ins-lp05Block2 .ins-lp05BlockContents p + p {
  margin-right: 20px;
}

#ins-lp05 .ins-lp05Block2 .ins-lp05Marked {
  color: #f80e18
}

#ins-lp05 .ins-lp05Block2 .ins-lp05Marked b {
  font-size: 133%;
}

/* block 3 */
.ins-lp05Block3 {
  height: 840px;
  padding: 150px 0 100px;
  text-align: center;
  background: url(/assets/img/lp/mizuhiki/bg-b3.png) center no-repeat;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05BlockTitle {
  margin-bottom: 30px;
  padding-bottom: 60px;
  background: url(/assets/img/lp/mizuhiki/bg-separator-01_2.png) center bottom no-repeat;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05BlockContents p {
  font-size: 108%;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05BlockContents p + p {
  margin-top: 15px;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05B3types {
  margin: 40px 0;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05Quoted {
  margin-top: 10px;
  position: relative;
  display: inline-block;
  padding: 0 40px;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05Quoted:before,
#ins-lp05 .ins-lp05Block3 .ins-lp05Quoted:after {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 17px;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05Quoted:before {
  top: -5px;
  left: 0;
  background: url(/assets/img/lp/mizuhiki/tt-b3-quote-open.png) 0 0 no-repeat;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05Quoted:after {
  bottom: -5px;
  right: 0;
  background: url(/assets/img/lp/mizuhiki/tt-b3-quote-close.png) 0 0 no-repeat;
}

#ins-lp05 .ins-lp05Block3 .ins-lp05Quoted .ins-lp05Marked {
  font-size: 133%;
}

/* block 4 */
.ins-lp05Block4 {
  padding: 140px 0;
  background: #f9e0e0 url(/assets/img/lp/mizuhiki/bg-b4_2.jpg) center top repeat;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockTitle {
  margin-bottom: 30px;
  padding-bottom: 60px;
  background: url(/assets/img/lp/mizuhiki/bg-separator-01_2.png) center bottom no-repeat;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockContents1 {
  font-size: 108%;
  background-color: #fff;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockContents1 .ins-lp05Col1 {
  float: left;
  width: 400px;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockContents1 .ins-lp05Col2 {
  float: right;
  width: 550px;
  padding: 50px 0;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockContents1 p + p {
  margin-top: 20px;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockSubTitle {
  margin: 55px 0 20px;
  font-size: 200%;
  line-height: 1.3;
  color: #7a5d59;
  text-align: center;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockContents2 {
  border: 3px solid #7a5d59;
  background-color: #fff;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05BlockLead {
  padding: 25px 0;
  border-bottom: 3px dotted #7a5d59;
  font-size: 129%;
  text-align: center;
  line-height: 1.3;
  color: #7a5d59;
  background-color: #f6eeee;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type {
  margin: 40px 0 30px;
  padding: 0 22px 0 32px;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05FL {
  width: 380px;
  color: #7a5d59;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05FR {
  width: 520px;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05TypeName {
  margin-bottom: 15px;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05FL ul {
  margin-top: 15px;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05FL li {
  display: inline;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05FR li {
  float: left;
  width: 250px;
  margin-right: 10px;
  text-align: center;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Type .ins-lp05FR span {
  display: block;
  margin-top: 5px;
  text-align: center;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05Designer {
  box-sizing: border-box;
  height: 300px;
  border: 3px solid #7a5d59;
  border-top: none;
  padding: 25px 40px 25px 330px;
  color: #7a5d59;
  background: #fff url(/assets/img/lp/mizuhiki/im-designer-2.jpg) 0 0 no-repeat;
  background-size: contain;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05DesignerName {
  margin-bottom: 15px;
  font-size: 115%;
  font-weight: bold;
}

#ins-lp05 .ins-lp05Block4 .ins-lp05DesignerHistory {
  font-size: 86%;
  line-height: 1.7;
}


/* block 5 */
.ins-lp05Block5 {
  height: 365px;
  padding: 120px 0 30px;
  text-align: center;
  background: none;

}

#ins-lp05 .ins-lp05Block5 .ins-lp05BlockTitle {
  margin-bottom: 30px;
  padding-bottom: 60px;
  background: url(/assets/img/lp/mizuhiki/bg-separator-01_2.png) center bottom no-repeat;
}

#ins-lp05 .ins-lp05Block5 .ins-lp05BlockContents {
  font-size: 115%;
}


/* カタログリスト */
.ins-lp05BtCataogList {
  padding: 9px 0 30px;
  text-align: center;
  background-color: #444;
}

/* サービス */
#ins-lp05 .ins-lp05Services {
  margin-top: 60px;
}
#ins-lp05 .ins-lp05Services .ins-lp05Serif {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#ins-lp05 .ins-lp05ServicesLead {
  margin-bottom: 20px;
  text-align: center;
  font-size: 172%;
  font-weight: normal;
}

.ins-lp05Service {
  float: left;
  box-sizing: border-box;
  margin-right: 13px;
  width: 240px;
  padding: 20px 20px;
  border-radius: 5px;
  text-align: center;
  background-color: #f2ebe0;
  height: 280px;
}

.ins-lp05Service:nth-child(2) {
  margin-right: 14px;
}

.ins-lp05Service.ins-lp05LastItem {
  margin-right: 0;
}

.ins-lp05ServiceTitle {
  height: 45px;
}

.ins-lp05ServiceImage {
  margin: 5px auto 10px;
  width: 190px;
}

.ins-lp05ServicePoint .ins-lp05ServiceImage {
  margin: 5px -1px 10px;
  width: 202px;
}

.ins-lp05ServiceText {
  font-size: 86%;
}

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

/**
 * /common/common.css より一部抜粋
 */


/* footer
-------------------------------------------- */
#ins-footer {
  padding: 50px 0 10px;
  color: #111;
  background-color: #fff;
}
	#ins-footer .ins-ftBox {
    padding-top: 50px;
    border-top: 1px solid #ddd;
	}
	#ins-footer .ins-ftNav {
		font-size: 93%;
		line-height: 1;
	}
		#ins-footer .ins-ftNav li {
			border-left: 1px solid #c1c1c1;
			display: inline;
			padding: 0 10px 0 15px;
		}
		#ins-footer .ins-ftNav li:first-child {
			border: 0;
			padding-left: 0;
		}
#ins-ftLogo {
	float: right;
}
#ins-ftTagline {
	font-size: 86%;
	margin: 20px 0 25px;
}
  .ins-lp05FtTagline {
    float: left;
		width: 910px;
    padding-top: 15px;
  }
  .ins-lp05PMark {
    float: right;
    width: 70px;
  }
#ins-ftCopyright {
	color: #989898;
	font-size: 93%;
}


/**
 * /assets/css/home.css より一部抜粋、修正
 */

#ins-lp .ins-homHeaderD {
 	margin: 70px 0 40px;
  padding-top: 30px;
	text-align: center;
}

#ins-lp .ins-homAll {
	margin: -8px 0 60px -8px;
}
	#ins-lp .ins-homAll > div,
	#ins-lp .ins-homAll > dl {
		border-style: solid;
		border-width: 1px;
		float: left;
		margin: 8px 0 0 8px;
		padding: 29px 20px 20px;
		position: relative;
		width: 201px;
	}
	#ins-lp .ins-homAll > div {
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	#ins-lp .ins-homAll h3 {
		margin: -5px 0 40px;
	}
	#ins-lp .ins-homAll .ins-icon {
		left: 0;
		position: absolute;
		top: -2px;
	}
  #ins-lp .ins-homAll div.ins-catalog,
  #ins-lp .ins-homAll div.ins-selection,
  #ins-lp .ins-homAll div.ins-brand,
  #ins-lp .ins-homAll div.ins-experience,
  #ins-lp .ins-homAll div.ins-gourmet,
  #ins-lp .ins-homAll div.ins-presentage,
  #ins-lp .ins-homAll div.ins-premium,
  #ins-lp .ins-homAll div.ins-collab,
  #ins-lp .ins-homAll div.ins-happy,
  #ins-lp .ins-homAll dl.ins-catalog,
  #ins-lp .ins-homAll dl.ins-selection,
  #ins-lp .ins-homAll dl.ins-brand,
  #ins-lp .ins-homAll dl.ins-experience,
  #ins-lp .ins-homAll dl.ins-gourmet,
  #ins-lp .ins-homAll dl.ins-presentage,
  #ins-lp .ins-homAll dl.ins-premium,
  #ins-lp .ins-homAll dl.ins-collab,
  #ins-lp .ins-homAll dl.ins-happy {
		border-top-width: 2px;
	}
	#ins-lp .ins-homAll div.ins-catalog {
		background-color: #7a5bb0;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-03.png);
		border-color: #7a5bb0;
	}
	#ins-lp .ins-homAll div.ins-selection {
		background-color: #aea281;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-05.png);
		border-color: #aea281;
	}
	#ins-lp .ins-homAll div.ins-brand {
		background-color: #f6765f;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-07.png);
		border-color: #f6765f;
	}
	#ins-lp .ins-homAll div.ins-experience {
		background-color: #fcc940;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-09.png);
		border-color: #fcc940;
	}
	#ins-lp .ins-homAll div.ins-gourmet {
		background-color: #8bd266;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-11.png);
		border-color: #8bd266;
	}
	#ins-lp .ins-homAll div.ins-presentage {
		background-color: #f17c8d;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-13.png);
		border-color: #f17c8d;
	}
	#ins-lp .ins-homAll div.ins-premium {
		background-color: #666;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-15.png);
		border-color: #666;
	}
	#ins-lp .ins-homAll div.ins-collab {
		background-color: #45afe3;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-17.png);
		border-color: #45afe3;
	}
	#ins-lp .ins-homAll div.ins-happy {
		background-color: #cb9cc5;
		background-image: url(/assets/img/lp/mizuhiki/bg-home-19.png);
		border-color: #cb9cc5;
	}
	#ins-lp .ins-homAll > dl {
		background-position: 100% 100%;
		background-repeat: no-repeat;
		border-color: #eee;
	}
	#ins-lp .ins-homAll dl.ins-catalog {
    border-top-color: #61419a;
	}
	#ins-lp .ins-homAll dl.ins-selection {
    border-top-color: #9b8d68;
	}
	#ins-lp .ins-homAll dl.ins-brand {
    border-top-color: #ea5539;
	}
	#ins-lp .ins-homAll dl.ins-experience {
    border-top-color: #f8b502;
	}
	#ins-lp .ins-homAll dl.ins-gourmet {
    border-top-color: #6dbb44;
	}
	#ins-lp .ins-homAll dl.ins-presentage {
    border-top-color: #e8546a;
	}
	#ins-lp .ins-homAll dl.ins-premium {
    border-top-color: #444;
	}
	#ins-lp .ins-homAll dl.ins-collab {
    border-top-color: #1696d4;
	}
	#ins-lp .ins-homAll dl.ins-happy {
    border-top-color: #b877b0;
	}
		#ins-lp .ins-homAll > dl dt {
			font-weight: bold;
			font-size: 93%;
			margin: 0 0 15px;
		}
		#ins-lp .ins-homAll > dl img {
			display: block;
			margin: 0 auto 20px;
		}
	#ins-lp .ins-homAll .ins-excerpt {
		font-size: 86%;
		margin: 0 0 25px;
	}
	#ins-lp .ins-homAll .ins-course {
		font-size: 86%;
	}
	#ins-lp .ins-homAll .ins-price {
		font-size: 93%;
		font-weight: bold;
	}

#ins-lp .ins-homBannerC {
	float: left;
	padding: 24px 0 0 25px;
	width: 210px;
}
	#ins-lp .ins-homBannerC > li {
		margin: 0 0 18px;
	}
	#ins-lp .ins-homBannerC dd {
		border: 4px solid #ede5da;
		padding: 16px 0 5px 16px;
	}
	#ins-lp .ins-homBannerC dd li {
			margin: 0 0 11px;
		}
	#ins-lp .ins-homBannerC img {
		display: block;
	}
	*+html #ins-lp .ins-homBannerC img {
		display: inline;
	}

.hvrImgA:hover,
.hvrImgsA a:hover img {
	filter: alpha(opacity=80);
	opacity: .8;
}

/* fancybox */
.fancybox-skin {
 background: transparent;
 padding: 0;
 color: #333;
 border-radius: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
}

.fancybox-opened .fancybox-skin {
  box-shadow: none;
}

.fancybox-title-float-wrap .child {
  color: #fff;
  font-weight: normal;
  text-shadow: none;
  background-color: transparent;
}


/* 201808変更箇所 */

.ins-lp05ServiceText {
  padding-top: 15px;
}
.ins-lp05ServiceText.souryou {
  font-size: 76%;
  padding-top: 0;
}
.ins-lp05Service:nth-child(2) {
  padding: 20px 0;
}

.ins-lp05Block2 {
  height: 850px;
  background-size: auto 850px;
  background-position: center bottom;
}

@media screen and (min-width: 1600px) {
  .ins-lp05Block2 {
    background-size: 100% auto;
  }
}

#ins-lp05 .ins-lp05Block2 .ins-lp05BlockTitle,
#ins-lp05 .ins-lp05Block2 .ins-lp05BlockContents {
  margin-top: 0;
}

.video {
  position: relative;
  z-index: 1;
  padding-top: 100px;
  margin: 0 auto;
  width: 800px;
  height: 450px;
}

.video iframe {
  width: 800px;
  height: 450px;
}