@charset "utf-8";
/*====================================
大人の修学旅行in対馬ツアーキャンペーン
0.汎用
    0.1 レイアウト
    0.2 テキスト
    0.3 リンク
1.メイン
2.対馬ってどんなところ？
3.対馬の海を体感できる2泊3日のツアーに4組8名様をご招待！
    3.1 ツアー内容
4.ツアーが当たらなかった方にも選べるWチャンス賞
5.対馬の海の課題とは？
6.私たちにできることはなんだろう
7.ヤシノミ洗剤と水のおはなし
8.応募条件　
9.キャンペーンに関するお問い合わせはこちら
10.フッター
11.メディアクエリ
    11.1 画面サイズが1024px以上のCSSを記述
    11.2 画面サイズが578pxから1024pxまでのCSSを記述

【対馬CP改修（新コンテンツ「レポート」）】
12.レポート
13.ツアー参加者の声
14.メディアでも紹介いただきました
15.ヤシノミダンスキャンペーン ※公開前にCP終了のため非公開
16.サラヤSDGSソリューションバナー
====================================*/
/*
    画面サイズが577pxまでのCSSを記述
========================================================================*/
#ocean {
    width: 100%;
    font-family: "A1 Gothic R", "A1ゴシック R", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-feature-settings: "palt";
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #333;
    text-align: justify;
    box-sizing: border-box;
}
#ocean .ocean-article {
    background: #fff;
    border-left: 8px solid #bae2f8;
    border-right:  8px solid #ccdb35;
}

/*====================================

 対馬CP応募締切

====================================*/
#ocean .end-text {
    display: block;
    width: 100%;
    max-width: 336px;
    margin: 16px auto 20px;
    text-align: center;
    padding: 20px 0 20px;
    font-size: 28px;
    line-height: 1.2;
    background-color: #ebf6fb;
    border-radius: 8px;
    color: #0062b1;
    /*border-bottom: 2px solid #008ace;*/
}
#ocean .end-text span {
    font-size: 18px;
}
#ocean .end-text-02 {
    display: block;
    width: 100%;
    max-width: 336px;
    margin: 16px auto 0;
    text-align: center;
    padding: 20px 0 20px;
    font-size: 28px;
    line-height: 1.2;
    background-color: #fff;
    border-radius: 8px;
    color: #0062b1;
    /*border-bottom: 2px solid #008ace;*/
}
#ocean .end-text-02 span {
    font-size: 18px;
}
#ocean .requirements-end-text {
    margin: 48px auto 0 !important;
    background-color: #FAFEFF !important;
}
#ocean a.report-link {
    display: block;
    text-decoration: none;
}
#ocean a.report-link:hover {
	opacity: 0.5;
    transition: all 0.5s;
}
/*====================================

 0.汎用

====================================*/
/*
 	0.1 レイアウト
====================================*/
/*デバイスごとに要素を表示・非表示*/
#ocean .pc-v { display: none !important; }
#ocean .pc-no { display: block !important; }
#ocean .tablet-v { display: none !important; }
#ocean .sp-v { display: block !important; }
#ocean .sp-no { display: none !important; }

/*Flex*/
#ocean .flex-d-row { display: flex; }
#ocean .flex-d-row-reverse { display: flex; flex-direction: row-reverse;
}
#ocean .flex-wrap { flex-wrap: wrap; }
#ocean .justify-flex-start { justify-content: flex-start; }
#ocean .justify-end { justify-content: end; }
#ocean .justify-center { justify-content: center; }
#ocean .justify-between { justify-content: space-between; }
#ocean .justify-around { justify-content: space-around; }
#ocean .items-flex-end { align-items: flex-end; }
#ocean .items-center { align-items: center; }

/*画像*/
#ocean img {
    width: 100%;
    vertical-align: bottom !important;
}
/*画像余白ネガティブマージン*/
#ocean .img-minus {
    margin-bottom: -2px;
}
#ocean div,
#ocean p,
#ocean figure {
    margin: 0;
    padding: 0;
}

/*
 	0.2 テキスト
====================================*/
/*プフ ソワレ*/
#ocean .puhu_soiree {
    font-family: "Puhu Soiree AP", "プフ ソワレ AP", serif;
    font-feature-settings: "palt";
    letter-spacing: -0.06em;
}
/*斜体*/
#ocean .text-italic {
    font-style: italic;
}
#ocean .text-blue {
    color: #0062b1;
}
#ocean .text-green {
    color: #1eaa39;
}

