@charset "utf-8";

/* クリアフィックス */
.cf {display: inline-block;}
* html .cf {height: 1%;}
.cf {display: block;}

/* ブラウザ規定スタイルの解除 START */
p,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
}

img {
    vertical-align:  bottom;
}

ul {
    margin: 0;
    padding: 0;
}
/* ブラウザ規定スタイルの解除 END */

/* 画面共通 */
html {
    min-height: 100%;
    position: relative;
	color: #FFF;
    width:100%;
    height:100%;
}

body {
    -webkit-text-size-adjust: 100%;
    font-family: 'ヒラギノ角ゴ Pro W6','Droid Sans','Avenir','Helvetica Neue','Helvetica','Arial','ＭＳ ゴシック','MS PGothic';    
    margin: 0px;
    padding: 0px;
    width:100%;
    height:100%;
    color: #333333;
}

/* ヘッダー */
header {
    position:relative;
	height:39px;
    background-color: #FFF;
    width:100%;
    margin: 20px 0px;
}

/* トップ画面 */
.index {
    text-align: center;
}

/* トップ画面以外 */
#wrap {
    background-color: #FFF;
    margin: 0 auto;
    max-width: 1000px;
    width:100%;
    height:auto !important;
    min-height: 100%;
    position: relative; 
}

/* ロゴエリア */
#logo {
    position:absolute;
    margin: 2px 0 2px 10px;
}

/* ロゴ画面 */
#logo img {
    height: 36px;
}

/* コンテンツエリア */
#contents {
    padding-bottom: 160px;
    max-width: 690px;
    margin: 0 auto;
}

/* フッター　START */
footer {
    text-align: center;
    font-size: 0.75em;
    bottom: 0;
    width: 100%;
    height:120px;
    position: absolute;
    max-width: 1000px;
    line-height: 20px;
}

footer nav {
    color: #656565;
    background-color: #eeeeee;
    height:100%;
    padding-top: 15px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

footer nav a {
    text-decoration: none;
    color: #656565;
    padding: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

footer nav a:hover {
    text-decoration: underline;
}

footer nav p {
    margin-bottom: 10px;
    margin-right: 10px;
    line-height: 5px;
}

.copylight {
    position: relative;
    text-align: left;
    padding-left: 15px;
    top: 28px;
    font-size: 0.75em;
}

/* フッター部ボーダー（現在未使用） */
.border_area {
    height: 20px;
    background-repeat: repeat-x;
    background-position:top; 
    background-size:10px 10px;
}

/* フッター　END */

/* トップ画面　フォームエリア */
#top_form_area {
    display:block;
}

/* トップメイン画像領域 */
#mainimage_area {
    padding-bottom: 20px;
}

/* トップメイン画像 */
#mainimage {
    width: 100%;
    margin: 10px 0 0 0 ;
    max-width: 690px;
}

h1 {
    font-size: 1.5em;
    margin: 21px auto;
    font-family: 'ヒラギノ角ゴ Pro W6','Droid Sans'
}

h2 {
    font-size: 1.2em;
    margin-bottom: 0;
    font-weight: normal;
}

/* 各画面名 */
.title {
    height: 50px;
    padding-left: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    align-items: -webkit-center;
    align-items: -moz-center;
    align-items: -ms-center;
}

/* TOPエラーメッセージ */
.error_message {
    color: #FF0000;
    font-weight: bold;
    text-align: center;
    margin: 10px 10px 10px 10px;
    font-size: 1.1em;
}

/* 利用規約 */
div #tos_area {
    margin: 10px 10px 50px 10px;
    height:auto;
    flex: 1;
}

/* 利用規約スクロール */
#tos_scroll_area {
    overflow:auto;
    width:auto;
    padding:10px;
    border:1px solid #e0e0e0;
    background-color:#F9F9F9;
    color:#333333;
    margin: 10px 10px 20px 10px;
    box-sizing: border-box;
    font-size:1em;
    font-family: 'MS UI Gothic';
    -webkit-overflow-scrolling: touch;
}

li ul {
    margin: 0 0 0 1em;
}

/* ダウンロード対象画像 */
.photo {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    align-items: -webkit-center;
    align-items: -moz-center;
    align-items: -ms-center;
	justify-content: center;
	justify-content:  -webkit-center;
	justify-content: -moz-center;
	justify-content: -ms-center;
    background-color: #eeeeee;
}

/* ダウンロード画面　各画像 */
.photo img {
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}

