@charset "UTF-8";
/* CSS Document */
body {
	background: #FFF;
	color: #555;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif;
	font-size: 16px;
	line-height: 2;
}
img {
	display: block;
	width: 100%;
}
a {
	color: #555;
	text-decoration: none;
    transition: .2s ease-in-out;
}
a:hover {
	color: #aaa;
	text-decoration: none;
}
a:active, a:focus {
	color: #aaa;
	text-decoration: none;
}
.sp {}
.pc { display: none; }

/*------------------------------------------
	common
------------------------------------------*/
h1,h2,h3,h4 {
	font-feature-settings: "palt";
	letter-spacing: -0.02em;
	font-weight: bold;
}
h3,h4 {
	font-family: Helvetica,"sans-serif";
}
h1 {
	font-size: 2.25em;
	line-height: 1.2;
	margin-bottom:0.65em;
}
h2 {
	font-size: 1.3em;
	line-height: 1.2;
	margin-bottom:0.25em;
}
h3 {
	font-size: 1em;
	line-height: 1;
}
h4 {
	font-size: 1.5em;
	line-height: 1.35;
}
h1 span,
h2 span {
	display: block;
}

.container {
	width: 84%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 4em 0 2.5em;
	}
.text {
/*word-break: break-all;*/
	font-feature-settings: "palt";
	}

/*flex-box*/
.flex_section {
}
.flex_tetxbox {
	margin-bottom: 1.5em;
}
.flex_img {
	margin-bottom: 1.5em;
}
/*bg-color*/
#item-01 { 
	background-color:#ddd
}
#item-01 .title { 
	background-color: #a28354;
	box-shadow: 8px 8px 0px 0px #d8c5ad;   
}
#item-01 .item-link a {
	background-color: #a28354;
}
#item-01 .item-link a:hover {
	background-color: #d8c5ad;
}
#item-02 { 
	background-color:#fff
}
#item-02 .title { 
	background-color: #006e94;
	box-shadow: 8px 8px 0px 0px #97C1CD;   
}
#item-02 .item-link a {
	background-color: #006e94;
}
#item-02 .item-link a:hover {
	background-color: #97C1CD;
}

/*------------------------------------------
	main-visual
------------------------------------------*/
header .main-visual img {
	margin-bottom: 2.5em;
}
header .main-visual .container {
	padding: 0;
	margin-bottom: 2.5em;
}
header .main-visual p.text {
	letter-spacing: 0.01em;
}
/*------------------------------------------
	item-box
------------------------------------------*/
.item-box  {
	margin-bottom: 3em;
}
.item-box .flex_imgbox {
	margin-bottom: 1.5em;
}
.item-box .flex_txtbox {
	margin-bottom: 1.5em;
}
.item-box .flex_txtbox .title {
	padding:1.25em 1.5em;
	background-color: #fff;
	margin-bottom: 1.5em;
}
.item-box .flex_txtbox h2 {
	letter-spacing: 0.05em;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 2px solid #fff;
}
.item-box .flex_txtbox h2 span {
	font-weight: 100;
	font-size: 0.5em;
	margin-bottom:0.5em;
	letter-spacing: 0.25em;
}
.item-box .flex_txtbox h3 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	letter-spacing: 0.1em;
}
.item-box .flex_txtbox h3 .name {
	text-transform: uppercase;
	font-size: 0.9em;
	line-height: 1.3;
}
.item-box .flex_txtbox h3 .price span {
	font-size: 0.5em;
}
.item-box .flex_txtbox h2,
.item-box .flex_txtbox h3 {
	color: #fff;
}
.item-link a {
	font-size: 0.75em;
	margin-top: 0.5em;
	letter-spacing: 0.01em;
	text-align: center;
	padding: 1em 0;
	display: block;
	font-weight: bold;
	color: #fff;
}
.link a {
	font-size: 1em;
	margin-top: 0.5em;
	letter-spacing: 0.01em;
	text-align: center;
	padding: 1em 0;
	display: block;
	font-weight: bold;
	color: #fff;
    transition: .2s ease-in-out;
	background-color:#444
}
.link a:hover{
	background-color:#666
}
/*------------------------------------------
	iten-photo
------------------------------------------*/
.item {
	margin: 0 auto;
	margin-bottom:2.5em;
}
.item ul li {
	margin-bottom:2em;
	opacity : 0;
	transform: translateY(5em);
	transition: 1s;
}
.item li .item-text {
	line-height: 1.5;
	font-weight: bold;
	font-size: 0.75em;
}
/*item-01*/
.item_01 li {
	margin-left:auto;
	margin-right:auto; 
	width: 80%;
}
.item_01 li .item-photo {
	margin: 0 auto 0.5em;
}
/*item-02*/
.item_02 {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.item_02 li {
	width: 33%
}
.item_02 li:nth-child(2) {
	margin-top:3em;
	width: 34%
}
.item_02 li:last-child {
	margin-top:6em;
}
/*item-03*/
.item_03 li {
	margin-left:auto;
	margin-right:auto; 
	width: 80%;
}
.item_03 li .item-photo {
	margin: 0 auto 0.5em;
}
/*item-04*/
.item_04 li {
	width: 50%;
}
.item_04 li:last-child {
	width: 60%;
	margin-top:-6em;
	margin-left:auto;
	margin-right: 0;
}
/*item-05*/
.item_05 li:first-child {
	width: 45%;
	margin: 0 2em 0 auto;
}
.item_05 li:nth-child(2) {
	width:55%;
	margin:-6em auto 1.5em 0;
}
.item_05 li:nth-child(3) {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 5em;
}
/*------------------------------------------
	banner
------------------------------------------*/
.banner .banner_line {
	margin-top: 5em;
	border: 1px solid #ccc;
	padding-bottom: 1.25em;
	overflow: hidden;
	border-radius: 0.25em;
}
.banner .banner_line h3 {
	letter-spacing: -0.01em;
}
.banner .banner_line h3 span {
	font-size: 0.65em;
	margin-top: 0.5em;
	color: #888;
	letter-spacing: 0.01em;
}
.banner .banner_line p {
	font-size: 0.85em;
	word-break: normal;
	font-feature-settings:normal;
}
.banner .banner_line .link {
	font-size: 0.9em;
	text-align: right;
}
.banner .block_img {
	background-repeat: no-repeat;
	background-position:  center;
	background-image:  url(../img/popup_sp.html);
	background-size:  cover;
}


/*------------------------------------------
	link
------------------------------------------*/
#link a {
	margin-top: 0.5em;
	letter-spacing: 0.01em;
	border: 1px solid #E5E5E5;
	text-align: center;
	padding: 1em 0;
	display: block;
	font-weight: bold;
	background: #E5E5E5;
}
#link a:hover {
	color: #555;
	background-color: #f6f6f6;
}
/*------------------------------------------
	footer
------------------------------------------*/
footer {
	color: #999;
	background-color: #333;
	text-align: center;
	padding: 3em 0;
	font-size: 0.75em;
}