/*
 	0.3 リンク
====================================*/


/*====================================

 1.メイン

====================================*/
#ocean .main-contents {
    width: 100%;
}
#ocean ul.event-date {
    margin: 32px 0 16px;
    font-size: 18px;
    text-align: center;
}
#ocean ul.event-date li {
    display: inline-block;
    margin: 0 0 8px;
    padding: 0 0 4px;
    border-bottom: 3px solid #bae2f8;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.05em;
}
#ocean ul.event-date li span {
    font-size: 32px;
}

/*====================================

 2.対馬ってどんなところ？

====================================*/
#ocean .about-contents {
    width: 100%;
    background: #008ace;
    padding: 20px 0 0;
    color: #fff;
}
#ocean .about-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 24px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #fff;
    letter-spacing: -0.03em;
}
#ocean .about-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .about-contents h2 span {
    font-size: 36px;
}
#ocean .about-contents h3 {
    margin: 32px 0 -2px;
    padding: 0 16px 0;
    font-size: 16px;
    font-style: italic;
    line-height: 1;
}
#ocean .about-contents h3 span {
    display: inline-block;
    margin: 8px 0 0;
    font-size: 26px;
    letter-spacing: -0.02em;
}
#ocean .about-text-area {
    width: 100%;
    max-width: 320px;
    padding: 48px 0;
    margin: 0 auto;
}
#ocean .about-text-area span {
    padding: 0 0 2px;
    border-bottom: 1px solid #fff;
}
#ocean .about-text-area span span.text-large {
    font-size: 18px;
    line-height: 1.9;
}
/*====================================

 3.対馬の海を体感できる2泊3日のツアーに4組8名様をご招待！

====================================*/
#ocean .tour-contents {
    width: 100%;
    padding: 0 0 16px;
    background: url('../images/ocean-requirements-bg.png') repeat-y top center/cover;
    background-size: 100%;
}
#ocean .tour-contents h3 {
    position: relative;
    margin: 40px 0 40px;
    font-size: 28px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1.5;
}
#ocean .tour-contents h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .ocean-tour-ttl {
    width: 100%;
    max-width: 298px;
    margin: 0 auto;
}
#ocean .ocean-tour-attention {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
}
/*
 	3.1 ツアー内容
====================================*/
#ocean ul.tour-event-date {
    margin: 24px 0 16px;
    font-size: 18px;
    text-align: center;
}
#ocean ul.tour-event-date li {
    display: inline;
    line-height: 1.4;
    margin: 0 0 8px;
    padding: 0 0 4px;
    border-bottom: 3px solid #bae2f8;
    font-size: 18px;
    letter-spacing: -0.05em;
}
#ocean ul.tour-event-date li span {
    font-size: 32px;
}

/*
  slick
----------------------------------- */
.slick-item {
    width: 100%;
    /*max-width: 328px;*/
    margin: 0 auto;
    overflow: visible;
}
.slick-item li figure {
    width: 100%;
    max-width: 328px;
    padding: 0 12px;
}
.slick-slide {
    margin: 0 8px; /* アイテムの間隔を調整 */
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 0%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    z-index: 1;
}
.slick-prev {/*戻る矢印の位置と形状*/
    background-image:url(../images/ocean-arrow-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    top: 28%;
    left: 8px;
}
.slick-next {/*次へ矢印の位置と形状*/
    background-image:url(../images/ocean-arrow-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    top: 28%;
    right: 8px;
}
/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
    bottom: 0;
	z-index: 3;
    text-align:center;
	margin: 24px 0 0 0;
}
.slick-dots li {
    display:inline-block;
    width: 8px;
    height: 8px;
	margin:0 4px;
}
.slick-dots li button {
    padding: 0;
    background-color: transparent;
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.slick-dots li button {
    color: transparent !important;
    outline: none !important;
    width: 8px !important;/*ドットボタンのサイズ*/
    height: 8px !important;/*ドットボタンのサイズ*/
    display: block !important;
    border-radius: 50% !important;
    background: #bae2f8 !important;/*ドットボタンの色*/
}
.slick-dots li button:before {
    content: none !important;
}
.slick-dots .slick-active button {
    background:#fff !important;/*ドットボタンの現在地表示の色*/
    border: 1px solid #008ace;
}



/*====================================

 4.ツアーが当たらなかった方にも選べるWチャンス賞

====================================*/
#ocean .chance-contents {
    width: 100%;
    background: #fff;
}
#ocean .chance-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 24px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1.5;
}
#ocean .chance-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .chance-contents h2 span.line-bottom {
    padding: 0 0 4px;
    border-bottom: 2px solid #008ace;
}
#ocean .chance-contents h2 span.line-bottom {
    border-bottom: 2px solid #008ace;
}
#ocean .chance-contents h2 span.text-large {
    font-size: 48px;
}
#ocean .chance-area {
    box-sizing: border-box;
    width: 100%;
    max-width: 336px;
    margin: 0 auto 24px;
    padding: 24px;
    background: #ebf6fb;
    border-radius: 8px;
    text-align: center;
}
#ocean .chance-area h3 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.3;
    color: #0062b1;
}
#ocean .ocean-chance-01-number {
    width: 100%;
    max-width: 124px;
    margin: 16px auto;
}
#ocean .ocean-chance-01-img {
    width: 100%;
    max-width: 256px;
    margin: 0 auto;
}
#ocean .ocean-chance-02-number {
    width: 100%;
    max-width: 104px;
    margin: 16px auto;
}
#ocean .ocean-chance-02-img {
    width: 100%;
    max-width: 197px;
    margin: 0 auto;
}
#ocean .chance-footer-area {
    margin: 0 0 24px;
    text-align: center;
}
#ocean .chance-footer-area h4 {
    font-size: 28px;
    line-height: 1.4;
    color: #0062b1;
}
#ocean .chance-footer-area h4 span {
    font-size: 48px;
}
#ocean .chance-footer-area p {
    display: inline;
    padding: 0 0 1px;
    font-size: 24px;
    line-height: 1.5;
    color: #0062b1;
    border-bottom: 2px solid #008ace;
}
#ocean .ocean-chance-total {
    width: 100%;
    max-width: 142px;
    margin: 0 auto 24px;
}

