@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  


html {

    max-width: 100%;
    height: auto;
    position: relative;

 }

 /* ボディの背景アニメーション定義 */

 body {

    -webkit-text-size-adjust: 100%;
    width: 100%;
    height: 100vh;
    background:linear-gradient(45deg, #deeeeb,#ffffff,#bfd5d1);/*グラデーションを定義*/
    background-size: 200% 200%;/*サイズを大きくひきのばす*/
    background-attachment: fixed;
    animation: bggradient 20s ease infinite;

    }

    @keyframes bggradient{
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

/* キーフレームアニメーションここまで */


@media screen and (min-width:1025px) {


 /* ここからヘッダー */
 
    .menu-btn {

        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #44756f;
        clip-path: circle(50%);
        height: 4em;
        width: 4em;

    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {

        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;

    }

    .menu-btn span:before {

        bottom: 8px;

    }

    .menu-btn span:after {

        top: 8px;

    }

    /* ×印の設定 */

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

        /* ×印の設定 */

    #menu-btn-check {
        display: none;
    } /* チェックボックス非表示 */

    .menu-content {
        width: 30%; /* メニュー画面の幅 */
        height: 100%; /* メニュー画面の高さ */
        position: fixed;
        top: 0;
        left: 100%;/* 画面外へメニュー飛ばし！ */
        z-index: 80;
        background-color: #44756f;
        transition: all 0.5s;/*アニメーション設定*/
    }
    .menu-content ul {
        padding: 70px 10px 0; /* メニューコンテンツの余白幅 */
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px; /* リスト文字のフォントサイズ */
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
        white-space: nowrap;

    }
    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;

    }

    #menu-btn-check:checked ~ .menu-content {
        left: 70%;/*メニューを画面内へ(飛び出し具合いじれる)*/

    }

    #dlogo {

        width: 7vw;
    }


#gattai {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;

}


.sitetitle {

    white-space: nowrap;
    color:#44756f;
    font-size: 5.5vw;
    font-family: "BIZ UDPゴシック";
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

/* ここまでヘッダー */

/* ここからメイン */

.about {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    position: relative;
    top: 1250px;
    
}

h1 {

    font-weight: bold;
    font-size: 4vmax;
    font-family: "BIZ UDPゴシック";
    color: #44756f;
    text-align: center;

}

#story {

    display: block;
    padding-top: 250px;
    margin-top: -250px;
}

.bunsyo {

    white-space: nowrap;
    font-size: 1.2vw;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}


#syatsuillust {

    text-align: center;
    width: 35%;
    height: auto;
    object-fit: cover;

}

#setsumei {

  display: block;
  padding-top: 100px;
  margin-top: -100px;

}

.history{

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  position: relative;
  top: 1750px;

}

h2 {

    font-weight: bold;
    font-size: 5vmax;
    font-family: "BIZ UDPゴシック";
    color: #44756f;
    text-align: center;

}

.mojiG1 {

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -300px;

}


.bunsyo2{

    white-space: nowrap;
    font-size: 2vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;
    text-align: center;

}

.mojiG2 {

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50px;

}

.bunsyo3 {
    
    white-space: nowrap;
    text-align: center;
    font-size: 2vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}

.mojiG3 {

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -300px;

}

.bunsyo4 {

    white-space: nowrap;
    font-size: 2vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;
    text-align: center;
}

.jissekirebyu {

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  position: relative;
  top: 2550px;


}

h3 {

    font-weight: bold;
    font-size: 6vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;
    text-align: center;

}

#hanbai {

    display: block;
    padding-top: 350px;
    margin-top: -350px;

}

.mojiG4 {

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

}

.bunsyo5 {

    white-space: nowrap;
    font-size: 2.5vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}

.aka {

    font-weight: bold;
    color: red;
    font-size: 5vmin;
    font-family: "BIZ UDPゴシック";

}

.mojiG5 {

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

}

.moji {

  text-align: center;

}



.bunsyo6 {


    white-space: nowrap;
    font-size: 3vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}

.bunsyo7 {

    white-space: nowrap;
    font-size: 2.5vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}


 .moji2 {

  text-align: center;

 }

.bunsyo8 {

    white-space: nowrap;
    font-size: 2vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}

.pc {

    display: none;

}

.collection {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    top: 3150px;

}


#desa {

    display: block;
    padding-top: 200px;
    margin-top: -200px;

}

