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

/*　共通設定--------------------------------　*/
*{
	box-sizing: border-box;
}

html {
	/* reset-min設定の打ち消し
	background-color:transparent; */
}
body {
	margin:0 ;
	padding: 0 ;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	color: #333;
}

/*　背景のボックスが必要な場合のみ設定  */
#back {
}

p {
	font-size:100%;
	line-height:1.7em;
	margin:0;
}
a{
	text-underline-offset: 3px;
}

ul{
	padding: 0;
}

strong {font-weight:bold}

img {
	border:0;
	vertical-align: bottom;
	max-width: 100%;
}

hr{
	margin: 0 0 5em 0;
    border: 0;
    height: 1px;
    clear: both;
	background: #bbb;
}

figure{
	margin: 0;
	padding: 0;
}
figcaption{
	font-size: 70%;
}
/*独自クラス*/

.pc-only{
	display: block;
}
.sp-only{
	display: none;
}
.tb-only{
	display: none;
}

.main .tac{
	text-align: center !important;
}
.main .tal{
	text-align: left !important;
}

.main .tar{
	text-align: right !important;
}
.note{
	font-size: 12px;
	margin: 8px 0 0;
}
img + .caption{
	font-size: 12px;
    text-align: right;
    margin-top: -4em;
    padding-bottom: 2.75em;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}



/*マージン・パディング*/
.main .mb0 {
	margin-bottom: 0 !important;
}
.main .mb1em {
	margin-bottom: 1em !important;
}
.main .mb2em {
	margin-bottom: 2em !important;
}
.main .mb3em {
	margin-bottom: 3em !important;
}
.main .mb4em {
	margin-bottom: 4em !important;
}
.main .mb5em {
	margin-bottom: 5em !important;
}
.main .mb10em {
	margin-bottom: 8em;
}
.main .fs-big{
	font-size: 250% !important;
}
.main .fs-s{
	font-size: 80% !important;
}
.ct-mb{
	margin-bottom: 250px;
}



/*　ヘッダー--------------------------------　*/



/*　ビジュアル--------------------------------　*/

.visual {
	width: 100%;
	clear:both;
	height:100%;
	max-height: 100vh;
	margin:0px auto ;
	padding: 0 0 0 0;
	position:relative;
	z-index:1;
}
.visual .main-visual{
	width: 100%;
	height: 100%;
	max-height: 100vh;
	object-fit: cover;
	object-position: center 76%;
}

/*logo*/
.visual .main-logo{
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	max-width: 35%;
	width: 31%;
	margin-top: 0;
}


/*　コンテンツ外枠--------------------------------　*/

#contents {
	width:100%;
	margin:0 auto 0 auto;
	}

#contents:after, .cf:after {
	content:".";
	height:0;
	clear:both;
	visibility:hidden;
	display:block;
	}

/*　コンテンツ　メインカラム--------------------------------　*/

.main {
	width:100%;
	height:auto;
	padding: 250px 0 0;
	margin:0px auto ;
	overflow: hidden;
}



/*　見出し　--------------------------------　*/

h2 {
	margin: 32px auto 64px;
	padding:0px 0 0px 0px;
	text-align:center;
	font-size:200%;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight:600;
	color: #333;
	letter-spacing: 0.2em;
	clear:both;
	position: relative;
}
h2 a {
	text-decoration:none;
}
h3 {
	margin: -8px 0 30px 0;
    padding: 0 0 0;
    line-height: 1.6;
    font-size: 150%;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-weight: 500;
    clear: both;
    text-align: left;
	position: relative;
	letter-spacing: 0.1em;
}

h3 a {
	color:#333;
	text-decoration:none;
	}