/*====================================

 5.対馬の海の課題とは？

====================================*/
#ocean .marine-issues-contents {
    width: 100%;
    background-color: #008ace;
    padding: 20px 0;
    color: #fff;
}
#ocean .marine-issues-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 24px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #fff;
    letter-spacing: -0.03em;
    line-height: 1.4;
}
#ocean .marine-issues-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .marine-issues-contents h2 span {
    font-size: 36px;
}
#ocean .marine-issues-text-area {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
#ocean .marine-issues-text-area span {
    padding: 0 0 2px;
    border-bottom: 1px solid #fff;
}
#ocean .marine-issues-text-area span.text-large {
    font-size: 18px;
    line-height: 1.9;
    letter-spacing: -0.01em;
}

#ocean .ocean-marine-issues-img-01 {
    width: 100%;
    max-width: 320px;
    margin: 40px auto;
}
#ocean .ocean-marine-issues-img-02 {
    margin: 40px auto;
}

/*====================================

 6.私たちにできることはなんだろう

====================================*/
#ocean .actions-contents {
    width: 100%;
    padding: 20px 0;
    background-image: url("../images/ocean-actions-bg.png");
    background-size: 100%;
    background-repeat: repeat-y;
}
#ocean .actions-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 24px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #1eaa39;
    letter-spacing: -0.03em;
    line-height: 1.3;
}
#ocean .actions-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-green.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .actions-contents h2 span {
    font-size: 36px;
}
#ocean .actions-text-area {
    width: 100%;
    max-width: 320px;
    margin: 48px auto 0;
}
#ocean .actions-text-area h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.5;
}
#ocean .actions-text-area .actions-img {
    width: 100%;
    max-width: 320px;
    margin: 0 0 20px;
}

/*====================================

 7.ヤシノミ洗剤と水のおはなし

====================================*/
#ocean .water-contents {
    width: 100%;
}
#ocean .water-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 24px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1;
}
#ocean .water-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .water-contents h2 span {
    font-size: 36px;
}
#ocean .water-text-area {
    width: 100%;
    max-width: 320px;
    margin: 48px auto 0;
}
#ocean .ocean-water-img-01 {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 24px;
}
#ocean .ocean-water-img-02 {
    width: 100%;
    max-width: 320px;
    margin: 48px auto;
}
#ocean .ocean-water-link-area {
    width: 100%;
    margin: 48px auto;
}

/*マーク*/
#ocean dl.mark-area {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 32px;
}
#ocean dl.mark-area dt {
    margin: 0 24px 0 0;
}
#ocean dl.mark-area dd {
    font-size: 12px;
}
#ocean dl.mark-area dd span {
    font-size: 10px;
}
#ocean .mark-rspo,
#ocean .mark-borneotrust {
    max-width: 64px;
}