/* ダウンロード画面　使い方画面リンク */
.howto_link {
    font-size: 0.75em;
    text-align: center;
    margin-top: 35px;
}

.howto_link a {
    color: #000;
}

/* 選択画像　透過 */
.over img {
	opacity:0.5;
}

/* 複数画像サムネイル START */
.nav {
    height:auto;
    margin-top: 10px;
}

.nav ul{
	padding: 0;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    flex-wrap: wrap;
    flex-wrap: -webkit-wrap;
    flex-wrap: -moz-wrap;
    flex-wrap: -ms-wrap;
}

.nav li {
	list-style:none;
    height: 63px;
    width: 84px;
    background-color: #eeeeee;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    margin: 1.5px;
    position: relative;    
}

.nav li img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* 複数画像サムネイル END */

/* DL画面　期限 */
#limit_text {
    font-size: 0.7em;
    text-align: right;
    margin: 8px 10px 0 0;
}

/* DL画面　説明 */
.click_text {
    font-size: 0.75em;
    text-align: left;
    margin: 5px 0;
}

.text_area {
/*    line-height: 8px;*/
    margin: 22px 0 15px 10px;
}

/* ダウンロード画面コンテンツ名 */
.content_name {
    padding: 0 3%;
    text-align: center;
    margin-bottom: 5px;
}

/* ダウンロード画面コンテンツ画像 */
.content_name img {
    width: 100%;
    max-width: 690px;
}

/* バナーエリア */
.banner_area {
    padding: 10px 5% 0 5%;
    margin-top: 30px;
}

/* バナー画像 */
.banner_area img {
    width: 100%;
}

/* TOP　アクセスコード */
#accesscode {
    font-size:1.1em;
    width:86%;
    height: 58px;
    position: relative;
    padding-left: 10px;
/*    letter-spacing: 0.1em;*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    margin-bottom: 5px;
    border: 1px solid #e0e0e0;
    -webkit-appearance: none;
    border-radius: 0;
}

/* Chrome, Safari */
input::-webkit-input-placeholder{
    color: #a1a1a1;
}

/* Firefox */
input::-moz-placeholder{
    color: #a1a1a1;
}

/* Firefox 18以前 */
input:-moz-placeholder{
    color: #a1a1a1;
}

/* IE */
input:-ms-input-placeholder{
    color: #a1a1a1;
}

/* ヘルプボタン */
header .howto  img {
    width: 150px;
}

header .howto {
    position:absolute;
    padding: 7px 0;
	right:10px;
}

/* ボタン（基本） */
.button {
    color:#FFFFFF;
    cursor:pointer;
    font-size: 1.1em;
    text-align: center;
    text-decoration:none;
    margin:10px auto; 
    height: 50px;
    border-radius: 6px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    font-weight: bold;
}

/* OKボタン */
.ok {     
    border:solid 3px #1b4584;
    background-color: #1b4584;
    width: 86%;
}

.ok_red {     
    border:solid 3px red;
    background-color: red;
    width: 86%;
}

/* グレーボタン */
.cancel {
    background-color: #a1a1a1;
    border:solid 3px #a1a1a1;
    width: 86%;
}

/* ボタンエリア */
#center_btn_area a {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    align-items: -webkit-center;
    align-items: -moz-center;
    align-items: -ms-center;
	justify-content: center;
	justify-content:  -webkit-center;
	justify-content: -moz-center;
	justify-content: -ms-center;
}

/* お問い合わせ画面　フォームエリア */
#contact_form_area {
    margin-bottom: 30px;
    font-size: 0.8em;
}

/* お問い合わせ入力画面　項目名 */
#contact_form_area .column {
    margin: 15px 3% 2px 3%;  
    text-align: left;
    display: inline-block;
}

/* お問い合わせ画面　pタグ */
#contact_form_area p {
    padding: 0 3%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
  
/* テキストボックス */
.textbox {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    background-color: #fff;
    padding-left:6px;
    height: 34px;
    width: 94%;
    margin-left: 3%;
    -webkit-appearance: none;
    border-radius: 0;
}

/* テキストエリア */
.textarea {
    vertical-align:top;
    background-color: #fff;
    padding-left:6px;
    height: 135px;
    width: 94%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    margin-left: 3%;
    -webkit-appearance: none;
    border-radius: 0;
}

/* お問い合わせ確認画面　項目名 */
.conf_column {
    background-color: #a1a1a1;
    padding: 8px 3% !important;
    margin-bottom: 8px;
}

