@charset "UTF-8";
/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1181px) {

.container{
    width: 100%;
}

.header{
    width: 100%;
    display: flex;
    background-color: rgba(136, 190, 219, 0.861);
}

.header img{
    width: 260px;
    padding-left: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.btn{
    padding-left: 75%;
    padding-top: 20px;
}

/* 全体のリセット */
body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ヘッダー */
header {
    position: relative;
    width: 100%;
    background: #3498db;
    padding: 15px;
}

/* ハンバーガーメニューのボタン */
.hamburger-menu {
    position: absolute;
    top: 30px;
    right: 60px;
    width: 40px;
    height: 30px;
    cursor: pointer;
    z-index: 1000;
}

/* ハンバーガーメニューの3本線 */
.hamburger-menu span {
    display: block;
    width: 100%;
    height: 5px;
    background: #fff;
    margin: 5px 0;
    transition: 0.3s;
}

/* ナビゲーションメニュー */
.nav-menu {
    position: fixed;
    top: 0;
    right: -250px;  /* 初期状態では画面外 */
    width: 250px;
    height: 100vh;
    background: #2c3e50;
    transition: 0.3s;
    padding-top: 60px;
    z-index: 1000; /* 他の要素より前面に表示 */
}

/* メニューのリスト */
.nav-menu ul {
    text-align: center;
}

.nav-menu li {
    padding: 15px 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

/* メニューが開いたときのスタイル */
.nav-menu.active {
    right: 0; /* 画面内に表示 */
}

/* ハンバーガーメニューのアニメーション（開いた時） */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
/*==================================================
スライダーのためのcss
===================================*/


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

/*メイン画像下に余白をつける*/

.gallery{
	margin:0 0 5px 0;
    text-align: center;
}

.gallery img{
    width: 70%;
    display: block;
    margin: 0 auto;
    padding-top: 10%;
}

/*矢印の設定*/

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

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

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

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

.choice-btn li{
	cursor: pointer;
	outline: none;
	background: white;
	width:25%!important;
    padding-left: 10px;
}

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

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

.choice-btn .slick-track {
	transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
}

/*========= レイアウトのためのCSS ===============*/
ul{
	margin:0;
	padding: 0;
	list-style: none;
}

.price{
    width: 80%;
    margin: 0 auto;
    display: flex;
}

.price1{
    width: 50%;
    padding-left: 15%;
    padding-top: 10%;
    line-height: 1,7;
    letter-spacing: 2px;
}

.price1 h1{
    font-size: 24px;
}

.price2 h2{
    padding-left: 25%;
    padding-top: 30px;
}

.price3{
    width: 100%;
    padding-top: 10%;
}

.btn--orange,
a.btn--orange {
  color: whitesmoke;
  background-color: rgb(235, 183, 86);
  padding: 12px 60px; /* ボタン内の余白（高さと横幅）を調整 */
  font-size: 14px; /* フォントサイズを調整 */
  text-decoration: none;
}

a.btn--radius {
   border-radius: 100vh;
}


.price4{
    width: 40%;
    margin-top: 40px;
}

.price4 h4{
    font-size: 24px;
}

/* テーブルのスタイル */
.shipping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

/* 各セルのスタイル */
.shipping-table td {
    padding: 10px;
    border-bottom: 1px solid #999999; /* 各行の下に線を引く */
}

/* 価格を右寄せにする */
.shipping-table td:last-child {
    text-align: left;
}

/* 注意書きのスタイル */
.note {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

/* テーブルのスタイル */
.shipping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

/* 地区と料金の間に縦線を追加 */
.shipping-table td:nth-child(1) {
    border-right: 1px solid #999999; /* 1列目の右側に線 */
}




/* --------------------------------------------------------------------------------
Tabのレイアウト
-------------------------------------------------------------------------------- */
/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
    padding-top: 15%;
}

.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
}

/*エリアの表示非表示と形状*/
.area {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: opacity 0.5s ease, height 0.5s ease;
}

.area.is-active {
    visibility: visible;
    opacity: 1;
    height: auto;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



/*========= レイアウトのためのCSS ===============*/

ul{
	list-style:none;
    text-align: center;
}

a{
	color:#333;
	text-decoration: none;
}

.wrapper{
	width:100%;
	max-width: 960px;
	margin:30px auto;
    margin-top: 10%;
    background:#fefefe;
}

.area li{
	padding: 10px; 
	border-bottom: 1px solid #ddd;
}

.area ul{
    display: flex;
}

.footer {
    width: 100%;
    text-align: center;
    display: flex;
    margin-top: 20%;
    background-color: rgba(136, 190, 219, 0.861);
}

.fotter1{
    width: 15%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-left: 42%;
}

.footer1 img{
    width: 100px;
}

.fotter2{
    width: 30%;
    color: whitesmoke;
    padding-top: 110px;
    font-size: 11px;
}

.fotter3{
    text-align: left;
    padding-left: 100px;
}

.fotter4{
    text-align: left;
    padding-left: 110px;
}
}

body{
    overflow: hidden;
}
















/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:600px) and (max-width:1180px) {
    .container{
        width: 100%;
    }
    
    .header{
        width: 100%;
        display: flex;
        background-color: rgba(136, 190, 219, 0.861);
    }
    
    .header img{
        width: 260px;
        padding-left: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .btn{
        padding-left: 75%;
        padding-top: 20px;
    }
    
    /* 全体のリセット */
    body, ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    /* ヘッダー */
    header {
        position: relative;
        width: 100%;
        background: #3498db;
        padding: 15px;
    }
    
    /* ハンバーガーメニューのボタン */
    .hamburger-menu {
        position: absolute;
        top: 30px;
        right: 60px;
        width: 40px;
        height: 30px;
        cursor: pointer;
        z-index: 1000;
    }
    
    /* ハンバーガーメニューの3本線 */
    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 5px;
        background: #fff;
        margin: 5px 0;
        transition: 0.3s;
    }
    
    /* ナビゲーションメニュー */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -250px;  /* 初期状態では画面外 */
        width: 250px;
        height: 100vh;
        background: #2c3e50;
        transition: 0.3s;
        padding-top: 60px;
        z-index: 1000; /* 他の要素より前面に表示 */
    }
    
    /* メニューのリスト */
    .nav-menu ul {
        text-align: center;
    }
    
    .nav-menu li {
        padding: 15px 0;
    }
    
    .nav-menu a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        display: block;
    }
    
    /* メニューが開いたときのスタイル */
    .nav-menu.active {
        right: 0; /* 画面内に表示 */
    }
    
    /* ハンバーガーメニューのアニメーション（開いた時） */
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
    /*==================================================
    スライダーのためのcss
    ===================================*/
    
    
    /*画像の横幅を100%にしてレスポンシブ化*/
    img{
        width: 100%;
        height: auto;
        vertical-align: bottom;/*画像の下にできる余白を削除*/
    }
    
    /*メイン画像下に余白をつける*/
    
    .gallery{
        margin:0 0 5px 0;
        text-align: center;
    }
    
    .gallery img{
        width: 70%;
        display: block;
        margin: 0 auto;
        padding-top: 10%;
    }
    
    /*矢印の設定*/
    
    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        position: absolute;/*絶対配置にする*/
        z-index: 3;
        top: 55%;
        transform: translateY(-50%);
        cursor: pointer;/*マウスカーソルを指マークに*/
        outline: none;/*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #ccc;/*矢印の色*/
        border-right: 2px solid #ccc;/*矢印の色*/
        height: 25px;
        width: 25px;
    }
    
    .slick-prev {/*戻る矢印の位置と形状*/
        left:12%;
        transform: rotate(-135deg);
    }
    
    .slick-next {/*次へ矢印の位置と形状*/
        right:12%;
        transform: rotate(45deg);
    }
    
    /*選択するサムネイル画像の設定*/
    
    .choice-btn li{
        cursor: pointer;
        outline: none;
        background: white;
        width:25%!important;
        padding-left: 10px;
    }
    
    .choice-btn li img{
        opacity: 0.4;/*選択されていないものは透過40%*/
    }
    
    .choice-btn li.slick-current img{
        opacity: 1;/*選択されているものは透過しない*/
    }
    
    .choice-btn .slick-track {
        transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
    }
    
    /*========= レイアウトのためのCSS ===============*/
    ul{
        margin:0;
        padding: 0;
        list-style: none;
    }
    
    .price{
        width: 80%;
        margin: 0 auto;
        display: flex;
    }
    
    .price1{
        width: 50%;
        padding-left: 15%;
        padding-top: 10%;
        line-height: 1,7;
        letter-spacing: 2px;
    }
    
    .price1 h1{
        font-size: 24px;
    }
    
    .price2 h2{
        padding-left: 25%;
        padding-top: 30px;
    }
    
    .price3{
        width: 100%;
        padding-top: 10%;
    }
    
    .btn--orange,
    a.btn--orange {
      color: whitesmoke;
      background-color: rgb(235, 183, 86);
      padding: 12px 60px; /* ボタン内の余白（高さと横幅）を調整 */
      font-size: 14px; /* フォントサイズを調整 */
      text-decoration: none;
    }
    
    a.btn--radius {
       border-radius: 100vh;
    }
    
    
    .price4{
        width: 40%;
        margin-top: 40px;
    }
    
    .price4 h4{
        font-size: 24px;
    }
    
    /* テーブルのスタイル */
    .shipping-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 16px;
    }
    
    /* 各セルのスタイル */
    .shipping-table td {
        padding: 10px;
        border-bottom: 1px solid #999999; /* 各行の下に線を引く */
    }
    
    /* 価格を右寄せにする */
    .shipping-table td:last-child {
        text-align: left;
    }
    
    /* 注意書きのスタイル */
    .note {
        margin-top: 10px;
        font-size: 14px;
        color: #555;
    }
    
    /* テーブルのスタイル */
    .shipping-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 18px;
    }
    
    /* 地区と料金の間に縦線を追加 */
    .shipping-table td:nth-child(1) {
        border-right: 1px solid #999999; /* 1列目の右側に線 */
    }
    
    
    
    
    /* --------------------------------------------------------------------------------
    Tabのレイアウト
    -------------------------------------------------------------------------------- */
    /*tabの形状*/
    .tab{
        display: flex;
        flex-wrap: wrap;
        padding-top: 15%;
    }
    
    .tab li a{
        display: block;
        background:#ddd;
        margin:0 2px;
        padding:10px 20px;
    }
    /*liにactiveクラスがついた時の形状*/
    .tab li.active a{
        background:#fff;
    }
    
    /*エリアの表示非表示と形状*/
    .area {
        visibility: hidden;
        opacity: 0;
        height: 0;
        transition: opacity 0.5s ease, height 0.5s ease;
    }
    
    .area.is-active {
        visibility: visible;
        opacity: 1;
        height: auto;
    }
    
    @keyframes displayAnime{
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    
    
    /*========= レイアウトのためのCSS ===============*/
    
    ul{
        list-style:none;
        text-align: center;
    }
    
    a{
        color:#333;
        text-decoration: none;
    }
    
    .wrapper{
        width:100%;
        max-width: 960px;
        margin:30px auto;
        background:#fefefe;
    }
    
    .area li{
        padding: 10px; 
        border-bottom: 1px solid #ddd;
    }
    
    .area ul{
        display: flex;
    }
    
    .footer {
        width: 100%;
        text-align: center;
        margin-top: 20%;
        display: flex;
        background-color: rgba(136, 190, 219, 0.861);
    }
    
    .fotter1{
        width: 15%;
        padding-top: 50px;
        padding-bottom: 50px;
        margin-left: 42%;
    }
    
    .footer1 img{
        width: 100px;
    }
    
    .fotter2{
        width: 30%;
        color: whitesmoke;
        padding-top: 110px;
        font-size: 11px;
    }
    
    .fotter3{
        text-align: left;
        padding-left: 100px;
    }
    
    .fotter4{
        text-align: left;
        padding-left: 110px;
    }       
}

