css/custom_order2.css


@charset "utf-8";
/* CSS Document */
cus
	body{overflow-x:initial!important;}

	.u_custom h2,.u_custom h3,.u_custom h4{margin:0;padding:0;}
	
	
	.u_custom{width:100%;max-width:1280px;margin: 0 auto;font-family:'Barlow Semi Condensed',"notosans_medium", sans-serif!important;}
	.custop{background:url(https://unby.itembox.cloud/item/img/unbycustom/unby_custom_top.jpg?d=20191114114221);width:100%;max-width:1280px;max-height:617px;height:617px;position:relative;}
	.cus_logo{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
	.custop p
	{position: absolute;
    bottom: 25%;
    width: 500px;
    text-align: center;
    width: 100%;
    color: #FFF;
    letter-spacing: 0.3em;
    font-size: 120%;
	}
	.cus_dot{position: absolute;
    bottom: -50px;
    margin: 0 auto;
    left: 0;
    right: 0;z-index:9999;}
	.about{background:#ef8e70;width:100%;padding:50px;text-align:center;position:relative;}
	.about h2{margin:40px auto;font-family:'Barlow Semi Condensed';font-size: 250%;color: #4D4D4D;letter-spacing: 6px0;font-weight:100;}
	.about h3{margin:0px auto;font-size: 200%;color: #000;letter-spacing: 6px;line-height: 1.6em;}
	.about p{width: 650px;text-align: left;margin: 40px auto;line-height: 2em;letter-spacing: 4px;font-size: 110%;}
	
	.material{padding:100px 0;position:relative;overflow: unset;text-align:center;}
	.material h2{color:#F15A24;font-family:'Barlow Semi Condensed';font-size: 24px;letter-spacing: 10px;font-weight:100;}
	.material h3{margin: 40px 0 60px 0;font-size: 20px;line-height: 1.6em;letter-spacing: 6px;}
	.xpac:after{clear:both;content:"";display:block;}
	.xpac{width:75%;margin: 30px auto;position: relative;}
	.xpac h4{
	float: left;
    display: block;
    width: 100%;
    background: url(https://unby.itembox.cloud/item/img/unbycustom/pin.png?d=20191114114249) no-repeat top left;
    text-align: left;
    padding-left: 50px;
    padding-top: 6px;
    color: #F15A24;
    font-size: 20px;
    letter-spacing: 4px;
    font-family: 'notosans-medium';
    line-height: 26px;
    position: absolute;
    top: 35%;
	}
	.xpac p{
    float: left;
    width: 45%;
    text-align: left;
    font-size: 19px;
    font-family: 'notosans-medium'!important;
    font-weight: normal;
    position: absolute;
    top: 50%;
    line-height: 2em;
    letter-spacing: 2px;
	}
	.xpac img{float: right;max-width:450px;}
	.cordura1000d:after{clear:both;content:"";display:block;}
	.cordura1000d{width:75%;margin: 0 auto;position: relative;}
	.cordura1000d h4{
	float: right;
    display: block;
    width: 45%;
    background: url(https://unby.itembox.cloud/item/img/unbycustom/pin.png?d=20191114114249) no-repeat top left;
    text-align: left;
    padding-left: 50px;
    padding-top: 6px;
    color: #F15A24;
    font-size: 20px;
    letter-spacing: 4px;
    font-family: 'notosans-medium';
    line-height: 26px;
    position: absolute;
    top: 35%;
	right:0;
	}
	.cordura1000d p{
    float: right;
    width: 45%;
    text-align: left;
    font-size: 19px;
    font-family: 'notosans-medium'!important;
    font-weight: normal;
    position: absolute;
    top: 50%;
    line-height: 2em;
    letter-spacing: 2px;
	right:0;
	}
	.cordura1000d img{float: left;max-width:450px;}

	.order-flow{background:#f2f2f2;width:100%;padding:80px 0;text-align:center;	position:relative;
}
	.order-flow div:after{content:"";clear:both;display: block;    margin-bottom: 20px;}

	.order-flow h2{
    color: #F15A24;
    font-family: 'Barlow Semi Condensed';
    font-size: 240%;
    letter-spacing: 10px;font-weight:100;}
.order-flow h3{
	   margin: 40px 0 60px 0;
    font-size: 180%;
    line-height: 1.6em;
    letter-spacing: 6px;
}
.cus1,.cus2,.cus3,.cus4,.cus5,.cus6,.cus7{width: 800px;margin: 0 auto;}
.cus_r{float:right;width: 50%;}
.cus_r img{width:300px;}
.cus_l{float:left;width:50%;padding-left:50px;}
.stp{    margin-bottom: 20px;}
.order-flow h4{
	color: #B3B3B3;
    font-size: 350%;
    text-align: left;
    margin: 30px 10px 20px 10px;
    letter-spacing: 4px;
    font-family: 'Barlow Semi Condensed';
    font-weight: 100;
    font-style: italic;
}
.cnum{
    color: #F15A24;
    font-size: 180%;
    font-style: italic;
	font-weight: 100;
    font-family: 'Barlow Semi Condensed';
}
.order-flow p{
	  text-align: left;
    margin: 10px;
    font-size: 120%;
    letter-spacing: 4px;
    line-height: 2em;
}
.cusmin{
	    font-size: 70%;
    line-height: 1em !important;
    letter-spacing: 2px;
}

.cus-item{padding: 100px 0;
    text-align: center;position:relative;}
.cus-item h2{color: #F15A24;
    font-family: 'Barlow Semi Condensed';
    font-size: 240%;
    letter-spacing: 10px;
    font-weight: 100;}
.cus-item h3{margin: 40px 0 60px 0;
    font-size: 180%;
    line-height: 1.6em;
    letter-spacing: 6px;}
.cusitem{width: 800px;margin: 0 auto;background: url(https://unby.itembox.cloud/item/img/unbycustom/culast.png) no-repeat bottom;
    padding-bottom: 10px;}
.cusitem:after{display:block;content:"";clear:both;}
.cusitem img{float:left;margin-left:0px;width:400px;}
.cusitemr{width: 50%;
    float: right;
    text-align: left;}
.cusitemr h4{    color: #F15A24;
    font-weight: 300;
    font-family: 'Barlow Semi Condensed';
    font-style: italic;
    font-size: 200%;
    letter-spacing: 3px;
    margin: 60px 0 10px 0;}
.cusitemr p{    margin: 30px auto;
    line-height: 2em;
    letter-spacing: 3px;}
.cusitemr a{padding: 6px 30px;
    border: 1px solid #000;
    box-shadow: 2px 2px;
    font-size: 140%;}
.cusitemr a:hover{box-shadow:none;top:2px;left:2px;position:relative;}
.cusitemh{margin: 50px;}
.cus-shop{padding:100px 0;text-align:center;background:#f2f2f2;position:relative;}
.cus-shop h2{color: #F15A24;
    font-family: 'Barlow Semi Condensed';
    font-size: 240%;
    letter-spacing: 10px;
    font-weight: 100;}
.cus-shop h3{    margin: 40px 0 20px 0;
    font-size: 180%;
    line-height: 1.6em;
    letter-spacing: 6px;}
.cus-shop p{    color: #808080;
    letter-spacing: 3px;margin-bottom: 50px;}
.cusshop:after{display:block;content: "";clear:both;}
.cusshop{    width: 80%;
    margin: 30px auto;}
.cusshop img{    float: left;
    width: 40%;
    margin-left: 90px;}
.cuss_r{    float: left;
    text-align: left;
    margin-left: 40px;}
.cuss_r h4{    color: #F15A24;
    font-family: 'Barlow Semi Condensed';
    letter-spacing: 4px;
    margin: 10px 0;
    font-size: 200%;
    font-weight: 300;}
.cuss_r p{margin-bottom:20px;}
.cuss_r a{    color: #F15A24;
    text-decoration: underline;
    display: block;
    margin: 10px 0;}
.cuss_r a:hover{text-decoration:none;}
.cuss_r span{    color: #808080;
    letter-spacing: 1px;}
.embroy{    width: 880px;
    margin: 0 auto;
    border: 1px solid #777;
    background: #FFF url(https://unby.itembox.cloud/item/img/unbycustom/cus_emb.jpg?d=20191114114817) no-repeat top 40px right 40px;
    padding: 40px;
    margin: 40px auto;}
.embroy_l{width: 70%;
    text-align: left;}
.embroy h3{    color: #F15A24;
    margin: 0;
    font-size: 150%;
    font-family: 'Barlow Semi Condensed';
    font-weight: 300;
}
.embroy h4{    margin: 20px 0;
    letter-spacing: 6px;
    font-size: 180%;}
.embroy p{    width: 500px;
    line-height: 1.6em;
    margin-bottom: 30px;} 


.cus-online p{    margin: 100px auto;
    text-align: center;
    font-size: 170%;
    line-height: 2em;
    letter-spacing: 2px;
}
.cus-online a{    margin: 0 auto;
    text-align: center;
    display: block;
    padding: 20px 80px;
    border: 1px solid #000;
    background: #F7931E;
    color: #FFF;
    font-size: 180%;
    letter-spacing: 4px;
    font-family: 'Barlow Semi Condensed';
    font-weight: 300;
    width: 270px;
    box-shadow: 8px 8px #000;}

.cus-online a:hover{position:relative;top:8px;left:8px;box-shadow:none;}


@media (max-width: 767px){
	.custop{background:url(https://unby.itembox.cloud/item/img/unbycustom/unby_custom_top_sp.jpg);background-size: cover;}
	.cus_logo{width:70%;}
	.custop p{bottom: 32%;
    width: 75%;
    margin: 0 auto;
    /* text-align: center; */
    left: 0;
    right: 0;
    font-size: 100%;}
	.about{padding: 50px 16px;}
	.about p{width: 100%;
    font-size: 90%;
    letter-spacing: 3px;
    line-height: 1.8em;}
	.about h3{font-size: 180%;
    letter-spacing: 4px;}
	.xpac{width:100%;}
	.xpac img{float: none;width: 100%;}
	.xpac h4{float: none;
    position: relative;
    margin: 10px 0;
    padding-left: 40px;
    padding-top: 4px;
    background-size: 20px;
    background-position: 6px 4px;}
	.xpac p{float: none;
    position: relative;
    width: 100%;
    font-size: 45%;
    letter-spacing: 1px;
    line-height: 2em;}
	.cordura1000d{width:100%;}
	.cordura1000d img{    float: none;
    width: 100%;}
	.cordura1000d h4{float: none;
    position: relative;
    margin: 10px 0;
    padding-left: 40px;
    padding-top: 4px;
    background-size: 20px;
    background-position: 6px 4px;
    width: 100%;}
	.cordura1000d p{float: none;
    position: relative;
    width: 100%;
    font-size: 45%;
    letter-spacing: 1px;
    line-height: 2em;}
	.order-flow h2{letter-spacing:6px;}
	.cus1, .cus2, .cus3, .cus4, .cus5, .cus6, .cus7{width:100%;overflow:hidden;margin-bottom:20px;}
	.stp{left: 50%;
    position: relative;
    margin-left: -400px;}
	.cus_r{float: none;
    width: 100%;}
	.cus_r img{width: 90%;}
	.cus_l{    width: 100%;
    float: none;
    padding: 0px;}
	.cus_l h4{    font-size: 240%;
    margin: 10px;}
	.cusl_p{font-size: 100%;
    letter-spacing: 2px;}
	.cusitem{width:100%;padding-bottom:30px;}
	.cusitem img{width: 48%;
    margin: 0;}
	.cusitemr h4{margin: 30px 0 0 0;
    font-size: 150%;}
	.cusitem p{    margin: 10px auto;
    font-size: 80%;
    line-height: 1.8em;
    letter-spacing: 2px;}
	.cusitem a{    padding: 4px 20px;
    font-size: 110%;}
	.cus-shop h2{letter-spacing:6px;}
	.cus-shop h3{    margin: 20px 0;
    font-size: 160%;
    letter-spacing: 4px;}
	.cus-shop p{letter-spacing: 2px;
    width: 80%;
    margin: 0 auto;
    text-align: left;}
	.cusshop{    width: 100%;}
	.cusshop img{    width: 85%;
    margin: 0;
    float: none;}
	.cuss_r{float:none;}
	.cuss_r p{width:100%;margin:0!important;}
	.embroy{    width: 90%;
    background: #FFF url(https://unby.itembox.cloud/item/img/unbycustom/cus_emb.jpg) no-repeat bottom 20px center;
    padding: 20px;
	}
	.embroy_l{width: 100%;}
	.embroy h3{margin:0;}
	.embroy h4{margin: 10px 0;
    font-size: 130%;
    letter-spacing: 4px;}
	.embroy p{width: 100%;
    margin-bottom: 200px;}
	.cus-online p{font-size: 160%;
    margin: 100px 0 60px 0;}
}

/* ビデオコンテナのスタイリング */
.video-container {
    position: relative;
    text-align: center;
    height: auto;
}

/* ビデオのスタイリング */
video {
    max-width: 100%;
    height: auto;
}

/* 再生ボタンのスタイリング */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 60px;
    height: 60px;
}
.hide-on-mobile {
    display: block; /* デスクトップブラウザでは表示 */
}
@media (max-width: 800px) {
    .hide-on-mobile {
        display: none; /* スマートフォンでは非表示 */
    }
}

<script type="text/javascript">

function toggleVideo() {
    var video = document.getElementById('video');
    var playButton = document.getElementById('play-button');
    
    if (video.paused) {
        video.play();
        playButton.style.display = 'none'; // 再生時に再生ボタンを非表示に
    } else {
        video.pause();
        playButton.style.display = 'block'; // 一時停止時に再生ボタンを表示
        playButton.style.width = '40px'; // 再生ボタンの幅を変更
        playButton.style.height = '40px'; // 再生ボタンの高さを変更
    }
}

    </script>