@charset "utf-8";

/* 1. htmlとbodyの基本設定 */
html, body {
    height: 100%; /* 画面全体の高さを確保 */
    margin: 0;
    padding: 0;
    display: flex; /* bodyをFlexコンテナにする */
    flex-direction: column; /* 要素を縦に並べる */
	padding-top: 40px;
}

/* 3. メインコンテンツラッパーの設定 */
.main-content-wrapper {
    /* これがフッターを一番下へ押し出す最も重要な設定です */
    flex: 1 0 auto; /* 拡大を許可(1)、縮小は不可(0)、ベースサイズは自動(auto) */
    width: 100%; 
    box-sizing: border-box; /* paddingやborderをwidth/heightに含める */
}

/* 4. ヘッダーの固定 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white; 
    height: 80px; /* bodyのpadding-topと合わせる */
}

/* 5. フッターの設定 (既に footer.php の <style> にあるかもしれませんが、念のため) */
.footer {
    flex-shrink: 0; /* フッターは縮小しない */
    width: 100%;
}


P {
	font-size: 20px;
	line-height: 38px;
}


/* 会社概要のtable */
table.overview {
	border-collapse: collapse;
	border-spacing: 0;
}
table.overview th {
	padding: 3px;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	font-size: 18px;
	background-color: #ccffff;
}
table.overview td {
	text-align: left;
	background-color: #FFF;
	font-size: 18px;
	padding: 3px;
}
table.overview td:nth-of-type(1){
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	padding: 3px;
	width: 80px;
}




/**沿革の表↓ */
table.history {
	border: 1px #ADD8E6 solid;
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
}

table.history td{
	border: 1px #ADD8E6 solid;
	border-width: 0 0 1px 1px;
	text-align: left;
	background-color: #FFF;
	font-size: 18px;
	padding: 5px;
	text-align:left;
}
table.history td:nth-of-type(1){
	border: 1px #ADD8E6 solid;
	border-width: 0 0 1px 1px;
	text-align: left;
	background-color: #ccffff;
	font-size: 18px;
	padding: 5px;
	text-align:center;
}



/**billingtd線なしの表↓ */
table.hyou3 {
	border: 1px #A3A3A3 solid;
	border-collapse: collapse;
	border-spacing: 0;
}
table.hyou3 th {
	padding: 3px;
	border: #A3A3A3 solid;
	border-width: 1px 1px 1px 1px;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	font-size: 14px;
	background-color: #CCFFCC;
}
table.hyou3 td {
	border: 1px #A3A3A3 solid;
	border-width: 1px 0 1px 0;
	text-align: left;
	background-color: #FFF;
	font-size: 14px;
	padding: 3px;
}

#CCFFFF {
	background-color: #CCFFFF;
	}
/**billingの表↓ */
table.hyou {
    border: 1px #A3A3A3 solid;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed; 
    width: 90%; 
}

table.hyou th {
    padding: 3px;
    border: #A3A3A3 solid;
    border-width: 0 0 1px 1px;
    font-weight: bold;
    text-align: left;
    line-height: 120%;
    font-size: 14px;
    background-color: #CCFFCC;
    width: 150px;
}

table.hyou td {
    border: 1px #A3A3A3 solid;
    border-width: 0 0 1px 1px;
    text-align: left;
    background-color: #FFF;
    font-size: 14px;
    padding: 3px;
    width: auto; 
}

/**グレーの表↓ */
table.hyou1 {
	border: 1px #A3A3A3 solid;
	border-collapse: collapse;
	border-spacing: 0;
}
table.hyou1 th {
	padding: 3px;
	border: #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	font-size: 12px;
	background-color: #CCCCCC;
	text-align:center;
}
table.hyou1 td {
	border: 1px #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	text-align: left;
	background-color: #FFF;
	font-size: 12px;
	padding: 3px;
	text-align:center;
}

/**送料の表↓ */
table.hyou4 {
	border: 1px #A3A3A3 solid;
	border-collapse: collapse;
	border-spacing: 0;
	width: 90%;
}
table.hyou4 th{
	padding: 3px;
	border: #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	font-size: 14px;
	background-color: #FFCC99;
	text-align:center;
}

table.hyou4 td{
	border: 1px #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	text-align: left;
	background-color: #FFF;
	font-size: 14px;
	padding: 3px;
	text-align:center;
}
table.hyou4 td:nth-of-type(1){
	border: 1px #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	text-align: left;
	background-color: #CCCCCC;
	font-size: 14px;
	padding: 3px;
	text-align:center;
	width: 150px;
}





/**billingのクール表↓ */
table.hyou2 {
	border: 1px #A3A3A3 solid;
	border-collapse: collapse;
	border-spacing: 0;
}
table.hyou2 th {
	padding: 3px;
	border: #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	font-weight: bold;
	text-align: center;
	line-height: 120%;
	font-size: 14px;
	background-color: #66FFFF;
}
table.hyou2 td {
	border: 1px #A3A3A3 solid;
	border-width: 0 0 1px 1px;
	text-align: center;
	background-color: #FFF;
	font-size: 14px;
	padding: 3px;
}


