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


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
Light 300
Regular 400
Medium 500
*/



@font-face {
	font-family:'DINPro-Regular';
	src:url('/common/fonts/DINPro-Regular.eot');
	src:url('/common/fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('/common/fonts/DINPro-Regular.woff2') format('woff2'),
	url('/common/fonts/DINPro-Regular.woff') format('woff'),
	url('/common/fonts/DINPro-Regular.ttf') format('truetype'),
	url('/common/fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}

@font-face {
	font-family:'DINPro-Medium';
	src:url('/common/fonts/DINPro-Medium.eot');
	src:url('/common/fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('/common/fonts/DINPro-Medium.woff2') format('woff2'),
	url('/common/fonts/DINPro-Medium.woff') format('woff'),
	url('/common/fonts/DINPro-Medium.ttf') format('truetype'),
	url('/common/fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}


/* ---------- RESET ---------- */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
a{
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
a.nohover:hover {
  opacity: 1.0;
}

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

html,body{
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}
body{
	color:#FFF;
	font-weight:400;
	font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
    line-height: 1.7;
	background: #FFF;
}

.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}





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


/* standard */
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
    top: 40px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition:top 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
	             transition:top 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

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


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    right:0px;
    z-index:1000;
    overflow:hidden;
}

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

header{
	width: 100%;
	height: 100%;
	position: relative;
}






header .titleBox{
	position: absolute;
	z-index: 10;
	top: 47%;
	left: 7%;
	width: 84%;
	max-width: 1200px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

header .titleBox h3{
	width: 65%;
	opacity: 0;
	position: relative;
	top: 30px;
	-webkit-transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
header .titleBox.view h3{opacity: 1;top: 0;}


header .titleBox h1{
	width: 65%;
	padding: 4vh 0 12vh;
}
header .titleBox h1 span:nth-child(1){
	margin-bottom: 4vh;
	display: block;
	opacity: 0;
	position: relative;
	top: 30px;
	-webkit-transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	-webkit-transition-delay: 1.2s;
	transition-delay: 1.2s;
	
	
}
header .titleBox h1 span:nth-child(2){
	display: block;
	opacity: 0;
	position: relative;
	top: 30px;
	-webkit-transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	-webkit-transition-delay: 1.6s;
	transition-delay: 1.6s;
}
header .titleBox.view h1 span:nth-child(1){opacity: 1;top: 0;}
header .titleBox.view h1 span:nth-child(2){opacity: 1;top: 0;}



header .titleBox h2{
	width: 65%;
	opacity: 0;
	position: relative;
	top: 30px;
	-webkit-transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	-webkit-transition-delay: 2.6s;
	transition-delay: 2.6s;
}
header .titleBox.view h2{opacity: 1;top: 0;}



header .logo{
	position: absolute;
	z-index: 15;
	bottom: 2.5vw;
	right: 2.5vw;
	width: 10%;
	max-width: 140px;
	opacity: 0;
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
	-webkit-transition-delay: 3.3s;
	transition-delay: 3.3s;
}
header .logo.view{opacity: 1;}

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


header .bkImage{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
header .bkImage div{
	position: absolute;
	width: 100%;
	overflow: hidden;
}
header .bkImage div:nth-child(1){
	top: 0;
	bottom: 66.6666%;
	left: 0;
}
header .bkImage div:nth-child(2){
	top: 33.3333%;
	bottom: 33.3333%;
	left: 0;
}
header .bkImage div:nth-child(3){
	top: 66.6666%;
	bottom:0;
	left: 0;
}
header .bkImage div span{
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	background-size:cover;
    background-position: center center;
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	opacity: 0;
	-webkit-transition: transform 3.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.6s;
	transition: transform 3.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.6s;
}
header .bkImage.view div span{
	-webkit-transform:scale(1);
	transform:scale(1);
	opacity: 1;
}
header .bkImage div:nth-child(1) span{background-image: url("../images/main01_pc.jpg");}
header .bkImage div:nth-child(2) span{background-image: url("../images/main02_pc.jpg");}
header .bkImage div:nth-child(3) span{background-image: url("../images/main03_pc.jpg");}


header .bkImage div:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: 5;
	background:#FFF;
	-webkit-transition: width 1.3s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.3s cubic-bezier(0.76, 0, 0.24, 1);
}

header .bkImage div:nth-child(1):after,
header .bkImage div:nth-child(3):after{left: 0;}
header .bkImage div:nth-child(2):after{right: 0;}


header .bkImage.view div:after{width: 0;}


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
















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

article{
	width: 100%;
	background: linear-gradient(180deg, #EAD296 0%, #3495b2 100%);
	overflow: hidden;
	position: relative;
}
.articleInner{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}


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


.lead{
	width: 100%;
	margin: 170px auto 0;
	text-align: center;
}
.lead h2{
	font-size: 34px;
	letter-spacing: 0.08em;
	margin-bottom: 1em;
}
.lead h2 br{display: none;}
.lead h2.line{
	padding-bottom: 0.5em;
	margin-bottom: 0.7em;
	position: relative;
}
.lead h2.line:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 0;
	width: 180px;
	height: 1px;
	background: #FFF;
}

.lead h3{
	font-size: 22px;
	letter-spacing: 0.08em;
	margin-bottom: 3em;
}
.lead p{
	font-size: 16px;
	letter-spacing: 0.12em;
	line-height: 2.7;
}
.lead p br.res{display: none;}



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

.image01{margin-top: 170px;}
.image02{margin-top: 200px;}


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



.functionList{
	width: 85%;
	margin: 100px auto 0;
	color: #000;
}

.functionList ul{
	width: 104%;
	font-size: 0;
	text-align: center;
}

.functionList li,
.functionList .delighter li{
	width: 16%;
	margin-right:4%;
	margin-top: 50px;
	display: inline-block;
	vertical-align: top;
	line-height: 1.5;
	position: relative;
	opacity: 0;
	top: 30px;
	-webkit-transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
	transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
}
.functionList .delighter.started li{opacity: 1;top: 0;}


.functionList li:nth-child(1){-webkit-transition-delay: 0s;transition-delay: 0s;}
.functionList li:nth-child(2){-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.functionList li:nth-child(3){-webkit-transition-delay: 0.4s;transition-delay: 0.4s;}
.functionList li:nth-child(4){-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
.functionList li:nth-child(5){-webkit-transition-delay: 0.8s;transition-delay: 0.8s;}
.functionList li:nth-child(6){-webkit-transition-delay: 1.0s;transition-delay: 1.0s;}
.functionList li:nth-child(7){-webkit-transition-delay: 1.2s;transition-delay: 1.2s;}
.functionList li:nth-child(8){-webkit-transition-delay: 1.4s;transition-delay: 1.4s;}
.functionList li:nth-child(9){-webkit-transition-delay: 1.6s;transition-delay: 1.6s;}
.functionList li:nth-child(10){-webkit-transition-delay: 1.8s;transition-delay: 1.8s;}
.functionList li:nth-child(11){-webkit-transition-delay: 2.0s;transition-delay: 2.0s;}
.functionList li:nth-child(12){-webkit-transition-delay: 2.2s;transition-delay: 2.2s;}
.functionList li:nth-child(13){-webkit-transition-delay: 2.4s;transition-delay: 2.4s;}








.functionList h4{
	font-family:'DINPro-Medium';
	font-size: 16px;
	line-height: 1.4;
}
.functionList h5{
	width: 100%;
	font-size: 13px;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba(0,0,0,0.3);
	line-height: 1.4;
	padding-bottom: 10px;
}
.functionList .icon{
	width: 70%;
	margin: 10px auto;
	letter-spacing: 0;
}
.functionList p{
	font-size: 12px;
	text-align: left;
	letter-spacing: 0.03em;
	line-height: 1.6;
}


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


.itemList{
	width: 85%;
	margin: 150px auto 0;
}


.itemList .item{
	width: 100%;
	margin-top: 100px;
}
.itemList .item:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}



.itemList .item .photo{width: 43%;position: relative;}
.itemList.sta .item .photo{float: left;}
.itemList.rev .item .photo{float: right;}


@media(min-width: 769px) {
.itemList .item .photo  a span{
	font-family:'DINPro-Regular';
	font-size: 16px;
	display:inline-block;
	position: absolute;
	z-index: 20;
	top: 50%;
	left: 50%;
	margin: 0 auto;
	color: #FFF;
	line-height: 1;
	border: 1px solid #FFF;
	padding: 8px 15px;
	opacity: 0;
	background: rgba(0,0,0,0.2);
	-webkit-transform:translate(-50%,-50%) scale(0.7);
	transform:translate(-50%,-50%) scale(0.7);
	-webkit-transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.itemList .item .photo a:hover span{
	-webkit-transform:translate(-50%,-50%) scale(1);
	transform:translate(-50%,-50%) scale(1);
	opacity: 1;
}
}




.itemList .item .detail{width: 50%;}
.itemList.sta .item .detail{float: right;}
.itemList.rev .item .detail{float: left;}


.item .detail h3{
	font-family:'DINPro-Medium';
	font-size: 20px;
	display: inline-block;
	vertical-align: middle;
	padding-right: 0.7em;
}
.item .detail h3 span{
	font-family:'DINPro-Regular';
	font-size: 16px;
	padding: 0 0.7em;
}
.item .detail h3 br{display: none;}

.item .detail .buy{
	display: inline-block;
	width: 40px;
	line-height: 1;
	vertical-align: middle;
}

@media(min-width: 769px) {
.item .detail .buy  a:hover{opacity: 0.6;}
}

.item .detail .functionIcon{
	width: 100%;
	overflow: hidden;
	margin: 20px 0;
}
.item .detail .functionIcon.null{
	margin: 15px 0;
}

.item .detail .functionIcon ul{
	width: 100%;
	font-size: 0;
	text-align: left;
}
.item .detail .functionIcon ul li{
	width: 16.66666%;
	margin-right: 0%;
	display: inline-block;
}
.item .detail .functionIcon .otherIcon{
	width: 28%;
}

.item .detail .text{
	font-size: 13px;
	letter-spacing: 0.05em;
	line-height: 2.0;
}


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



.column{
	width: 92%;
	margin: 150px auto 0;
}
.column .profile{
	font-size: 16px;
	letter-spacing: 0.05em;
}

.column .columnBlock{
	width: 100%;
	margin-top: 110px;
}
.column .columnBlock.farst{
	margin-top: 50px;
}
.column .columnBlock:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}

.column .columnBlock .text{width: 45%;}
.column .columnBlock.sta .text{float: left;}
.column .columnBlock.rev .text{float: right;}

.column .columnBlock .text h4{
	font-size: 24px;
	letter-spacing: 0.08em;
}
.column .columnBlock .text h4 br.res{display: none;}
.column .columnBlock .text p{
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 2.5;
	margin-top: 1.4em;
}



.column .columnBlock .photo{width: 49%;position:relative;overflow: hidden;}
.column .columnBlock.sta .photo{float: right;}
.column .columnBlock.rev .photo{float: left;}
.column .columnBlock .photo{position: relative;}
.column .columnBlock .photo.mini{width: 30%;margin-top: 20px;margin-right: 19%;}
.column .columnBlock .photo.full{width: 100%;}


.column .columnBlock .photo:after,
.column .columnBlock .photo.delighter:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: #bcd3cb;
	z-index: 10;
}
.column .columnBlock .photo.delighter.started:after{
	-webkit-animation: imageShow 1.2s ease-in-out both;
	animation: imageShow 1.2s ease-in-out both;
}
@-webkit-keyframes imageShow {
	0% {width:0;left: 0;}
	50% {width:100%;left:0;}
	100%  {width:0;left: 100%;}
}
@keyframes imageShow {
	0% {width:0;left: 0;}
	50% {width:100%;left:0;}
	100%  {width:0;left: 100%;}
}

.column .columnBlock .photo span,
.column .columnBlock .photo.delighter span{
	opacity: 0;
	display: block;
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	-webkit-transition: -webkit-transform 1.4s cubic-bezier(0.33, 1, 0.68, 1) 0.6s, opacity 1.0s 0.6s;
	transition: transform 1.4s cubic-bezier(0.33, 1, 0.68, 1) 0.6s, opacity 1.0s 0.6s;
}
.column .columnBlock .photo.delighter.started span{
	opacity:1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}



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

footer{
	width: 100%;
	padding: 300px 0 50px;
}
footer .logo{
	width: 140px;
	margin: 0 auto;
}






@media(max-width: 1200px) {

.articleInner{width: 92%;}
.functionList{width: 95%;}
.itemList{width: 95%;}
.column{width: 100%;}
.column .columnBlock .text p{font-size: 15px;}
.column .profile{font-size: 15px;}


}


@media(max-width: 1000px) {

.lead{margin-top: 150px;}
.lead h2{font-size: 32px;}
.lead h3{font-size: 20px;}
.lead p{font-size: 16px;line-height: 2.5;}

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

.image01{margin-top: 150px;}
.image02{margin-top: 180px;}

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

.functionList{width: 100%;}
.functionList h4{font-size: 15px;}
.functionList h5{font-size: 12px;}

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

.itemList{width: 100%;margin-top: 120px;}
.itemList .item{margin-top: 80px;}
.itemList .item .photo  a span{font-size: 14px;}

.itemList .item .detail{width: 54%;}
.item .detail h3{font-size: 18px;}
.item .detail h3 span{font-size: 15px;}
.item .detail .buy{width: 37px;}
.item .detail .functionIcon{margin: 15px 0;}
.item .detail .functionIcon.null{margin: 10px 0;}

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

.column{margin-top: 110px;}
.column .profile{font-size: 14px;}

.column .columnBlock{margin-top: 80px;}
.column .columnBlock .text{width: 48%;}

.column .columnBlock .text h4{font-size: 22px;}
.column .columnBlock .text p{font-size: 14px;line-height: 2.1;}

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

footer{padding: 220px 0 50px;}
footer .logo{width: 120px;}

}



@media(max-width: 870px) {


header .logo{width: 12%;}

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

.lead{margin-top: 130px;}
.lead h2{font-size: 28px;}
.lead h3{font-size: 18px;}
.lead p{font-size: 15px;}

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

.image01{margin-top: 130px;}
.image02{margin-top: 150px;}

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

.itemList{margin-top: 100px;}
.item .detail h3{font-size: 17px;}
.item .detail h3 span{font-size: 14px;}
.item .detail .text{font-size: 12px;line-height: 1.8;}

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

.column{margin-top: 90px;}
.column .profile{font-size: 13px;}

.column .columnBlock{margin-top: 70px;}
.column .columnBlock .text h4{font-size: 20px;}
.column .columnBlock .text p{font-size: 13px;line-height: 2.0;}

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

footer{padding: 180px 0 50px;}
footer .logo{width: 110px;}


}




@media(max-width: 768px) {

.wide{display: none;}

header .titleBox{width: 88%;}
header .titleBox h1{padding: 4vh 0 10vh;}
header .logo{width: 15%;bottom: 3.5vw;right: 3.0vw;}

header .bkImage div:nth-child(1) span{background-image: url("../images/main01_sp.jpg");}
header .bkImage div:nth-child(2) span{background-image: url("../images/main02_sp.jpg");}
header .bkImage div:nth-child(3) span{background-image: url("../images/main03_sp.jpg");}

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

.lead{margin-top: 18vw;}
.lead h3{font-size: 19px;}
.lead p br.res{display: block;}

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

.image01{margin-top: 18vw;}
.image02{margin-top: 20vw;}

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

.functionList{width: 92%;margin-top: 8vw;}
.functionList ul{text-align: left;}
.functionList li,
.functionList .delighter li{width: 21%;margin-right:4%;}

.functionList h4{text-align: center;font-size: 14px;}
.functionList h5{text-align: center;font-size: 12px;}
.functionList p{font-size: 11px;}

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

.itemList{width: 85%;margin-top: 10vw;}

.itemList .item{margin-top: 10vw;}
.itemList .item .photo{width: 70%;margin: 0 auto;max-width: 390px;}
.itemList.sta .item .photo{float: none;}
.itemList.rev .item .photo{float: none;}

.itemList .item .photo  a span{display: none;}

.itemList .item .detail{width: 100%;margin-top: 30px;}
.itemList.sta .item .detail{float: none;}
.itemList.rev .item .detail{float: none;}

.item .detail h3{font-size: 19px;text-align: center;display: block;}
.item .detail h3 span{font-size: 16px;}
.item .detail .text{font-size: 13px;line-height: 2.0;}
.item .detail .buy{display: block;width: 46px;margin: 10px auto 0;}

.item .detail .functionIcon{width: 90%;overflow: hidden;margin: 20px auto 15px;}
.item .detail .functionIcon.null{margin: 15px 0;}
.item .detail .functionIcon ul{text-align: center;}
.item .detail .functionIcon .otherIcon{margin: 0 auto;}

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

.column{width: 100%;margin-top: 10vw;}
.column .profile{text-align: center;font-size: 14px;}

.column .columnBlock{margin-top: 13vw;}
.column .columnBlock.farst{margin-top: 50px;}

.column .columnBlock .text{width: 80%;margin: 0 auto;}
.column .columnBlock.sta .text{float: none;}
.column .columnBlock.rev .text{float: none;}

.column .columnBlock .text h4{font-size: 21px;}
.column .columnBlock .text p{font-size: 14px;margin-top: 1.0em;}

.column .columnBlock .photo{width: 80%;margin: 30px auto 0;}
.column .columnBlock.sta .photo{float: none;}
.column .columnBlock.rev .photo{float: none;}
.column .columnBlock .photo.mini{width: 60%;margin: 10px 0 0 10%;}

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


footer{padding: 20vw 0 50px;}
footer .logo{width: 110px;}


}








@media(max-width: 700px) {


header .titleBox{top: 45%;}

header .titleBox h3{width: 65%;}
header .titleBox h1{width: 75%;padding: 5vw 0 12vw;}
header .titleBox h1 span:nth-child(1){margin-bottom: 5vw;}
header .titleBox h2{width: 75%;}
header .logo{bottom: 7vw;right: 0;left: 0;margin: 0 auto;width: 18%;}

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

.articleInner{width: 100%;}

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

.lead{margin-top: 20vw;}
.lead h2{font-size: 26px;}
.lead h3{font-size: 17px;}

.lead h2.line:after{width: 150px;}

.lead p{font-size: 14px;text-align: left;line-height: 2.0;width: 85%;margin: 0 auto;}
.lead p br,.lead p br.res{display: none;}
.lead p br.fix{display: block;}

.lead.top p{text-align: center;line-height: 2.5;width: 100%;}
.lead.top p br{display: block;}

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

.image01{width: 90%; margin: 18vw auto 0;}
.image02{width: 90%; margin: 20vw auto 0;}

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

.functionList li,
.functionList .delighter li{width: 29.33333%;margin-right:4%;}
.functionList .icon{width: 60%;}

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


}



@media(max-width: 540px) {

header .titleBox{width: 93%;}
header .logo{bottom: 8vw;width: 20%;}

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

.lead{margin-top: 23vw;}

.lead h2{font-size: 24px;letter-spacing: 0.08em;}
.lead h2 br{display: block;}
.lead h2 br.res{display: none;}
.lead h2.line:after{width: 130px;}
.lead h3{font-size: 16px;}
.lead p{letter-spacing: 0.08em;}

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

.functionList li,
.functionList .delighter li{margin-top: 30px;}

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

.itemList .item{margin-top: 15vw;}
.item .detail h3{font-size: 17px;}
.item .detail h3 span{font-size: 15px;}
.item .detail .functionIcon{width: 100%;}

.item .detail .text{font-size: 13px;line-height: 1.8;}

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

.column{margin-top: 13vw;}

.column .profile{font-size: 13px;text-align: left;width: 85%;margin:0 auto;}
.column .columnBlock.farst{margin-top: 40px;}
.column .columnBlock .text{width: 85%;}
.column .columnBlock .text h4{font-size: 19px;}
.column .columnBlock .text p{font-size: 13px;}

.column .columnBlock .photo{width: 85%;margin-top: 20px;}
.column .columnBlock .photo.mini{width: 65%;margin: 10px 0 0 7.5%;}


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

footer{padding: 30vw 0 50px;}
footer .logo{width: 100px;}

}




@media(max-width: 465px) {

header .titleBox{width: 86%;}
header .titleBox h3{width: 100%;}
header .titleBox h1{width: 100%;padding: 4vw 0 15vw;}
header .titleBox h1 span:nth-child(1){margin-bottom: 5vw;}
header .titleBox h2{width: 100%;}
header .logo{width: 23%;}

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

.lead{margin-top: 25vw;}

.lead h2{font-size: 24px;}
.lead h2 br.res{display: block;}

.lead h2.line{padding-bottom: 0.7em;margin-bottom: 0.8em;}
.lead h2.line:after{width: 100px;}
.lead h3{font-size: 16px;margin-bottom: 2.5em;}

.lead p{font-size: 14px;line-height: 2.0;width: 88%;}
.lead.top p{text-align: left;line-height: 2.0;width: 88%;}
.lead.top p br{display: none;}
.lead.top p br.fix{display: block;}

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

.functionList{width: 85%;margin-top: 8vw;}
.functionList ul{width: 106%;}
.functionList li,
.functionList .delighter li{width: 44%;margin-right:6%;margin-top: 40px;}

.functionList h5{padding-bottom: 5px;}
.functionList .icon{width: 70%;margin: 7px auto;}

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

.itemList{width: 88%;}

.itemList .item{margin-top: 18vw;}

.itemList .item .photo{width: 85%;}

.itemList .item .detail{margin-top: 20px;}
.item .detail h3{line-height: 1.5;padding-right: 0;}
.item .detail h3 span{display: block;}
.item .detail .buy{width: 43px;margin-top: 7px;}

.item .detail .functionIcon{width: 90%;}
.item .detail .functionIcon ul li{width: 33.33333%;padding: 0 1vw;}

.item .detail .functionIcon .otherIcon{width: 40%;}

.item .detail .text{font-size: 13px;line-height: 2.0;}

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

.column .columnBlock{margin-top: 16vw;}
.column .columnBlock .text{width: 88%;}
.column .columnBlock .text h4 br.res{display: block;}
.column .columnBlock .text p{line-height: 2.0;font-size: 13px;}

.column .columnBlock .photo{width: 88%;}
.column .columnBlock .photo.mini{margin: 5px 0 0 6%;}

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

footer{padding: 35vw 0 50px;}
footer .logo{width: 90px;}


}



@media(max-width: 365px) {



}