@charset "UTF-8";
main#page_designdatastore_group {
	width:auto;
	max-width: inherit;
	margin-bottom: inherit;
	padding-top: 0;
}

body {
	top: 0;
	--color-blue: #1478be;
	margin-top: 110px;
}

/***********
	header
************/
header#header_designdatastore {
	width: 100%;
	height: 110px;
	position:fixed;
	top: 0;
	left: 0;
	background-color: white;
	z-index:9990;
}
header#header_designdatastore .inner_header {
	max-width: 1100px;
	width: 100%;
	height: 100%;
	padding-left: 8px;
	padding-right: 8px;
	margin-left:auto;
	margin-right:auto;
	box-sizing: border-box;
}
header#header_designdatastore .logo {
	display: flex;
	align-items:center;
	height: 100%;
}
header#header_designdatastore .link {
	align-items:center;
	width: 420px;
	height: 100%;
}
header#header_designdatastore .link p {
	width: 110px;
	height: 55px;
	color: white;
	border-radius: 8px;
}
header#header_designdatastore .link p a{
	display: flex;
	align-items:center;
	justify-content: center;
	width: 100%;
	height: 100%;
	letter-spacing: -0.4px;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.42;
	text-align:center;
	white-space: nowrap;
}
header#header_designdatastore .link p:nth-of-type(1){
	background-color: var(--color-blue);
}
header#header_designdatastore .link p:nth-of-type(2){
	background-color: #fff100;
	color: var(--color-blue);
	font-weight: 900;
}
header#header_designdatastore .link p:nth-of-type(3){
	width:180px;
	background-color: #2f3740;
	padding-bottom: 0.5px;
	box-sizing: border-box;
}


/* ------------------------------
	fv
------------------------------ */

.fv .fv_main {
	position:relative;
	width: 100vw;
	left: 50%;
	-webkit-transform: translatex(-50%);
	        transform: translatex(-50%);
	background-image: url(../img/layoutstore/fv_bg.svg);
	background-repeat: repeat;
}
.fv .fv_main .container{
	max-width: 1280px;
}

.fv .fv_main .fv_lead div {
	width: 100%;
}
.fv .fv_main .fv_lead h1 {
	width: 100%;
	height: auto;
	text-align: left;
	color: white;
	font-size: 38px;
	line-height: 1.26;
	letter-spacing: -0.1px;
	margin-bottom: 1.8rem;
	white-space: nowrap;
}
.fv .fv_main .fv_lead h1 .em {
	font-size: 0.568em;
}
.fv .fv_main .fv_lead h1 span {
	color: #ffff00;
}
.fv .fv_main .fv_lead p {
	flex: none;
}

.fv .fv_main .fv_lead p .small_scale{
	line-height: 0.8;
	position:relative;
	-webkit-transform:scale(0.66);
	        transform:scale(0.66);
	-webkit-transform-origin: left bottom;
	        transform-origin: left bottom;
}

.fv .fv_sub {
	position: relative;
	margin-top: 0;
	box-sizing: border-box;
	background-color:white;
	z-index: 10;
}
.fv .fv_sub>div:nth-of-type(1) {
	width: 100%;
	max-width: 840px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 3rem;
	position:relative;
	top: -2.6rem;
}
.fv .fv_sub>div:nth-of-type(2) {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 8rem;
	box-sizing: border-box;
}
.fv .fv_sub .contents_text {
	width:520px;
}
.fv .fv_sub h2{
	text-align: left;
	font-size: 24px;
	line-height: 1.7;
	margin-bottom: 2.6rem;
	font-weight: 700;
}
.fv .fv_sub h2 .color{
	color:var(--color-blue);
	background: linear-gradient( transparent 0%, transparent 66%,yellow 66%,yellow 94%,transparent 94%,transparent 100%);
}
.fv .fv_sub h2>.small_scale {
	font-size: 0.66em;
	font-weight: 700;
}
.fv .fv_sub h2>.small_scale>.attention {
	display: inline-block;
	position:relative;
	line-height: 1;
	-webkit-transform: scale(0.7);
	        transform: scale(0.7);
	-webkit-transform-origin: left top;
	        transform-origin: left top;
}
.fv .fv_sub ul {
	margin-bottom:3.2rem;
}
.fv .fv_sub li {
	font-weight: 700;
	line-height: 1.8;
}
.fv .fv_sub li::before {
	content:"● ";
	position:relative;
	color: var(--color-blue);
}
.fv .fv_sub p.attention_text {
	font-size: 11.4px;
	letter-spacing: -0.04em;
	line-height: 1.6;
	font-weight: 700;
}


@media screen and (min-width: 769px) {
	.fv .fv_main {
		min-width: 1280px;
	}
	.fv .fv_main .fv_lead h2 {
		height:auto;
		margin-top: 2.2rem;
	}
	.fv .fv_main .fv_lead {
	padding-left: 150px;
	padding-top: 4.8rem;
	padding-bottom: 3.6rem;
	box-sizing: content-box;
}
	.fv .fv_main .fv_lead div {
		justify-content: flex-start;
	}
	.fv .fv_main .fv_lead p {
		margin-right:12px;
	}
	.fv .fv_main .fv_main_img{
		width: 715px;
		position:absolute;
		right:0;
}
	.fv .fv_main .fv_main_img img{
		width: 100%;
	}
	.fv .fv_sub>div:nth-of-type(2) {
	width: 100%;
	max-width: 1080px;
	padding-left: 60px;
}
}