/**線なしの表↓ */
table.hyounasi {
	border: 0px #A3A3A3 solid;
	border-collapse: collapse;
	border-spacing: 0;
}
table.hyounasi th {
	padding: 3px;
	border: 0px #A3A3A3 solid;
	border-width: 1px 1px 1px 1px;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	font-size: 14px;
	background-color: #CCFFCC;
}
table.hyounasi td {
	border: 0px #A3A3A3 solid;
	border-width: 0px 0 0px 0;
	text-align: left;
	background-color: #FFF;
	font-size: 14px;
	padding: 3px;
}


/**説明table */
table.hyou_setumei {
	border-collapse:separate;
	border-spacing: 10px;
	background-color: #FFFFFF;
}
table.hyou_setumei th{
	padding: 5px;
	border: 0px #A3A3A3 solid;
	border-width: 1px 1px 1px 1px;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	font-size: 18px;
	background-color: #FFFFCC;
}


/**トップページ商品紹介 */
table.hyou7 {
	border-collapse:separate;
	border-spacing: 2px;
	background-color: #FFFFFF;
}
table.hyou7 th{
	padding: 2px;	
	text-align: left;
	font-size: 15px;
	font-weight:normal;
}
table.hyou7 td {
	text-align: left;
	background-color: #FFF;
	font-size: 11px;
	padding: 2px;
	color: #666;
}



/**トップページ訪問記 */
table.hyou8 {
	width:100%;	
	border-collapse: collapse;
	border-spacing: 2px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color:#CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}

table.hyou8 th{
	padding: 2px 2px 2px 10px;	
	text-align: left;
	font-size: 14px;
	background-color:#33FF00;
	font-weight:normal;
}
table.hyou8 td {
	text-align: left;
	background-color: #FFF;
	font-size: 13px;
	padding: 3px;
	color: #CCC;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
table.hyou8 a{
    text-decoration:none;
}

/* 大きな枠
=================================*/	
.nyu-ryoku{
    border: 1px solid rgba(204,204,204,1);
    border-radius: 5px;
    padding: 7px;
    width: 90%;
    font-size: 16px;
    background-color: rgba(255,255,255,1);
    
    /* 修正箇所: 左右のマージンを auto にして中央寄せ */
    margin: 0 auto; 
}

/* ログイン枠
=================================*/	
.nyu-ryoku2{
	border: 1px solid rgba(204,204,204,1);
	border-radius: 5px;
	padding: 8px 8px 8px 8px;/* 上、右、下、左 */
	width: 85%;
	font-size: 16px;
	background-color: rgba(255,255,255,1);
}
.nyu-ryoku2p{
	padding: 8px 0px 8px 0px;/* 上、右、下、左 */
	font-size: 13px;
	}
input[type='image'] {
padding: 0;
    margin: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    overflow: visible;
    cursor: pointer;
    border: none !important; /* 既存のborder:0;から変更し、より強力にリセット */
    outline: none !important; /* フォーカス時の点線枠も消去 */
    box-shadow: none !important; /* 影を消去 */
}



/* cart
=================================*/


.order_view td{
	margin: 3px;
	padding: 5px;	
}
	

/* お買い物を続ける,会員限定商品,詳しく見るボタン
=================================*/
.button {
	border-top: 1px solid #ccc;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #ccc;
	font-weight: bold;
	border-radius: 8px;
	
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgba(0,0,204,1)),color-stop(1, rgba(0,0,136,1)));
	background: -moz-linear-gradient(top, #453FF8, #070393);
	display: block;
	width:180px;
	padding: 10px;
	text-align:center;
	color: #FFFFFF;
	font-size: 18px;
	text-decoration: none;
    /* 💡 修正点: ブロック要素を中央揃えにする */
    margin: 0 auto;
}
.button:hover {
	color: #FFF;
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgba(0,0,102,1)),color-stop(1, rgba(0,0,51,1)));
	background: -moz-linear-gradient(top, #080647, #050335);
	display: block;
	background-color: rgba(0,0,51,1);
}


