@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: "purista-web","Noto Sans JP",sans-serif;
	font-weight: 700;
	font-style: normal;
    background-color: #575331;
}

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

a{
	color:#FFFFFF;
	border:none;
	text-decoration: none;
	outline : none;
}
a:visited{
  	color:#ffffff;
	border:none;
	text-decoration: none;
}
a:active{
	text-color:#FFFFFF;
	border:none;
	text-decoration: none;
}

a:focus{
	text-color:#FFFFFF;
	border:none;
	text-decoration: none;
}
a:hover{
	color:#FFFFFF;
	border:none;
	text-decoration: none;
}

#page {
	display:inline-block;
	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: 1rem;
	}
	
	header .header-bar{
		height: 4vw;
		width: 100%;
        background-color: #E0E0E0;
	}
	
	header .header-bar img{
		width: 16vw;
		float: left;
		overflow: hidden;
		margin-left: 32px;
		margin-top: 0.6vw;
	}
	
	header .body {
		width:100%;
	}

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

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


	header .body img{
		width: 100%;
	}

    header .arrow {
        width: 0;
        height: 0;
        border-right: 30px solid transparent;
        border-top: 40px solid #000001;
        border-left: 30px solid transparent;
        margin: auto;
    }

    header .arrow a {
        width: 100%;
        height: 100%;
    }

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

	body .menu-item {
        display: flex;
        flex-wrap: wrap;
	}
	
	body .menu-item li {
        flex: 1 1 auto;
        list-style: none;
        justify-content: center;
        width: 50%;
        height: auto;
	}

    body .menu-item li a {
        width: 100%;
    }

    body .menu-item li img {
        width: 100%;
        height: 100%;
	}
    
	
    /*コーディネート　アイテム紹介 全体*/
    .br-sp {
        display: none;
    }

    h1 {
        text-align: end;
        padding-right: 2rem;
        color: #161402;
        font-size: 6rem;
        line-height: 5rem;
    }

    .point {
        background-color: #161402;
        margin-bottom: 5rem;
    }

    .point-title {
        position: relative;
    }

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

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

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

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

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

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

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

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

    .point-title img {
        width: 100%;
    }

    .point-title-text {
        position: absolute;
        top: 2rem;
        right: 2rem;
    }

    .point-title-text h2 {
        text-align: end;
        color: #ffffff;
        font-size: 4.5rem;
    }

    .point-title-text h3 {
        text-align: end;
        color: #CBBD8F;
        font-size: 2.5rem;
    }

    .image {
        display: flex;
    }

    .image img {
        flex: 1 1 auto;
        width: 50%;
    }


    /*アイテム紹介*/
    h4 {
        color: #161402;
        font-size: 3.7rem;
        text-align: end;
        padding-right: 1rem;
        line-height: 3.2rem;
        position: relative;
        background: linear-gradient(transparent 85% , #161402 85%);
    }

    /*.line {
        border-bottom: solid 5px #161402;
        margin-bottom: 1rem;
        position: absolute;
        top: 3rem;
        left: 0;
    }*/

    .item-back-1-1 {
        background-image: url("../images/point1-back-1.jpg");
        background-size: cover;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .item-back-2-1 {
        background-image: url("../images/point2-back-1.jpg");
        background-size: cover;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .item-back-2-2 {
        background-image: url("../images/point2-back-2.jpg");
        background-size: cover;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .item-back-3-1 {
        background-image: url("../images/point3-back-1.jpg");
        background-size: cover;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .item-back-3-2 {
        background-image: url("../images/point3-back-2.jpg");
        background-size: cover;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .item-back-4-1 {
        background-image: url("../images/point4-back-1.jpg");
        background-size: cover;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

	.item {
		display: flex;
        justify-content: space-around;
        width: 90%;
        margin: auto;
	}

    .item-img1 {
        flex: 1 1 auto;
        width: 60%;
        margin-right: 1rem;
    }

    .item-img1 img {
        width: 90%;
    }

    .item-text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 40%;
    }

    .item-img2 {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

    .item-img2 img {
        flex: 1 1 auto;
        align-self: auto;
        height: auto;
        margin: auto;
    }

    .img1 {
        width: 55%;
    }

    .img2 {
        width: 45%;
    }

    .img3 {
        width: 50%;
    }

    .text {
        background-color: rgba(22,20,2,0.8);
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .text p {
        font-size: 1.2rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 1rem;
    }

    .text p:last-child {
        margin: 0;
    }

    .item-link-botton {
        background-color: rgba(22,20,2,0.8);
        text-align: center;
        margin-bottom: 1rem;
    }

    .item-link-botton a {
        color: #FFFFFF;
        font-size: 1.8rem;
        line-height: 3.5rem;
        vertical-align: middle;
    }

    .item-border {
        border-bottom: solid 8px #161402;
        margin-bottom: 10vw;
    }



	/* フッター部 */
	footer {
		width:100%;
		height:3rem;
	}
	
	footer span {
		display:inline-block;
		width:100%;
		line-height:3rem;
		vertical-align:middle;
		text-align: center;
		font-size: 0.7rem;
		color: #FFFFFF;
	}

	/* ページトップボタン */
	.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:15px;
	}
}

/* ------ 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: 6vw;
	}
	
	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-item {
        display: flex;
        flex-wrap: wrap;
	}
	
	body .menu-item li {
        width: 100%;
        height: auto;
	}
	
	 /*セクショントップ　イメージ*/
    .br-sp {
        display: block;
    }
    
    h1 {
        padding-right: 1rem;
        font-size: 4.8rem;
        line-height: 4.5rem;
    }
    
    #point1-image-pc{
        display: none !important;
    }

    #point1-image-sp{
        display: block !important;
    }

    #point2-image-pc{
        display: none !important;
    }

    #point2-image-sp{
        display: block !important;
    }

    #point3-image-pc{
        display: none !important;
    }

    #point3-image-sp{
        display: block !important;
    }

    #point4-image-pc{
        display: none !important;
    }

    #point4-image-sp{
        display: block !important;
    }
	
    
    /*ポイント紹介*/
    .image {
        flex-wrap: wrap;
    }
    
    .image img {
        width: 100%;
    }
    
    .point-title-text {
        top: 2rem;
        right: 1rem;
    }

    .point-title-text h2 {
        font-size: 4rem;
        line-height: 4.3rem;
        margin-bottom: 0.8rem;
    }
    
    span {
       font-size: 3rem; 
    }

    .point-title-text h3 {
        font-size: 2.5rem;
        line-height: 2.8rem;
    }
    

    /*アイテム紹介*/
    h4 {
        font-size: 3.2rem;
        line-height: 3rem;
        background: linear-gradient(transparent 85% , #161402 85%);
    }
    
    .h4-sp{
        line-height: 3.2rem;
        background: linear-gradient(transparent 90% , #161402 90%);
    }

	.item {
        flex-direction: column;
        margin-bottom: 1rem;
        width: 95%;
        margin: 2rem auto 2rem;
	}

    .item-img1 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .item-img1 img {
        width: 100%;
        margin: auto;
    }

    .item-text {
        width: 100%;
    }

    .item-img2 {
        margin-bottom: 3rem;
    }
    
    .text {
        margin-bottom: 2rem;
    }

    .text p {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .text p:last-child {
        margin: 0;
    }

    .item-link-botton a {
        font-size: 2.4rem;
        line-height: 5rem;
    }

    .item-border {
        margin-bottom: 20vw;
    }

 
    /*ブランド*/
    .brand{
        text-align: center;
        background-color: #000000;
        border-top: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        padding: 1rem;
    }

    .brand a {
        vertical-align: middle;
    }
    
    .brand a img {
        width: 40%;
        height: auto;
    }

    .brand a p{
        font-size: 1.5rem;
        margin-top: 0.5rem;
    }
	
	/* ページトップボタン */
	.pagetop>a>img {
		width: 4rem;
	}
}