/* ------------------------------
	.lead
------------------------------ */
.lead{
	padding: 55px 0 95px;
}
.lead .wrap {
    position: relative;
}
.lead .wrap > .txt{
	line-height: 1.8;
	margin-bottom: 45px;
}

.lead .wrap ul{
    margin-bottom: 45px;
}

.lead .wrap ul li{
    background: #F4F5F5;
    width: 100%;
    padding: 20px;
    font-size: 2rem;
    margin-bottom: 5px;
    font-weight: bold;
}

.lead .wrap img{
    position: absolute;
    right: 15px;
    top:90px;
    width: 280px;
}

.lead .wrap p{
    line-height: 1.8;
}

/* ------------------------------
	共通
------------------------------ */

#list{
    background: #F4F5F5;
    padding-bottom: 100px;
}

#list h2{
    padding: 22px 40px;
    margin-bottom: 15px;
    background-color: #2C3742;
    border-radius: 50px;
    color:#fff;
    font-weight: bold;
    font-size: 2rem;
}
#list .item{
    width: 245px;
    float: left;
    margin: 25px 40px 0 0;
    cursor: pointer;
    position: relative;
}

#list .item:nth-child(4n){
    margin-right: 0;
}

#list .item p{
    padding: 20px 0;
    font-weight: bold;
}

#list .item ul li{
    margin-bottom: 10px;
}

#list .item .details_btn:before{
    content: "";
    position: absolute;
    top:0;
    right:0;
    background: url(../img/layoutstore/icon_modal.png) no-repeat 0 0 / 27px;
    width: 27px;
    height: 27px;
}

.slick-prev, 
.slick-next{
    color: #333 !important;
}

.slick-next{
    right: 50%;
}

.slick-dots{
    bottom: 0 !important;
}

.slick-dots li.slick-active button:before{
    font-family: inherit;
}

.item .details_btn{
	width: 100%;
	cursor: pointer;
	transition: opacity .4s ease;
    position: relative;
}

@media screen and (min-width: 769px) {
	.item .details_btn:hover{
		opacity: 0.8;
	}
}

.layoutstore_details{
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba( 44,55,66, 0.8 );
	visibility: hidden;
	opacity: 0;
	transition: 0.2s ease;
}

.layoutstore_details.open{
	visibility: visible;
	opacity: 1;
}

.layoutstore_details > div{
	position: relative;
	max-width: 550px;
	max-height: 95%;
	padding: 30px 30px 25px;
	background-color: #fff;
	overflow: auto;
}

.layoutstore_details p{
	padding: 0 0 20px;
    font-weight: bold;
}

.layoutstore_details li{
	margin-bottom: 10px;
}

.close_btn{
	position: absolute;
	top: 27px;
	right: 30px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.close_btn span{
	position: absolute;
	right: -2px;
	width: 35px;
	height: 5px;
	background: #2C3742;
}

.close_btn span:nth-child(1){
	top: 12px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.close_btn span:nth-child(2){
	top: 12px;
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

/* ------------------------------
	#lp
------------------------------ */
#lp{
    width: 1100px;
    margin: 0 auto 70px;
    padding-top: 100px;
}

/* ------------------------------
	#a4_01
------------------------------ */
#a4_01{
    width: 1100px;
    margin: 0 auto 70px;
}

/* ------------------------------
	#a4_02
------------------------------ */
#a4_02{
    width: 1100px;
    margin: 0 auto 80px;
}


/* ------------------------------
	#infor
------------------------------ */
#infor {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    background: #ff0000;
    padding: 10px;
}

#infor h2{
    background-color:rgba(255,255,255,0.5);
    border-radius: 0;
    width: 250px;
    float: left;
    margin: 0 30px 0 0;
    font-size: 2.5rem;
    padding: 18px 30px;
}

#infor p{
    color: #fff;
    font-size: 2rem;
    margin-top: 20px;
}

#infor p a{
    color: #fff;
}

#infor p:after{
    content: "";
    background: url(../img/layoutstore/img_infor.png) no-repeat 0 0 / 117px;
    width:117px;
    height: 127px;
    position: absolute;
    bottom:0;
    right: 20px;
}

/* ------------------------------
	#price
------------------------------ */
#price{
    width: 1100px;
    margin: 100px auto;
}

#price h2{
    font-size: 3rem;
    font-weight: bold;
}

#price dl{
    border-top:1px solid #2c3742;
    margin: 40px 0 15px;
    font-size: 2rem;
}

#price dl dt{
    clear: both;
    float: left;
    width: 50%;
    padding: 18px 0;
    font-size: 2rem;
    font-weight: bold;
}