/* カルーセル全体 */
.carousel {
    /* 水平方向中央寄せ */
    display: flex;
    justify-content: center;
  }
  /* カルーセル内容 */
  .contains {
    /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    width: 554px;
    height: 500px;
    overflow: visible;
    position: relative;
    padding: 0;
    list-style: none;
  }
  /* スライド切り換え用ラジオボタンは常に非表示 */
  .slide_select {
    display: none;
  }
  /* 各スライド */
  .slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    width: 554px;
    height: 500px;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
  }
  /* 前へ次へボタン */
  .scroll_button {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    /* 縦中央から20px上の位置 */
    top: 50%;
    margin-top: -20px;
  /* 上辺と右辺のみ幅5pxの枠線 */
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: #656565;
    cursor: pointer;
    /* 普段はボタンはやや薄くする */
    opacity: 0.75;
    /* スライドよりも前面にする */
    z-index: 2;
  }

  /* ホバー時にボタンを強調 */
  .scroll_button:hover {
    opacity: 1;
  }
  /* 前へボタン */
  .scroll_prev {
    left: -30px;
    /* 上辺と右辺の枠線を回転して"＜"にする */
    transform: rotate(-135deg);
  }
  /* 次へボタン */
  .scroll_next {
    right: -30px;
    /* 上辺と右辺の枠線を回転して"＞"にする */
    transform: rotate(45deg);
  }
  /* スライド移動ボタンエリア */
  .move_controler {
    position: absolute;
    bottom: -55px;
    width: 100%;
    text-align: center;
  }
  /* スライド移動の各ボタン */
  .button_move {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
    /* 普段はやや薄くする */
    opacity: 0.75;
  }
  /* スライド移動ボタンの色 */
  .button_move {
    background-color: #656565;
  }
  /* 1番目のスライド選択時 */
  /* 1番目のスライドの透明度を0にして表示する */
  .slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
  }
  /* スライド移動ボタンの1個目を明るくする */
  /* （今選択されていることが分かるように） */
  .slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
    opacity: 1;
  }

  .slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
    opacity: 1;
    
  }
  .slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(3):checked ~ .move_controler
    .button_move:nth-of-type(3) {
    opacity: 1;
  }
  .slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(4):checked
    ~ .move_controler
    .button_move:nth-of-type(4) {
    opacity: 1;
  }

  .slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(5):checked
    ~ .move_controler
    .button_move:nth-of-type(5) {
    opacity: 1;
  }

  .slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(6):checked
    ~ .move_controler
    .button_move:nth-of-type(6) {
    opacity: 1;
  }

  .slide_select:nth-of-type(7):checked ~ .slide:nth-of-type(7) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(7):checked
    ~ .move_controler
    .button_move:nth-of-type(7) {
    opacity: 1;
  }

  .slide_select:nth-of-type(8):checked ~ .slide:nth-of-type(8) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(8):checked
    ~ .move_controler
    .button_move:nth-of-type(8) {
    opacity: 1;
  }

  .slide_select:nth-of-type(9):checked ~ .slide:nth-of-type(9) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(9):checked
    ~ .move_controler
    .button_move:nth-of-type(9) {
    opacity: 1;
  }

  .slide_select:nth-of-type(10):checked ~ .slide:nth-of-type(10) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(10):checked
    ~ .move_controler
    .button_move:nth-of-type(10) {
    opacity: 1;
  }

  .slide_select:nth-of-type(11):checked ~ .slide:nth-of-type(11) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(11):checked
    ~ .move_controler
    .button_move:nth-of-type(11) {
    opacity: 1;
  }
  
  .slide_select:nth-of-type(12):checked ~ .slide:nth-of-type(12) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(12):checked
    ~ .move_controler
    .button_move:nth-of-type(12) {
    opacity: 1;
  }

  .slide_select:nth-of-type(13):checked ~ .slide:nth-of-type(13) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(13):checked
    ~ .move_controler
    .button_move:nth-of-type(13) {
    opacity: 1;
  }

  .slide_select:nth-of-type(14):checked ~ .slide:nth-of-type(14) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(14):checked
    ~ .move_controler
    .button_move:nth-of-type(14) {
    opacity: 1;
  }

  .slide_select:nth-of-type(15):checked ~ .slide:nth-of-type(15) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(15):checked
    ~ .move_controler
    .button_move:nth-of-type(15) {
    opacity: 1;
  }

  .slide_select:nth-of-type(16):checked ~ .slide:nth-of-type(16) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(16):checked
    ~ .move_controler
    .button_move:nth-of-type(16) {
    opacity: 1;
  }

  .slide_select:nth-of-type(17):checked ~ .slide:nth-of-type(17) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(17):checked
    ~ .move_controler
    .button_move:nth-of-type(17) {
    opacity: 1;
  }

  .slide_select:nth-of-type(18):checked ~ .slide:nth-of-type(18) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(18):checked
    ~ .move_controler
    .button_move:nth-of-type(18) {
    opacity: 1;
  }

  .tsuna {

    width: 554px;
    height: 500px;
}



h4 {

    color: #44756f;
    font-size: 4vmax;
    font-weight: bold;
    font-family: "BIZ UDPゴシック";
    text-align: center;  
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

}


.annai1 {

    color: #6ebcaa;
    font-size: 3vmin;
    font-family: "BIZ UDPゴシック";
    text-align: center;

}

.annai1-2 {
        
  color: #6ebcaa;
  font-size: 3vmin;
  font-family: "BIZ UDPゴシック";
  text-align: center;

}

#link {

  display: block;
  padding-top: 500px;
  margin-top: -500px;

}

.end {

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  top: 3750px;


}

.kimete {

    color: #6ebcaa;
    font-size: 3vmax;
    font-weight: bold;
    font-family: "BIZ UDPゴシック";

}

.drecome {

    color: #6ebcaa;
    font-size: 5vmax;
    font-weight: bold;
    font-family: "BIZ UDPゴシック";

}

.drecome a {

    color: #44756f;
    font: bold 4.8vw "BIZ UDPゴシック";
    text-decoration: none;

}

.drecome a:hover {

    color: #aed8d0;
    font: bold 4.8vw "BIZ UDPゴシック";
    text-decoration: none;

}

.annai2 {

    color: #6ebcaa;
    font: bold 2.6vw "BIZ UDPゴシック";

}

/* ここまでメイン */

/* ここからフッター */


.last{

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 200px;
    background-color: #7cc3c3;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    top: 8200px;

}

#url {

    display: block;
    padding-top: 100px;
    margin-top: -100px;

}


.dregroup {

    width: 150px;

}

.tophe {

    white-space: nowrap;
    color: #aed8d0;
    font-size: 1vmax;
    font-family: "BIZ UDPゴシック";

}

.tophe a {

    color: #aed8d0;
    font-size: 1vmax;
    font-family: "BIZ UDPゴシック";
    text-decoration: none;
}


.copy {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: #57b6ae;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    position: absolute;
    top: 8380px;
}


.copyrighthyouki {

    font-size: 2vmin;
    font-family: "BIZ UDPゴシック";
    color: white;

}

/* 終了 */

}

/* ここからレスポンシブ対応 */

