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

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap');

body{
    margin: 0;
    padding: 0;
    background-color: #f9f7f3;
    background-image: url("../images/arc/medaltyper_background.jpg");
    background-repeat: repeat;
    background-size: 10%;
    }

h2,h3,h4,p,span,li,th,td{
    font-size: 1em;
    line-height: 1.4em;
    color: #5d4b42;
    font-family: 'Kiwi Maru', serif;
    }

    #MEDAL .block06 p{font-size: 0.8em; text-align: center; margin: 0 0 0.5em;}
    #MEDAL .block06 p:last-child{font-size: 0.8em; text-align: center; margin: 0 0 2em;}
    @media only screen and (max-width: 860px) {p,span,li,th,td{font-size: 0.9em;}}

.small{font-size: 0.8em;}

a{text-decoration: none;}

img{max-width: 100%;}



/*----------header----------*/
header{
    width: 100%;
	position: fixed;
    top: 0;
	z-index: 999;
    background: rgba(54,46,43,0.9);
    }

header a{display: block; text-align: center;}

nav{
    max-width: 1480px;
    margin: auto;
    padding: 0.25em 1em;
    display: flex;
    }

nav div{flex: 0 1 20%; margin: 0 auto 0 0;}
nav div > a{padding: 0.25em 0.5em;}


nav ul{
    margin: 0 0 0 35%;
    padding: 0;
    flex: 0 1 60%;
    display: flex;
    }