/*ヤシノミ洗剤ブランドサイト*/
#ocean a.brand-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 0 auto 24px;
    background-color: #fff;
    color: #0062b1;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #0062b1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#ocean a.brand-btn::after {
    content: "→";
    font-size: 20px;
    position: absolute;
    right: 24px;
}
#ocean a.brand-btn:hover {
    background-color: #0062b1;
    color: #fff;
    border: 1px solid #0062b1;
 }
#ocean a.brand-btn:hover::after {
    color: #fff;
}
/*ヤシノミ洗剤の販売店舗を探す*/
#ocean a.search-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 0 auto 24px;
    background-color: #fff;
    color: #666666;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #c4c4c4;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#ocean a.search-btn::after {
    content: "→";
    font-size: 20px;
    position: absolute;
    right: 24px;
}
#ocean a.search-btn:hover {
    background-color: #666666;
    color: #fff;
    border: 1px solid #666666;
 }
#ocean a.search-btn:hover::after {
    color: #fff;
}

/*オンラインショップ*/
#ocean ul.buy-online-area {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
#ocean ul.buy-online-area li a {
    width: 100%;
    display: block;
    width: 154px;
    height: 56px;
    border-radius: 28px;
    margin: 0 auto;
    border: 1px solid #c4c4c4;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ocean ul.buy-online-area li a img {
    width: 100%;
    max-width: 80px;
}

/*====================================

 8.応募条件

====================================*/
#ocean .requirements-contents {
    width: 100%;
    padding: 0 0 48px;
    background: url('../images/ocean-requirements-bg.png') repeat-y top center/cover;
    background-size: 100%;
}
#ocean .requirements-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 28px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1;
}
#ocean .requirements-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .requirements-contents h2 span {
    font-size: 36px;
}
#ocean ul.requirements-text-area {
    width: 100%;
    max-width: 320px;
    margin: 48px auto 0;
}
#ocean ul.requirements-text-area li {
    padding: 20px 0;
    border-bottom: 2px solid #bae2f8;
}
#ocean ul.requirements-text-area li h3 {
    padding: 0 0 0 1em;
    color: #0062b1;
    font-size: 16px;
    line-height: 1.5;
}
#ocean ul.requirements-text-area li h3::before {
    content: "●";
    margin:0 4px 0 -1em;
    font-size: 14px;
}
#ocean ul.requirements-text-area li p {
    margin: 8px 0 0;
    font-size: 12px;
}


/*こんな場合はどうなるの？
ツアーに関する疑問にnoteで回答中！*/
#ocean .note-area {
    width: 320px;
    margin: 0 auto;
    padding: 40px 0;
    border-bottom: 2px solid #bae2f8;
}
#ocean .note-area h3 {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    color: #0062b1;
}
#ocean .ocean-requirements-img {
    width: 100%;
    max-width: 320px;
    margin: 24px auto 0;
}

/*キャンペーン応募規約*/
/*対馬ツアーに関する注意事項*/
#ocean .terms-area {
    width: 320px;
    margin: 0 auto;
    padding: 40px 0 0;
}
#ocean .terms-area h3 {
    position: relative;
    margin: 0 0 48px;
    font-size: 24px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1.3;
}
#ocean .terms-area h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .terms-text-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    height: 312px;
    padding: 24px;
    overflow: auto;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    line-height: 1.7;
}
#ocean .url-text {
    overflow-wrap: anywhere;
    color: #0062b1;
}

/*応募フォーム*/
#ocean a.form-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 40px auto 0;
    background-color: #0062b1;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #0062b1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#ocean a.form-btn::after {
    content: "→";
    font-size: 20px;
    position: absolute;
    right: 24px;
}
#ocean a.form-btn:hover {
    background-color: #fff;
    color: #0062b1;
    border: 1px solid #0062b1;
 }
#ocean a.form-btn:hover::after {
    color: #0062b1;
}

/*====================================

 9.キャンペーンに関するお問い合わせはこちら

====================================*/
#ocean .contact-contents {
    width: 100%;
    padding: 48px 0 24px;
}
#ocean .contact-contents h2 {
    position: relative;
    margin: 0 0 24px;
    font-size: 24px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1;
}
/*お問い合わせフォーム*/
#ocean a.contact-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 0 auto 0;
    background-color: #fff;
    color: #0062b1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #0062b1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#ocean a.contact-btn::after {
    content: "→";
    font-size: 20px;
    position: absolute;
    right: 24px;
}
#ocean a.contact-btn:hover {
    background-color: #0062b1;
    color: #fff;
    border: 1px solid #0062b1;
 }