#price dl dd{
    border-bottom:1px solid #2c3742;
    padding: 21px 0;
    font-size: 1.6rem;
    text-align: right;
}

#price dl dd > span{
    color: #f00;
}

#price dl dd > span s{
    color: #2C3742;
    text-decoration: none;
    position: relative;
}

#price dl dd > span s:after{
    content: "";
    background: url(../img/layoutstore/line_%20doubleline.png) repeat-x;
    width: 85px;
    height: 7px;
    position: absolute;
    top:8px;
    left: 0;
}

#price dl .red{
    color:  #f00;
}

#price p{
    font-size: 1.2rem;
}
/* ------------------------------
	#free
------------------------------ */
#free{
    width: 1100px;
    margin: 40px auto 100px;
    text-align:center;
}

/* ------------------------------
	#sample
------------------------------ */
#sample{
    background: #F4F5F5;
    padding: 100px 0;
    overflow: hidden;
}

#sample .wrap{
    width: 1100px;
    margin: 0 auto;
}

#sample h2{
    background: url(../img/layoutstore/icon_sample.png) no-repeat 0 0 / 58px;
    padding: 20px 70px;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 30px;
}

#sample p{
    line-height: 1.8;
    margin-bottom: 30px;
}

#sample .box{
    width: 530px;
    float: left;
}

#sample .box_l{
    margin-right: 40px;
}

#sample h3{
    padding: 20px 30px;
    margin-bottom: 20px;
    background-color: #2C3742;
    color: #fff;
    text-align: center;
    font-size: 2rem;
}

#sample h3 span{
    font-size: 1.4rem;
}

/* ------------------------------
	#good
------------------------------ */
#good {
    width: 1100px;
    margin: 100px auto;
}

#good h2{
    font-size: 3rem;
    font-weight: bold;
}

#good ul {
    width: 100%;
    border-top:1px solid #2c3742;
    margin: 35px 0 15px;
}

#good ul li{
    padding: 20px 0 20px 50px;
    font-size: 2rem;
    border-bottom:1px solid #2c3742;
    background: url(../img/layoutstore/icon_ok.png) no-repeat 0 center / 41px;
    font-weight: bold;
}

#good ul li.ng{
    background: url(../img/layoutstore/icon_ng.png) no-repeat 0 center / 41px;
}

#good p{
    font-size: 1.2rem;
}

/* ------------------------------
	#howto
------------------------------ */
#howto{
    background: #F4F5F5;
    padding: 100px 0 90px;
    overflow: hidden;    
}

#howto h2{
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 40px;
}

#howto .wrap{
    width: 1100px;
    margin: 0 auto;
}

#howto .wrap ol {
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

#howto .wrap ol li{
    width: 260px;
    float: left;
    background: #fff;
    border: 1px solid #2c3742;
    padding:40px 20px 10px;
    border-radius: 20px;
    margin-right: 20px;
    z-index: 0;
    position: relative;
}

#howto .wrap ol li.arrow{
    position: absolute;
    border: none;
    background: none;
    margin: 0;
    width: auto;
    top:27%;
    left:233px;
    z-index: 100;
}

#howto .wrap ol li:nth-child(4){
    left: 514px;
}

#howto .wrap ol li:nth-child(6){
    left: 794px;
}

#howto .wrap ol li:last-child{
    margin-right: 0;
}

#howto .wrap ol li h3{
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    background: url(../img/layoutstore/icon_flow01.png) no-repeat center 0 / 42px;
    padding: 60px 0 20px;
}

#howto .wrap ol li:nth-child(3) h3{
    background: url(../img/layoutstore/icon_flow02.png) no-repeat center 5px / 42px;
}

#howto .wrap ol li:nth-child(5) h3{
    background: url(../img/layoutstore/icon_flow03.png) no-repeat center 0 / 42px;
}

#howto .wrap ol li:nth-child(7) h3{
    background: url(../img/layoutstore/icon_flow04.png) no-repeat center 5px / 42px;
}

#howto .wrap ol li p{
    line-height: 1.8;
}

#howto ol + p{
    font-size: 1.2rem;
    line-height: 1.6;
}

#howto ol .txt_m{
    font-size: 1.2rem;
    display: inline-block;
    vertical-align: super;
}

/* ------------------------------
	#form
------------------------------ */
#form{
    margin: 100px 0;
}

#form > h2{
    position: relative;
	display: flex;
	align-items:center;
	justify-content:center;
    height: 120px;
    background-color:#FF0000;
    font-size: 3.0rem;
    text-align: center;
    font-weight: bold;
    width: 1100px;
    margin: 0 auto 120px;
    color: #fff;
}

#form > h2:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: auto;
    content: "";
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 20px solid #FF0000;
}

#form > h3{
    width: 1100px;
    margin: 0 auto 40px;
    font-size: 3rem;
    font-weight: bold;
}

#form .infor_wrap{
    background: #F4F5F5;
    padding: 45px 0 5px;
    margin-bottom: 100px;
}

#form .infor_wrap .tel{
    width: 1100px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 35px;
}