/* お問い合わせ確認画面　データ表示 */
.conf {
    padding: 0 6px;
    margin-bottom: 20px;
} 

/* お問い合わせ完了画面　メッセージエリア */
.comp_text {
    font-size: 0.8em;
    margin: 10px 3% 50px 3%;
}

/* お問い合わせ完了画面　完了メッセージ */
.comp_title {
    line-height: 3em;
}

/* お問い合わせ完了画面　お問い合わせ番号（項目名） */
.comp_num {
    margin-bottom: 3px;
}

/* お問い合わせ完了画面　お問い合わせ番号 */
.o_num {
    font-size: 1.3em;
}

/* ボタンエリア */
.button_area {
    height: 80px;
    margin-bottom: 30px;
}

/* 1つボタン */
.comp {
    text-align: center;
}

/* 使い方画面 スライダーエリア*/ 
.swiper-container {
    padding-bottom: 35px;
}

.swiper-slide {
    text-align: center;
    height: 30%;
}

/* 使い方画面 スライダー下ページボタン */ 
.swiper-pagination-bullet {
    background: #808080;
    width: 16px;
    height: 16px;
    color: #e9e9e9;
    font-size: 0.8em;
    line-height: 16px;
}
    
/* 使い方画面 テキスト */ 
.slide_sub_text {
    font-size: 0.8em;
    color: #333333;
    width: 100%;
    background-color: #e9e9e9;
    padding: 8px 3% !important;
    margin-bottom: 8px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

/* 使い方画面 スライド */ 
.slide {
    max-width: 100%;
    height: auto;
    width:588px;
}
 
.swiper-wrapper {
    text-align: center;
    margin: 0 auto;
}

/* 使い方画面 よくある質問エリア */
.qa {
    width: 100%;
    margin: 3% auto;
    color: #333333;
/*    font-size: 0.8em;*/
}

/* 使い方画面 よくある質問 START */
.qa_title {
    font-size: 0.8em;
    color: #222222;
    width: 100%;
    background-color: #e9e9e9;
    padding: 8px 3% !important;
    margin-bottom: 0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

.op_cl {
    color: #999999;
}

#panel {
    margin-top: 0;
}
 
#panel > dt {
    border-bottom: solid 1px #666666;
    padding: 12px;
    font-size: 0.8em;
}

#panel > dd {
    border-top: solid 1px #666666;
    padding: 10px 10px 10px 0;
    border-width:0 1px 1px 1px;
    margin: 0 10px 2px 10px;
    text-indent:-1.6em; 
    padding-left:1.6em;
    font-size: 0.8em;
}

.q_line {
    list-style:none;   
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items : center;
    align-items : -webkit-center;
    align-items : -moz-center;
    align-items : -ms-center;
    flex-direction: row;
    flex-direction: -webkit-row;
    flex-direction: -moz-row;
    flex-direction: -ms-row;
    justify-content:space-between;
    justify-content:-webkit-space-between;
    justify-content:-moz-space-between;
    justify-content:-ms-space-between;
}

.qes {
    margin-right: 10px;
}

.a {
    vertical-align: middle;
    margin: 0 5px 0 3px;
}

.ans {
    vertical-align: middle;
}

.photo_a {
    width: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

td, th {
    border:1px solid #848484;
    text-indent:0.1em; 
}

th {
    background-color: #FFF;
    color: #222222;
}

.rt {
    font-size: 0.7em;
    margin: 0 0 25px 12px;
    text-align: left;
}

/* 使い方画面 よくある質問 END */

/* stay画面　画像 */
#stay_main_pic {
    margin: 20px auto 30px auto;
    height: 150px;   
}

#stayimage {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

/* stay画面　日本語 */
.jp_message {
    font-size: 0.9em;
    margin-bottom: 25px;
}
.jp_message p {
    margin-bottom: 5px;
}

/* stay画面　英語 */
.en_message {
    font-size: 0.9em;
}
.en_message p {
    margin-bottom: 3px;
}

/* 壁紙プレゼント ここから */

#contents_w {
    padding-bottom: 160px;
    max-width: 1000px;
    margin: 0 auto;
}

.h2_heading01 {
    padding: 10px 10px 8px 0;
    font-size: 2.0em;
}

.h2_heading02 {
    padding: 13px 10px;
    color: #fff;
    background: #5476a7;
}

