/*全体*/
*, *: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: linear /*Google、Chrome、Safariのとき対応*/
    transition-timing-function: linear /*一定の速度*/
    text-align: left; /*左にする*/
    color: #8b4513; /*テキスト 色指定*/
}

label{
    position: absolute; /*配置決める 絶対配置*/
    top: 0px; /*上(原点)から25px*/
    left: 0px; /*左(原点)から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: url(umiushi/umiushi-blue.jpg); /*要素の前後に文字や画像を挿入*/
    font-size: 15px; /*テキスト 大きさ*/
}

.botan #icon:checked ~ label::before{ /*クリックした後*/
    content: url(umiushi/umiushi-pink.jpg); /*要素の前後に文字や画像を挿入*/
}

/*写真スライドする*/
.slide-pic{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 760px;
    height: 400px;
}

.slideshow{
    max-width: 100%; /*画像の大きさの最大値が親要素の横幅100%*/
    height: 100%; /*画面の高さ100%*/
    background-image: url(https://www.yatex.org/gitbucket/minosanjo/oishiimonotabetai/raw/master/en-me/enme-20220115-2.png); /*1番はじめに表示する画像*/
    background-repeat: no-repeat; /*画像が繰り返されない＝1枚だけ表示*/
    background-size: cover; 
    background-position: center; 
}

.back{
    float: left;
    bottom: 0px;
    left: 30px;
}

/*矢印のデザイン*/
.arrow{
    position: relative;
    top: 100px;
    bottom: 0;
    left: 5px;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}

.arrow::before,
.arrow::after{
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 5px;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.next::before{
    left: 0px;
    width: 30px;
    height: 30px;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 5px solid rgb(255, 255, 255);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.back::before{
    left: 0px;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid rgb(255, 255, 255);
    border-left: 5px solid rgb(255, 255, 255);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* CSSアニメーションの指定 */
.slideshow{
    transition: background-image 1s ease-in;
}


@media screen and (max-width:768px) { 
    .slide-pic{
        height: 250px;
    }
    
    .disc{
        padding-top:5%;
    }

    /*>*/
    .next{
        top: 30px;
    }

    /*<*/
    .back{
        top: 30px;
    }
}