#form .infor_wrap .tel img{
    margin-right: 20px;
    vertical-align: sub;
}

#form .infor_wrap .tel:after{
    content: "";
    background: url(../img/layoutstore/img_infor.png) no-repeat 0 0 / 154px;
    position: absolute;
    width: 154px;
    height: 168px;
    right: 60px;
    bottom: -5px;
    
}

#form .contact_box:nth-child(odd){
	background-color: #F4F5F5;
}

#form .contact_box dl{
	display: flex;
    align-items: center;
}

#form .contact_box dt{
	position: relative;
	flex-shrink: 0;
	width: 300px;
    line-height: 1.4;
}

#form .contact_box dt span{
    font-size: 1.4rem;
}

#form .contact_box dt span.txt_m02{
    font-size: 1.2rem;
}

#form .contact_box .req{
	position: absolute;
	right: 55px;
	top: -5px;
	padding: 6px 5px 4px;
	background-color: #FF0000;
	color: #fff;
	font-weight: bold;
}

#form .contact_box dd{
	padding: 20px 0;
}

#form .contact_box dd div{
	line-height: 1.5;
}

#form .contact_box dd div + div{
	margin-top: 12px;
}
#form .contact_box dd input + div,
#form .contact_box dd .postal_wrap + div{
	margin-top: 6px;
}

#form .contact_box dd .w1{
	width: 400px;
}

#form .contact_box dd .w2{
	width: 800px;
}

#form .contact_box dd .w3{
	width: 290px;
}

#form .contact_box dd .w1 + .w3{
	margin-left: 5px;
}

#form .contact_box .design dd{
    padding: 15px 0 18px !important;
    overflow: hidden;
}

#form .contact_box .option .req{
    top:5px;
}

#form .contact_box label{
    padding: 13px 0;       
    position: relative;
    cursor: pointer;
    margin-right: 15px;
    display: inline-block;
}

#form .contact_box .design label{
    width: 73px;
    padding-bottom: 8px;
    margin-right: 10px;
}

#form .contact_box .design label:nth-of-type(9n){
    margin-right: 0;
}

#form .contact_box input[type="radio"]{
    display: none;
}

#form .contact_box input[type="radio"] + span{
    margin: 0;
    position:relative;
    padding-left: 27px;
    padding-top: 5px;
}
#form .contact_box input[type="radio"] + span::before{
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 21px;
    height: 21px;
    border: 1px solid #b3b3b3;
    border-radius: 50%;
    background: #fff;
}
#form .contact_box input[type="radio"]:checked + span::after{
    content: "";
    display: block;
    position: absolute;
    top: 9px;
    left: 3px;
    width: 15px;
    height: 15px;
    background: #2c3742;
    border-radius: 50%;
}

#form .contact_box textarea{
	width: 800px;
	height: 120px;
	padding: 8px;
	border: 1px solid #b3b3b3;
	line-height: 1.55;
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	font-size: 1.4rem;
	overflow: auto;
    border-radius: 3px;
}

#form .contact_box .postal_wrap input{
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

#form .contact_box .postal_btn{
    background: #2c3742;
    color: #fff;
    border-radius: 3px;
    padding: 10px;
    width: 100px;
    height: 40px;
    display: inline-block;
    text-align: center;
}

#form .contact_box input:not([type="radio"]){
	height: 40px;
	padding: 0 8px;
	border: 1px solid #b3b3b3;
	font-style: "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	font-size: 1.4rem;
    border-radius: 3px;
}

#form .check_box input[type="checkbox"]{
    display: none;
}

#form .check_box input[type="checkbox"] + span{
    margin: 0;
    position:relative;
    padding-left: 30px;
    padding-top: 5px;
}

#form .check_box input[type="checkbox"] + span::before{
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 21px;
    height: 21px;
    border: 1px solid #b3b3b3;
    border-radius: 3px;
    background: #fff;
}

#form .check_box input[type="checkbox"]:checked + span::after{
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 7px;
    margin: auto;
    width: 8px;
    height: 12px;
    border-right: 2px solid #2C3742;
    border-bottom: 2px solid #2C3742;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#form .contact_box .privacy_box dd{
    width: 817px;
    height: 200px;
    overflow-y: scroll;
    background: #fff;
    padding: 5px 10px;
	border: 1px solid #b3b3b3;
    border-radius: 3px;
    margin: 20px 0;
}

#form .contact_box .privacy_box dd h2,
#form .contact_box .privacy_box dd h3,
#form .contact_box .privacy_box dd ol li,
#form .contact_box .privacy_box dd ul li{
    font-size: 1.4rem;
    line-height: 1.8;
}

#form .contact_box .privacy_box dd p{
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

#form .contact_box .privacy_box dd ol,
#form .contact_box .privacy_box dd ul {
    margin-bottom: 30px;
}

#form .privacy_check{
    text-align: center;
    padding: 40px 0 30px;
}

#form .privacy_check label{
    margin-bottom: 20px;
    display: block;
}

#form .privacy_check input[type="checkbox"]{
    display: none;
}