@media screen and (max-width:320px) {

        /* 320px幅のヘッダー */

        .menu-btn {

            position: fixed;
            top: 10px;
            right: 10px;
            display: flex;
            height: 60px;
            width: 60px;
            justify-content: center;
            align-items: center;
            z-index: 90;
            background-color: #44756f;
            clip-path: circle(50%);
            height: 4em;
            width: 4em;
    
        }
    
        .menu-btn span,
        .menu-btn span:before,
        .menu-btn span:after {
    
            content: '';
            display: block;
            height: 3px;
            width: 25px;
            border-radius: 3px;
            background-color: #ffffff;
            position: absolute;
    
        }
    
        .menu-btn span:before {
    
            bottom: 8px;
    
        }
    
        .menu-btn span:after {
    
            top: 8px;
    
        }
    
        /* ×印の設定 */
    
        #menu-btn-check:checked ~ .menu-btn span {
            background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
        }
        #menu-btn-check:checked ~ .menu-btn span::before {
            bottom: 0;
            transform: rotate(45deg);
        }
        #menu-btn-check:checked ~ .menu-btn span::after {
            top: 0;
            transform: rotate(-45deg);
        }
    
            /* ×印の設定 */
    
        #menu-btn-check {
            display: none;
        } /* チェックボックス非表示 */
    
        .menu-content ul li a {
            display: block;
            width: 100%;
            font-size: 1vmin; /* リスト文字のフォントサイズ */
            box-sizing: border-box;
            color:#ffffff;
            text-decoration: none;
            padding: 9px 15px 10px 0;
            position: relative;
            white-space: nowrap;
    
        }
    
        .menu-content {
            width: 100%; /* メニュー画面の幅 */
            height: 100%; /* メニュー画面の高さ */
            position: fixed;
            top: 0;
            left: 100%;/* 画面外へメニュー飛ばし！ */
            z-index: 80;
            background-color: #44756f;
            transition: all 0.5s;/*アニメーション設定*/
        }
    
        #menu-btn-check:checked ~ .menu-content {
            left: 0;/*メニューを画面内へ(飛び出し具合いじれる)*/
    
        }
    
        .menu-content ul {
            padding: 70px 10px 0; /* メニューコンテンツの余白幅 */
        }
        .menu-content ul li {
            border-bottom: solid 1px #ffffff;
            list-style: none;
        }
        .menu-content ul li a {
            display: block;
            width: 100%;
            font-size: 15px; /* リスト文字のフォントサイズ */
            box-sizing: border-box;
            color:#ffffff;
            text-decoration: none;
            padding: 9px 15px 10px 0;
            position: relative;
            white-space: nowrap;
    
        }
        .menu-content ul li a::before {
            content: "";
            width: 7px;
            height: 7px;
            border-top: solid 2px #ffffff;
            border-right: solid 2px #ffffff;
            transform: rotate(45deg);
            position: absolute;
            right: 11px;
            top: 16px;
    
        }
    
        #dlogo {
    
            width: 50px;
        }
    
        /* ここまでヘッダー */
    
        /* ここから320px幅メイン */
    
        #gattai {
    
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
        
        }
        
        
        .sitetitle {
        
            white-space: nowrap;
            color:#44756f;
            font-size: 5.5vw;
            font-family: "BIZ UDPゴシック";
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
    
        }
    
        .about {
    
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;
          text-align: center;
          position: relative;
          top: 850px;
            
        }
    
        h1 {
    
            font-weight: bold;
            font-size: 6.5vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;

        
        }

        #story {

            display: block;
            padding-top: 150px;
            margin-top: -150px;

        }
        
    
        .bunsyo{
    
            white-space: nowrap;
            font-size: 2vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
    
    
        }
    
        #syatsuillust {
    
            width: 80%;
            height: auto;
            object-fit: cover;
        }
    
        .history {
    
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            text-align: center;
            position: relative;
            top: 1200px;
        
        }

        h2 {

            font-weight: bold;
            font-size: 4vmax;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
        
        
        }

        #setsumei {

            display: block;
            padding-top: 35px;
            margin-top: -35px;

        }

        .mojiG1 {

          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;

        
        }
        
  

        .mojiG2 {

          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;

        
        }
        
    
        .bunsyo2 {
    
            white-space: nowrap;
            font-size: 2.5vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
        
        }

        .mojiG3 {

          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;

        
        }
        
    
        .bunsyo3 {
        
            white-space: nowrap;
            font-size: 2.5vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;

        }
    
        .bunsyo4 {
    
            white-space: nowrap;
            font-size: 2.5vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;

        
        }

        h3 {

            font-weight: bold;
            font-size: 6.5vw;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
        
        
        }

        .jissekirebyu {

            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            text-align: center;
            position: relative;
            top: 1800px;

        }

        #hanbai{

            display: block;
            padding-top: 100px;
            margin-top: -100px;

        }

        .mojiG4 {

          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
        
        }

        .moji {

          text-align: center;

        }
  
        
        .bunsyo5 {
        
            white-space: nowrap;
            font-size: 3vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
        
        }
    
        .aka {
    
            font-weight: bold;
            color: red;
            font-size: 5vmin;
            font-family: "BIZ UDPゴシック";

        }

        .mojiG5 {

          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
        
        }

        .moji2 {

          text-align: center;

        }
        
        .bunsyo6 {
        
        
            white-space: nowrap;
            font-size: 3vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
        
        }
        
        .bunsyo7 {
        
            white-space: nowrap;
            font-size: 3vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
        
        }

        .bunsyo8 {
    
            text-align: center;
            white-space: nowrap;
            font-size: 2.5vmin;
            font-family: "BIZ UDPゴシック";
            color: #44756f;
        
        }
    
        .pc {
    
            display: inline;
    
        }


        .collection {

            position: relative;
            top: 2500px;
            width: 100%;
            height: 100%;
        
        }


        #desa {
        
            display: block;
            padding-top: 95px;
            margin-top: -95px;
        
        }


