html, body { margin:0; padding:0; width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
body {
    font-family:'Noto Sans JP',sans-serif;
    font-size:16px;
    z-index:0;
    letter-spacing:0.05em;
    line-height: 1.75em;
    background: linear-gradient(to right, #d83232, #ffffff, #344c98);
    width: 100%;
    height: 100vh;
}
a {
	outline : none;
	text-decoration:none;
}
a.active, a:active, a:focus, a:hover {
	text-decoration:none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 200;
  margin:0;
  padding:0;
  }
p{
  margin:0;
  padding:0;
}
img{
    width:100%;
    height:auto;
    display:block;
}
*:focus {
  outline: none;
}
.wrapper{
    width:430px;
    position:relative;
    margin:0 auto;
    display:block;
    overflow-x:hidden !important;
    z-index:99;
    background: #fff;
}
section {
    width:100%;
    padding:0; 
    display:block;
    margin:0 auto;
    position:relative;
}
.container-fluid{
    padding:0 !important;
    overflow-x:hidden !important;
}
.container{
    padding:0 !important;
    overflow-x:hidden !important;
}
.mx-auto{
    display:block !important;
    margin:0 auto !important;
}
.text-center{
    text-align:center !important;
}
.animation01{
    opacity:0;
}

@media screen and (max-width: 560px){
body {background: #fff;}
}

/*--------------------------------------------------------------
PC表示（左右背景を上下左右いっぱいに表示）
--------------------------------------------------------------*/
.pc-left-area{
    position: fixed;
    top: 0;
    left: 0;
    width: calc(50% - 215px);
    height: 100vh;
    z-index: 0;              /* 背景として後ろへ */
    overflow: hidden;        /* はみ出しを隠す */
    pointer-events: none;    /* クリック阻害しない */
}

.pc-right-area{
    position: fixed;
    top: 0;
    right: 0;
    width: calc(50% - 215px);
    height: 100vh;
    z-index: 0;              /* 背景として後ろへ */
    overflow: hidden;
    pointer-events: none;
}

/* 中身は全面 */
.pc-inner{
    width: 100%;
    height: 100%;
    position: relative;
}

.pc-inner-area{
    position: absolute;
    inset: 0;                /* top/right/bottom/left:0 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;  /* 画像を縦方向（上から下）に並べる */
    justify-content: center; /* 縦方向（垂直）の中央に配置する */
    align-items: center;     /* 横方向（水平）の中央に配置する（不要な場合は外してください） */
    gap: 0;               /* 画像と画像の間の余白（デザインに合わせて数値を調整してください） */
}

.pc-left-ocean-logo{
    width: 47%;
    max-width: 100%;
    margin: 0 0 6%;
}

.pc-left-item-img{
    width: 61%;
    max-width: 100%;
}

.pc-left-copyright{
    width: 23%;
    max-width: 100%;
    position: absolute;
    left: 20px;
    bottom: 15px;
}

.pc-right-campaign-img{
    width: 61%;
    max-width: 100%;
    margin: 0 0 5%;
}

.pc-right-campaign-text{
    width: 67%;
    max-width: 100%;
    margin: 0 0 3%;
}

.pc-right-apply-term{
    width: 62%;
    max-width: 100%;
}

/* メインコンテンツを前面に */
.wrapper{
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 560px){
    .pc-left-area{ display: none; }
    .pc-right-area{ display: none; }
    .wrapper{ width: 100%; }
}

@media screen and (max-width: 767px){
    .pc-left-area img{ display: none; }
    .pc-right-area img{ display: none; }
}

/*--------------------------------------------------------------
Behind the Scenes
--------------------------------------------------------------*/
.title-behind-the-scene{
    width:40%;
    display:block;
    margin:13% auto 0;
}
.special-movie-text{
    width:80%;
    display:block;
    margin:4% auto 5%;
}
.movie-area {
    position: relative;
    width: 90%;          /* 画面幅に対する横幅 */
    margin: 0 auto;      /* 中央寄せ */
    aspect-ratio: 16 / 9; /* これだけでレスポンシブな高さが保たれます */
    overflow: hidden;
    z-index: 1;
}

.movie-area iframe {
    width: 100%;
    height: 100%;
    display: block;      /* 下部の謎の隙間を消す */
    border: 0;
}


/*--------------------------------------------------------------
New Brand Ambassador
--------------------------------------------------------------*/
.title-new-brand-ambassador{
    width:50%;
    display:block;
    margin:13% auto 7%;
}
.sanoyuto-ambassador-campaign-text{
    width:66%;
    display:block;
    margin:0 auto 5%;
}
.follow-repost-text{
    width:86%;
    display:block;
    margin:0 auto 3%;
}
.apply-term-text{
    width:88%;
    display:block;
    margin:0 auto 8%;
}
.present-01-sticker{
    width:90%;
    display:block;
    margin:0 auto;
}
.present-more{
    width:89%;
    display:block;
    margin:0 auto 4%;
}
.present-02-wax{
    width:85%;
    display:block;
    margin:0 auto 6%;
}
.present-03-ticket{
    width:87%;
    display:block;
    margin:0 auto 8%;
}
.campaign-apply-btn{
    width:95%;
    display:block;
    margin:0 auto 5%;
}
.message-area{
    width:100%;
    display:block;
    border:10px solid #e31e2b;
    padding:10% 0;
}
.message-sano-ocean{
    width:42%;
    display:block;
    margin:0 auto 6%;
}
.message-area p{
    font-size: clamp(12px, 3.6vw, 16px);
    line-height:2.2;
    letter-spacing:0.05em;
    font-weight:500 !important;
    margin:0 0 6%;
}
.message-concept-text{
    width:73%;
    display:block;
    margin:0 auto;
}
/*--------------------------------------------------------------
応募の流れ
--------------------------------------------------------------*/
.title-flow{
    width:49.5%;
    display:block;
    margin:13% auto 0;
}
.flow-img{
    width:92%;
    display:block;
    margin:5% auto 2%;
}
.flow-text {
    font-size: clamp(12px, 3.6vw, 16px);
    line-height:1.5;
    font-weight:500;
}
.fits-x-btn{
    width:35%;
    display:inline-block;
    margin:2% 2px 1%;
}
.flow-campaign-apply-btn{
    margin:6% auto 8%;
}

/*--------------------------------------------------------------
ラインナップ
--------------------------------------------------------------*/
#ocean_04{
    background:#f7f7f7;
    padding:0 0 13%;
}
.lineup-ocean-logo{
    width:47.5%;
    display:block;
    margin:13% auto 3%;
}
.lineup-styling-series{
    width:47.0%;
    display:block;
    margin:0 auto;
}
.lineup-column:nth-child(2n+1){
    padding:8% 1.5% 0 30px;
}
.lineup-column:nth-child(2n){
    padding:8% 30px 0 1.5%;
}
.lineup-img{
    width:90%;
    display:block;
    margin:0 auto 15px;
}
.lineup-column p{
    display:block;
    font-size: clamp(10px, 3.0vw, 14px);
    line-height:1.6;
    letter-spacing:0;
}
.lineup-column p span{
    display:block;
    font-size: clamp(10px, 2.8vw, 13px);
}
.amazon-link-btn{
    margin: 15px 0 0;
}

/*--------------------------------------------------------------
取扱店舗
--------------------------------------------------------------*/
.title-store{
    width:39.5%;
    display:block;
    margin:13% auto 5%;
}
.store-column:nth-child(2n+1){
    padding:10px 5px 0 30px;
}
.store-column:nth-child(2n){
    padding:10px 30px 0 5px;
}
.store-column p{
    background:#e31e2b;
    padding:5% 0;
    border-radius:3px;
    font-size: clamp(14px, 4.0vw, 18px);
    color:#fff;
    font-weight:500;
}

.store-add-text{
    display:block;
    margin:2% auto 10%;
    font-size: clamp(11px, 3.0vw, 14px);
    font-weight:300;
}


/*--------------------------------------------------------------
アンバサダーキャンペーン
--------------------------------------------------------------*/
.concept-img{
    margin:0 0 8%;
}

/*--------------------------------------------------------------
応募概要、応募規約、注意事項
--------------------------------------------------------------*/
#ocean_07{
    background:#f7f7f7;
    padding:12% 0;
}
.accordionbox{
    padding:0 15px;
}
dl.accordionlist{
    margin-bottom:10px;
    background: #fff;
    border:1px solid #000;
    padding:0 15px;
}
.accordionlist dt{
    padding: 13px 30px 13px 0;
    position:relative;
    font-size: clamp(14px, 4.0vw, 18px);
    font-weight:400;
}
.accordionlist dt:hover{
    cursor:pointer;
}
.accordionlist dt .title{
    width:100%;
}
.accordionlist dd{
    display:none;
    border-top:1px solid #000;
    padding: 13px 0;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height:1.6;
    letter-spacing:0em;
}
.accordionlist dd strong{
    display:block;
    margin:15px 0 0;
}
.accordionlist dd strong:first-child{
    margin:0;
}
.accordionlist dd a{
    color:#000;
    text-decoration:underline;
}
.indent-text-01{
    display:block;
    margin:0 0 0 1em;
    text-indent:-1em;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
/* アイコンエリアの設定と画像の読み込み */
.accordion_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 縦方向の中央寄せ */
    right: 5px; 
    width: 17.9px; 
    height: 6.5px; 
    
    /* ここで画像を読み込みます（パスは環境に合わせて調整してください） */
    background-image: url("../img/accordion_icon.svg"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* 回転アニメーションの速度設定（0.3秒で滑らかに動く） */
    transition: transform 0.3s ease; 
}

/* 既存のHTMLにある span（＋・－用の線）は不要なので隠す */
.accordion_icon span {
    display: none;
}

/* 開いた時（.on クラス付与時）に画像を回転させる */
.accordion_icon.on {
    /* 中央寄せ(translateY)を維持したまま、180度(上下反転)回転させる */
    transform: translateY(-50%) rotate(180deg);
}

/*--------------------------------------------------------------
お問い合わせはこちら
--------------------------------------------------------------*/
.title-contact{
    width:60%;
    display:block;
    margin:0 auto 8%;
}
#ocean_08{
    padding:15% 0;
    background:#e31e2b;
}
.contact-btn{
    display:block;
    width:78%;
    margin:0 auto;
    background:#fff;
    padding:10px 0px;
    border-radius:5px;
    font-weight:600;
    color:#e31e2b;
    font-size: clamp(15px, 4.4vw, 20px);
}
/*--------------------------------------------------------------
フッター
--------------------------------------------------------------*/
#ocean_09{
    background:#fff;
}
.footer-lineup-ocean-logo{
    margin:10% auto 3%;
}
.footer-btn-area{
    margin:8% 0 3%;
}
.footer-btn{
    display:block;
    width:91%;
    margin:10px auto 0;
    color:#fff;
    padding:10px 0px;
    border-radius:5px;
    font-weight:600;
    font-size: clamp(14px, 4.0vw, 18px);
}
.footer-btn-red{
    background:#e31e2b;
}
.footer-btn-blue{
    background:#0023fa;
}


/*--------------------------------------------------------------
 フッター最下部（プライバシーポリシー＆コピーライト）
--------------------------------------------------------------*/
.footer-bottom-area {
    display: flex; /* Flexboxで横並びに */
    justify-content: space-between; /* 左右の端に配置 */
    align-items: center; /* 縦方向の中央揃え */
    width: 91%; /* ボタンと同じ幅に合わせる */
    margin: 5px auto 30px; /* 上下の余白と中央寄せ */
}

.privacy-link,.privacy-link:hover {
    color: #000;
    font-size: clamp(10px, 3vw, 14px); /* スマホで小さくなりすぎないよう調整 */
    text-decoration: underline; /* リンクとわかるように下線 */
}

.copyright {
    color: #000;
    font-size: clamp(10px, 3vw, 14px);
}