#form .privacy_check input[type="checkbox"] + span{
    margin: 0;
    position:relative;
    padding-left: 30px;
    padding-top: 5px;
}

#form .privacy_check input[type="checkbox"] + span::before{
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 21px;
    height: 21px;
    border: 1px solid #b3b3b3;
    border-radius: 3px;
    background: #fff;
}

#form .privacy_check input[type="checkbox"]:checked + span::after{
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 7px;
    margin: auto;
    width: 8px;
    height: 12px;
    border-right: 2px solid #2C3742;
    border-bottom: 2px solid #2C3742;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#form .privacy_check p{
    text-align: center;
}

#form .contact_btn_wrap {
    width: 830px;
    margin: 10px auto 100px;
    display: flex;
}

#form .contact_btn_wrap input{
    width: 378px;
    height: 87px;
    background: #2c3742;
    color: #fff;
    border-radius: 15px;
    margin: 0 auto;
    text-align: center;
    display: block;
    font-size: 3rem;
    box-shadow:0px 5px 8px 0px #d3d3d3;
    cursor: pointer;
	transition: opacity .4s ease;
	border: 0;
}

@media screen and (min-width: 769px) {
	#form .contact_btn_wrap input:hover{
		opacity: 0.8;
	}
}

/* ------------------------------
	.confirm
------------------------------ */
#form.confirm{
    margin-top: 75px;
}

#form.confirm form{
    margin-top: 60px;
}

#form.confirm .contact_box dd {
    line-height: 1.6;
}

#form.confirm .contact_box dd div + div{
	margin-top: 5px;
}


#form.confirm .contact_btn_wrap{
	justify-content: space-between;
    margin-top: 50px;
}

#form.confirm .prev_btn{
    width: 378px;
    height: 87px;
    background: #B1B1B1;
    color: #fff;
    border-radius: 15px;
    margin: 0 auto;
    text-align: center;
    display: block;
    font-size: 3rem;
    box-shadow:0px 5px 8px 0px #d3d3d3;
    cursor: pointer;
	transition: opacity .4s ease;
	border:0;
}

@media screen and (min-width: 769px) {
	#form.confirm .prev_btn:hover{
		opacity: 0.8;
	}
}

#form.confirm .req,
#form.confirm .txt_m01,
#form.confirm .txt_m02,
#form.confirm .privacy_box,
#form.confirm .privacy_check,
#form.confirm .postal_btn {
	display: none;
}

@media screen and (max-width: 768px) {
	#form.confirm .contact_box .req {
		display: none;
	}
}

#form.confirm .contact_box dd {
	word-break: break-all;
    word-break: break-word;
}


/* ------------------------------
	.thanks
------------------------------ */
#form.thanks{
    margin-top: 75px;
}

#form.thanks .sec_ttl{
    margin-bottom: 65px;
}

#form.thanks .thanks .ttl{
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 35px;
}

#form.thanks .thanks .txt{
    line-height: 1.8;
}

#form.thanks .contact_btn_wrap{
    justify-content: center;
}

#form.thanks .contact_btn_wrap p a{
    width: 378px;
    height: 87px;
    background: #2c3742;
    color: #fff;
    border-radius: 15px;
    margin: 80px auto 0;
    text-align: center;
    display: flex;
    font-size: 3rem;
    box-shadow:0px 5px 8px 0px #d3d3d3;
    cursor: pointer;
	transition: opacity .4s ease;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 769px) {
	#form.thanks .contact_btn_wrap p a:hover{
		opacity: 0.8;
	}
}

/* ------------------------------
	#fotter
------------------------------ */
footer .copy{
    text-align: center;
    padding: 40px 0 0;
}