/* カルーセル全体 */
.carousel {
    /* 水平方向中央寄せ */
    display: flex;
    justify-content: center;
  }
  /* カルーセル内容 */
  .contains {
    /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    width: 204px;
    height: 200px;
    overflow: visible;
    position: relative;
    padding: 0;
    list-style: none;
  }
  /* スライド切り換え用ラジオボタンは常に非表示 */
  .slide_select {
    display: none;
  }
  /* 各スライド */
  .slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    width: 204px;
    height: 200px;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
  }
  /* 前へ次へボタン */
  .scroll_button {
    position: absolute;
    display: block;
    height: 15px;
    width: 15px;
    /* 縦中央から20px上の位置 */
    top: 50%;
    margin-top: -20px;
  /* 上辺と右辺のみ幅5pxの枠線 */
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: #656565;
    cursor: pointer;
    /* 普段はボタンはやや薄くする */
    opacity: 0.75;
  }

  /* ホバー時にボタンを強調 */
  .scroll_button:hover {
    opacity: 1;
  }
  /* 前へボタン */
  .scroll_prev {
    left: -30px;
    /* 上辺と右辺の枠線を回転して"＜"にする */
    transform: rotate(-135deg);
  }
  /* 次へボタン */
  .scroll_next {
    right: -30px;
    /* 上辺と右辺の枠線を回転して"＞"にする */
    transform: rotate(45deg);
  }
  /* スライド移動ボタンエリア */
  .move_controler {
    position: absolute;
    bottom: -50px;
    width: 100%;
    text-align: center;
  }
  /* スライド移動の各ボタン */
  .button_move {
    display: inline-block;
    height: 8px;
    width: 8px;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
    /* 普段はやや薄くする */
    opacity: 0.75;
  }
  /* スライド移動ボタンの色 */
  .button_move {
    background-color: #656565;
  }
  /* 1番目のスライド選択時 */
  /* 1番目のスライドの透明度を0にして表示する */
  .slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
  }
  /* スライド移動ボタンの1個目を明るくする */
  /* （今選択されていることが分かるように） */
  .slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
    opacity: 1;
  }

  .slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
    opacity: 1;
    
  }
  .slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(3):checked ~ .move_controler
    .button_move:nth-of-type(3) {
    opacity: 1;
  }
  .slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(4):checked
    ~ .move_controler
    .button_move:nth-of-type(4) {
    opacity: 1;
  }

  .slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(5):checked
    ~ .move_controler
    .button_move:nth-of-type(5) {
    opacity: 1;
  }

  .slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(6):checked
    ~ .move_controler
    .button_move:nth-of-type(6) {
    opacity: 1;
  }

  .slide_select:nth-of-type(7):checked ~ .slide:nth-of-type(7) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(7):checked
    ~ .move_controler
    .button_move:nth-of-type(7) {
    opacity: 1;
  }

  .slide_select:nth-of-type(8):checked ~ .slide:nth-of-type(8) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(8):checked
    ~ .move_controler
    .button_move:nth-of-type(8) {
    opacity: 1;
  }

  .slide_select:nth-of-type(9):checked ~ .slide:nth-of-type(9) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(9):checked
    ~ .move_controler
    .button_move:nth-of-type(9) {
    opacity: 1;
  }

  .slide_select:nth-of-type(10):checked ~ .slide:nth-of-type(10) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(10):checked
    ~ .move_controler
    .button_move:nth-of-type(10) {
    opacity: 1;
  }

  .slide_select:nth-of-type(11):checked ~ .slide:nth-of-type(11) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(11):checked
    ~ .move_controler
    .button_move:nth-of-type(11) {
    opacity: 1;
  }
  
  .slide_select:nth-of-type(12):checked ~ .slide:nth-of-type(12) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(12):checked
    ~ .move_controler
    .button_move:nth-of-type(12) {
    opacity: 1;
  }

  .slide_select:nth-of-type(13):checked ~ .slide:nth-of-type(13) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(13):checked
    ~ .move_controler
    .button_move:nth-of-type(13) {
    opacity: 1;
  }

  .slide_select:nth-of-type(14):checked ~ .slide:nth-of-type(14) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(14):checked
    ~ .move_controler
    .button_move:nth-of-type(14) {
    opacity: 1;
  }

  .slide_select:nth-of-type(15):checked ~ .slide:nth-of-type(15) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(15):checked
    ~ .move_controler
    .button_move:nth-of-type(15) {
    opacity: 1;
  }

  .slide_select:nth-of-type(16):checked ~ .slide:nth-of-type(16) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(16):checked
    ~ .move_controler
    .button_move:nth-of-type(16) {
    opacity: 1;
  }

  .slide_select:nth-of-type(17):checked ~ .slide:nth-of-type(17) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(17):checked
    ~ .move_controler
    .button_move:nth-of-type(17) {
    opacity: 1;
  }

  .tsuna {

    width: 204px;
    height: 200px;
}
    
        
        h4 {
    
            color: #44756f;
            font-size: 7vmin;
            font-weight: bold;
            font-family: "BIZ UDPゴシック";
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            text-align: center;
        
        }
    
        
        
        .annai1 {
        
            white-space: nowrap;
            color: #6ebcaa;
            font-size: 2.5vmin;
            font-family: "BIZ UDPゴシック";
            text-align: center;

        }
        

        .annai1-2 {
        
            color: #6ebcaa;
            font-size: 2.5vmin;
            font-family: "BIZ UDPゴシック";
            text-align: center;

        }
    
        .end{
    
           display: flex;
           flex-direction: column;
           flex-wrap: nowrap;
           justify-content: center;
           align-items: center;
           text-align: center;
           position: relative;
           top: 3150px;
          
        }

        #link {

            display: block;
            padding-top: 200px;
            margin-top: -200px;

        }
    
        .kimete {
    
            color: #6ebcaa;
            font-size: 2.8vmin;
            font-weight: bold;
            font-family: "BIZ UDPゴシック";

        }
    
        .annai2 {
    
            white-space: nowrap;
            color: #6ebcaa;
            font: bold 2.8vmin "BIZ UDPゴシック";
        
        }
        
        .drecome a {
        
            color: #44756f;
            font: bold 5vmin "BIZ UDPゴシック";
            text-decoration: none;
        
        }
        
        .drecome a:hover {
        
            color: #aed8d0;
            font: bold 4.8vw "BIZ UDPゴシック";
            text-decoration: none;
        
        }
    
        /* ここまでメイン */
    
        /* ここから320px幅フッター */
    
        .last{
            
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            height: 200px;
            background-color: #7cc3c3;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: relative;
            top: 3750px;
        
        }
        
        .dregroup {
        
            width: 130px;
        }
        
        .tophe {
        
            text-align: center;
            color: #aed8d0;
            font-size: 3vmin;
            font-family:"BIZ UDPゴシック";
        
        
        }
    
        .tophe a {
    
            color: #aed8d0;
            font: 3vmin "BIZ UDPゴシック";
            text-decoration: none;
        }
    
        .copy {
            
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 25px;
            background-color: #57b6ae;
            position: relative;
            top: 3750px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            text-align: center;

        }
        
        .copyrighthyouki {
        
            font: 2vmin "BIZ UDPゴシック";
            color: white;
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;
        }
        
        /* 終了 */
    
        
        
    }