#ocean a.contact-btn:hover::after {
    color: #fff;
}

/*====================================

 10.フッター

====================================*/
#ocean .footer-contents {
    width: 100%;
    margin: 0 0 0;
    padding: 20px 0 40px;
    background: #008ace;
    text-align: center;
    color: #fff;
}
#ocean ul.footer-nav {
    display: flex;
    justify-content: center;
    font-size: 12px;
}
#ocean ul.footer-nav a {
    color: #fff;
    text-decoration: none;
}
#ocean .yashinomi-copyright {
    margin: 16px 0 0;
    font-size: 10px;
}

/*イオン九州CPバナー*/
#ocean .banner-contents {
    width: 100%;
    padding: 24px 0 24px;
}
#ocean .banner-contents h2 {
    position: relative;
    margin: 0 0 24px;
    font-size: 24px;
    color: #0062b1;
    text-align: center;
    text-shadow: 0px 0px 0.5px #0062b1;
    letter-spacing: -0.03em;
    line-height: 1;
}
#ocean .banner-contents .banner-img {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 24px auto 0;
}


/*====================================

 11.メディアクエリ

====================================*/
/*
 	11.1 画面サイズが1024px以上のCSSを記述
========================================================================*/
@media screen and (min-width: 1024px) {
    #ocean {
        background: url(../images/ocean-bg-all.png) no-repeat top center;
        background-size: cover;
        background-attachment: fixed;
    }

    /*デバイスごとに要素を表示・非表示*/
    #ocean .pc-v { display: block !important; }
    #ocean .pc-no { display: none !important; }
    #ocean .tablet-v { display: none !important; }
    #ocean .sp-v { display: none !important; }
    #ocean .sp-no { display: block !important; }

    /*
        左側
    ====================================*/
    #ocean .ocean-pc-left {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #ocean .ocean-pc-logo {
        max-width: 510px; /* 最大サイズ */
        width: 100%;
        height: auto; /* 縦横比維持 */
        margin: 0 auto; /* 中央配置 */
    }

    /*
        スマホコンテンツ部分
    ====================================*/
    #ocean .ocean-article {
        max-width: 400px;
        margin: 0 auto 0;
        overflow: hidden;
    }

    /*
        右側
    ====================================*/
    #ocean .ocean-pc-right {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #ocean .ocean-pc-img {
        max-width: 300px; /* 最大サイズ */
        width: 100%; /* 画面サイズに応じて縮小 */
        height: auto; /* 縦横比を維持 */
        margin: 0 auto; /* 中央配置 */
    }
}

/*
 	11.2 画面サイズが578pxから1024pxまでのCSSを記述
========================================================================*/
@media screen and (min-width: 578px) and (max-width: 1024px) {
    #ocean {
        background: url(../images/ocean-bg-all.png) no-repeat top center;
        background-size: cover;
        background-attachment: fixed;
    }
    /*デバイスごとに要素を表示・非表示*/
    #ocean .pc-v { display: block !important; }
    #ocean .pc-no { display: none !important; }
    #ocean .sp-v { display: none !important; }
    #ocean .sp-no { display: block !important; }
    #ocean .tablet-v { display: block !important; }
    #ocean .tablet-no { display: none !important; }

    /*
        左側
    ====================================*/
    #ocean .ocean-pc-left {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #ocean .ocean-pc-logo {
        max-width: 510px; /* 最大サイズ */
        width: 100%;
        height: auto; /* 縦横比維持 */
        margin: 0 auto; /* 中央配置 */
    }

    /*
        スマホコンテンツ部分
    ====================================*/
    #ocean .ocean-article {
        max-width: 400px;
        margin: 0 auto 0;
        overflow: hidden;
    }

    /*
        右側
    ====================================*/
    #ocean .ocean-pc-right {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #ocean .ocean-pc-img {
        max-width: 300px; /* 最大サイズ */
        width: 100%; /* 画面サイズに応じて縮小 */
        height: auto; /* 縦横比を維持 */
        margin: 0 auto; /* 中央配置 */
    }

}

/*====================================

 12.レポート

====================================*/
#ocean .report-contents {
    width: 100%;
    padding: 0 0 0;
    margin: 0 0 -40px;
    background: url(../images/ocean-requirements-bg.png) repeat-y top center / cover;
    background-size: 100%;
    padding: 20px 0;
    color: #0062b1;
}
#ocean .report-contents .report-heading {
    font-size: 22px;
    text-align: center;
}
#ocean .report-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 36px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #fff;
    letter-spacing: -0.03em;
    line-height: 1.4;
}
#ocean .report-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .report-contents h2 span {
    font-size: 36px;
}