/* ------------------------------
	for sp
------------------------------ */
@media screen and (max-width: 768px){
	body {
		margin-top:14vw;
	}
	
    
    .head_ttl{
        padding: 22px 5px 25px;
    }
    
    .head_ttl > * span:first-child{
        font-size: 2.2rem;    
    }
    
    .lead{
        padding-bottom: 35px;    
    }
    
    .lead .wrap ul li{
        font-size: 1.6rem;
        padding: 14px 10px;
    }
    
    .android .lead .wrap ul li{
        font-size: 1.4rem;
    }
    
    .lead .wrap img{
        position: relative;
        top:auto;
		left:24%;
        bottom: 10px;
        width: 50%;
        margin-bottom: 20px;
    }
	
	/***********
	header
	************/
	header#header_designdatastore {
		width: 100%;
		height: 0;
		position:relative;
	}
	header#header_designdatastore .inner_header {
		padding: 0;
		width: 100%;
	}
	header#header_designdatastore .logo {
		width: 100%;
		height: 14vw;
		position: fixed;
		background-color: white;
		top: 0;
		left:0;
	}
	header#header_designdatastore .logo {
		width: 100%;
		justify-content: center;
	}
	header#header_designdatastore .logo img{
		width: 55vw;
	}
	header#header_designdatastore .link {
		position:fixed;
		width: 100%;
		height: 16vw;
		bottom:0;
		left: 0;
		flex-direction:row;
		justify-content: center;
		align-items:center;
		background-color: white;
	}
	header#header_designdatastore .link p {
		height: 66.6%;
		width: 22.8vw;
	}
	header#header_designdatastore .link p:last-of-type {
		width: 38.66vw;
	}
	header#header_designdatastore .link p a {
		font-size: 3vw;
	}
	header#header_designdatastore .link p {
		margin-right: 10px;
	}
	header#header_designdatastore .link p:last-of-type {
		margin-right: 0px;
	}
	
	/* ------------------------------
		fv
	------------------------------ */
    .fv .fv_main .fv_lead h1 {
		width: 82.4vw;
		margin-left:auto;
		margin-right:auto;
		margin-top:8.6vw;
		margin-bottom: 4vw;
	}
	.fv .fv_main .fv_lead>div.flex_base {
		flex-direction: row;
	}
	.fv .fv_main .fv_lead {
		margin-bottom: 4.6vw;
	}
	.fv .fv_main .fv_lead p {
		margin-bottom:0;
		white-space: nowrap;
	}
	.fv .fv_main .fv_main_img {
		width: 90%;
		margin-bottom: 0;
	}
	.fv .fv_sub>div:nth-of-type(2) {
		margin-bottom: 4.6rem;
	}
	.fv .fv_main .fv_lead p {
		width: 48.4%;
		margin: 0 0.5vw;
	}
	.fv .fv_sub {
		width: 100vw;
		left: 50%;
		transform: translatex(-50%);
		top: -12vw;
	}
	.fv .fv_sub>div:nth-of-type(2) .contents_img {
		margin-bottom: 1.8rem;
	}
	.fv .fv_sub>div:nth-of-type(1) {
		flex-direction: row;
		margin-bottom: -1rem;
		top: -3.4vw;
	}
	.fv .fv_sub h2 {
		font-size: 4.4vw;
		margin-bottom: 1.6rem;
	}
	.fv .fv_sub ul {
		margin-bottom: 1.8rem;
	}
	.fv .fv_sub li {
		font-size: 3.1vw;
	}
	.fv .fv_sub p.attention_text {
		font-size: 2.5vw;
	}
	
	
	
	
    #lp{   
        padding-top: 40px;
        width: 92%;
        margin-bottom: 10px;
        position: relative;
    }
    
    #a4_01,
    #a4_02{   
        width: 92%;
        margin-bottom: 10px;
        position: relative;
    }
    
    #lp .item,
    #a4_01 .item,
    #a4_02 .item{
        margin: 0;    
    }

    #list h2{
        padding: 15px 20px;
        margin-bottom: 15px;
    }
    
    #list .item .details_btn::before{
        background: url(../img/layoutstore/icon_modal_sp.png) no-repeat 0 0 / 100%;
        width: 12%;
        height: 12%;
    }
    
    .ipad #list .item .details_btn img{
        width: 100%;
    }
    
    .ipad #list .item .details_btn::before{
        width: 5%;
        height: 6%;
    }
    
    #list .item p{
        padding: 20px 0 15px;
    }
    
    .slick-slider{
        width: 100%;    
    }
    
    .slick-slide img{
        margin: 0 auto;
    }
    
    .slick-prev::before,
    .slick-next::before{
        content: "" !important;
    }

    .slick-prev{
        left: -5%;    
        background: url(../img/layoutstore/icon_arrow_prev.png) no-repeat 0 34% / 100% 4.5% !important;
        width: 10% !important;
        text-indent: -9999px;
   }
    
    .slick-next{
        right: -5%;
        background: url(../img/layoutstore/icon_arrow_next.png) no-repeat 0 32% / 100% 4.5% !important;
        width: 10% !important;
        text-indent: -9999px;
    }
    
    .ipad .slick-prev{
        width: 7% !important;
        left: -4%;
    }
    
    .ipad .slick-next{
        width: 7% !important;
        right: -4%;
    }
    
	.layoutstore_details > div{
		width: 80%;
		max-height: calc(95% - 90px);
		padding: 10px 0 25px;
		margin-top: 90px;
	}

	.layoutstore_details p{
		padding: 0 0 15px 15px;
	}

	.layoutstore_details li{
		padding-left: 15px;
	}

	.close_btn{
		right: 20px;
		top: 20px;
		width: 20px;
		height: 20px;
	}

	.close_btn span{
		width: 25px;
		height: 4px;
	}

	.close_btn span:nth-child(1),
	.close_btn span:nth-child(2){
		top: 8px;
	}

    .slick-dots{
        position: relative !important;
        margin-top: 5px;
        
    }
    
    .slick-dots li{
        margin: 0 3px !important;    
    }
    
    .slick-dots li button::before{
        border-radius: 10px;
        background: #fff;
        border: 1px solid #2c3742;
        color: #fff !important;
        opacity: 1 !important;
    }

    .slick-dots li.slick-active button::before{
        background: #2c3742;
        color: #2c3742 !important;
    }
    
    #infor{
        width: 92%;
        overflow: hidden;
    }
    
    #infor h2{
        float: none;
        width: 100%;
        font-size: 2rem;
        text-align: center;
    }
    
    #infor p::after{
        background: url(../img/layoutstore/img_infor_sp.png) no-repeat right 0 / auto 90%;
        width: 26%;
        height: 100%;
        right: 0;
        bottom: -15px;
    }
    
    #infor p{
        font-size: 1.5rem;
        margin-top: 15px;
        margin-bottom: 5px;
        line-height: 1.6;
    }
    
    .android #infor p{
        font-size: 1.3rem;
    }
    
    #list{
        padding-bottom: 40px;    
    }
    
    #price{
        width: 92%;
        margin: 40px auto;
    }
    
    #price h2{
        font-size: 2rem;    
    }
    
    #price dl{
        margin: 20px 0;    
    }
    
    #price dl dt{
        width: 60%;
    }

    #price dl dt,
    #price dl dd{
        font-size: 1.4rem;
        padding: 12px 0;
        line-height: 1.4;
    }
    
    #price dl dd > span s::after{
        width: 80%;
        top:6px;
    }
    #price dl .red{
        color:  #f00;
        line-height: 1.2;
        padding: 6px 0;
}
        #free{
        width: 92%;
        margin: 40px auto;
    }
    
    #sample{
        padding: 40px 0 20px;    
    }
    
    #sample .wrap{
        width: 92%;
    }
    
    #sample h2{
        background-size: auto 100%;
        font-size: 2rem;
        padding: 0  0 0 7rem;
        line-height: 1.4;
        background-position: 0 center;
        margin-bottom: 15px;
    }
    
    #sample p{
        margin-bottom: 20px;    
    }
    
    #sample .box{
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    
    .ipad #sample .box img{
        width: 100%;
    }
    
    #sample h3{
        border-radius: 40px;
        font-size: 1.8rem;
        line-height: 1.4;
        padding: 12px;
    }
    
    #sample h3 span{
        display: block;
        font-size: 1.8rem;
    }
    
    #good{
        width: 92%;
        margin: 50px auto;
    }
    
    #good h2{
        font-size: 2rem;
        line-height: 1.4;
    }
    
    #good ul{
        margin: 10px auto 20px;
    }
    
    #good ul li{
        background-size: auto 80%;
        padding: 10px 0 10px 6rem;
        font-size: 1.5rem;
        line-height: 1.6;
    }
    
    .android #good ul li{
        font-size: 1.3rem;
    }
    
    #good ul li.ng{
        background-size: auto 75%;
    }
    
    #howto{
        padding: 0 0 40px;
        background: none;
    }
    
    #howto .wrap{
        width: 92%;    
    }
    
    #howto h2{
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    #howto .wrap ol{
        margin-bottom: 10px;
    }
    
    #howto .wrap ol li{
        width: 100%;
        float: none;
        padding: 20px 20px 10px;
        margin-bottom: 10px;
    }
    
    #howto .wrap ol li h3{
        text-align: left;
        font-size: 1.8rem;
        background-position: 5px 0;
        background-size: auto 75%;
        padding: 5px 0 10px 5rem;
        line-height: 1.4;
    }
    
    #howto .wrap ol li.arrow{
        position: relative;
        padding: 0;
        top:-16px;
        left: 0;
        margin-bottom: -28px;
        width: 100%;
    }
    
    #howto .wrap ol li.arrow img{
        width: 4rem;
        margin: 0 auto;
    }
    
    #howto .wrap ol li:nth-child(3) h3{
        background-position: 5px 6px;
        background-size: auto 60%;
    }
    
    #howto .wrap ol li:nth-child(5) h3{
        background-position: 5px 2px;
        background-size: auto 80%;
    }
    
    #howto .wrap ol li:nth-child(7) h3{
        background-position: 0 6px;
        background-size: auto 65%;
    }
    
    #form{
        margin: 0 auto 40px;
    }
    
    #form > h2{
        width: 92%;
        font-size: 2rem;
        height: 100px;
        line-height: 1.6;
        margin-bottom: 60px;
    }
    
    #form > h3{
        width: 92%;
        font-size: 2rem;
        margin-bottom: 20px;
    }

    #form .infor_wrap{
        padding-top:10px;
        margin-bottom: 40px;
    }   
    
    #form .infor_wrap .tel{
        width: 91%;
        padding-top: 25px;
        padding-bottom: 20px;
        line-height: 1.6;
    }   

    #form .infor_wrap .tel span{
        display: block;
        font-size: 1.4rem;
    }
    
    .android #form .infor_wrap .tel span{
        font-size: 1.2rem;
    }
    
    #form .infor_wrap .tel img{
        width: 75%;    
    }

    #form .infor_wrap .tel::after{
        width: 30%;
        height: 110%;
        right: 0;
        background-size: auto 100%;
        background-position: right 0;
    }   
    
    #form .contact_box dl{
        display: block;
    }
    
    #form .contact_box dt,
    #form .contact_box dd,
    #form .contact_box .privacy_box dd{
        width: 100%;
    }
    #form .contact_box dd .w1,
    #form .contact_box dd .w2,
    #form .contact_box dd .w3,
    #form .contact_box textarea { 
        width: 100%;
    }

	#form .contact_box dl{
		flex-wrap: wrap;
	}

	#form .contact_box dt{
		width: 100%;
		padding: 20px 0 0;
	}

	#form .contact_box dd{
		width: 100%;
		padding: 10px 0 20px;
	}
    
	#form .contact_box .req{
		position: initial;
		display: inline-block;
		padding: 3px 5px 2px;
		margin-left: 10px;
		font-size: 1.2rem;
	}
    
    #form .contact_box .design dd{
        padding-top: 5px !important;    
    }
    
    #form .contact_box .radio_box {
        padding-bottom: 10px;
    }
    
    #form .contact_box .radio_box dd{
        padding: 10px 0 0;
    }
    
    #form .contact_box .radio_box dd label{
        padding-left: 0;
    }
    
    .android #form .contact_box input[type="radio"] + span{
        font-size: 1.4rem;
    }
    
    #form .contact_box input[type="radio"] + span::before{
        top:4px;    
    }
        
    #form .contact_box input[type="radio"]:checked + span::after{             top:7px;    
    }
    
    #form .check_box input[type="checkbox"] + span{
        display: block;
    }
    
    #form .check_box input[type="checkbox"] + span::before{
        top: 2px;    
    }
    
    #form .check_box input[type="checkbox"]:checked + span::after{
        top: 5px;    
    }
    
    #form .contact_box label{
        display: block;
        padding: 10px 10px 5px;
        margin-right: 8px !important;
    }
    
    #form .contact_box dt span{
        font-size: 1.2rem;    
    }
    
    #form .contact_box .design{
        overflow: hidden;
    }

    #form .contact_box .design label{
        width: 22%;
        float: left;
        padding: 10px 10px 5px 0;
    }
    
    #form .contact_box .design label:nth-of-type(9n){
        margin-right: 8px !important;
    }
    
    #form .contact_box .design label:nth-of-type(4n){
        margin-right:0 !important;
    }
    
    #form .contact_box .option{
        padding-bottom: 0 !important;
    }
     
    #form .contact_box .option + dd label{
        padding: 10px 10px 5px 0 !important;
    }
    
	#form .postal_wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#form .postal_wrap input{
        width: calc(97% - 90px) !important;
        margin-right: 0 !important;
    }

	#form .postal_btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130px;
		height: 30px;
		margin-left: 3%;
		font-size: 1.3rem;
	}
    
    #form .contact_box .remarks{
        padding-top: 20px;    
    }
    
    #form .contact_box .privacy_box {
        overflow: hidden;
    }
    
    #form .contact_box .privacy_box dt{
        padding-top: 20px;    
    }
    
    #form .contact_box .privacy_box dd{
        height: 140px;
        padding: 10px 15px;
        margin-top: 10px;
    }
    
    #form .contact_box .privacy_box dd p{
        margin-bottom: 15px;    
    }
    
    #form .privacy_check{
        padding: 25px 0 30px;
    }
 
    #form .privacy_check label{
        line-height: 1.4;
        text-align: left;
        margin: 0 auto 20px;
        display: table;
    }
    
    #form .privacy_check p{
        line-height: 1.6;
    }
    
    #form .privacy_check input[type="checkbox"] + span{
        display: block;
    }
    
    #form .privacy_check input[type="checkbox"] + span::before{
        top: 15px;    
    }
    
    #form .privacy_check input[type="checkbox"]:checked + span::after{
        top: 18px;    
    }
    
    #form .contact_btn_wrap{
         width: auto;
        margin-bottom: 50px;
    }
    
    #form .contact_btn_wrap input{
        width: 75%;
        height: auto;
        font-size: 2rem;
        padding: 20px 0;
        border-radius: 15px;
    }
    
    #form.confirm{
        margin-top: 35px;    
    }

    #form.confirm form{
        margin-top: 30px;
    }
    
	#form.confirm dd{
		padding-top: 20px;
	}

	#form.confirm .prev_btn{
        width: 75%;
        height: auto;
        padding: 20px 0;
        font-size: 2rem;
	}
	
    #form.confirm .contact_btn_wrap {
        display: block;
    }
	
    #form.confirm .contact_btn_wrap .contact_btn{
        width: 75%;
        height: auto;
		margin-top: 25px;
	}
    
    #form.thanks{
        margin-top: 35px;    
    }
    
    #form.thanks .sec_ttl{
        margin-bottom: 45px;    
    }
    
    #form.thanks .thanks .ttl{
        margin: 0 0 10px;
        font-size: 1.5rem;
    }
	
    #form.thanks .contact_btn_wrap p{
        width: 100%;
    }
    
    #form.thanks .contact_btn_wrap p a{
        width: 75%;
        height: auto;
        padding: 27px 0;
        font-size: 2rem;
        margin-top: 30px;
	}
    
    footer{
        padding-bottom: 20px;
    }
    
    footer .copy{
        padding-top: 20px;
    }
}