@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: #CBC4BD;
}

/* ベースの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: 96%;
}

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%;
	}
	
	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:0;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	}

    header .body-text {
        padding: 2rem 0 2rem 0;
        background-image: url("../images/stone_00124.jpg");
        color: #ffffff;
        text-align: left;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 10px rgba(0,0,0,0.5) ;
    }

    header .body-text h1 {
            width: 90%;
            padding-bottom: 0.2rem;
            margin: 0 auto 0.3rem;
            font-size: 1.3rem;
            font-weight: 700;
            border-bottom: solid 4px #000000;
    }

    header .body-text p {
        width: 90%;
        margin: auto;
        font-size: 1.1rem;
    }
	
	/*メニュー*/
	body #menu-box{
		height: 4rem;
		margin-bottom: 8vw;
        background-color: #6B644F;
        border-radius: 10px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 10px rgba(0,0,0,0.3) ;
	}
	
	body .menu-item{
		height: 100%;
        display: flex;
	}
	
	body .menu-item li{
		list-style-type: none;
		text-align: center;
        flex: 1 1 auto;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        align-self: center;
        border-right: dashed 2px #CBC4BD;
	}

    body .menu-item li:last-child{
        border-right:none;
    }

    body .menu-item li a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
	
	/* 使い方レイアウト */
	section{
		margin-bottom: 15vw;
	}
	
	h2{
		font-size: 1.4rem;
		text-align: left;
		padding-left: 0.3rem;
	}
	
	.molle-usage{
		display: flex;
        flex-direction: row;
		color: #454545;
        background-color: #ffffff;
        width: 100%;
		margin-bottom: 2vw;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
	}
	
	.use-art{
		flex-basis: 65%;
		justify-content: space-between;
	}



    .use-art img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
	
	.use-text{
        flex-basis: 35%;
        display: flex;
	}

	.text-parts{
		width: 90%;
        margin: auto;
        text-align: left;
        justify-content: center;
	}
	
	
	/*アイテムテキスト*/
    #backpack{
        background-color: #5E5B49;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
    }

	#backpack h3{
        color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
		font-size: 2rem;
		text-align: left;
		text-decoration: underline;
		text-decoration-color: #E0DCD6;
        padding: 2rem 0rem 1.5rem 2rem;
	}

    /*メッセンジャーバッグ*/
    #messengerbag{
        background-color: #5E5B49;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
    }

	#messengerbag h3{
        color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
		font-size: 2rem;
		text-align: left;
		text-decoration: underline;
		text-decoration-color: #F4EDED;
        padding: 2rem 0rem 1.5rem 2rem;
	}

    /*「CAR」*/
    #car{
        background-color: #5E5B49;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
    }

	#car h3{
        color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
		font-size: 2rem;
		text-align: left;
		text-decoration: underline;
		text-decoration-color: #F4EDED;
        padding: 2rem 0rem 1.5rem 2rem;
	}

    /*パネル*/
    #panel{
        background-color: #5E5B49;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
    }

	#panel h3{
        color: #FFFFFF;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
		font-size: 2rem;
		text-align: left;
		text-decoration: underline;
		text-decoration-color: #F4EDED;
        padding: 2rem 0rem 1.5rem 2rem;
	}
	
    /*コーディネート　アイテム紹介 全体*/
    .introduction{
        width: 95%;
        padding-bottom: 5vw;
        margin: auto;
    }

	.coordination{
		display: flex;
        margin-bottom: 5vw;
	}
	

    /*コーディネート　アイテム紹介*/
	.coordination-art{
        flex-basis: 70%;
		display: flex;
        background-color: #D9D9D9;
        color: #000000;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
	}

    .coordination-art-parts{
        flex-basis: 60%;
    }

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

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

    .coordination-art-parts img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .coordination-art-list{
        flex-basis: 40%;
        display: flex;
        flex-direction: column;
    }

    .coordination-art-list-item{
        flex: 1 1 auto;
        justify-content: space-around;
        align-content: space-around;
        display: flex;
        flex-direction: column;
    }

    .item{
        align-items: center;
        text-align: left;
        width: 90%;
        margin: auto;
    }

    .item li{
        list-style: none;
    }

   /* .bar{
        position: absolute;
        border-bottom: solid 2px #000000;
        z-index: 1;
        top: 2rem;
        left: 10vw;
        width: 12rem;
        height: 1rem;
    }*/

    /*.item-namber{
        display: inline;
        border: solid 1px #ffffff; 
        padding: 0 0.5rem;
    }*/

    .item-brand{
        font-size: 0.9rem;
        margin: 0.5rem 0;
    }

    .item-name{
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }


    /*アイテムリンク*/
    .coordination-list{
        flex-basis: 30%;
        display: flex;
        flex-direction: column;
    }

    .item-link{
        display: flex;
        background-color: #ffffff;
        margin: 2% 0 3% 1rem;
        border-radius: 10px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
    }
	
    .item-link-art{
        flex-basis: 65%;
    }

    .item-link-img{
        border-bottom: dashed 2px #A5A5A5;
    }

    .item-link-img img{
        width: 100%;
        height: auto;
    }

    .item-link-name p{
        font-size:  0.9rem;
        line-height: 1.2;
        margin: 0.3rem auto;
    }

    .item-link-botton{
        flex-basis: 35%;
        background-color: #702B18;
        margin: 1rem 0.5rem;
        font-size: 0.9rem;
        border-radius: 20px;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.3),inset 10px 10px 30px rgba(0,0,0,0.5) ;
    }

    .item-link-botton-soldout{
        flex-basis: 35%;
        background-color: #702B18;
        opacity: 0.6;
        margin: 1rem 0.5rem;
        font-size: 0.9rem;
        border-radius: 20px;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.3),inset 10px 10px 30px rgba(0,0,0,0.5) ;
    }

    .item-link-botton a{
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .item-link-botton-soldout a{
        color: #B8B8B8;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    /*付け方*/
    .coordination-use{
        display: flex;
        width: 100%;
    }

    .coordination-use-art{
        flex: 1 1 auto;
        border-right: solid 5px #5E5B49;
    }

    .coordination-use-art img{
        width: 100%;
        height: 100%;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.2) ;
    }

    .coordination-use-image-1{
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .coordination-use-image-2{
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    /*カテゴリーリンク*/
    #category-link{
        display: flex;
        justify-content: space-around;
        margin-bottom: 5vw;
    }

    .category{
        position: relative;
        background-color: #FFFFFF;
        border-radius: 20px;
        width: 23%;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3),inset 5px 5px 30px rgba(0,0,0,0.3) ;
    }

    .category-image img{
        width: 100%;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }

    .category-name{
        font-size: 1.2rem;
        margin: 0.5rem;
    }

    .category a{
        position: absolute;
        display: block;
        top: 0;
        width: 100%;
        height: 100%;
    }

	/*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:8vw;
		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;
    }
	
	/*メニュー*/
	body #menu-box{
		margin-bottom: 10vw;
        height: 13rem;
	}
    
    body .menu-item{
		height: 100%;
        display: flex;
        flex-wrap: wrap;
	}
	
	body .menu-item li{
        width: 40%;
        height: 3rem;
        padding: 0.5rem;
        border-bottom: dashed 2px #CBC4BD;
	}
    
    body .menu-item li:nth-child(even){
        border-right: none;
    }
    
    body .menu-item li:last-child{
        border-bottom: none;
    }
	
	/* 使い方レイアウト */
	section{
		margin-bottom: 15vw;
	}
	
	.molle-usage{
		flex-direction: column;
		margin-bottom: 5vw;
	}
    
    .use-art img{
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 20px;
    }
	
    .text-parts{
        margin: 2rem auto;
	}
	
	 /*コーディネート　アイテム紹介 全体*/
     .coordination{
		flex-direction: column;
	}
	
    
     /*コーディネート　アイテム紹介*/
    .coordination-art{
        margin-bottom: 3vw;
    }
    
	.coordination-art-parts{
        flex-basis: 50%;
    }

    .coordination-art-list{
        flex-basis: 50%;
    }

    /*アイテムリンク*/
    .coordination-list{
        flex-direction: column; 
    }
    
    .item-link{
        width: 85%;
        margin: 3% auto;
    }
    
    .item-link-name p{
        font-size: 1.3rem;
    }
    
    .item-link-botton{
        font-size: 1.2rem;
    }
    
    .item-link-botton a{
        font-size: 1.5rem;
    }
    
    /*付け方*/
    .coordination-use{
        flex-direction: column;
    }
    
    .coordination-use-image-1{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0px;
    }

    .coordination-use-image-2{
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    
    /*カテゴリーリンク*/
    #category-link{
        flex-wrap: wrap;
    }

    .category{
        width: 43%;
        margin-bottom: 2rem;
    }

    .category-name{
        font-size: 1.5rem;
    }
    
	/*ボタン*/
	.button{
		flex-direction: column;
		align-items: center;
	}
	
	.category-button{
		margin-bottom: 1rem;
	}
	
	.category-button a{
		display: flex;
		justify-content: space-around;
		padding: 0.5rem 2rem;
		width: 70vw;
	}
	
	/* ページトップボタン */
	.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;
}