/*全体*/
*, *:before, *:after { /* *(ｱｽﾀﾘｽｸ)全要素に適用 */
    box-sizing: border-box; /*高さ・幅 含めない*/
}

body{
    background-color: #f5deb3; /*背景 色指定*/
    min-height: 98vh; /*高さの最小値*/
    margin: 3ex; /*余白*/
}

/*名前*/
header h1{
    text-align: center; /*真ん中にする*/
}

/*ナビゲーション*/
nav{
    margin: none;
    text-align: center; /*真ん中にする*/
    font-size: 15px; /*フォントの大きさ*/
    line-height: 2em; /*行の高さを指定*/
}
		 
nav ul{
    margin: 0; /*余白*/
    padding: 0; /*余白*/
}

nav ul li{
    list-style: none; /*箇条書きの点をなくす*/
    display: inline-block; /*横に並ぶ inlineとblockの中間*/ 
	width: 10%; /*隣同士の間隔*/
	min-width: 85px; /*幅の最低値*/
}
		 
nav ul li a{
    text-decoration: underline; /*テキストに下線引く*/
	color: #8b4513; /*テキスト 色指定*/
}

nav ul li a:hover{
    color: #ff8c00; /*カーソルのせたとき,テキスト 色指定*/
}

/*メニュー*/
.botan .nakami {
    position: fixed; /*固定する ｽｸﾛｰﾙ反映されない*/
    top: 0; /*上から0のところ*/
    left: -100vw; /*画面外に設定*/
    width: 200px; /*幅 200px→6cm*/
    height: 100%; /*高さ 100% → 画面の高さいっぱい*/
    cursor: pointer; /*ﾏｳｽﾎﾟｲﾝﾀｰが要素にあるときのﾏｳｽｶｰｿﾙの形 指マーク*/
    -webkit-transition: 0.53s transform; /*識別子 -webkit → Google、Chrome、Safari(のとき対応)*/
    transition: 0.53s transform; /*変化する際の速度　transform→移動する*/
    -webkit-transition-timing-function: linear; /*ﾄﾗﾝｼﾞｼｮﾝの効果　一定の速度(Google、Chrome、Safariのとき対応)*/
    transition-timing-function: linear; /*一定の速度*/
    background-color: #ffa500; /*背景 色指定*/
}

.botan .nakami p{
    text-align: center; /*真ん中にする*/
    font-size: 15px; /*フォントの大きさ*/
    color: #8b4513; /*テキスト 色指定*/
}

.botan .nakami ul {
    margin: 7px; /*余白*/
    padding: 2px; /*余白*/
}

.botan .nakami li {
    list-style: none; /*箇条書きの点をなくす*/
    color: #8b4513; /*テキスト 色指定*/
}

.botan .nakami li a {
    display: block; /*ブロック要素を形成 縦に並ぶ*/
    padding: 5px 20px; /*余白*/
    text-decoration: none; /*テキストの装飾 行わない*/
    color: #f5deb3; /*テキスト 色指定*/
    border-bottom: 1px solid #f5deb3; /*下線を引く 実線 色指定*/
}

.botan #icon {
    position: absolute; /* 要素の配置方法を指定 */
    display: none; /*要素を非表示*/
    opacity: 0; /*不透明度 0→透明*/
}


.botan #icon:checked ~ .nakami{
    -webkit-transform: translateX(100vw); /*Google、Chrome、Safariのとき対応*/
    transform: translateX(100vw); /*要素を二次元平面上の水平方向で再配置 横いっぱい*/
}

/*でてくる→とじる*/
.botan #icon ~ label{
    display: block; /*ブロック要素を形成*/
    padding: 0.5em; /*余白*/
    cursor: pointer; /*ﾏｳｽﾎﾟｲﾝﾀｰが要素にあるときのﾏｳｽｶｰｿﾙの形 指マーク*/
    -webkit-transition: 0.5s transform; /*Google、Chrome、Safariのとき対応*/
    transition: 0.5s transform; /*移動する*/
    -webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); /*Google、Chrome、Safariのとき対応*/
    transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); /*一定の速度*/
    text-align: left; /*左にする*/
    color: #8b4513; /*テキスト 色指定*/
}

label{
    position: absolute; /*配置決める 絶対配置*/
    top: 25px; /*上(原点)から25px*/
    left: 25px; /*左(原点)から25px*/
}

.botan #icon:checked ~ label{ /*:checked→一覧表示、デザイン変更*/
    -webkit-transform: translateX(250px); /*Google、Chrome、Safariのとき対応*/
    transform: translateX(250px); /*要素を二次元平面上の水平方向で再配置 */
}

.botan #icon ~ label::before{ /*クリックした後 ::before→直前にｽﾀｲﾙ適用*/
    /*font-family: 'FontAwesome'; webｱｲｺﾝﾌｫﾝﾄを表示*/
    content: 'でてくる'; /*要素の前後に文字や画像を挿入*/
    font-size: 15px; /*テキスト 大きさ*/
}

.botan #icon:checked ~ label::before{ /*クリックした後*/
    content: 'とじる'; /*要素の前後に文字や画像を挿入*/
}

/*写真スライドする*/
.slide ul{
    display: flex; /*横並びにする*/
    overflow-x: scroll; /*overflow-x →範囲内に内容収まらないとき表示どうするか x軸 scroll →収まらないときｽｸﾛｰﾙﾊﾞｰ表示*/
    margin: 0; /*余白*/
    padding: 0; /*余白*/
}

.slide li{
    min-width: 50%; /*ﾌﾞﾗｳｻﾞ大きさ代えたときの最小値*/
    margin: 0; /*余白*/
    padding: 0; /*余白*/
    list-style: none; /*箇条書きの点をなくす*/
}