@charset "UTF-8";



/*●●●●●●●●● front-page.scss ●●●●●●●●●

/* ＜＜＜ ブレイクポイント ＞＞＞ */
/* ＜＜＜ ブレイクポイント ＞＞＞ */
/* ＜＜＜ ブレイクポイント ＞＞＞ */
    /* ●●●●●●●●●● iPhone5 (320) ～ 6/7/8/10 (375)●●●●●●●●●● */
    @media /* (min-width: 320px) and */ (max-width: 374px){
    }
/* ●●●●●●●●●● iPhone11 (414) ～12/13 (428)●●●●●●●●●● */
    @media (min-width: 375px) and (max-width: 428px){
    }
/* ●●●●●●●●●● スマホ横　　iPhone5 (568) 〜 ●●●●●●●●●● */
    @media (min-width: 429px) and (max-width: 767px){
    }
/* ●●●●●●●●●● iPadMini (768) iPadAir(820) ～ iPad12Pro(1024)●●●●●●●●●● */
   /* (ラッパーストップ有り) */
    @media (min-width: 768px) and (max-width: 1024px){
    }
/* ●●●●●●●●●● PC小 ●●●●●●●●●● */
    @media (min-width: 1025px) and (max-width: 1399px){
    }
/* ●●●●●●●●●● PC大 ●●●●●●●●●● */
    /* (ラッパーストップ有り) */
    @media (min-width: 1400px)  /* and (max-width: 1920px) */ {
    }


/* transition: all 0.4s; 使用箇所のルール */
    /* ブレイクポイント【変化前・後要素】 */
    /* addクラス【変化前・後要素】 */
    /* hoverクラス【変化前・後要素】 */
    /* focusクラス【変化前・後要素】 */


/* cssスタイリング順のルール */
    /* ポジション */
    /* ディスプレイ */
    /* サイズ */
    /* 装飾 */
    /* アニメーション */


//-------- （全体・エリアまたぎモノ） --------
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////



// z-index管理
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    /* スライドショー
        .n2-section-smartslider 1
    */

    /* 雲フレーム
        .cloudFrame 2
    */









/* プラグイン[smart slider3]　UI用のcss/////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

	/* smart slider　UI用 (UI内で編集したい要素に対し、セレクタ名を作成した。（作成しただけ！）レイアウト変更自体はここで行う)---------------------------------------------------------- */
    /* ---------------------------------------------------------------------------------------------------------------------------------------- */
		/* 全スライドに対して */
            /* 各スライド画像の文字影 */
            .text-shadow * {
                text-shadow: 2px 3px 4px #808080 !important;
            }

            /* 各スライド画像のフォント体（最下段の太字テキスト部のみ使用している） */
            .font-family * {
                font-family: "M_PLUS_Rounded_1c_Bold" !important;
            }

	/* smart slider　UI用終わり---------------------------------------------------------------------------------------------------------------- */







//-------- （雲フレーム総合エリア）--------
    // （プリセット仕様）スライドショー　専用UIにて設定した幅以下では、フル画面 & 拡大・縮小可変対応済み。サイズ超えてからは、幅固定で常にマージンを中央寄せのまま、拡大・縮小可変に対応できる仕様
    // //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
/*


        // ヘッダーに重ならないようにここでtop指定してレイアウト位置を調整
            .cloudFrame__parent::before {
                content: '';
                display: block;
                padding-top: 50%;
            }

        // 子要素であるcloudFrame（スライドショーエリアの１番外枠）を中心に寄せるための設定をここで
            .cloudFrame__parent {
                position: relative; /* フレーム画像とスライド画像のindexコントロールのため *
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
            }
*/

        /* ---------------雲フレーム画像（アスペクト比 1:2で可変仕様）--------------- */
/*
        .cloudFrame::before {
                content: '';
                display: block;
                padding-top: 50%; // (画像のタテ / 画像のヨコ) × 100（親の横の50%を縦に指定。つまりアスペクト比1:2で可変していく）
            }
*/

            .cloudFrame {
                background: url("../img/cloud_frame_1920_960_1700_700.png") no-repeat; // 1枚画像のみ使用、与えられたサイズに対し上下中央寄せで配置
                position: absolute; // フレーム画像の階層コントロール目的
                z-index: 2;
                width: 100%;
                height: 100%;
// ここまでだとモニタ幅のMAXを決めていないので、横中央寄せは終始効いているが、広がりっぱなしで背景画像からいずれはみ出してしまう
                max-width: 1920px;
                margin: 0 auto;
// ここまでだと画像に合わせて同じアスペクト比で可変しているようだが、高さが合っておらす、綺麗に重なっていない状態になる。なぜこの高さから始まってしまうのだろう？？？
// height 参照元は background要素になっている。この高さの垂直方向中央寄せが効いている為上下に余白ができたようになる。



                background-size: contain; //
                pointer-events: none; // スライドショーの上層に配置する為、ポインターアクション反応不可を解除させる目的
                //opacity: 0;
                //visibility: hidden; /* 見えないがサイズは存在している。アニメの始点〜終点を効かすため残す */
                transition: all 0.5s;

                /* ● ● ● ● ● ● ● ● ブレイクポイント ● ● ● ● ● ● ● ● */
                    /* PC小～大 1181 1400 */
                    @media (min-width: 1025px){
                        //visibility: visible;
                        //opacity: 1;
                        //transition: all 0.5s;
                    }
            }
        
        /* ---------------スライド画像エリア--------------- */
        /* smart sliderエリア */
        /* 最大幅(1700px) × 最大高(700px)、UIで指定している（アスペクト比 1:2で可変仕様）*/
        /* 縦横の中央寄せの可変キープは、親のflexでコントロールしている */
        .n2-section-smartslider {
            //position: absolute !important; /* 雲フレームとの階層コントロールのため */
            //z-index: 1;
        }

        .n2-section-smartslider p {
            //user-select: none !important; /* テキスト文字を選択させない */
        }



        // 各幅に対してのスライドショーのアスペクト比をUIの方で指定せよ。