body{
    overflow: hidden;
}























/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 599px) {
    .container{
        width: 100%;
    }
    
    .header{
        width: 100%;
        display: flex;
        background-color: rgba(136, 190, 219, 0.861);
    }
    
    .header img{
        width: 180px;
        padding-left: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .btn{
        padding-left: 75%;
        padding-top: 20px;
    }
    
    /* 全体のリセット */
    body, ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    /* ヘッダー */
    header {
        position: relative;
        width: 100%;
        background: #3498db;
        padding: 15px;
    }
    
    /* ハンバーガーメニューのボタン */
    .hamburger-menu {
        position: absolute;
        top: 30px;
        right: 60px;
        width: 40px;
        height: 30px;
        cursor: pointer;
        z-index: 1000;
    }
    
    /* ハンバーガーメニューの3本線 */
    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 5px;
        background: #fff;
        margin: 5px 0;
        transition: 0.3s;
    }
    
    /* ナビゲーションメニュー */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -250px;  /* 初期状態では画面外 */
        width: 250px;
        height: 100vh;
        background: #2c3e50;
        transition: 0.3s;
        padding-top: 60px;
        z-index: 1000; /* 他の要素より前面に表示 */
    }
    
    /* メニューのリスト */
    .nav-menu ul {
        text-align: center;
    }
    
    .nav-menu li {
        padding: 15px 0;
    }
    
    .nav-menu a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        display: block;
    }
    
    /* メニューが開いたときのスタイル */
    .nav-menu.active {
        right: 0; /* 画面内に表示 */
    }
    
    /* ハンバーガーメニューのアニメーション（開いた時） */
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
    /*==================================================
    スライダーのためのcss
    ===================================*/
    
    
    /*画像の横幅を100%にしてレスポンシブ化*/
    img{
        width: 100%;
        height: auto;
        vertical-align: bottom;/*画像の下にできる余白を削除*/
    }
    
    /*メイン画像下に余白をつける*/
    
    .gallery{
        margin:0 0 5px 0;
        text-align: center;
    }
    
    .gallery img{
        width: 70%;
        display: block;
        margin: 0 auto;
        padding-top: 10%;
    }
    
    /*矢印の設定*/
    
    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        position: absolute;/*絶対配置にする*/
        z-index: 3;
        top: 55%;
        transform: translateY(-50%);
        cursor: pointer;/*マウスカーソルを指マークに*/
        outline: none;/*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #ccc;/*矢印の色*/
        border-right: 2px solid #ccc;/*矢印の色*/
        height: 25px;
        width: 25px;
    }
    
    .slick-prev {/*戻る矢印の位置と形状*/
        left:12%;
        transform: rotate(-135deg);
    }
    
    .slick-next {/*次へ矢印の位置と形状*/
        right:12%;
        transform: rotate(45deg);
    }
    
    /*選択するサムネイル画像の設定*/
    
    .choice-btn li{
        cursor: pointer;
        outline: none;
        background: white;
        width:25%!important;
        padding-left: 10px;
    }
    
    .choice-btn li img{
        opacity: 0.4;/*選択されていないものは透過40%*/
    }
    
    .choice-btn li.slick-current img{
        opacity: 1;/*選択されているものは透過しない*/
    }
    
    .choice-btn .slick-track {
        transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
    }
    
    /*========= レイアウトのためのCSS ===============*/
    ul{
        margin:0;
        padding: 0;
        list-style: none;
    }
    
    .price{
        width: 80%;
        margin: 0 auto;
    }
    
    .price1{
        width: 100%;
        padding-left: 15%;
        padding-top: 20%;
        line-height: 1,7;
        letter-spacing: 2px;
        font-size: 16px;
    }
    
    .price1 h1{
        font-size: 18px;
    }
    
    .price2 h2{
        padding-left: 25%;
        padding-top: 20px;
        font-size: 18px;
    }
    
    .price3{
        width: 100%;
        padding-top: 10%;
    }
    
    .btn--orange,
    a.btn--orange {
      color: whitesmoke;
      background-color: rgb(235, 183, 86);
      padding: 12px 30px; /* ボタン内の余白（高さと横幅）を調整 */
      font-size: 14px; /* フォントサイズを調整 */
      text-decoration: none;
      margin-left: 40px;
    }
    
    a.btn--radius {
       border-radius: 100vh;
    }
    
    
    .price4{
        width: 100%;
        margin-top: 80px;
        font-size: 8px;
    }
    
    .price4 h4{
        font-size: 24px;
    }
    
    /* テーブルのスタイル */
    .shipping-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 16px;
    }
    
    /* 各セルのスタイル */
    .shipping-table td {
        padding: 10px;
        border-bottom: 1px solid #999999; /* 各行の下に線を引く */
    }
    
    /* 価格を右寄せにする */
    .shipping-table td:last-child {
        text-align: left;
    }
    
    /* 注意書きのスタイル */
    .note {
        margin-top: 10px;
        font-size: 14px;
        color: #555;
    }
    
    /* テーブルのスタイル */
    .shipping-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 18px;
    }
    
    /* 地区と料金の間に縦線を追加 */
    .shipping-table td:nth-child(1) {
        border-right: 1px solid #999999; /* 1列目の右側に線 */
    }
    
    
    
    
    /* --------------------------------------------------------------------------------
    Tabのレイアウト
    -------------------------------------------------------------------------------- */
    /*tabの形状*/
    .tab{
        flex-wrap: wrap;
        padding-top: 15%;
        font-size: 12px;
    }
    
    .tab li a{
        display: block;
        background:#ddd;
        margin:0 2px;
        padding:10px 20px;
    }
    /*liにactiveクラスがついた時の形状*/
    .tab li.active a{
        background:#fff;
    }
    
    /*エリアの表示非表示と形状*/
    .area {
        visibility: hidden;
        opacity: 0;
        height: 0;
        transition: opacity 0.5s ease, height 0.5s ease;
    }
    
    .area.is-active {
        visibility: visible;
        opacity: 1;
        height: auto;
    }
    
    @keyframes displayAnime{
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    
    
    /*========= レイアウトのためのCSS ===============*/
    
    ul{
        list-style:none;
        text-align: center;
    }
    
    a{
        color:#333;
        text-decoration: none;
    }
    
    .wrapper{
        width:100%;
        max-width: 960px;
        margin:30px auto;
        background:#fefefe;
        font-size: 9px;
    }
    
    .area li{
        padding: 10px; 
        border-bottom: 1px solid #ddd;
    }
    
    .area ul{
        display: flex;
    }
    
    .footer {
        width: 100%;
        text-align: center;
        margin-top: 10%;
        display: flex;
        background-color: rgba(136, 190, 219, 0.861);
    }
    
    .fotter1{
        width: 15%;
        padding-top: 50px;
        padding-bottom: 50px;
        margin-left: 42%;
    }
    
    .footer1 img{
        width: 100px;
    }
    
    .fotter2{
        width: 30%;
        color: whitesmoke;
        font-size: 5px;
        padding-top: 20px;
        padding-left: 30px;
    }
    
    .fotter3{
        text-align: left;
        padding-top: 30px;
    }
    
    .fotter4{
        text-align: left;
    }       
}

body{
    overflow: hidden;
}