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

/************************************************
optimo.css 202110 EC
************************************************ */
.show_sp2{
	display: none!important;
}	
.optimo{
	margin: 0 auto ;
	text-align: center;
	line-height: 1.4;
}
.optimo h2{
	font-family: 'Cardo', serif;
	font-weight: 400;
	color: #000;
}

.intro {
	position: relative;
	width: 980px;
	text-align: left;
	margin: 40px auto 60px!important;
}
.intro h2 {
	font-size: 70px;
	font-weight: 400!important;
	text-align: left;
	padding: 0;
	margin-bottom: 30px;
	line-height: 1.4;
	letter-spacing: .02em;
	float: left;
}
.intro h2 span {
	display: block;
	font-size: 13px;
	letter-spacing: .5em;
}
.intro p{
	font-family: 'Noto Serif JP', serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 20px;	
}
.intro p.lead1{
	font-size: 24px ;
	padding: .5em 0 0 2em;
	float: left;
}
.intro p.lead2{
	position: absolute;
	top: 7em;
	left: 0;
	font-size: 18px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	float: left;
}
.intro p.lead3{
	position: relative;
	left: 3em;
	width: 100%;
	float: right;
	text-align: right;
}

.intro img {
	max-width: 900px;
	margin: auto;
}
.intro h2 img{
	width: 250px;
	height: auto;
	max-width: 300px;
}
.title{
}
.title h3{
	width: 980px;
	font-family: 'Cardo', serif;
	font-weight: 400;
	font-size: 58px;
	line-height: 1.4;
	letter-spacing: .02em;
	color: #000;
	margin: auto;
	text-align: right;
}
p.ttl-p{
	font-family: 'Noto Serif JP', serif;
	font-size: 28px ;
	letter-spacing: .05em;
	line-height: 1.6;
	margin: 30px auto 30px;	
	color: #000;
}

.item-box1 {
	background: url(/files/images/unique/optimo/bg-img.jpg) repeat;
	padding: 40px 0 40px;
}
.item-box1 .img-box {
	width: 780px;
	height: auto;
	padding: 3em;
	margin: 30px auto 80px;
	background-color: #fff;
}
.item-box1 img {
	max-width: 980px;
}
.item-box1 .img {
	width: 980px;
	margin: -160px auto 0;
}
.item-box1 .img2 {
	width: 980px;
	margin: 0 auto 0;
}
.item-box1 .select-box {
	position: relative;
	width: 980px;
	margin: auto;
}
.item-box1 .select-box .img-box {
	position: relative;
	width: 680px;
	height: auto;
	padding: 3em;
	margin: -80px auto 20px;
	background-color: #fff;
	z-index: 10;
}

.item-box1>p {
	width: 800px;
	text-align: left;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	margin: 50px auto;
	letter-spacing: .05em;
}
.item-box1 .img-box p {
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .05em;
}
.item-box1 .select-box .flR .img-box p{
	font-size: 16px;
	text-align: left;
	line-height: 1.7;
}
.item-box1 .select-img{
	width: 600px;
}

.item-box2 {
	position: relative;
	width: 980px;
	padding: 50px 0;
	margin: auto;
	/*overflow: hidden;*/
}
.item-box2 .img-box {
	position: absolute;
	left: 0;
	bottom: -60px;
	width: 750px;
	height: auto;
	padding: 5em 3em;
	margin: 20px auto;
}
.item-box2 .img-box p {
	text-align: left;
	font-family: 'Noto Serif JP', serif;
	/*font-family: 'Noto Serif Japanese', serif;*/
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .05em;
}
.item-box2>div {
	overflow: hidden;
}
.item-box2 .quality .flL{
	width: 70%;
	margin-bottom: 60px;
}
.item-box2 .quality .flR{
	width: 30%;
	margin-bottom: 60px;
}
.item-box2 .quality .flL img{
	float: left;
}
.item-box2 .quality .flR p{
	position: absolute;
	right: 0;
	bottom: 20px;
	font-family: 'Noto Serif JP', serif;
	font-size: 17px;
	padding:  2em;
	margin-bottom: 20px;
	text-align: left;
	line-height: 1.7;
	background: #fff;
}
.item-box2 .comfort-img{
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}


.item-box3 {
	width: 980px;
	padding: 60px 0 0;
	margin: auto;
	overflow: hidden;
}
.item-box3 .item img{
	max-width: 100%;
	height: auto;
}