/*=================================================	
	scrollTop
=================================================*/
.scrollTop {
    position: fixed;
	display: block;
    right:4%;
    bottom: 1em;
    opacity: 0;
	width: 3em;
	padding: 1.15em 0 0.65em;
    transition: all 0.4s ease-in-out 0s;
	background-color: #fff;
	border: 1px solid #f6f6f6;
}
.scrollTop:hover{
	background-color:#f6f6f6;
}
.scrollTop span {
	display: block;
	width: 1em;
	height: 1em;
	margin: 0 auto;
	border-top:2px #585858 solid;
	border-left:2px #585858 solid;
	cursor: pointer;
	transform: rotate(45deg);
}


@media screen and (min-width:896px) { 
	.sp {display: none;}
	.pc {display: block;}
	/*flex-box*/
	.flex_section {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex_txtbox {
		width:42%;
		margin-bottom: 1.5em;
	}
	.flex_txtbox .text {
		margin-right: -1em;
	}
	.flex_imgbox {
		width: 55%;
		margin-bottom: 1.5em;
	}
	/*------------------------------------------
		main-visual
	------------------------------------------*/
	
	header .main-visual .block_section {
		margin-bottom: 2.5em;
	}
	header .text {
		text-align: center;
		line-height: 2.5;
		font-size: 1.15em;
		padding-bottom:1.25em;
	}
	/*------------------------------------------
		item-box
	------------------------------------------*/
	.item-box {
		margin-bottom:2em;
	}
	.item-box .flex_txtbox .title {
		padding:2em;
		margin-bottom: 2em;
	}
	.item-box .flex_txtbox h2 {
		font-size: 1.75em;
		padding-bottom: 0.3em;
	}
	/*------------------------------------------
		iten-photo
	------------------------------------------*/
	.item {
		width: 100%;
		padding: 4em 1.5em;
	}
	.item ul li {
		margin-bottom:4em;
	}
	.item li .item-text {
		line-height:2;
		font-size:0.9em;
	}
	/*item-01*/
	.item_01 li {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.item_01 li .item-photo {
		width: 73%;
		margin: 0;
		order: 2
	}
	.item_01 li .item-text {
		width: 24%;
	}
	.item_04 li:last-child {
		margin-top:-12em;
	}
	/*item-03*/
	.item_03 li {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.item_03 li .item-photo {
		width: 65%
	}
	.item_03 li .item-text {
		width: 32%
	}
	/*item-05*/
	.item_05 li:first-child {
		width: 40%;
		margin: 0 6em 0 auto;
	}
	.item_05 li:nth-child(2) {
		width:55%;
		margin:-6em auto 1.5em 0;
	}
	.item_05 li:nth-child(3) {
		width:60%;
	}
	.item-link a {
		width: 50%;
		margin: 0 auto;
		font-size: 1em;
	}
	/*------------------------------------------
		footer
	------------------------------------------*/
	footer {
		font-size: 1em;
	}

}