@charset "utf-8";

/* ===============================
	common
=============================== */
html {
  height: 100%;
}
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:1rem;
    line-height:1.5;
    color:#fff;
    background:#000;
	margin: 0;
	padding: 0;
	height: 100%;
}
img{
	display:block;
}
#wrapper{
	width:100%;
}
.container{
	width:100%;
	max-width:1600px;
	margin:0 auto;
	overflow: hidden;
}
header{
	width:100%;
}
main{
	width:100%;
}
footer{
	position: sticky;
	top: 100vh;
	width: 100%;
	padding:20px 0;
	height: 60px;
	box-sizing: border-box;
	text-align:center;
}
.credit{
	margin:0 auto;
	font-size:0.8125rem;
	color:#fff;
}

.header_propping{
	width:100%;
	background: url(../images/header-sp-bg.jpg) no-repeat center center;
	background-size:cover;
	aspect-ratio:192/207;
}
.header_propping div.logo {
	width:65.3%;
	height;auto;
	margin:0 auto;
}

@media (min-width: 768px) {
.header_propping{
	width:100%;
	max-width:1600px;
	background:url(../images/header-bg.jpg) no-repeat center center;
	background-size:cover;
	aspect-ratio:40/17;
	text-align:center;
}
.header_propping div.logo {
	width:27%;
	margin:0 auto;
}
}

section{
	padding:30px 0 60px;
	text-align:center;
}

h2{
	 font-size: calc(20px + 12 * (100vw - 320px)/680);
	 margin:0 auto;
	 text-align:center;
	 font-weight:bold;
}

h3{
	 font-size: calc(13px + 5 * (100vw - 320px)/680);
	 margin:5px auto;
	 text-align:center;
	 font-weight:bold;
}
.exp-txt{
	color:#fff;
}
.con-txt{
	color:#333;
}
img{
	width:100%;
	height:auto;
}
/*セクション背景*/
.bg_propping{
	background:#000;
}
.bg_crd-size{
	background:url(../images/crd-size-bg.jpg) no-repeat center center;
	background-size:cover;
}
.bg_sp-holder{
	background:#000;
}
.bg_contact{
	background:url(../images/contact-bg.jpg) no-repeat center center;
	background-size:cover;
}
/*スマートフォンホルダー背景*/
.bg_sp-holder01{
	background:url(../images/sp-holder01_bg.svg) no-repeat top center;
	background-size:cover;
}
.bg_sp-holder02{
	background:url(../images/sp-holder02_bg.svg) no-repeat top center;
	background-size:cover;
}
.bg_sp-holder03{
	background:url(../images/sp-holder03_bg.svg) no-repeat top center;
	background-size:cover;
}
.bg_sp-holder04{
	background:url(../images/sp-holder04_bg.svg) no-repeat top center;
	background-size:cover;
}
.bg_sp-holder05{
	background:url(../images/sp-holder05_bg.svg) no-repeat top center;
	background-size:cover;
}
.bg_sp-holder06{
	background:url(../images/sp-holder06_bg.svg) no-repeat top center;
	background-size:cover;
}

/*セクション別画像*/
.propping-img-box{
	width:100%;
	height:auto;
	margin:40px auto 0;
}
.crd-size-img-box{
	display:flex;
	width:100%;
	max-width:880px;
	padding:0 20px;
	box-sizing:border-box;
	margin:40px auto 0;
}

/*スマートフォンホルダ作成手順画像*/
ul.sp-holder{
	width:100%;
	margin:40px auto 0;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}
ul.sp-holder li{
	width:100%;
	max-width:400px;
	text-align:center;
	margin:0 auto;
}
.howto{
	width:100%;
	max-width:400px;
	height:auto;
	aspect-ratio:15/16;
}
.howto-txt{
	margin:20px auto 50px;
	font-size: calc(13px + 5 * (100vw - 320px)/680);
	color:#fff;
	line-height:1.6;
	text-align:center;
}

@media (min-width: 768px) {
ul.sp-holder{
	width:100%;
	max-width:1000px;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.sp-holder li{
	width:45%;
	text-align:center;
}
.howto{
	width:100%;
	max-width:450px;
	height:auto;
	aspect-ratio:15/16;
}
}

/*お問合せ*/
#formWrap {
	width:560px;
	margin:20px auto;
	color:#555;
	line-height:1.5;
	font-size:1rem;
}
table.formTable{
	width:100%;
	margin:0 auto 20px;
	border-collapse:separate;
	border-spacing:10px;
}
table.formTable td,table.formTable th{
	border:1px solid #888;
	padding:10px;
	vertical-align:top;
	
	text-align:left;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:rgba(136,136,136,0.8);
	text-align:left;
	color:#fff;
}
table.formTable td{
	font-weight:normal;
	background:rgba(255,255,255,0.8);
	text-align:left;
	color:#555;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="text"], form textarea {
	width:90%;
	padding:5px;
	font-size:0.9375rem;
	display:block;
}
textarea {
	width:90%;
	padding:5px;
	font-size:0.9375rem;
	color:#555;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:35%;
	max-width:150px;
	margin:0 5px 10px;
	height:50px;
}
}

.ipt-frm{
    display: inline-block;
    width: 90%;
    padding: 0.5em;
    border: 1px solid #888;
    box-sizing: border-box;
}

.btn-contact-box{
	width:100%;
	max-width:330px;
	margin:20px auto;
	padding:0 20px;
	box-sizing:border-box;
	display:flex;
	flex-direction: row;
	justify-content: center;
}
@media (min-width: 560px) {
.btn-contact-box{
	width:100%;
	max-width:330px;
	margin:20px auto;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
}
.btn-contact{
    display:block;
    width:35%;
    max-width: 150px;
    height:50px;
    line-height: 50px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #000; /*ボタン色*/
    border-radius: 5px; /*角丸*/
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    margin:0 auto;
}
.btn-contact:hover{
    background-color: #fff; /*ボタン色*/
    color: #000;
}
/*確認ページ*/



/*サンクスページ*/
.thanks{
	height:calc(100vh - 150px);
	position:relative;
}
.thanks-txt {
	text-align:center;
	font-size: calc(13px + 5 * (100vw - 320px)/680);
	font-weight:bold;
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align:center;
	font-weight:bold;
}

@media screen and (min-width: 769px) {
.thanks{
	height:calc(100vh - 150px);
	position:relative;
}
.thanks-txt {
	width:100%;
	max-width:1000px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align:center;
	font-weight:bold;
}
}

/*アニメ*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 1.5s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 1.5s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 1.5s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

@media (max-width: 560px) {
  .br560 {
    display: block;
  }
}
@media (min-width: 561px) {
  .br560 {
    display: none;
  }
}


@media (max-width: 560px) {
.txt_sub{
	font-size:0.875rem;
	line-height:1.65;
}
}
@media (min-width: 561px) and (max-width: 767px){
.txt_sub{
	font-size:0.875rem;
	line-height:1.65;
}
}
@media (min-width: 768px) {
.txt_sub{
	font-size:1rem;
	line-height:1.65;
}
}