@charset "UTF-8";

/* ブラウザのディフォルトレイアウトリセット */
* {
	margin: 0;
	padding: 0;
	border: none;
	font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

img{
	border-image-width:0;
}


/* サイトの基本レイアウトと書体の定義 */
body {
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 700;
	font-style: normal;
	font-weight: 300;
	font-style: normal;
	text-align: center;
    background-color: #000000;
}

/* ベースのCSS変数 */
:root {
  --display-width:1920px;
  --base-font:21px;
}

a{
	color:#ffffff;
	border:none;
	text-decoration: none;
	outline : none;
}
a:visited{
  	color:#fffeee;
	border:none;
	text-decoration: none;
}
a:active{
	text-color:rgba(0,0,0,1.00);
	border:none;
	text-decoration: none;
}

a:focus{
	text-color:rgba(0,0,0,1.00);
	border:none;
	text-decoration: none;
}
a:hover{
	color:rgba(126,126,126,1.00);
	border:none;
	text-decoration: none;
}

#page {
	display:inline-block;
	text-align:center;
	max-width: 100%;
}

header#top {
	display:inline-block;
	margin:0 auto;
	text-align:center;
}




/* ------ パソコン幅表示 -------- */
	html {
		font-size:var(--base-font);
		outline: none;
		height: 100%;
		border:none;
	}

	
	/*ヘッダー*/
	header{
		margin-bottom: 8vw;
	}
	
	header .header-bar{
		height:5vw;
		width:100%;
        background-color: #E0E0E0;
	}
	
	header .header-bar img{
		width:18vw;
		float:left;
		overflow: hidden;
		margin-left:32px;
		margin-top:1.2vw;
	}
	
	header .body {
		width:100%;
        margin-bottom: 2rem;
        border-radius: 20px;
	}

    #main-image-pc{
        display: block !important;
    }

    #main-image-sp{
        display: none !important;
    }


	header .body img{
		width: 100%;
		margin-bottom: 3rem;
	}

    header .body-text1 {
        /*background-image: url("../images/header-line.png");
        background-repeat: repeat-x;*/
        font-size: 2.5rem;
        color: #FFFFFF;
        margin-bottom: 1rem;
    }

    header .body-text2 {
        padding: 0 2rem;
        margin-bottom: 2rem;
    }

    header .body-text2 p {
        font-size: 1.5rem;
        padding: auto 2rem;
        color: #FFFFFF;
    }
 

	
	/*メニュー*/
    
	body #menu-box {
		margin-bottom: 8vw;
	}

	body .menu-img {
        background-image: url("../images/menu-img.png");
        margin-bottom: 3rem;
    }

    body .menu-img h1 {
        color: #ffffff;
        text-align: center;
        vertical-align: middle;
        line-height: 300px;
        font-size: 4rem;
    }

	body .menu-item {
        display: flex;
        margin-bottom: 10rem;
	}
	
	body .menu-item li {
        flex: 1 1 auto;
        justify-content: space-around;
	}

    body .menu-item li img {
        width: 18vw;
        height: 100%;
	}

    body .menu-item li a {
        width: 100%;
        height: 100%;
    }
	
	/*アイテムテキスト*/
    
	
    /*コーディネート　アイテム紹介 全体*/
    .durability-introduction {
        background-image: url("../images/durability-img-pc.png");
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 10rem;
    }

    .lightweight-introduction {
            background-image: url("../images/lightweight-img-pc.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 10rem;
    }

    .fitting-introduction {
            background-image: url("../images/fitting-img-pc.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 10rem;
    }

    .function-introduction {
            background-image: url("../images/function-img-pc.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 10rem;
    }

    .durability-introduction h2 {
        font-size: 2.3rem;
        color: #FFFFFF;
        padding-top: 3rem;
        padding-right: 1rem;
        padding-left: 50vw;
        line-height: 2.5rem;
    }

    .durability-introduction p {
        font-size: 1.3rem;
        color: #FFFFFF;
        padding-top: 2rem;
        padding-right: 1rem;
        padding-left: 50vw;
        padding-bottom: 3rem;
        line-height: 2.5rem;
    }

    .lightweight-introduction h2 {
        font-size: 2.3rem;
        color: #FFFFFF;
        padding-top: 3rem;
        padding-right: 50vw;
        padding-left: 1rem;
        line-height: 2.5rem;
    }

    .lightweight-introduction p {
        font-size: 1.3rem;
        color: #FFFFFF;
        padding-top: 2rem;
        padding-right: 50vw;
        padding-left: 1rem;
        padding-bottom: 3rem;
        line-height: 2.5rem;
    }

    .fitting-introduction h2 {
        font-size: 2.3rem;
        color: #FFFFFF;
        padding-top: 3rem;
        padding-right: 50vw;
        padding-left: 1rem;
        line-height: 2.5rem;
    }

    .fitting-introduction p {
        font-size: 1.3rem;
        color: #FFFFFF;
        padding-top: 2rem;
        padding-right: 50vw;
        padding-left: 1rem;
        padding-bottom: 3rem;
        line-height: 2.5rem;
    }

    .function-introduction h2 {
        font-size: 2.3rem;
        color: #FFFFFF;
        padding-top: 3rem;
        padding-right: 50vw;
        padding-left: 1rem;
        line-height: 2.5rem;
    }

    .function-introduction p {
        font-size: 1.3rem;
        color: #FFFFFF;
        padding-top: 2rem;
        padding-right: 50vw;
        padding-left: 1rem;
        padding-bottom: 3rem;
        line-height: 2.5rem;
    }

    h3 {
        color: #FFFFFF;
        font-size: 2rem;
        margin-bottom: 4rem;
    }

	.item {
		display: flex;
        margin-bottom: 5vw;
        width: 90%;
        margin: auto 0 15rem 0;
	}

    .item-img1 {
        flex: 1 1 auto;
        justify-content: space-around;
        margin: auto 10%;
        width: 40vw;
    }

    .image1 {
        width: 95%;
    }

    .item-img2 {
        flex: 1 1 auto;
        justify-content: space-around;
        width: 60vw;
    }

    .item-sub-img {
        flex: 1 1 auto;
        justify-content: space-around;
        display: flex;
        margin-bottom: 3rem;
    }

    .image2 {
        width: 40%;
        border: solid #FFFFFF;
    }

    .item-text {
        margin-bottom: 2rem;
        color: #FFFFFF;
    }

    .item-text p {
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }

    .item-link-botton {
        font-size: 1.5rem;
        padding: 1rem 0;
        border: solid 1px #FFFFFF;
    }

    .item-link-botton a {
        color: #ffffff;
        width: 100%;
        height: 100%;
    }

    #lightweight .item-link-botton a {
        color: #868686;
        width: 100%;
        height: 100%;
    }

    /*寸法測り方*/
    .fitting-1 {
        display: flex;
        margin-bottom: 10rem;
    }

    .fitting-how {
        display: flex;
        width: 40%;
        margin: auto;
    }

    .fitting-text {
        flex: 1 1 auto;
        width: 60%;
    }

    .fitting-text p {
        color: #FFFFFF;
        font-size: 1.2rem;
        width: 100%;
    }

    .fitting-img {
        flex: 1 1 auto;
        width: 30%;
        border: solid #FFFFFF;
    }

    .fitting-img img {
        width: 70%;
    }

	/*topボタン*/
	.button{
		display: flex;
		justify-content: space-around;
	}
	
	.category-button a{
		background-color: #000000;
		display: flex;
		justify-content: space-around;
		padding: 0.5rem 2rem;
		width: 15rem;
	}

	.category-button>a:hover{
		opacity: 0.7;
	}
	
	/* フッター部 */
	footer {
		width:100%;
		height:3rem;
		background-color: #D9D9D9;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
	}
	
	footer span {
		display:inline-block;
		width:100%;
		line-height:3rem;
		vertical-align:middle;
		text-align: center;
		font-size: 0.7rem;
		color: #000000;
	}

	/* ページトップボタン */
	.pagetop {
		position: fixed;
		z-index: 99997;
		right: 0.8rem;
		bottom: 0.7rem;
	}

	/* ページトップボタン */
	.pagetop>a>img {
		display:inline-block;
		z-index: 99997;
		width: 2.5rem;
	}

	/* ページトップボタン */
	.pagetop>a>img:hover{
		opacity: 0.5 ;
	}

/* ------ 1500PXをブレークポイントにする -------- */
@media only screen and (max-width: 1500px){
	html {
		font-size:17px;
	}
}

/* ------ 1000PXをブレークポイントにする -------- */
@media only screen and (max-width: 1000px){
	html {
		font-size:13px;
	}
    
    /* 使い方レイアウト */
    .image-pc{
        display: none !important;
    }

    .image-sp{
        display: block !important;
    }
}

/* ------ スマートフォン幅表示 670PXをブレークポイントにする -------- */
@media only screen and (max-width: 670px){
	
	html {
		font-size:11px;
	}
	
	header{
		margin-bottom: 12vw;
	}
	
	header .header-bar{
		height:9vw;
		width:100%;
	}
	
	header .header-bar img{
		width:30vw;
		margin-left:2vw;
		margin-top:2vw;
	}
    
    #main-image-pc{
        display: none !important;
    }

    #main-image-sp{
        display: block !important;
    }
    
    header .body-text2 {
        height: 13rem;
        padding: 0 2rem;
    }
	
	/*メニュー*/
	body #menu-box{
		margin-bottom: 10vw;
	}
    
    body .menu-img {
        background-image: url("../images/menu-img.png");
        margin-bottom: 3rem;
    }
    
    body .menu-item {
        flex-wrap: wrap;
        margin-bottom: 10rem;
	}
	
	body .menu-item li{
        width: 40%;
        padding-bottom: 2rem;
	}
    
    body .menu-item li img {
        width: 30vw;
	}
	
	 /*コーディネート　アイテム紹介 全体*/
    .durability-introduction {
        background-image: url("../images/durability-img-sp.png");
        margin-bottom: 10rem;
    }

    .lightweight-introduction {
        background-image: url("../images/lightweight-img-sp.png");
        margin-bottom: 10rem;
    }

    .fitting-introduction {
        background-image: url("../images/fitting-img-sp.png");
        margin-bottom: 10rem;
    }

    .function-introduction {
        background-image: url("../images/function-img-sp.png");
        margin-bottom: 10rem;
    }
	
	 h2 {
        font-size: 3rem;
        text-align: center;
        padding: 2rem 0 0 0;
        line-height: 3.2rem;
    }
	
    .item {
		display: block;
        margin-bottom: 30vw;
        margin: auto auto 30vw;
        width: 95%;
	}
    
    .item-img1 {
        margin: auto auto 10vw;
        width: 40vw;
    }

    .item-img2 {
        margin: auto auto 10vw;
    }

    .item-sub-img {
        flex: 1 1 auto;
        justify-content: space-around;
        display: flex;
        margin-bottom: 3rem;
    }

    .image2 {
        width: 40%;
        border: solid 1px #FFFFFF;
    }

    .item-text {
        margin-bottom: 3rem;
    }
    
    .item-text p {
        font-size: 1.2rem;
    }



    /*寸法測り方*/
    .fitting-1 {
        display: block;
        margin-bottom: 10rem;
    }
    
    .fitting-how {
        width: 80%;
        margin-bottom: 2rem;
    }

    .fitting-text {
        width: 60%;
    }

    .fitting-text p {
        font-size: 1.3rem;
        width: 90%;
    }

    .fitting-img {
        width: 30%;
    }

    .fitting-img img {
        width: 70%;
    }
	
	/* ページトップボタン */
	.pagetop>a>img {
		width: 4rem;
	}
}
	









/* モーダルダイアログ用の定義（未使用） */
#_modal_dialog {
display: none;
position: absolute;
z-index: 99999;
left: 6vw;
top: 12vh;
width:85vw;
height:100vw;
overflow: hidden;
background-color: rgba(256,256,256,1.00);
}


#_modal_content {
overflow: hidden;
width:85vw;
height:100vw;

}

#_close_btn{
float:right;
width: 3.5vw;
height: 3.5vw;
margin-top:2.5vw;
margin-right:2.5vw;
}

#_modal_background {
display: none;
position:fixed;
margin:0;
height:0;
z-index: 99998;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.6);
}


/* フォグの定義 */
#half_mask{
position:fixed;
margin:0;
z-index: 9999;
bottom: 0;
width:100%;
height: 11vw;
overflow: hidden;
background: linear-gradient(to bottom,rgba(256,256,256,0),rgba(256,256,256,0.6) 20%,rgba(256,256,256,1.0)); 
}


/*------------------------
クリアフィックスの定義 
------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	clear: both;
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
}

.skip-link {
	display:none;
}