nav ul > li{flex: 0 1 auto;}
nav ul > li > a{padding: 0.8em 1em 0.7em; color: #FFF!important;}


@media only screen and (max-width: 1480px) {nav ul{margin: 0 0 0 30%; flex: 0 1 65%;}}
@media only screen and (max-width: 1380px) {nav ul{margin: 0 0 0 5%; flex: 0 1 auto;}}

@media only screen and (max-width: 860px) {
    nav{display: block;}
    nav div{width: 18%; margin: 0; padding: 0.15em 1em 0.35em;}
    nav ul{margin: 0; border-top: solid 1px rgba(255,255,255,0.25);}
    nav ul > li{flex: 0 1 15%; font-size: 0.9em;}
    nav ul > li:first-child, nav ul > li:last-child{flex: 0 1 32.5%;}
    }

@media only screen and (max-width: 480px) {
    nav{padding: 0;}
    nav div{width: 25%; padding: 0.15em 1em 0.4em 0.65em;}
    nav ul{flex-wrap: wrap;}
    nav ul > li{flex: 0 1 30%; font-size: 0.8em;}
    nav ul > li:first-child{flex: 0 1 40%;}
    nav ul > li:last-child{flex: 0 1 100%; background: #bc0716;}
    nav ul > li > a{padding: 0.65em; color: #FFF;}
    }


/*mainVisual*/
#mainVisual{
    margin-bottom: 5em;
    padding: 8% 0;
    background: url("../images/arc/medalief_mainvisual.webp");
    background-repeat: no-repeat;
    background-size: cover;
    }

#mainVisual div{
    max-width: 940px;
    margin: auto;
    padding: 3% 0 5%;
    background: url("../images/arc/medalief_cabinet.png");
    background-repeat: no-repeat;
    background-position: top right 6.25%;
    background-size: contain;
    }

h1{
	width: 80%;
    margin: 0.5em 0 0;
	height: 0;
	padding-top: 40%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/arc/medalief_logo.png");
	background-position: left center;
    }

@media only screen and (max-width: 860px) {#mainVisual{padding: 20% 0;} #mainVisual div{padding: 6% 3% 8%;} h1{padding-top: 52%;}}
@media only screen and (max-width: 480px) {
    #mainVisual{padding: 35% 0 10%; background-position: center;}
    #mainVisual div{padding: 35% 3% 25%; background-position: top right 5.25%; background-size: 42.5%;}
    h1{padding-top: 60%;}
    }



/*LinkButton*/
.btn, a.btn, button.btn {
    width: 100%;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.5em;
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 1px;
    }

a.btn--red {
    max-width: 560px;
    color: #fff;
    }

    a.btn--red, a.btn--red:hover{
        background-color: #e60012;
        background-image: url("../images/arc/medaltyper_link_file.png");
        background-repeat: no-repeat;
        background-position: left 25% center;
        background-size: auto 35px;
        }
    a.btn--red:hover {color: #fff;}
    a.btn--red.btn--cubic {border-bottom: 5px solid #bc0716;}
    a.btn--red.btn--cubic:hover {margin-top: 3px; border-bottom: 2px solid #bc0716;}

    #mainVisual a.btn--red{margin-left: 10%;}

    #HTP a.btn--red,#HTP a.btn--red:hover{background-color: #5d4b41; background-image: none;}
    #HTP a.btn--red.btn--cubic {border-bottom: 5px solid #362c26;}
    #HTP a.btn--red.btn--cubic:hover {margin-top: 3px; border-bottom: 2px solid #362c26;}
    #CONTACT a.btn--red, #CONTACT a.btn--red:hover{background-position: left 17% center;}

a.btn-c {
    font-size: 1em;
    position: relative;
    padding: 1em 1em 1em 7%;
    border-radius: 10px;
    }

    #CONTACT a.btn-c {padding: 1em 1em 1em 10%;}
    #HTP a.btn-c {padding: 0.5em;}
    #HTP a.btn-c span{display: block; font-size: 0.8em; color: #FFF;}



@media only screen and (max-width: 860px) {a.btn--red, a.btn--red:hover{background-position: left 20% center;}}
@media only screen and (max-width: 480px) {
    a.btn--red {max-width: 460px;}
    a.btn--red, a.btn--red:hover{background-position: left 6% center; background-size: auto 25px;}
    #mainVisual a.btn--red{display: none;}
    #CONTACT a.btn--red, #CONTACT a.btn--red:hover{background-position: left 8% center;}
    }



/*----------mainContents----------*/
#ABOUT,#PRODUCT,#HTP,#MEDAL,#CONTACT{padding-top: 100px; margin-top:-100px;}
#ABOUT,#PRODUCT,#HTP,#MEDAL,#SPEC,#CONTACT{padding-bottom: 8em;}

.mainContents{max-width: 1280px; margin: auto; padding: 3em 1em;}
.mainContents img{border-radius: 10px;}

h2{
    max-width: 480px;
    margin: 0 auto 2em;
    padding: 0em 2px 0.25em;
    border: solid 3px #5d4b42;
    border-radius: 50px;
    text-align: center;
    background-position: left 3px center;
    background-size: 63px;
    background-repeat: no-repeat;
    }

    h2 p{font-size: 2em; margin: 0; padding: 0;}
    h2 span{display: block; font-size: 0.9em!important; font-weight: normal;}

    #ABOUT h2{background-image: url("../images/arc/medaltyper_about_h2.png");}
    #PRODUCT h2{background-image: url("../images/arc/medaltyper_product_h2.png");}
    #HTP h2{background-image: url("../images/arc/medalief_htp_h2.png");}
    #SPEC h2{background-image: url("../images/arc/medaltyper_spec_h2.png");}
    #CONTACT h2{background-image: url("../images/arc/medaltyper_contact_h2.png");}

h3{
    padding: 0.35em;
    text-align: center;
    background: #b4a398;
    }

    h3 p{
        margin: 0;
        padding: 0.25em 0.25em 0.35em;
        font-size: 1.2em;
        color: #FFF!important;
        border: dashed 2px rgba(255,255,255,0.75);
        }

h4{padding-bottom: 0.5em; border-bottom: solid 2px #b4a398; text-align: center}
h4 br{display: none;}
@media only screen and (max-width: 480px) {h2{background-size: 54px;} h2 p{font-size: 1.6em;} h4 br{display: block;}}


.block01{max-width: 600px; margin: auto;}
#CONTACT .block01{max-width: 480px;}

.block04,.block02,.block03,.block06{display: flex; flex-wrap: wrap;}
.block06{margin-bottom: 4em;}

    .block04 p{flex: 0 1 23%; margin: 0 1%;}
    .block02 article{flex: 0 1 48%; margin: 0 1%;}
    .block03 article{flex: 0 1 31.5%; margin: 0 auto;}
    .block06 article{flex: 0 1 16%; margin: 0 auto;}

@media only screen and (max-width: 860px) {.block02{display: block;} .block06 article{flex: 0 1 23%;}}
@media only screen and (max-width: 480px) {
    #PRODUCT .block03 article{flex: 0 1 98%;}
    #HTP .block03 article{flex: 0 1 47%; margin: 0 auto;}
    .block06 article{flex: 0 1 31.5%;}
    .block04 p{flex: 0 1 48%; margin: 0.25em 1%;}
    }

.mainContents ul{margin: 0 1em 2em; padding: 0;}
.mainContents li{margin-bottom: 0.65em;}

.Link{max-width: 560px; margin: 3em auto 0;}


/*PV*/
.movie{
	width:100% !important;
	margin: 0 0 8em!important;
	padding-bottom:56.25%;
	position:relative;
	}

.movie iframe{
	width:100%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	}


/*table*/
table{
    width: 98%;
    margin: 1em auto;
    border: solid 1px #5d4b41;
    background: rgba(255,255,255,0.5);
    }

th,td{
    padding: 0.35em 0.5em;
    border-left: solid 1px #5d4b41;
    border-bottom: solid 1px #5d4b41;
    }


@media only screen and (max-width: 480px) {
    th,td{display: block; border-left: none; text-align: left;}
    th{border-bottom: dotted 1px #5d4b41;}
    tr:last-child td{border-bottom: none;}
    }

    

/*----------footer------------*/
footer{
	width: 100%;
	padding: 2.5em 0;
	color: #FFF;
	display: block;
	background: #49423f;
	}

footer > div{
	max-width: 1380px;
	margin: auto;
	padding: 0 2em 1em;
	}

	/*タイトーリンク*/
	ul.taitoLink{margin: 0; padding: 0 0 1.5em;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF; text-decoration: none;}
	ul.taitoLink a:hover{color: #7ecef4;}

footer p:last-child{
	padding-top: 2.5em;
	font-size: 0.8em;
	color: #FFF;
	text-align: center;
    border-top: solid 1px rgba(255,255,255,0.25);
	}

@media only screen and (max-width: 480px) {footer img{width: auto; height: 30px;} footer > div{padding: 0 1em 1em} ul.taitoLink li{font-size: 0.8em;}}