@charset "UTF-8";
/* CSS Document */
    /* --- 全体基本設定 --- */
    #pagedesign {
        background-color: #0d0d0d;
        font-feature-settings: "palt";
        color: #fff;
        font-family: "adobe-garamond-pro", "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
        -webkit-font-smoothing: antialiased;
        margin: 0; 
        padding: 0;
        overflow: hidden;
        line-height: 1.8; 
    }

    .c_mainVisual_area {
        height: 100vh;
        
        background: url(https://wine-proshop.com/uploads/design/Ondo/cellar_main_pc.jpg) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .inner {
        max-width: 1400px; 
        margin-inline: auto;
        position: relative;
        height: auto; 
    	min-height: 100%;
    }

    /* テキストエリアの配置 */
    .inner .heading {
        position: absolute;
        top: 5%; 
        left: 5%;  
    }

    /* -5° Cellar の部分 */
    .inner .heading h1 {
        font-size: clamp(30px, 5vw, 68px);
        font-weight: 400;
        letter-spacing: 0.05em;
        margin-bottom: 0px;
    }

    /* キャッチコピー部分 */
    .inner .heading h2 {
        font-size: clamp(16px, 3vw, 26px) !important;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.1em;
		margin: 0;
    }

    /* 右下のLefierロゴ */
    .inner figure.logo {
        width: 160px; 
        position: absolute;
        bottom: 8%;
        right: 5%;
        margin: 0;
    }

    .inner figure.logo img {
        width: 100%;
        height: auto;
    }
	.c_back2area {
    padding: 200px 0;
    background-color: #0d0d0d; 
}
	
.c_back2area .inner {
    text-align: center;
    margin-top: 0;
    height: auto;
    min-height: 0; 
    padding: 0 20px; 
}
.shopify-section,
#pagedesign {
    overflow: visible; 
}	
	
	.c_back2area .inner h2{
		font-size: clamp(18px, 3vw, 26px) !important;
		font-weight: normal;
	}
	
		.c_back2area .inner p{
		font-size: clamp(15px, 3vw, 18px) !important;
		font-weight: normal;
	}

.c_ice_area {
    /* 背景画像：氷のテクスチャ */
    background: url(https://cdn.shopify.com/s/files/1/0736/2691/1003/files/ajiwai_bg.jpg?v=1764916154) no-repeat center;
    background-size: cover;
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    color: #052850; 
}

.c_ice_area .inner {
    max-width: 1200px;
    margin-inline: auto;
    position: relative;
    min-height: 800px; 
    display: flex;
    flex-direction: column;
	margin-bottom: 50px;
}


.vertical_heading {
    position: absolute;
    top: 0 !important;   
    left: 10%;          
    background: linear-gradient(180deg, rgba(5, 40, 80, 1) 0%, rgba(5, 40, 80, 1) 75%, rgba(5, 40, 80, 0) 100%);
    
    color: #FFF !important;
    padding: 30px 15px 100px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(24px, 2.5vw, 28px);
    letter-spacing: 0.3em;
    font-weight: 400;
    z-index: 2;
    margin: 0 !important;
}

.c_ice_area {
    padding-top: 0 !important;
}


/* 中央のセラー画像 */
.product_main {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 45vw, 400px);
    margin: 0;
    z-index: 1;
}
.product_main img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2));
}

/* --- PC表示の設定（前回までの設定を維持） --- */
.c_ice_area {
    background: #f0f8ff url(https://cdn.shopify.com/s/files/1/0736/2691/1003/files/ajiwai_bg.jpg?v=1764916154) no-repeat center;
    background-size: cover;
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    color: #052850;
    width: 100%;
}
.c_ice_area .inner {
    max-width: 1200px;
    margin-inline: auto;
    position: relative;
    min-height: 800px;
    display: block;
}
.vertical_heading {
    position: absolute;
    top: 0 !important;
    left: 5%;
    background: linear-gradient(180deg, rgba(5, 40, 80, 1) 0%, rgba(5, 40, 80, 1) 75%, rgba(5, 40, 80, 0) 100%);
    color: #FFF !important;
    padding: 30px 15px 100px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(22px, 2.5vw, 28px);
    letter-spacing: 0.3em;
    font-weight: 400;
    z-index: 10;
    margin: 0 !important;
}
.product_main {
    position: absolute;
    top: 45%;
    left: 34%;
    transform: translate(-50%, -50%);
    width: clamp(280px, 35vw, 380px);
    margin: 0;
    z-index: 5;
}
.product_main img { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2)); }

