/*ウィンドウの背景色*/
html{
    -webkit-text-size-adjust: 100%;
}

body{
    background-color: #eeddbb;
}

/*リンクの色*/
a{
    color: #448844;
}

/*header footer*/
header{
    text-align: center;  
}
footer{
    margin: 30px;
    text-align: center;
}

/*nav*/
.menu {
    padding: 0 0 0 0;
    text-align: center;
}
.menu ul{
    padding:0px;
}
.menu li{
    list-style-type: none;
    display: inline-block;
    width: 150px;
    margin: 0 10px;
}
.menu a{
    display:block;
    padding: 10px;
    background: #eebb44;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #000000;
}
.menu a:hover{
    background: #eecc66;
    color: #ffffff;
}

.submenu a{
    color: #448844;
    text-decoration: none;
}
.submenu a:hover{
    color: #eecc66;
}

/*ページタイトル*/
h1{
    width: 500px;
    margin: 40px auto;
    padding: 30px;
    border: 3px solid #000000;
    background-color: #eebb44;
    color: #ffffff;
    font-size: 200%;
    text-align: center;
    line-height: 1;
}

/*大見出し*/
h2{
    padding: 10px;
    margin-bottom: 20px;
    border: 1px dotted #000000;
    border-left: 10px solid #000000;
    color: #000000;
}

/*小見出し*/
h3{
    padding: 10px;
    margin-top: 75px;
    margin-bottom: 15px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
/*セクション間隔*/
section + section{
    margin-top: 50px;
}

/*メインコンテンツ*/
#contents{
    box-sizing: border-box;
    max-width: 1600px;
    margin: 40px 40px;
    padding:4% 15%;
    border: 1px solid #eebb44;
    background-color: #ffffff;
}


/*==================================================
スライダーのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery{
	margin:3%;
    padding: 0%;
}

.gallery li{
list-style:none;
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

.slick-slider{
    -ms-touch-action: auto;
    touch-action: auto;
}

/*選択するサムネイル画像の設定*/

.choice-btn{
    margin: 3%;
    padding: 0;
}
.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
list-style:none;
}

.choice-btn li img{
	opacity: 0.2;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/*画像*/
figure{
    width: 100%;
    text-align: center;
    margin: 10px 0 0 0;
    padding: 1%;
    background-color: #333;
    color: #fff;
}
figcaption{
    margin-top:1%
}


/*価格表*/
dl.price{
	width:100%;
	font-size: 1em;
	}
/* divにflexをかけdtとddを左右に配置しつつ
   position:relativeで点線配置の準備をする */
dl.price div{
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
	padding: 5px 0;
	}
/* 疑似要素でオブジェクトを生成、positionでdivの上下中央に配置し
   borderで点線を表現する */
dl.price div::after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 100%;
	border-bottom: dotted 1px #000;
	}
/* dtとddはz-indexで点線よりも手前にし、なおかつ背景色を付けて点線を隠す */
dl.price dt{
	margin:0;
	padding: 0 5px 0 0;
	background-color: #ffffff;
	z-index: 2;
	text-align: left;
    font-weight: bold;
	}
dl.price dd{
	margin:0;
	padding: 0 0 0 5px;
	background-color: #ffffff;
	z-index: 2;
	text-align: right;
    font-weight: bold;
	}
dl.price p{
    margin: 10px;
    font-size:small;
    color: #666666;
}

/*700px以下*/
@media screen and (max-width: 700px) {
    .menu li{
        display: block;
        width: 200px;
        margin: 0px auto 5px;
    }
    h1{
        width: 300px;
        margin: 10px auto 5px;
        padding: 10px;
        border: 3px solid #000000;
        background-color: #eebb44;
        color: #ffffff;
        font-size: 150%;
        text-align: center;
        line-height: 1;
    }
    #contents{
        margin: 10px auto;
    }
}