.item-box3 .item{
	width: 980px;
	margin: 0 auto 80px;
}
.item-box3 .item .flL{
	width: 75%;
}
.item-box3 .item .flR{
	width: 50%;
	margin-top: -120px;
	float: right;
}
.item-box3 .item:last-child .flR{
	width: 40%;
	margin-top: 50px;
}
.item-box3 .txt{
	margin: -20px 0 20px 40px;
}
.item-box3 .txt p{
	font-family: 'Cardo', serif;
	/*font-family: 'Noto Serif JP', serif;*/
	font-size: 18px;
	line-height: 1.7;
	text-align: left;
}

.item-box3 .txt p.ttl{
	font-size: 40px;
	margin: .5em 0 .2em;
}
.item-box3 .txt p a{
	text-decoration: underline;
}
.item-box3  .txt .flL{
	width: 30%;
	margin-top: 40px;
	text-align: right;
}
.item-box3  .txt .flR{
	width: 50%;
	margin-top: 20px;
}


.link-btn {
	position: relative;
	margin: 60px auto 0;
}
.link-btn a{
	display: block;
	width: 640px;
	height: auto;
	font-size: 16px;
	text-align: left;
	background-size: 200px auto;
	background-image: url(../../images/unique/marvel/m_logo.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	padding: 22px 0 20px 50px;
	margin: auto;

	border: 2px solid #000;
	border-radius: 8px;
  box-shadow: 0 4px #333;
  transition: .2s all;
}
.link-btn a:hover {
	border: 2px solid #999;
  box-shadow: 0 4px #999;
	background-color: #fff;
  opacity:0.7;
}
.link-btn a span {
	background-color: #FFFB9B;
	padding: 0 .1em 0 .3em;
	margin-left: -0.2em;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
}

.arrow:before{
	width: 20px;
	height: 20px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg); 
	left: 20px;
	box-sizing: border-box;
}


/*画像フェードイン*/
.list-mv07{
	opacity: 0;
	transform: translate(0,10px); 
	-webkit-transform: translate(0,10px); 
}
.mv07{
	transition: all 0.6s ease;
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/*フォント*/
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
 }