@media screen and (min-width:321px) and (max-width:480px) {


    /* 321px~480px幅のヘッダー */

    .menu-btn {

        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #44756f;
        clip-path: circle(50%);
        height: 4em;
        width: 4em;

    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {

        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;

    }

    .menu-btn span:before {

        bottom: 8px;

    }

    .menu-btn span:after {

        top: 8px;

    }

    /* ×印の設定 */

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

        /* ×印の設定 */

    #menu-btn-check {
        display: none;
    } /* チェックボックス非表示 */

    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 1vmin; /* リスト文字のフォントサイズ */
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
        white-space: nowrap;

    }

    .menu-content {
        width: 100%; /* メニュー画面の幅 */
        height: 100%; /* メニュー画面の高さ */
        position: fixed;
        top: 0;
        left: 100%;/* 画面外へメニュー飛ばし！ */
        z-index: 80;
        background-color: #44756f;
        transition: all 0.5s;/*アニメーション設定*/
    }

    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ(飛び出し具合いじれる)*/

    }

    .menu-content ul {
        padding: 70px 10px 0; /* メニューコンテンツの余白幅 */
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px; /* リスト文字のフォントサイズ */
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
        white-space: nowrap;

    }
    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;

    }

    #dlogo {

        width: 50px;
    }

    /* ここまでヘッダー */

    /* ここから321px~480px幅メイン */

    #gattai {

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    
    }
    
    
    .sitetitle {
    
        white-space: nowrap;
        color:#44756f;
        font-size: 5.5vw;
        font-family: "BIZ UDPゴシック";
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }

    .about {

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        text-align: center;
        align-items: center;
        position: relative;
        top: 950px;

        
    }

    h1 {

        font-weight: bold;
        font-size: 6vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
        text-align: center;
    
    }

    #story {

        display: block;
        padding-top: 170px;
        margin-top: -170px;

    }

    .bunsyo{

        white-space: nowrap;
        font-size: 2.2vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;


    }

    #syatsuillust {

        width: 80%;
        height: auto;
        object-fit: cover;
    }

    .history {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      position: relative;
      top: 1750px;
    
    }

    h2 {

        font-weight: bold;
        font-size: 6vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    
    }

    #setsumei {

        display: block;
        padding-top: 20px;
        margin-top: -20px;

    }

    .mojiG1 {

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        text-align: center;
        align-items: center;

    }



    .bunsyo2 {

        white-space: nowrap;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }
    

    .bunsyo3 {
    
        white-space: nowrap;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    }


    .mojiG2 {

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;

    }


    .bunsyo4 {

        white-space: nowrap;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;

    }

    .jissekirebyu {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      top: 2150px;

    }

    h3 {

        font-weight: bold;
        font-size: 7vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    #hanbai {

        display: block;
        padding-top: 75px;
        margin-top: -75px;

    }

    .mojiG3 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;

  }
    
    .moji {
    
        text-align: center;

    }

    
    .bunsyo5 {
    
        white-space: nowrap;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
        line-height: normal;
    
    }

    .aka {

        font-weight: bold;
        color: red;
        font-size: 5.5vmin;
        font-family: "BIZ UDPゴシック";
    
    }

    .mojiG4 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;

  }
    
    
    .moji2 {

        text-align: center;
        
    }
    
    .bunsyo6 {
    
    
        white-space: nowrap;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }
    
    .bunsyo7 {
    
        white-space: nowrap;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    .bunsyo8 {
    
        text-align: center;
        white-space: nowrap;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    .pc {

        display: inline;

    }

    .collection {

        position: relative;
        top: 3150px;
        width: 100%;
        height: 100%;

    }

    
    h4 {

        color: #44756f;
        font-size: 6vmin;
        font-weight: bold;
        font-family: "BIZ UDPゴシック";
        text-align: center;
        
    }

    #desa {

        display: block;
        padding-top: 75px;
        margin-top: -75px;

    }


/* カルーセル全体 */
.carousel {
    /* 水平方向中央寄せ */
    display: flex;
    justify-content: center;
  }
  /* カルーセル内容 */
  .contains {
    /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    width: 204px;
    height: 200px;
    overflow: visible;
    position: relative;
    padding: 0;
    list-style: none;
  }
  /* スライド切り換え用ラジオボタンは常に非表示 */
  .slide_select {
    display: none;
  }
  /* 各スライド */
  .slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    width: 204px;
    height: 200px;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
  }
  /* 前へ次へボタン */
  .scroll_button {
    position: absolute;
    display: block;
    height: 15px;
    width: 15px;
    /* 縦中央から20px上の位置 */
    top: 50%;
    margin-top: -20px;
  /* 上辺と右辺のみ幅5pxの枠線 */
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: #656565;
    cursor: pointer;
    /* 普段はボタンはやや薄くする */
    opacity: 0.75;
    /* スライドよりも前面にする */
    z-index: 3;
  }

  /* ホバー時にボタンを強調 */
  .scroll_button:hover {
    opacity: 1;
  }
  /* 前へボタン */
  .scroll_prev {
    left: -30px;
    /* 上辺と右辺の枠線を回転して"＜"にする */
    transform: rotate(-135deg);
  }
  /* 次へボタン */
  .scroll_next {
    right: -30px;
    /* 上辺と右辺の枠線を回転して"＞"にする */
    transform: rotate(45deg);
  }
  /* スライド移動ボタンエリア */
  .move_controler {
    position: absolute;
    bottom: -50px;
    width: 100%;
    text-align: center;
    z-index: 18;
  }
  /* スライド移動の各ボタン */
  .button_move {
    display: inline-block;
    height: 8px;
    width: 8px;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
    /* 普段はやや薄くする */
    opacity: 0.75;
    /* スライドより前面にする */
    z-index: 2;
  }
  /* スライド移動ボタンの色 */
  .button_move {
    background-color: #656565;
  }
  /* 1番目のスライド選択時 */
  /* 1番目のスライドの透明度を0にして表示する */
  .slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
  }
  /* スライド移動ボタンの1個目を明るくする */
  /* （今選択されていることが分かるように） */
  .slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
    opacity: 1;
  }

  .slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
    opacity: 1;
    
  }
  .slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(3):checked ~ .move_controler
    .button_move:nth-of-type(3) {
    opacity: 1;
  }
  .slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(4):checked
    ~ .move_controler
    .button_move:nth-of-type(4) {
    opacity: 1;
  }

  .slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(5):checked
    ~ .move_controler
    .button_move:nth-of-type(5) {
    opacity: 1;
  }

  .slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(6):checked
    ~ .move_controler
    .button_move:nth-of-type(6) {
    opacity: 1;
  }

  .slide_select:nth-of-type(7):checked ~ .slide:nth-of-type(7) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(7):checked
    ~ .move_controler
    .button_move:nth-of-type(7) {
    opacity: 1;
  }

  .slide_select:nth-of-type(8):checked ~ .slide:nth-of-type(8) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(8):checked
    ~ .move_controler
    .button_move:nth-of-type(8) {
    opacity: 1;
  }

  .slide_select:nth-of-type(9):checked ~ .slide:nth-of-type(9) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(9):checked
    ~ .move_controler
    .button_move:nth-of-type(9) {
    opacity: 1;
  }

  .slide_select:nth-of-type(10):checked ~ .slide:nth-of-type(10) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(10):checked
    ~ .move_controler
    .button_move:nth-of-type(10) {
    opacity: 1;
  }

  .slide_select:nth-of-type(11):checked ~ .slide:nth-of-type(11) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(11):checked
    ~ .move_controler
    .button_move:nth-of-type(11) {
    opacity: 1;
  }
  
  .slide_select:nth-of-type(12):checked ~ .slide:nth-of-type(12) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(12):checked
    ~ .move_controler
    .button_move:nth-of-type(12) {
    opacity: 1;
  }

  .slide_select:nth-of-type(13):checked ~ .slide:nth-of-type(13) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(13):checked
    ~ .move_controler
    .button_move:nth-of-type(13) {
    opacity: 1;
  }

  .slide_select:nth-of-type(14):checked ~ .slide:nth-of-type(14) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(14):checked
    ~ .move_controler
    .button_move:nth-of-type(14) {
    opacity: 1;
  }

  .slide_select:nth-of-type(15):checked ~ .slide:nth-of-type(15) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(15):checked
    ~ .move_controler
    .button_move:nth-of-type(15) {
    opacity: 1;
  }

  .slide_select:nth-of-type(16):checked ~ .slide:nth-of-type(16) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(16):checked
    ~ .move_controler
    .button_move:nth-of-type(16) {
    opacity: 1;
  }

  .slide_select:nth-of-type(17):checked ~ .slide:nth-of-type(17) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(17):checked
    ~ .move_controler
    .button_move:nth-of-type(17) {
    opacity: 1;
  }

  .tsuna {

    width: 204px;
    height: 200px;
}

  
    
    .annai1 {
    
        white-space: nowrap;
        color: #6ebcaa;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        text-align: center;
    
    }
    .annai1-2 {
    
        white-space: nowrap;
        color: #6ebcaa;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        text-align: center;
    
    }

    .end{

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      top: 3750px;

    }

    .kimete {

        color: #6ebcaa;
        font-size: 3vmin;
        font-weight: bold;
        font-family: "BIZ UDPゴシック";

    }

    #link {

        display: block;
        padding-top: 200px;
        margin-top: -200px;

    }

    .annai2 {

        white-space: nowrap;
        color: #6ebcaa;
        font: bold 3vmin "BIZ UDPゴシック";

    
    }
    
    .drecome a {
    
        color: #44756f;
        font: bold 6vmin "BIZ UDPゴシック";
        text-decoration: none;
    
    }
    
    .drecome a:hover {
    
        color: #aed8d0;
        font: bold 6vmin "BIZ UDPゴシック";
        text-decoration: none;
    
    }

    /* ここまでメイン */

    /* ここから321px~480px幅フッター */

    .last{

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 200px;
        background-color: #7cc3c3;
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: relative;
        top: 4250px;
    
    }
    
    .dregroup {
    
        width: 130px;

    }
    
    .tophe {
    
        white-space: nowrap;
        color: #aed8d0;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        
    }

    .tophe a {

        color: #aed8d0;
        font-family: "BIZ UDPゴシック";
        text-decoration: none;
    }

    .copy {

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 35px;
        background-color: #57b6ae;
        background-repeat: no-repeat;
        background-attachment: fixed;
        text-align: center;
        position: relative;
        top: 4250px;
        
    }
    
    .copyrighthyouki {
    
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: white;
        
    }
    
    /* 終了 */

    
    
}