/*レポート*/
#ocean .report-area {
    margin: 0 0 32px;
    text-align: center;
    line-height: 1.5;}
#ocean .report-area h3 {
    font-size: 28px;
    margin: 0 0 16px;
}
#ocean .report-area-text {
    margin: 0 0 32px;
}
#ocean .report-img-text {
    width: 100%;
    max-width: 320px;
    text-align: left;
    margin: 24px 0 0;
}
#ocean .divider {
    width: 100%;
    max-width: 336px;
    border: none;
    border-top: 1px solid #bae2f8; /* 線の色と太さ */
    margin: 24px auto; /* 上下の余白 */
}

/*====================================

 13.ツアー参加者の声

====================================*/
#ocean .voice-contents {
    width: 100%;
    padding: 0 0 0;
    background: #fff;
    margin: 0 0 0;
    padding: 20px 0 0;
    color: #0062b1;
}
#ocean .voice-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 32px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #fff;
    letter-spacing: -0.03em;
    line-height: 1.4;
}
#ocean .voice-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .voice-contents h2 span {
    font-size: 36px;
}
#ocean li.voice-item {
    box-sizing: border-box;
    width: 100%;
    min-height: 520px;
    max-width: 320px;
    margin: 0 32px;
    padding: 32px;
    background: #eaf5fa;
    border-radius: 8px;
}
#ocean .voice-text {
    margin: 16px 0 0;
}
#ocean dl.nickname {
    text-align: center;
}
#ocean dl.nickname dt {
    font-size: 16px;
}
#ocean dl.nickname dd {
    font-size: 28px;
}
#ocean dl.nickname dd span {
    font-size: 22px;
}

/*
  slick
----------------------------------- */
#ocean .voice-contents .slick-prev {/*戻る矢印の位置と形状*/
    background-image:url(../images/ocean-arrow-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    top: 40%;
    left: 8px;
}
#ocean .voice-contents .slick-next {/*次へ矢印の位置と形状*/
    background-image:url(../images/ocean-arrow-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    top: 40%;
    right: 8px;
}

/*====================================

 14.メディアでも紹介いただきました

====================================*/
#ocean .media-contents {
    width: 100%;
    padding: 0 0 0;
    background: url(../images/ocean-requirements-bg.png) repeat-y top center / cover;
    margin: 0 0 -0;
    padding: 20px 0;
    color: #0062b1;
}
#ocean .media-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 32px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #fff;
    letter-spacing: -0.03em;
    line-height: 1.4;
}
#ocean .media-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .media-contents h2 span {
    font-size: 36px;
}
#ocean .media-item  {
    width: 100%;
    max-width: 320px;
    margin: 16px auto 0;
}
#ocean .media-item p  {
    margin: 24px 0 0;
    font-size: 16px;
    font-family: "A1 Gothic M", "A1ゴシック M", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
}
#ocean .media-divider {
    width: 100%;
    max-width: 320px;
    border: none;
    border-top: 1px solid #bae2f8; /* 線の色と太さ */
    margin: 32px auto 32px; /* 上下の余白 */
}


/*====================================

 15.ヤシノミダンスキャンペーン
  ※公開前にCP終了のため非公開

====================================*/
#ocean .dance-contents {
    width: 100%;
    margin: 0 0 -20px;
    padding: 0 0 0;
    background: #fff;
    padding: 20px 0;
    color: #0062b1;
}
#ocean .dance-contents h2 {
    position: relative;
    margin: 0 0 48px;
    font-size: 30px;
    text-align: center;
    text-shadow: 0px 0px 0.5px #fff;
    letter-spacing: -0.03em;
    line-height: 1.4;
}
#ocean .dance-contents h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 46px;
    height: 12px;
    background-image: url("../images/ocean-title-nami-blue.png");
    background-size: 46px 12px;
    background-position: center;
    transform: translateX(-50%);
}
#ocean .dance-contents h2 span {
    font-size: 22px;
}
#ocean .dance-item  {
    width: 100%;
    max-width: 320px;
    margin: 16px auto 0;
}
#ocean .media-item-text {
    margin: 24px 0 0;
}

/*====================================

 16.サラヤSDGSソリューションバナー

====================================*/
#ocean .banner-sdgs-contents {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 24px;
}