.p_text01 {
    display: none;
}

.l_in {
    padding: 0 10px;
}

.wallpaper {
    height: 230px;
    text-align: center;
}
    
.wallpaper_img {
    height: 230px;
}

.nav_btn03 {
    position: relative;
    display: block;
    padding: 20px 30px 20px 0;
    cursor: pointer;
    text-decoration: none;
}

.nav_btn03 a {
    margin: 0;
    vertical-align: baseline;
    background: transparent;
}

.nav_btn03 a:visited {
    color: #333;
    text-decoration: none;
}

.nav_btn03 a:link {
    color: #333;
    text-decoration: none;
}

.nav_btn03::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    content: '';
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    -webkit-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);     
}

.nav_btn03_maintxt {
    display: block;
    font-size: 0.9em;
    line-height: 1.4;
    color: #1b4584;
}

#wallpaper_list li {
    border-bottom: 1px solid #e0e0e0;
    list-style-type: none;
}

.mt20 {
    margin-top: 20px !important;
    list-style: none;
    line-height: 1.5;
}

.attention {
    font-size: 0.9em;
}

.ul_txt01 {
    margin-bottom: 15px;
    margin-left: -15px;
    font-size: 0.8em;
}

.ul_txt01>li::before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
/*    width: 3px;
    height: 3px;*/
    content: "";
    background: #333;
    border-radius: 50%;
}

.copylight_wp {
    font-size: 0.8em;
    color: #777;
}

.copylight_wp a:visited {
    color: #333;
    text-decoration: none;
}

.copylight_wp a:link {
    text-decoration: none;
}

.wallpaper_area {
    width: 100%;
    margin: 3% auto;
    color: #333333;
    clear: both;
}

#wallpaper_list {
    margin-top: 0;
    text-decoration: none;
}

.dl_txt01 {
    margin-left: -10px;
}

/* 壁紙プレゼント ここまで */

/* ウィンドウ幅が480px～の場合に適用するCSS */
@media screen and ( min-width:480px ) {
    
     /* バナーエリア */
    .banner_area {
        text-align: center;
    }
    
    /* バナー画像 */
    .banner_area img {
        max-width: 480px;
    }
}

/* ウィンドウ幅が800px～の場合に適用するCSS */
@media screen and ( min-width:800px ) {
    
    header {
        height: 90px;
    }
    
    #logo img {
        height: 63px;
        margin-top: 12px;
    }
    
    /* 壁紙プレゼント ここから */
    .h2_heading01 {
        font-size: 2.8em;
        margin-top: 15px !important;
    }

    .h2_heading02 {
        padding: 15px;
        font-size: 1.2em;
        line-height: 1.4;
    }

    .p_text01 {
        display:inline-block;
    }

    .l_in {
        max-width: 950px;
        margin: 0 auto;
    }
    
    .wallpaper {
        float: right !important;
        width: 200px !important;
        height: auto;
        text-align: center;
        margin: 0 auto;
    }
    
    .wallpaper_img {
        width: 80%;
        height: auto;
    }

    .nav_btn03 {
        padding: 13px 25px 12px 5px;
    }

    #wallpaper_list li {
        border-bottom: none;
        list-style-type: none;
    }

    #wallpaper_list>li:first-child {
        border-top: none;
    }

    #wallpaper_list>li {
        border-top: 1px solid #e2e2e2;
    }
    
    .notice_box {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #ccc;
        padding: 15px 20px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 30px !important;
        padding-top: 30px !important;
    }

    .wallpaper_area {
        /*max-width: 670px !important;*/
        width: 72%;
        margin: 0;
        float: left !important;
        clear: none;
    }

    #wallpaper_list {
        margin-top: 0;
    }

    .dl_txt01 {
        clear: both;
        line-height: 2;
        margin-top: 20px;
    }

    .attention {
        font-size: 0.9em;
        font-weight: bold;
    }
    
    /* 壁紙プレゼント ここまで */
}

/* ウィンドウ幅が0〜1000pxの場合に適用するCSS */
@media screen and ( max-width:1000px ) {
}

/* ウィンドウ幅が0〜800pxの場合に適用するCSS */
@media screen and ( max-width:800px ) {
}

/* ウィンドウ幅が0〜665pxの場合に適用するCSS */
@media screen and ( max-width:665px ) {
}

/* ウィンドウ幅が0〜480pxの場合に適用するCSS */
@media screen and ( max-width:480px ) {

}