.floating_copy { position: absolute; z-index: 8; text-align: center; display: inline-block; }
	
.floating_copy p { position: relative; z-index: 9; font-size: clamp(16px, 1.2vw, 25px) !important; color: #052850 !important; line-height: 1.6; font-weight: 600; margin: 0; }
	
.floating_copy:after {
    content: '';
    position: absolute;
    z-index: 8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%; 
    height: 150%;
    background: #ffffff; 
    filter: blur(10px); 
    border-radius: 50%;
    box-shadow: 
        0 0 20px 10px #ffffff,
        0 0 40px 20px #ffffff,
        0 0 60px 30px rgba(255, 255, 255, 0.5);
}

.mowawa1 { top: 10%; right: 25%; }
.mowawa2 { top: 35%; right: 10%; }
.mowawa3 { top: 60%; right: 20%; }

.bottom_copy_area { position: absolute; bottom: 40px; left: 15%; z-index: 9; }
.bottom_copy_area p { font-size: clamp(16px, 2vw, 24px) !important; color: #052850 !important; font-weight: 400; font-feature-settings: "palt";  text-shadow: 
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff,
        0 0 10px #fff;
	}
	
.split_layout_box {
    display: flex;
    width: 100%;
    min-height: 500px;
    background-color: #0d0d0d;
    align-items: stretch;
    margin-top: 0px; 
    
}

.image_side {
    flex: 6;
    overflow: hidden;
}

.text_side {
    flex: 4; 
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center; 
    padding: 40px;
}

.text_inner {
    max-width: 500px;
}

.text_side .lead {
    font-size: 17px;
    line-height: 2.2;
    color: #ffffff;
    text-align: justify;
    margin-bottom: 30px;
}

.text_side .who {
    font-size: 17px;
    color: #ffffff;
    text-align: right;
}
		
.b_style_section {
    padding: 80px 0;     
    background-color: #000;
    overflow: hidden;
}
.b_style_section .boxinner {
    max-width: 1000px;
    margin: 80 auto;
    position: relative;
	height: auto;
}	
	
.style_content2 {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 40px 0px; 
}	

.style_content2::before,
.style_content2::after {
    content: '';
    position: absolute;
    background: url(https://cdn.shopify.com/s/files/1/0736/2691/1003/files/snow.svg) no-repeat center / contain;
    z-index: 1;
    opacity: 0.8;
}		
/* 左の結晶：::before */
.style_content2::before {
    width: 80px;
    height: 80px;
    left: 17%;
    top: 20%;
    transform: translateY(-50%);
}

/* 右の結晶：::after */
.style_content2::after {
    width: 40px;
    height: 40px;
    right: 210px;
    top: -20px;
}
.style_title2 {
    font-size: clamp(20px, 3vw, 28px);
    color: #ffffff;
    font-weight: 500;
    margin-top: 20px;    
    margin-bottom: 10px; 
    letter-spacing: 0.1em;
	line-height: 1.5em;
}
.style_text2 p {
    font-size: clamp(14px, 3vw, 17px);
    color: #ffffff;
    line-height: 1.6;    
    margin-bottom: 0;
    padding-bottom: 0;  
}
	
	
	
/* --- 白背景 --- */
.c_style_section {
    padding: 110px 0;   
    background-color: #fff;
    overflow: hidden;
}

.c_style_section .boxinner {
    max-width: 1000px;
    margin: 80 auto;
    position: relative;
	height: auto;
}	
/* 中央のコンテンツ */
.style_content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 40px 0px; 
}

/* 雪の結晶 共通設定 */
.style_content::before,
.style_content::after {
    content: '';
    position: absolute;
    background: url(https://cdn.shopify.com/s/files/1/0736/2691/1003/files/snow_bk.svg) no-repeat center / contain;
    z-index: 1;
    opacity: 0.8;
}

/* 左の結晶：::before */
.style_content::before {
    width: 40px;
    height: 40px;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
}

/* 右の結晶：::after */
.style_content::after {
    width: 80px;
    height: 80px;
    right: 160px;
    top: -20px;
}

.style_title {
    font-size: clamp(20px, 3vw, 28px);
    color: #052850;
    font-weight: 500;
    margin-top: 20px;    
    margin-bottom: 10px; 
    letter-spacing: 0.1em;
}

.style_text p {
    font-size: clamp(14px, 3vw, 17px) !important;
    color: #111111 !important;
    line-height: 1.6;   
    margin-bottom: 0;
    padding-bottom: 0;  
}

/* VOICEセクション全体の枠組み */
.c_voice_area_img {
    padding: 60px 20px;
    background-color: #fff;
}

/* 水色背景 */	
.voice_box_inner {
    max-width: 1350px;
    margin: 0 auto;
    background-color: #d6e5f4;
    border-radius: 30px;
    padding: 10px 20px 200px; 
    text-align: center;
}

.voice_ttl {
    font-size: 80px;
    font-weight: normal;
    color: #052850;
	margin-top: 20px;
    letter-spacing: 0.01em;
}

/* 重なりを実現するためのラッパー */
.voice_content_wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -10px; 
}

	
	.voice_graphic {
        /* 吹き出し画像 */
        transform: translateY(-50px); 
  		 width: 100%;
        max-width: 1400px;
        margin-inline: auto;
    }	

.voice_graphic img {
    width: 100%;
    height: auto;
    display: block;
}

.voice_txt_overlap {
    position: relative;
    z-index: 2;          
    margin-top: -250px;  
    margin-bottom: 20px;
    display: inline-block;
    color: #052850;
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    text-align: center;
    letter-spacing: 0.05em;
}

  /* --- ボトルセクション --- */
  #footer_ondo {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
  }

  #footer_ondo .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-image: url(https://ondosake.com/cdn/shop/files/miraiV.jpg?v=1765266565);
    background-repeat: no-repeat;
    background-position: center top; 
    background-size: contain; 
    min-height: 646px;  
    padding: 60px 0 0;
    color: #fff;
  }

  #footer_ondo .inner h2 {
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.15em;
    text-align: center;
    color: #FFF;
    font-size: 1.4rem;
  }


  /* --- ボタンセクション（白背景エリア） --- */
  .button-container {
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  .lineup-button {
    display: block; 
    background-color: #052850;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.2rem;
    
    width: 100%;      
    max-width: 100%;   
    
    padding: 1.5em 0;
    border: none;
    transition: all 0.3s ease;
    letter-spacing: 0.2em;
    box-sizing: border-box;
    text-align: center;
    margin-top: 0;
	margin-bottom: 60px;  
  }

  .lineup-button:hover {
    background-color: #1a3a60;
    color: #ffffff !important;
  }
  .sp_only { display: none; }


/* --- スマホ表示 (768px以下) --- */
@media (max-width: 768px) {
	
	.c_mainVisual_area {
        padding-top: 0 !important; 
        height: 400px !important; 
        background-image: url(https://wine-proshop.com/uploads/design/Ondo/cellar_main_pc.jpg);
        background-repeat: no-repeat;
        background-position: center center; 
        background-size: cover;           
        background-attachment: scroll !important;
    }
	.c_back2area {
    padding: 80px 0; 
    background-color: #0d0d0d; 
}
	.text_side .lead {
    font-size: 15px;
}
	.text_side .who {
    font-size: 15px;
}
	
    .inner figure.logo {
        width: 100px;
        position: absolute !important;
        bottom: 5% !important;
        right: 5% !important;
        margin: 0;
        z-index: 10;
    }

    .inner {
        max-width: 100%; 
        margin-inline: auto;
        position: relative;
        height: auto; 
    	min-height: 100%;
    }
    .split_layout_box {
        display: flex; 
        flex-direction: column !important; 
        margin-top: 30px;
        min-height: auto;
    }

    .image_side {
        width: 100%;
        height: 250px; 
    }

    .text_side {
        width: 100%;
        padding: 40px 20px;
        justify-content: center;
    }
	
    .c_ice_area {
        padding-top: 0 !important;
    }

    .c_ice_area .inner {
        display: block;
        min-height: auto;
        padding-top: 0 !important; 
        padding-bottom: 0px;
    }




    .product_main {
        position: relative;
        top: 0;
        left: 45px;
        transform: none;
        width: 60%; 
        margin: 120px auto 30px; 
    }

    /* 縦バーを最上部に固定する */
    .vertical_heading {
        top: -120px !important;  
        left: 15px;             
        padding: 20px 10px 60px; 
        margin-top: 0 !important;
        position: absolute !important; 
    }

    .bottom_content_group {
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0 10%; 
    }

    .bottom_copy_area {
        position: relative;
        bottom: 0; left: 65px;
        text-align: left;
        margin-bottom: 50px;
        width: 100%;
    }

  /* --- スマホ表示 (768px以下) の修正 --- */
    
   
    .floating_copy:after {
        display: none !important;
    }

    .floating_copy {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important; 
        margin-bottom: 40px !important; 
        display: block !important;
        text-align: center !important;
        align-self: center !important; 
    }

    
    .floating_copy:nth-of-type(odd),
    .floating_copy:nth-of-type(even) {
        align-self: center !important;
        text-align: center !important;
    }

    
    .floating_copy p {
        font-weight: 500;
        font-size: 18px !important;
        line-height: 1.5;
		color: #052850 !important;
    /* 白い縁取り */
    text-shadow: 
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff,
        0 0 10px #fff;
    }
	
.c_style_section {
        padding: 10px 20px; 
    }
    .style_text p {
        line-height: 1.5;
		max-width: 800px;
    }
    
    .style_content {
        padding: 50px 10px !important; 
    }

    .style_text p {
        max-width: 100% !important; 
        text-align: center;
        line-height: 1.8; 
    }
    .style_content::before {
        width: 40px;
        height: 40px;
        left: -10px;
        top: 40%;
    }
    .style_content::after {
        width: 70px;
        height: 70px;
        right: -10px;
        top: 20px;
    }
.style_content2 {
        padding: 0 10px !important; 
    }

   
    .style_text2 p {
        max-width: 100% !important;
        text-align: center;
        line-height: 1.8; 
        word-break: break-all; 
    }
/* 左の結晶：::before */
.style_content2::before {
    width: 80px;
    height: 80px;
     left: 10px;
        top:-25%;
    transform: translateY(-50%);
}

/* 右の結晶：::after */
.style_content2::after {
    width: 40px;
    height: 40px;
    right: 15px;
        top: 25px;
}
	
	.voice_graphic {
        /* 吹き出し画像 */
        transform: translateY(50px); 
  		 width: 100%;
        max-width: 1000px;
        margin-inline: auto;
    }


    .c_voice_area_img {
        padding: 40px 20px;
        margin-top: -60px;
    }

    .voice_box_inner {
        padding: 10px 15px 200px; 
        text-align: center;
		margin: 0 auto;
    }

    .voice_ttl {
        font-size: 50px;
        margin-bottom: 20px;
    }

    .voice_content_wrapper {
        margin-top: 0;
    }


    /* すでに氷温提供文字 */
    .voice_txt_overlap {
        margin-top: -200px; 
     	 display: block;
        font-size: 17px;
        color: #052850;
        text-align: center;
        background: none;
        padding: 0;
    }

    .sp_only {
        display: inline;
    }


#footer_ondo .inner {
    background-image: url(https://ondosake.com/cdn/shop/files/miraiV.jpg?v=1765266565);
    background-size: 120% auto;         
    background-position: center bottom;   
    background-repeat: no-repeat;
    background-color: #080c18;          
 /* （文字スペース＋画像の高さ分） */
    aspect-ratio: 1 / 1.1;               
    min-height: auto;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    padding: 40px 20px 0;                
    margin-top: 0;
}

#footer_ondo .inner h2 {
    font-size: 15px !important;          
    line-height: 1.8;
    width: 90%;
    color: #fff !important;
    text-align: center;
    text-shadow: none;
    margin: 0;
    position: relative;
    top: 0;
}
 .button-container {
      padding: 0;
    }
    .lineup-button {
      width: 100%;
      font-size: 1.1rem;
      padding: 1.2em 0;
    }
  
	
}