@media screen and (min-width:481px) and (max-width:1024px) {


    /* ここから481px～1024px幅のヘッダー */

    .menu-btn {

        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #44756f;
        clip-path: circle(50%);
        height: 4em;
        width: 4em;

    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {

        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;

    }

    .menu-btn span:before {

        bottom: 8px;

    }

    .menu-btn span:after {

        top: 8px;

    }

    /* ×印の設定 */

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

        /* ×印の設定 */

    #menu-btn-check {
        display: none;
    } /* チェックボックス非表示 */

    .menu-content {
        width: 50%; /* メニュー画面の幅 */
        height: 100%; /* メニュー画面の高さ */
        position: fixed;
        top: 0;
        left: 100%;/* 画面外へメニュー飛ばし！ */
        z-index: 80;
        background-color: #44756f;
        transition: all 0.5s;/*アニメーション設定*/
    }

    .menu-content ul {
        padding: 70px 10px 0; /* メニューコンテンツの余白幅 */
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }

    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px; /* リスト文字のフォントサイズ */
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
        white-space: nowrap;

    }

    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;

    }


    #menu-btn-check:checked ~ .menu-content {
        left: 50%;/*メニューを画面内へ(飛び出し具合いじれる)*/

    }


    #dlogo {

        width: 65px;
    }

    #gattai {

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    
    }
    
    
    .sitetitle {

        white-space: nowrap;
        color:#44756f;
        font-size: 5.5vw;
        font-family: "BIZ UDPゴシック";
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    
    }
    
    /* ここまでヘッダー */

    /* ここからメイン */