/* はい同意しますボタン
=================================*/
.yes  {
	border-top: 1px solid #ccc;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #ccc;
	border-radius: 8px;
	float: left;
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgba(0,0,204,1)),color-stop(1, rgba(0,0,136,1)));
	background: -moz-linear-gradient(top, #453FF8, #070393);/* Firefox用 */ 
	display: block;
	padding: 8px;
	text-align:center;
	color: #FFFFFF;
	font-size: 20px;
	text-decoration: none;
}
.yes:hover{
	color: #FFF;
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgba(0,0,102,1)),color-stop(1, rgba(0,0,51,1)));
	background: -moz-linear-gradient(top, #080647, #050335);/* Firefox用 */ 
	display: block;
	background-color: rgba(0,0,51,1);
	text-decoration: none;
}


	
/* 記入するボックス
=================================*/	
.write {
        max-width: 900px;
        margin: 0 auto;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
.write input{
	border-radius: 5px;
	padding-top: 5px;
	padding-right: 0.2em;
	padding: 7px;
	padding-left: 0.3em;
	border: 1px inset rgba(204,204,204,1);
}
.write input:focus{
	background:#fcf7d2;
}

/* 必須項目色分け
=================================*/	
.importants {
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, #ffffff),color-stop(1, #E9FED3));
	background-repeat: no-repeat;
	background-position: right;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C7FC92;
}


/* 大きな枠
=================================*/	
.nyu-ryoku{
	border: 1px solid rgba(204,204,204,1);
	border-radius: 5px;
	padding: 7px;
	width: 90%;
	font-size: 16px;
}




/* もっと買うボタン
=================================*/
.button3{
	/*display: block;*/
	background: linear-gradient(0deg, #FFA500, #eaf6fd); /* グラデーション */
	border: 1px solid #999999; /* 枠線 */
	border-radius: 10px;   /* 角丸 */
	padding: 2px 10px 2px 10px;/* 上、右、下、左 */
	width:250px;
	padding: 7px;
	font-size: 18px;
	font-weight: bold;
}
.button3:hover {
    border:solid 1px #666666;
    color: #FFFFFF;
    background: #FF8C00;
}

.button3 {
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    color: #212529;
    cursor: pointer;
}


/* billingのタイトル
=================================*/	
    .box25 {
        background-color: #e3f2fd;
        padding: 15px;
        border-left: 5px solid #0d6efd;
        border-radius: 5px;
        margin-bottom: 20px;
    }

/* 買い物履歴
=================================*/	
.rireki{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box1{
  background: #efefef;
  border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
  padding: 1%;
  width: 85%;
  margin: 10px;
  border: 2px solid #333;
}


/* otype9(メール便)表示用の装飾スタイル
=================================*/	
.otype-badge {
    display: inline-block;
    padding: .3rem .8rem;
    margin-top: .5rem;
    font-size: 1.1rem; /* 少し大きく */
    font-weight: bold;
    border-radius: .5rem; /* 角を丸く */
    color: white; /* 文字色を白に */
    /* 背景色と枠線でスタイリッシュに */
}

/* 各種条件ごとのカラーリング */
.otype-mailbin {
    background-color: #007bff; /* Primary Blue */
    border: 2px solid #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.otype-free {
    background-color: #28a745; /* Success Green */
    border: 2px solid #1e7e34;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.otype-maker {
    background-color: #ffc107; /* Warning Yellow */
    border: 2px solid #d39e00;
    color: #343a40; /* 文字色を濃い色に */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* 説明文の中にあるコラーゲンペプチドとゼラチンの違いスタイル
=================================*/	
        /* カスタムカラー (Bootstrapのユーティリティカラーに近いものを使用) */
        .border-collagen { border-color: #dc3545 !important; } /* danger */
        .text-collagen { color: #dc3545 !important; }
        .border-gelatin { border-color: #ffc107 !important; } /* warning */
        .text-gelatin { color: #ffc107 !important; }
        .border-peptide { border-color: #0d6efd !important; } /* primary */
        .text-peptide { color: #0d6efd !important; }

        /* カスタムカードスタイル */
        .item-card {
            min-width: 250px;
            /* Bootstrapのカード、シャドウ、角丸を適用 */
            border-top: 8px solid; /* border-t-8の代わり */
            transition: all 0.3s;
            height: 100%;
			max-width: 350px;
        }

        /* カードタイトル */
        .card-title-flow {
            font-size: 1.5rem; /* text-xl, fs-5 */
            font-weight: 800; /* fw-bolder */
            margin-bottom: 0.75rem; /* mb-3 */
            padding-bottom: 0.5rem; /* pb-2 */
            border-bottom: 2px solid;
            width: 100%;
        }

        /* フローの矢印テキストスタイル */
        .arrow-text {
            font-size: 0.875rem; /* text-sm */
            font-weight: bold; /* fw-bold */
            color: #6c757d; /* text-secondary */
        }

        /* 箇条書きの調整 (リストスタイルを解除) */
        .feature-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 1rem;
            font-size: 0.875rem; /* text-sm */
            color: #495057; /* text-secondary */
            text-align: center;
        }

        /* レスポンシブな矢印のスタイル */
        .arrow-container {
            display: flex;
            align-items: center;
        }
        /* 縦（モバイル）の矢印 */
        .arrow-vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* 横（デスクトップ）の矢印 */
        .arrow-horizontal {
            display: none;
            flex-direction: column;
            align-items: center;
            margin: 0 1rem;
        }
        /* メディアクエリでデスクトップ表示に切り替え */
        @media (min-width: 768px) {
            .arrow-horizontal {
                display: flex;
            }
            .arrow-vertical {
                display: none;
            }
        }



/* ページャー
=================================*/	
div#pagenation {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20px;
	padding-bottom: 5px;
}
div#pagenation li {
	list-style: none;
	float:left;
}
div#pagenation li a {
    border:1px solid #AAAAAA;
    margin: 0 3px;
    padding:3px 10px;
    display: block;
    text-decoration:none;
    color: #333333;
    background: #FFFFEE;
}
div#pagenation li.active a,
div#pagenation li a:hover{
    border:solid 1px #666666;
    color: #FFFFFF;
    background: #3399FF;
}