@media screen and (max-width: 896px){
	
	.show_sp2{
		display: none!important;
	}	
	.show_pc2{
		display: block!important;
	}	
	.optimo p{
		color: #000;
	}
	.intro {
		width: 100%;
		text-align: center;
		margin: 20px auto 10px!important;
	}
	.intro img {
		max-width: 100%;
	}
	.intro h2 {
		width: 30%;
		font-size: 8.5vw;
		text-align: left;
		margin: 0 .3em .5em .3em!important;
		line-height: 1.3 !important;
	}
	.intro h2 img{
		width: 100%;
		height: auto;
		max-width: 300px;
	}
	.intro p{
		font-size: .9em ;
		margin-top: 0;
		margin-bottom: 10px;	
		color: #000;
	}
	.title h3{
		width: 96%;
		font-size: 30px;
		line-height: 1.4 !important;
		margin: 0 auto 4px !important;
	}
	
	p.ttl-p{
		width: 99%;
		/*font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,'Noto Serif Japanese',serif;*/
		letter-spacing: .1em;
		margin: 20px auto 15px!important;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: .02em;
	}
	.intro p.lead1{
		font-size: 3.2vw;
		padding: .1em 0 0;
		float: none;
		text-align: left;
	}
	.intro p.lead2{
		position: static;
		font-size: 16px;
		margin: 2em auto;
		float: none;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		text-align: center;
	}
	.intro p.lead3{
		position: static;
		width: 100%;
		float: none;
		text-align: right;
	}

	.item-box1 {
		width: 100%;
		padding: 20px 0 10px;
	}
	.item-box1 img {
    max-width: 100%;
	}
	.item-box1 .img-box {
		width: 94%;
		height: auto;
		margin: 1em auto 2em;
		padding: 1.5em 1.3em;
		box-sizing: border-box;
	}
	.item-box1 .img-box p {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
		font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
    line-height: 1.7;
    letter-spacing: 0;
		margin: 0;
	}
	.item-box1 .img,.item-box1 .img2 {
		width: 90%;
		margin: 0 auto 20px;
	}
	
	.item-box1 .select-box {
		position: relative;
		width: 100%;
		margin: auto;
		box-sizing: border-box;
	}
	.item-box1 .select-box .flL {
		margin: 0 auto 20px;
	}
	.item-box1 .select-box .img-box {
		position: relative;
		width: 96%;
		height: auto;
		padding: 1.5em 1.2em;
		margin: 0 auto 20px;
	}
	.item-box1 .select-box .flR .img-box p {
    font-size: 14px;
	}
	.item-box1 .select-img {
    width: 100%;
}
	.item-box2 {
		width: 100%;
		padding: 30px 0 0;
		margin: auto;
	}
	.item-box2>div {
		margin-bottom: 10px;
	}
	
	.item-box2 .flL{
		width: 70.1%;
	}
	.item-box2 .flR{
		width: 29.9%;
	}
	.item-box2 .flL img,.item-box2 .flR img{
		width: 100%;
		max-width: 480px;
	}
	
	.item-box2 .img-box {
    position: static;
    width: 100%;
    height: auto;
    padding: 1.2em;
    margin: 0 auto;
		box-sizing: border-box;
	}
	
	.item-box2 .img-box p {
		text-align: left;
		font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.7;
		letter-spacing: 0;
		margin: 0;
	}
	
	.item-box2 .quality .flR p{
		position: static;
		font-size: 14px;
		font-weight: 400;
		font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
		padding:  2em .6em;
		margin:0;
		text-align: left;
	}
	
	.item-box2 .quality .flL{
		width: 100%;
		margin-bottom: 60px;
		box-sizing: border-box;
		text-align: center;
		margin: auto;
	}
	.item-box2 .quality .flR{
		width: 96%;
		margin: 0 auto;
	}
	.item-box2 .quality .flL img{
		float: none;
	}
	
	.item-box3 {
		width: 96%;
		height: auto;
		padding: 30px 0 0;
		margin: auto;
		overflow: hidden;
	}

	.item-box3 .item{
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 auto 40px !important;
		padding: 0;
		text-align: left;
	}
	.item-box3 img{
		width: 100%;
		height: auto;
	}
	
	.item-box3 .item .flL{
		width: 95%;
	}
	.item-box3 .item .flR{
		width: 65%;
		margin-top: -9%;
	}
	
	.item-box3 .item:last-child .flR{
		width: 40%;
		margin-top: 0;
	}
	
	.item-box3 .txt{
		width: auto;
		padding-left: .5em;
		margin: -50px auto 20px;
	}
	.item-box3 .txt p{
		font-size: 14px;
		font-weight: 400;
		margin: 0 0 .3em;
	}
	.item-box3 .txt p.ttl{
		font-size: 28px;
		margin: 0 0 .2em;
	}
	.item-box3 .txt p a{
		font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
		text-decoration: underline!important;
		color: #000;
		border: none;
	}
	.item-box3 .item:last-child .txt{
		margin: 20px auto;
	}
	.item-box3  .txt .flL{
		width: 30%;
		margin-top: 0;
		text-align: right;
	}
	.item-box3  .txt .flR{
		width: 50%;
		margin-top: 0;
	}

	.list-mv07{
		opacity: 0;
		transform: translate(0,10px); 
		-webkit-transform: translate(0,10px); 
	}
	.mv07{
			transition: all 0.6s ease;
		opacity: 1.0;
		transform: translate(0,0); 
		-webkit-transform: translate(0,0);
	}

	.link-btn{
		margin: 20px auto 20px;
	}
	.link-btn a{
		width: 96%;
		height: auto;
		color: #000;
		font-size: .7em;
		padding: 10px 20px;
		margin: 20px auto 0 !important;
		background-image: none;
		text-align: center;
		box-sizing: border-box;
		line-height: 1.8;
	}
	.link-btn a span {
		padding: 0 .1em 0 .3em;
		margin-left: .2em;
		font-size: 1.4em;
		line-height: 1.4;
		font-weight: 500;
	}
	
	.arrow{
		width: 100%;
		padding: 0;
	}
	.arrow:before{
		width: 10px;
		height: 10px;
		border-top: 2px solid #000;
		border-right: 2px solid #000;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg); 
		top:30%;
		left: 14px;
	}
}


@media screen and (max-width: 568px){ 
	
	.show_pc2{
		display: none!important;
	}
	.show_sp2{
		display: block!important;
	}	
	.intro p.lead2{
		font-size: 4.3vw;
	}
	
}