h4 {
    text-align: left;
	margin:0 0 10px;
	font-size: 110%;
	color: #333;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
h5 {
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 1em;
}

/*回りより小さい文字　small-text 80％*/
span.small-t{
	font-size: 80%;
	display: inline;
}




/*　本文　--------------------------------　*/

/*　文字色・サイズ　共通　*/
.main p,
.main table,
.main ul ,
.main ol {
	color:#333;
	font-size:100%;
	line-height:2;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: 500;
}

/*　段落　*/
.main p {
	margin:0 0 1em 0 ;
}

.main p img{
	margin:0 10px 20px 10px;
}


/* リンク文字色 */
.main a {
	color:#333;
	text-decoration: none;
	transition: 0.2s ease color;
}

.main a:hover {
	color: #000;
	/* text-decoration:underline; */
}
.main a.link {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/*　リスト　*/

.main ul , .main ol{
	margin:0 0 1em;
	}
.main ul li{
	margin-bottom:0.5em;
	}
.main ol li{
	margin-bottom:0.5em;
}


/* フッター--------------------------------　*/

/* フッター--------------------------------　*/
#footer {
  margin: 0px auto 0 auto;
  padding: 50px 0;
  width: 100%;
  clear: both;
  background-color: #9f9f9f;
  color: #fff
}
#footer .box {
  width: 87.5%;
  max-width: 1680px;
  margin: 0 auto 0;
  position: relative;
}
#footer .footer_ct p, #footer .footer_ct a, #footer .footer_ct h4 {
  color: #fff;
}
#footer .footer_ct li {
  list-style: none;
  color: #fff;
  line-height: 1.6;
  font-size: 92%;
}
/*#footer .footer_ct li a{
	text-decoration: none;
}*/
#footer .footer_ct .ct-text li span {
  font-size: 80%;
}
#footer .copyright {
  text-align: right;
  font-size: 12px;
  margin-top: auto;
}
/* ページトップ */
p.pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
}
p.pagetop a {
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #bbb;
  font-size: 20px;
  text-decoration: none;
  line-height: 50px;
  opacity: 0.85;
  border-radius: 50%;
  transition: 0.2s;
}
/*p.pagetop a:hover {
	background-color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	}
*/
.footer-logo {
  max-width: 100px;
  width: 8%;
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* ★各ページ共通--------------------------------　*/

/*タイトル------------------------------------*/

/* コンテンツ枠 */
.main .inner{
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0;
	margin-bottom: 250px;
}

/* フレックスボックス */

.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
.flex_jc_sb{
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.flex_jc_c{
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex_ai_c{
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.flex_ai_s{
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.flex_end{
	  -webkit-box-pack: end;
	  -ms-flex-pack: end;
	  justify-content: flex-end;
}
.flex_reverse{
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
  	flex-direction: row-reverse;
}
.flex_wrap{
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 -1.09%;
}

/*説明つき*/
.with-detail {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}
.with-detail.cl-100 {
	display: block;
}



/*商品名　リンク*/
.item-detail {
    margin: 0 45px 20px;
	text-align: left;
}
.item-detail.p-bottom {
	margin: 50px 20px 50px 0;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.item-detail.p-bottom p{
	
}
.item-detail p{
	font-size: 93.75%;
	line-height: 1.8;
	margin-bottom: 0;
}
.btn-more {
	text-decoration: underline;
	display: inline-block;
	padding: 0 0 0 1em;
}






/* プロローグ　--------------------------------　*/
/*.main-ttl {
	text-align: center;
}
.main-ttl .sub-catch{
	color: #888;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}
.main .read-text{
	font-size: 17px;
	line-height: 2.4;
}
*/

/* グリッド　--------------------------------　*/

.cl-left {
	text-align: left;
	margin-bottom: 130px;
}
.cl-left-p02 {
	text-align: left;
	margin-bottom: 130px;
	transform: translateX(10%);
}
.cl-left-p03 {
	text-align: left;
	margin-bottom: 130px;
	transform: translateX(20%);
}

.cl-right {
	text-align: right;
	margin-bottom: 130px;
}
.cl-right-p02 {
	transform: translateX(-10%);
	text-align: right;
	margin-bottom: 130px;
}
.cl-right-p03 {
	transform: translateX(-20%);
	text-align: right;
	margin-bottom: 130px;
}

.ct-img.w100 {
	width: 100%;
}
.ct-img.w80 {
	width: 80%;
}
.ct-img.w70 {
	width: 70%;
}
.ct-img.w50 {
	width: 50%;
}
.ct-img.w40 {
	width: 40%;
}
.ct-img.w30 {
	width: 30%;
}

.cl-left .ct-img,.cl-left-p02 .ct-img,.cl-left-p03 .ct-img {
	margin-right: auto;
}
.cl-right .ct-img,.cl-right-p02 .ct-img,.cl-right-p03 .ct-img {
	margin-left: auto;
}


.flex .cl-left-p02 {
	padding-left: 10%;
	transform: inherit;
}
.flex .cl-left-p03 {
	padding-left: 20%;
	transform: inherit;
}
.flex .cl-right-p02 {
	padding-right: 10%;
	transform: inherit;
}
.flex .cl-right-p03 {
	padding-right: 20%;
	transform: inherit;
}



.with-detail .ct-img {
	margin: 0 0;
}
.img-pt {
	padding-top: 123.3333%	
}




/* マテリアル　material--------------------------------　*/
.material {
	background-color: #dcdcdc;
	padding: 6% 0 5%;
}
.material .inner{
	margin-bottom: 0;
}
.material .ct-text {
	width: 65%;
}
.manager {
	width: 42%;
	margin-left: 1em;
}







/*  アニメーションスタイル
-------------------------------------------*/
/*右から左*/
.slide-left {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 2s;
  }
.slide-left.is-show {
	transform: translate(0, 0);
	opacity: 1;
}

/*左から右*/
.slide-right {
	opacity: 0;
	transform: translate(50%, 0);
	transition: 2s;
  }
.slide-right.is-show {
	transform: translate(0, 0);
	opacity: 1;
}

/*下からふわっと表示*/
.slide-up{
 position:relative;
 transform:translate(0, 20%);
 opacity:0;
 transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 3.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.slide-up.is-show {
    transform: translate(0, 0);
	opacity:1;
}

li.slide-up:nth-child(1){
	-moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
}
li.slide-up:nth-child(2){
	-moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
}
li.slide-up:nth-child(3){
	-moz-transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
    -o-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
}
li.slide-up:nth-child(4){
	-moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
	-ms-transition-delay: 400ms;
}
li.slide-up:nth-child(5){
	-moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    -o-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
}
li.slide-up:nth-child(6){
	-moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
}
li.slide-up:nth-child(7){
	-moz-transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
    -o-transition-delay: 700ms;
	-ms-transition-delay: 700ms;
}
li.slide-up:nth-child(8){
	-moz-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    -o-transition-delay: 800ms;
	-ms-transition-delay: 800ms;
}
li.slide-up:nth-child(9){
	-moz-transition-delay: 900ms;
    -webkit-transition-delay: 900ms;
    -o-transition-delay: 900ms;
	-ms-transition-delay: 900ms;
}
li.slide-up:nth-child(10){
	-moz-transition-delay: 1000ms;
    -webkit-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
}


/*マスクアニメ*/
.mask-wrap{
	display: table;
	overflow: hidden;
	margin: 0 auto;
}
.mask-wrap .mask{
	display: table;
	position: relative;
	margin-bottom: .25em;
	left: -100%;
	overflow: hidden;
}
.mask-wrap .mask-bg{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #CD9B56;
}


/* タイトルアニメーション--------------------------------　*/

.handwriting {
  width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.handwriting.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.5s ease;
}

.handwriting_text {
  fill: #fff;
}

.handwriting_mask_line {
  fill: none;
  stroke: #fff;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5000px;

  /* ← 最初は止める */
  animation: none;
}

/* 発火用 */
.handwriting.active .handwriting_mask_line {
  animation: handwriting 6s linear forwards;
}

@keyframes handwriting {
  0% {
    stroke-dashoffset: 5000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* 画像拡大JS　補正--------------------------------　*/

/*拡大時の背景*/
.goverlay {
        background: #fff;
 }

/*拡大時のボタン類*/
.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
    background-color: rgba(255,255,255,0);
}
.glightbox-clean .gclose:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover {
    background-color: rgba(255,255,255,0);
}
.glightbox-clean .gclose path, .glightbox-clean .gnext path, .glightbox-clean .gprev path {
    fill: #999;
}
/*画像のドロップシャドウ*/
.glightbox-clean .gslide-media {
	-webkit-box-shadow: none;
	box-shadow: none;
}


/*
@media screen and (min-width: 1900px) {
	.material .cl-right .ct-img{ 
		height: 66%;
		overflow: hidden;
	}
	.material .cl-right .ct-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
*/
@media screen and (max-width: 1900px) and (min-width: 768px) {
	.visual .main-logo {
		position: absolute;
		top: 28%;
	}
}


@media screen and (max-width: 768px)  {
	html, body, header, section, article, nav, footer,
	div, span, p, h1, h2, h3, h4, ul, ol, li, dl, dt, dd,
	table, tr, th, td, tbody, thead, tfoot {
		margin: 0;
		padding: 0;}

	img { border: 0; vertical-align:bottom }

	body {
		width: 100%;
		background-color: #fff;
	/*	font: 14px/1.231 'ヒラギノ角ゴ pro W3', "Hiragino KaKu Gothic Pro", Osaka, sans-serif; */
		font-size: 14px;
		line-height: 1.8;
		-webkit-text-size-adjust: 100%;
		}

	*{
		box-sizing: border-box;
	}

	hr{
		margin: 0 0 3em 0;
	}
	/*独自クラス*/
	.pc-only{
		display: none;
	}
	.sp-only{
		display: block;
	}
	.tb-only{
		display: none;
	}


	/*マージン・パディング*/
	.main .mb4em {
		margin-bottom: 2em !important;
	}
	.main .mb5em {
		margin-bottom: 2.4em !important;
	}
	.main .mb10em {
		margin-bottom: 4em !important;
	}

	.main .sp-mb0 {
		margin-bottom: 0px!important;
	}
	.ct-mb {
		margin-bottom: 120px;
	}

/*　コンテンツ　メインカラム--------------------------------　*/
	.main {
		padding: 120px 0 0;
	}

	/* コンテンツ枠 */
	.main .inner{
		width: 90%;
        margin: 0 auto;
        padding: 0 0 0;
	}
	.flex{
		display: block;
	}

	.flex.remain{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	
	/*商品名　リンク*/
	.item-detail {
		margin: 1em 0;
	}
	.item-detail p {
		font-size: 85.7%;
	}

	/*　見出し / 本文　--------------------------------　*/

	h2 {
		margin: 10px auto 10px;
        font-size: 150%;
        letter-spacing: 0.1em;
	}
	h3 {
		margin: 1em 0 30px 0;
		padding: 0 0 0;
		line-height: 1.6;
		font-size: 130%;
	}
	.main p, .main table, .main ul, .main ol {
		font-size: 92.86%;
	}
	img + .caption{
		text-align: right;
		margin-top: -2em;
		padding-bottom: 1em;
		font-size: 10px;
    }
	.btn-more {
     padding: 0 0 0 0.5em;
	}


	/*　ビジュアル--------------------------------　*/
	.visual {
        max-height: 100%;
	}

	.visual .main-visual {
		width: 100%;
		height: auto;
	}
	.visual .main-logo {
        width: 60%;
        max-width: 360px;
        top: 28.5%;
	}
	
	/* グリッド　--------------------------------　*/
	
	.cl-left,.cl-left-p02, .cl-left-p03, .cl-right,.cl-right-p02, .cl-right-p03 {
		margin-bottom: 70px;
	}
	
	.sp-cl-left {
		transform: translateX(0);
	}
	.sp-cl-left-p02 {
		transform: translateX(10%);
	}
	.sp-cl-right {
		transform: translateX(0);
	}
	.sp-cl-right-p02 {
		transform: translateX(-10%);
	}
	.ct-img.sp-w100 {
		width: 100%;
	}
	.ct-img.sp-w90 {
		width: 90%;
	}
	.ct-img.sp-w80 {
		width: 80%;
	}
	.ct-img.sp-w70 {
		width: 70%;
	}
	.ct-img.sp-w60 {
		width: 60%;
	}
	.ct-img.sp-w50 {
		width: 50%;
	}
	.ct-img.sp-w40 {
		width: 40%;
	}
	.ct-img.sp-w30 {
		width: 30%;
	}

	.with-detail {
		display: block;
	}
	.with-detail .ct-img.w70{
		width: 100%;
	}
	.item-detail p{
		padding-left:6px;
	}
	.item-detail.p-bottom {
		margin: 1em 0;
		display: block;
	}
	.with-detail.cl-100 {
		display: block;
		margin-bottom: 70px;
	}
	
	.flex .sp-cl-left {
		padding-left: 0;
		transform: inherit;
	}
	.img-pt {
		padding-top: 177.7777%;
	}
	
	/* マテリアル　material--------------------------------　*/
	.material {
		padding: 50px 0 0;
	}
	.material .inner{
		margin-bottom: 0;
		padding: 0 10% 30px;
	}
	.material .ct-img {
		width: 100%;
		margin-bottom: 2em;
	}
	.material .ct-text {
		width: 100%;
	}

	
	/* フッター　footer--------------------------------　*/
	#footer {
		margin: 0px auto 0 auto;
		padding: 40px 0 20px;
	}
	#footer .footer_ct li {
	    line-height: 2;
	}
	.footer-logo {
		width: 30%;
		margin: 2em 0;
		position: relative;
		top: inherit;
		left: inherit;
		right: inherit;
		bottom: inherit;
	}
	#footer .copyright {
		margin-top: 20px;
	}
	
	/* 画像拡大JS　補正--------------------------------　*/

	/*拡大時の背景*/
		.glightbox-mobile .goverlay {
		background: #fff;
	}
	

	
}