.about {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  position: relative;
  top: 1250px;
    
}

h1 {

    font-weight: bold;
    font-size: 6vmin;
    font-family: "BIZ UDPゴシック";
    color: #44756f;

}

#story {

    display: block;
    padding-top: 250px;
    margin-top: -250px;

}

    .bunsyo{

        white-space: nowrap;
        font-size: 2.3vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;

    }


    #syatsuillust {

        width: 70%;
        height: auto;

    }


    #setsumei {

        display: block;
        padding-top: 20px;
        margin-top: -20px;

    }

    .history{

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      position: relative;
      top: 1750px;

    }
    
    .mojiG1 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      top: -250px;

    }

    h2 {

        font-weight: bold;
        font-size: 6vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    
    }



    .bunsyo2 {

        white-space: nowrap;
        font-size: 2.2vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
        text-align: center;
    
    }


    .bunsyo3 {
    
        white-space: nowrap;
        font-size: 2.2vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
        text-align: center;

    }

    .mojiG2 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      top: 20px;

    }

    .bunsyo4 {

        white-space: nowrap;
        font-size: 2.2vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    .mojiG3 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      top: -250px;
    

    }

    h3 {

        font-weight: bold;
        font-size: 4vmax;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
        text-align: center;
    
    }

    .jissekirebyu {

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      position: relative;
      top: 2450px;
      
    }

    .mojiG4 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;

    }

    #hanbai {

        display: block;
        padding-top: 120px;
        margin-top: -120px;

    }
    
    .moji {
    
        text-align: center;
    
    }
    
    .bunsyo5 {
    
        white-space: nowrap;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    .aka {

        font-weight: bold;
        color: red;
        font-size: 5vmin;
        font-family: "BIZ UDPゴシック";
    
    }


    .mojiG5 {

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;

    }

    
    
    .moji2 {
    
        text-align: center;
    
    
    }
    
    .bunsyo6 {
    
    
        white-space: nowrap;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }
    
    .bunsyo7 {
    
        white-space: nowrap;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    .bunsyo8 {
    
        white-space: nowrap;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        color: #44756f;
    
    }

    .pc {

        display: inline;
    
    }

    .collection {

        position: relative;
        top: 3750px;
        width: 100%;
        height: 100%;

    }

    #desa {

        display: block;
        padding-top: 5x;
        margin-top: -5px;

    }

    h4 {

        color: #44756f;
        font-size: 6vmin;
        font-weight: bold;
        font-family: "BIZ UDPゴシック";
        text-align: center;
    
    }

/* カルーセル全体 */
.carousel {
    /* 水平方向中央寄せ */
    display: flex;
    justify-content: center;
  }
  /* カルーセル内容 */
  .contains {
    /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    width: 354px;
    height: 350px;
    overflow: visible;
    position: relative;
    padding: 0;
    list-style: none;
  }
  /* スライド切り換え用ラジオボタンは常に非表示 */
  .slide_select {
    display: none;
  }
  /* 各スライド */
  .slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    width: 354px;
    height: 350px;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
  }
  /* 前へ次へボタン */
  .scroll_button {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    /* 縦中央から20px上の位置 */
    top: 50%;
    margin-top: -20px;
  /* 上辺と右辺のみ幅5pxの枠線 */
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: #656565;
    cursor: pointer;
    /* 普段はボタンはやや薄くする */
    opacity: 0.75;
    /* スライドよりも前面にする */
    z-index: 3;
  }

  /* ホバー時にボタンを強調 */
  .scroll_button:hover {
    opacity: 1;
  }
  /* 前へボタン */
  .scroll_prev {
    left: -30px;
    /* 上辺と右辺の枠線を回転して"＜"にする */
    transform: rotate(-135deg);
  }
  /* 次へボタン */
  .scroll_next {
    right: -30px;
    /* 上辺と右辺の枠線を回転して"＞"にする */
    transform: rotate(45deg);
  }
  /* スライド移動ボタンエリア */
  .move_controler {
    position: absolute;
    bottom: -50px;
    width: 100%;
    text-align: center;
    z-index: 18;
  }
  /* スライド移動の各ボタン */
  .button_move {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
    /* 普段はやや薄くする */
    opacity: 0.75;
    /* スライドより前面にする */
    z-index: 2;
  }
  /* スライド移動ボタンの色 */
  .button_move {
    background-color: #656565;
  }
  /* 1番目のスライド選択時 */
  /* 1番目のスライドの透明度を0にして表示する */
  .slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
  }
  /* スライド移動ボタンの1個目を明るくする */
  /* （今選択されていることが分かるように） */
  .slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
    opacity: 1;
  }

  .slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
    opacity: 1;
    
  }
  .slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(3):checked ~ .move_controler
    .button_move:nth-of-type(3) {
    opacity: 1;
  }
  .slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(4):checked
    ~ .move_controler
    .button_move:nth-of-type(4) {
    opacity: 1;
  }

  .slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(5):checked
    ~ .move_controler
    .button_move:nth-of-type(5) {
    opacity: 1;
  }

  .slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(6):checked
    ~ .move_controler
    .button_move:nth-of-type(6) {
    opacity: 1;
  }

  .slide_select:nth-of-type(7):checked ~ .slide:nth-of-type(7) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(7):checked
    ~ .move_controler
    .button_move:nth-of-type(7) {
    opacity: 1;
  }

  .slide_select:nth-of-type(8):checked ~ .slide:nth-of-type(8) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(8):checked
    ~ .move_controler
    .button_move:nth-of-type(8) {
    opacity: 1;
  }

  .slide_select:nth-of-type(9):checked ~ .slide:nth-of-type(9) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(9):checked
    ~ .move_controler
    .button_move:nth-of-type(9) {
    opacity: 1;
  }

  .slide_select:nth-of-type(10):checked ~ .slide:nth-of-type(10) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(10):checked
    ~ .move_controler
    .button_move:nth-of-type(10) {
    opacity: 1;
  }

  .slide_select:nth-of-type(11):checked ~ .slide:nth-of-type(11) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(11):checked
    ~ .move_controler
    .button_move:nth-of-type(11) {
    opacity: 1;
  }
  
  .slide_select:nth-of-type(12):checked ~ .slide:nth-of-type(12) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(12):checked
    ~ .move_controler
    .button_move:nth-of-type(12) {
    opacity: 1;
  }

  .slide_select:nth-of-type(13):checked ~ .slide:nth-of-type(13) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(13):checked
    ~ .move_controler
    .button_move:nth-of-type(13) {
    opacity: 1;
  }

  .slide_select:nth-of-type(14):checked ~ .slide:nth-of-type(14) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(14):checked
    ~ .move_controler
    .button_move:nth-of-type(14) {
    opacity: 1;
  }

  .slide_select:nth-of-type(15):checked ~ .slide:nth-of-type(15) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(15):checked
    ~ .move_controler
    .button_move:nth-of-type(15) {
    opacity: 1;
  }

  .slide_select:nth-of-type(16):checked ~ .slide:nth-of-type(16) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(16):checked
    ~ .move_controler
    .button_move:nth-of-type(16) {
    opacity: 1;
  }

  .slide_select:nth-of-type(17):checked ~ .slide:nth-of-type(17) {
    opacity: 1;
    z-index: 1;
  }
  .slide_select:nth-of-type(17):checked
    ~ .move_controler
    .button_move:nth-of-type(17) {
    opacity: 1;
  }

  .tsuna {

    width: 354px;
    height: 350px;
}


    
    
    .annai1 {
    
        white-space: nowrap;
        color: #6ebcaa;
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        text-align: center;
    
    }

    .annai1-2 {
    
      white-space: nowrap;
      color: #6ebcaa;
      font-size: 3vmin;
      font-family: "BIZ UDPゴシック";
      text-align: center;
  
  }

    .kimete {

        color: #6ebcaa;
        font-size: 2.7vmin;
        font-weight: bold;
        font-family: "BIZ UDPゴシック";

    }

    .end{

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      top: 4350px;

    }

    #link {

        display: block;
        padding-top: 200px;
        margin-top: -200px;

    }


    .drecome {

        color: #6ebcaa;
        font: bold 6vmin "BIZ UDPゴシック";
    }
    
    .drecome a {
    
        color: #44756f;
        font: bold 6vmin "BIZ UDPゴシック";
        text-decoration: none;
    
    }

    .annai2 {

        white-space: nowrap;
        color: #6ebcaa;
        font: bold 2.7vmin "BIZ UDPゴシック";
        text-align: center;
    
    }

    /* ここまでメイン */

    /* ここからフッター */

    .last{

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 200px;
        background-color: #7cc3c3;
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: relative;
        top: 5250px;
    
    }
    
    .dregroup {
    
        width: 130px;

    }
    
    .tophe {
    
        color: #aed8d0;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        text-align: center;
    
    
    }
    
    .tophe a {
    
        color: #aed8d0;
        font-size: 2.5vmin;
        font-family: "BIZ UDPゴシック";
        text-decoration: none;
        text-align: center;

    }
    
    
    .copy {
    
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 35px;
        background-color: #57b6ae;
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: relative;
        top: 5250px;
        text-align: center;

    }
    
    
    .copyrighthyouki {
    
        font-size: 3vmin;
        font-family: "BIZ UDPゴシック";
        color: white;

    }
    
    /* 終了 */

}