@charset "utf-8"; /* CSS Document */ /* 全体 */ *{ margin:0; padding:0; } body{ margin:0; padding:0; font-size:12px; line-height:2em; } /* 画像 */ img{ vertical-align:bottom; } /* リンク */ a{ -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; } a:hover{ opacity: 0.6; filter: alpha(opacity=60); } /* ロゴ */ #header-title-area h1{ width:230px; height:86px; } #header-title-area h1 a{ display: block; width:230px; height:86px; background:url(https://whitedoor.co.jp/images/logo.png) no-repeat 0 0; text-indent:-9999px; } h1 { display: block; font-size: 2em; -webkit-margin-before:0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } .header-title-area { border: none; float: none; padding:0; width:230px; margin:10px auto 10px auto; } @media screen and (min-width: 786px) { /* ************************************************************** レイアウト ************************************************************** */ .site-header-area{ background-color:transparent; } #page{ position:relative; } .page #leftarea,.single #leftarea,.archive #leftarea{ width:100%; height:117px; position:fixed; top:0; left:0; margin:0; padding:0; z-index:1000; background: #fff; text-align:left; } /* .page #leftarea,.single #leftarea,.archive #leftarea{ width:100%; height:rpx; position:fixed; top:0; left:0; margin:0; padding:0; text-align:left; } */ #pagearea{ width:100%; max-width:2000px; box-sizing:border-box; padding:0 0 0 0px; margin:117px 0 0 0; } #site-navigation{ display:none; } /* トップページレイアウト=============================== */ .home .site-header-area{ background-color:transparent; } .home #leftarea{ width:100%; height:117px; position:fixed; top:0; left:0; margin:0; padding:0; z-index:100; background: #fff; text-align:left; } .home #pagearea{ padding:0 0 0 0px; z-index:1; } /* ************************************************************** レフト ************************************************************** */ /* ロゴ=============================== */ #leftarea .site-header-area{ width:100%; height:117px; position:absolute; top:0; left:0; } #header-title-area{ height:86px; text-align:left; float:left; } #header-title-area h1{ width:100%; height:86px; text-align:left; margin:0 40px 0 0; float:left; } #header-title-area h1{ width:230px; height:86px; margin:0 40px 0 0; float:left; } #header-title-area h1 a{ display: block; width:230px; height:86px; margin:0 40px 0 0; float:left; background:url(https://whitedoor.co.jp/images/logo.png) no-repeat left top; text-indent:-9999px; } h1 { display: block; font-size: 2em; -webkit-margin-before:0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } /* メニューエリア=============================== */ /* トップメニュー---------------------------- */ ul.topmenu{ overflow:hidden; zoom:1; /*width:235px;*/ width: 500px; /*height:40px;*/ margin:0; padding:0px 15px 0px 0px; list-style:none inside; position:fixed; top:10px; right:0; z-index:200; background:rgba(240,240,240,0.70); } ul.topmenu li{ float:left; margin-right:25px; /*height:10px;*/ } ul.topmenu li a{ display:block; /*height:10px;*/ text-indent:-9999px; } ul.topmenu span.menu99{ width:189px; height:40px; } ul.topmenu li.menu99 a{ width:189px; height:40px; background:url(https://whitedoor.co.jp/images/topmenu99.png) no-repeat 0 0; } ul.topmenu li.menu01{ width:50px; height:10px; padding:15px 0 0 0; } ul.topmenu li.menu01 a{ width:50px; height:10px; padding:15px 0 0 0; background:url(https://whitedoor.co.jp/images/topmenu01.png) no-repeat 0 0; } ul.topmenu li.menu02{ width:49px; height:10px; padding:15px 0 0 0; } ul.topmenu li.menu02 a{ width:49px; height:10px; padding:15px 0 0 0; background:url(https://whitedoor.co.jp/images/topmenu02.png) no-repeat 0 0; } ul.topmenu li.menu03{ width:80px; height:10px; padding:15px 0 0 0; margin-right:0; } ul.topmenu li.menu03 a{ width:80px; height:10px; padding:15px 0 0 0; background:url(https://whitedoor.co.jp/images/topmenu03.png) no-repeat 0 0; } /* ナビゲーションメニュー---------------------------- */ ul.gnavi{ max-width:2000px; padding:60px 0 0 0; margin:0 0 0 20px; } ul.gnavi li{ /*width:150px;*/ margin:0 0px 0 32px; height:auto; padding:5px 0; font-size: 1.1rem; float:left; } ul.gnavi li a{ display:block; /*width:150px;*/ /*height:30px;*/ /*text-indent:-9999px;*/ font-family: 'Crimson Text'; color: #9a9a9a; font-size: 1.6rem; line-height: 1; } ul.gnavi li a:hover{ opacity:0.6; text-decoration: none; } /* ul.gnavi li.menu01 a{ background:url(https://whitedoor.co.jp/images/navi01.png) no-repeat 0 0; } ul.gnavi li.menu02 a{ background:url(https://whitedoor.co.jp/images/navi02.png) no-repeat 0 0; } ul.gnavi li.menu03 a{ background:url(https://whitedoor.co.jp/images/navi03.png) no-repeat 0 0; } ul.gnavi li.menu04 a{ background:url(https://whitedoor.co.jp/images/navi04.png) no-repeat 0 0; } ul.gnavi li.menu05 a{ background:url(https://whitedoor.co.jp/images/navi05.png) no-repeat 0 0; } ul.gnavi li.menu06 a{ background:url(https://whitedoor.co.jp/images/navi06.png) no-repeat 0 0; } ul.gnavi li.menu07 a{ background:url(https://whitedoor.co.jp/images/navi07.png) no-repeat 0 0; } ul.gnavi li.menu08 a{ background:url(https://whitedoor.co.jp/images/navi08.png) no-repeat 0 0; } ul.gnavi li.menu09 a{ background:url(https://whitedoor.co.jp/images/navi09.png) no-repeat 0 0; } */ /* ナビゲーションメニュー=============================== */ p.sidebn{ width:230px; margin:0 auto 45px auto; } /* コピーライト=============================== */ p.copyright{ font-style:normal; font-size:9px; color:#7d7d7d; width:100%; text-align:center; letter-spacing:-0.03em; } /* トップページレフト=============================== */ .home #leftarea .site-header-area{ height:117px; width:100%; } .home ul.topmenu{ display:none; } /* ************************************************************** ページメインエリア ************************************************************** */ body.column-2l .main-content-site{ float: none; width: 100%; padding-left: 0; } .component-inner{ width: 100%; max-width:none; padding: 0 0 0; float:left; } .main-content-area { border: none; padding-top: 0; } /* ************************************************************** フッター ************************************************************** */ #footer{ background-color:#e5e5e5; width: 100%; float:left; } #main-footer{ background-color:#e5e5e5; margin:0 auto 50px auto; } /* バナーエリア=============================== */ .footer-widget-area{ background-color:#ffffff; margin:0 0 50px 0; } #footer-widget-area-1,#footer-widget-area-3{ width: 50%; box-sizing:border-box; padding-left:0; padding-right: 20px; border-right: 0 solid #ccc; } /* フッター下エリア=============================== */ .footer-copy-area{ background-color:#e5e5e5; margin:0 0 0 0; padding:40px 0px 20px 0px; width: 80%; } /* ウェディングバナー---------------------------- */ .footerbox1,.footerbox2{ float:left; width:44%; height:auto; margin:0 0 0px 0; } .footerbox1 img,.footerbox2 img{ width: inherit; max-width: 100%; height: auto; margin:0 18% 30px 15%; } .footerbox2{ margin:0 0 30px 10px; } p.pagefooterbn img{ width: inherit; max-width: 100%; height: auto; } /* お問い合わせエリア---------------------------- */ /*.footerbox3{ clear:both; width:100%; }*/ .footerbox3{ float: left; width: 44%; margin:0 4% 30px 4%; } /* 電話 */ .tel{ width:27%; max-width:300px; height:auto; margin:20px 2.7% 0 4%; } /* メール */ .mail{ /* width:21%; */ max-width:230px; height:auto; margin:48px 3% 0 0; } /* 資料 */ .footerimg{ /* width:26.5%; */ max-width:292px; height:auto; margin:0 0 0 0; } ul.footerShop{ width: 44%; float: left; margin: 20px 0 30px 4%; } ul.footerShop li{ float: left; font-size: 1rem; margin-bottom: 10px; } ul.footerShop li:nth-child(odd){ margin-right: 4rem; } ul.footerShop li a{ font-size: 2rem; padding-left: 1rem; } .footer-shop h4{ border:1px solid #777777; text-align: center; padding:10px 0; width:30%; } h5.area{ font-weight:bold; } .footer_kokunai,.footer_europe,.footer_asia{ display:block; } .footer_kokunai li{ list-style-type:none; width:16.6666666%; float:left; } .footer_europe li{ list-style-type:none; width:33.333333333%; float:left; } .footer_asia li{ list-style-type:none; float:left; } /*-------------------------------------- フッターfacebook等追記分 --------------------------------------*/ .footer_icon{ width: 100%; margin: 20px 0px 0px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #B7C2B7; } .footer_icon ul{ width: 70px; margin: 0px auto 0px auto; padding: 0px; text-align: center; } .footer_icon li{ float: left; margin: 0px; padding: 10px 5px 0px 0px; list-style-type: none; } /* コピーライト=============================== */ .footer_copyright{ width:100%; float:left; text-align:center; margin:30px 0px 0px 0px; } /* トップページフッター=============================== */ .home .footer-widget-area{ display:none; } .home .footer-copy-area{ min-height:485px; box-sizing:border-box; padding:100px 0 100px 0; position:relative; z-index:4; } /* ************************************************************** トップページスライドショー ************************************************************** */ .home ul.topmain{ height:100%; top:0; } /* 文字・ボタン=============================== */ ul.topmain li span{ display:block; text-align:right; width:518px; height:110px; margin:200px 0 0 50px; } ul.topmain li span img{ margin-bottom:30px; } /*.slider02 a img { border:3px solid #fff; } .slider03 a img { border:3px solid #fff; } */ .home ul.topmain li.slider03 .slidetxt3{ margin-bottom:36px; } ul.topmain li p{ display:block; text-align:right; width:424px; height:110px; margin:350px 50px 0 0; float:right; } ul.topmain li img{ margin-bottom:30px; } ul.topcover li p{ display:block; text-align:right; width:424px; height:110px; margin:350px 50px 0 0; float:right; position:relative; z-index:10; } ul.topcover li img{ margin-bottom:30px; } /* ************************************************************** トップページメインエリア ************************************************************** */ .home #primary{ width:100%; max-width:2000px; position:relative; z-index:4; margin:60% 0 0 0; /* padding:0 0 50px 0; */ background-color:#ffffff; } /* 右上固定メニュー=============================== */ ul.topright{ overflow:hidden; zoom:1; /*width:235px;*/ width: 500px; /*height:40px;*/ margin:0; padding:0px 15px 0px 0px; list-style:none inside; position:fixed; top:10px; right:0; z-index:200; background:rgba(240,240,240,0.70); } ul.topright li{ float:left; margin-right:25px; } ul.topright li a{ display:block; text-indent:-9999px; } ul.topright span.menu99{ width:189px; height:40px; } ul.topright li.menu99 a{ width:189px; height:40px; background:url(https://whitedoor.co.jp/images/topmenu99.png) no-repeat 0 0; } ul.topright li.menu01{ width:50px; height:10px; padding:15px 0 0 0; } ul.topright li.menu01 a{ width:50px; height:10px; padding:15px 0 0 0; background:url(https://whitedoor.co.jp/images/topmenu01.png) no-repeat 0 0; } ul.topright li.menu02{ width:49px; height:10px; padding:15px 0 0 0; } ul.topright li.menu02 a{ width:49px; height:10px; padding:15px 0 0 0; background:url(https://whitedoor.co.jp/images/topmenu02.png) no-repeat 0 0; } ul.topright li.menu03{ width:80px; height:10px; padding:15px 0 0 0; margin-right:0; } ul.topright li.menu03 a{ width:80px; height:10px; padding:15px 0 0 0; background:url(https://whitedoor.co.jp/images/topmenu03.png) no-repeat 0 0; } /* コンセプト=============================== */ .top_concept{ width:100%; height:1000px; background:url(https://whitedoor.co.jp/images/bg_concept.jpg) no-repeat left top; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_concept .contentbox{ width:500px; height:400px; position:absolute; top:100px; /*bottom:0;*/ right:9%; margin:auto; } /* 見出し */ .top_concept h2{ width:100%; text-align:left; margin-bottom:50px; } /* 説明文 */ .top_concept p{ text-align:center; } .top_concept .bn_detail{ margin-top:50px; } /* アドバンテージ=============================== */ .top_advantage{ width:100%; height:1000px; background:url(https://whitedoor.co.jp/images/bg_advantage.jpg) no-repeat left top; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_advantage .contentbox{ width:500px; height:400px; position:absolute; top:100px; /*bottom:0;*/ right:9%; margin:auto; } /* 見出し */ .top_advantage h2{ width:100%; text-align:left; margin-bottom:50px; } /* 説明文 */ .top_advantage p{ text-align:center; } /* ドレス=============================== */ .top_weddingdress{ width:100%; margin:0 0 0 0; position:relative; } .top_weddingdress:before{ content:""; display:block; padding-top: 82.1%; } .top_weddingdress .bgarea{ position:absolute; top:0; left:0; bottom:0; right:0; background:url(https://whitedoor.co.jp/images/bg_dress.jpg) no-repeat 0 0; background-size:contain; } /* 内容エリア---------------------------- */ .top_weddingdress .contentbox{ width:50%; height:100%; margin:0 auto 0 auto; } /* 見出し */ .top_weddingdress h2{ width:100%; text-align:center; margin:10% 0 8% 0; } .top_weddingdress p{ text-align:center; color:#ffffff; font-size:12px; line-height:24px; } /* 詳細バナー */ .top_weddingdress .bn_detail{ margin-bottom:55%; } .top_weddingdress .bn_detail p a{ display: block; } /*強み */ .top_weddingdress h3{ text-align:center; margin-bottom:35px; } /* お客様の声=============================== */ .top_voice{ width:100%; height:1000px; background:url(https://whitedoor.co.jp/images/bg_voice.jpg) no-repeat 0 0; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_voice .contentbox{ width:490px; height:470px; position:absolute; top:0; bottom:0; right:12%; margin:auto; } /* 見出し */ .top_voice h2{ width:100%; text-align:center; margin-bottom:150px; } /* 説明文 */ .top_voice p{ text-align:center; } .top_voice .bn_detail{ margin-top:50px; } /* サービス=============================== */ .top_service{ width:100%; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_service .contentbox{ width:100%; height:auto; position:relative; } /* 見出し */ .top_service h2{ width:410px; height:120px; position:absolute; top:12%; left:0; right:0; margin:auto; text-align:center; z-index:6; } /* バナー */ .top_service p{ width:100%; height:auto; padding:0; margin:0; position:relative; z-index:5; } /* 投稿表示=============================== */ .top_topics{ width:100%; margin:0 0 0 0; box-sizing:border-box; padding:80px 0 75px 0; overflow:hidden; zoom:1; } .top_topics .news, .top_topics .campaign, .top_topics .topblog{ float:left; width:29%; margin:0 2% 0 2%; } .news h2,.campaign h2,.topblog h2{ width:100%; text-align:center; margin-bottom:35px; } .news ul,.campaign ul,.topblog ul{ width:100%; list-style:none inside; } .news ul li,.campaign ul li,.topblog ul li{ width:100%; /* overflow:hidden; */ line-height:1.5; height:30px; font-size:12px; color:#000000; } .news ul li a,.campaign ul li a,.topblog ul li a{ color:#000000; } .topblog ul li a[rel] { color: #FFF; } .news dl dt, .campaign dl dt, .topblog dl dt{ margin-bottom: .4em; } .news dl dd, .campaign dl dd, .topblog dl dd{ margin-bottom: .6em; } .top_bnr_area{ width: 80%; margin: 0 auto 20px; } .page_bnr_area{ width: 80%; margin: 40px auto 20px; } } @media screen and (min-width: 786px) and (max-width: 1120px) { /* ************************************************************** トップページメインエリア ************************************************************** */ /* ドレス=============================== */ .top_weddingdress{ height:910px; } .top_weddingdress:before{ padding-top:910px; } .top_weddingdress .bgarea{ background-size:cover; } /* メイン=============================== */ .home #primary{ margin:710px 0 0 0; } /* 内容エリア---------------------------- */ .top_weddingdress .contentbox{ margin:0 0 0 330px; } /* お客様の声=============================== */ /* 内容エリア---------------------------- */ .top_voice .contentbox{ width:100%; height:470px; right:0; margin:auto; box-sizing:border-box; padding-left:350px; } /* 説明文 */ .top_voice p{ box-sizing:border-box; padding-right:10px; width:100%; } .top_voice p img{ max-width:100%; } /* サービス=============================== */ /* 内容エリア---------------------------- */ /* 見出し */ .top_service h2{ width:300px; height:88px; top:10px; } .top_service h2 img{ width:300px; height:88px; } /* 投稿表示=============================== */ .news ul li,.campaign ul li,.topblog ul li{ line-height:24px; height:24px; font-size:10px; } } @media screen and (max-width: 785px) { /* ************************************************************** ヘッダーエリア ************************************************************** */ .mainmenuarea{ display:none; } .mm-menu.mm-offcanvas{ z-index:9999; } .site-header-area { border-top: solid 0 #333; background-color: #fff; } /* メニューボタン */ .mmenu-load-button { top: 27px; left: 30px; } /* ************************************************************** ページメインエリア ************************************************************** */ body.column-2l .main-content-site{ float: none; width: 100%; padding-left: 0; } .component-inner{ margin: 0 auto; max-width:none; padding: 0 0 0; } .main-content-area { border: none; padding-top: 0; } .main-content-header { padding: 0 0 0; } .entry-content { padding: 0 0 0; margin-bottom: 50px; } /* ************************************************************** フッター ************************************************************** */ /* フッター下エリア=============================== */ .footer-copy-area{ background-color:#e5e5e5; margin:50px 0 0 0; box-sizing:border-box; padding:40px 10px; } /* ウェディングバナー---------------------------- */ .footerbox1,.footerbox2{ height:auto; margin:0 0 20px 0; } /* お問い合わせエリア---------------------------- */ .footerbox3{ width:100%; } /* 電話 */ .tel{ display:block; margin:20px 0 20px 0; } /* メール */ .mail{ width:40%; max-width:230px; height:auto; margin:0 3% 0 0; position:relative; top:-25px; } /* 資料 */ .footerimg{ width:57%; max-width:292px; height:auto; margin:0 0 0 0; } /*店舗電話番号*/ .footerShop{} .footerShop li{ margin-bottom: 6px; } .footer-shop h4{ border:1px solid #777777; text-align: center; padding:10px 0; width:100%; } h5.area{ font-weight:bold; } .footer_kokunai,.footer_europe,.footer_asia{ display:block; width:90%; margin:0 5%; } .footer_kokunai li{ list-style-type:none; width:33.33333333333%; float:left; } .footer_europe li{ list-style-type:none; width:33.33333333333%; float:left; } .footer_asia li{ list-style-type:none; } /*-------------------------------------- フッターfacebook等追記分 --------------------------------------*/ .footer_icon{ width: 100%; margin: 20px 0px 0px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #B7C2B7; } .footer_icon ul{ width: 70px; margin: 0px auto 0px auto; padding: 0px; text-align: center; } .footer_icon li{ float: left; margin: 0px; padding: 10px 5px 0px 0px; list-style-type: none; } /* コピーライト=============================== */ .footer_copyright{ float:left; width:100%; font-style:normal; font-size:8px; color:#7d7d7d; width:100%; height:10px; padding-top:30px; text-align:center; } /* トップページフッター=============================== */ .home .footer-widget-area{ display:none; } .home .footer-copy-area{ margin:0 0 0 0; } /* ************************************************************** トップページスライドショー ************************************************************** */ .home ul.topmain{ width:100%; height:400px; position:relative; } /* 文字・ボタン=============================== */ ul.topmain li span{ display:block; text-align:left; width:80%; margin:200px 15% 0 5%; } ul.topmain li span img{ margin-bottom:30px; max-width:100%; height:auto; } ul.topmain li span img.slidetxt3{ position:relative; left:-10%; } ul.topmain li p{ display:block; text-align:right; /* width:424px; height:110px; */ width:80%; margin:120px 20px 0 0; float:right; } ul.topmain li img{ width:100%; margin-bottom:30px; } ul.topcover li p{ display:block; text-align:right; /* width:424px; height:110px; */ width:80%; margin:120px 20px 0 0; float:right; position:relative; z-index:10; } ul.topcover li img{ width:100%; margin-bottom:30px; } /* ************************************************************** トップページメインエリア ************************************************************** */ .home #primary{ width:100%; position:relative; z-index:4; margin:0 0 0 0; padding:0 0 50px 0; background-color:#ffffff; } /* 右上固定メニュー=============================== */ ul.topright{ display:none; } /* コンセプト=============================== */ .top_concept{ width:100%; height:500px; background:url(https://whitedoor.co.jp/images/bg_concept.jpg) no-repeat left top; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_concept .contentbox{ width:400px; height:300px; position:absolute; top:50px; /*bottom:50px;*/ right:10px; } /* 見出し */ .top_concept h2{ width:100%; text-align:left; margin-bottom:20px; } .top_concept h2 img{ height:60px; width:auto; } /* 説明文 */ .top_concept p{ text-align:center; } .top_concept p img{ max-width:100%; } .top_concept .bn_detail{ margin-top:50px; } /* アドバンテージ=============================== */ .top_advantage{ width:100%; height:500px; background:url(https://whitedoor.co.jp/images/bg_advantage.jpg) no-repeat left top; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_advantage .contentbox{ width:400px; height:300px; position:absolute; top:20px; /*bottom:50px;*/ right:10px; } /* 見出し */ .top_advantage h2{ width:100%; text-align:left; margin:-20px 0px 0px 0px; } .top_advantage h2 img{ height:60px; width:auto; } /* 説明文 */ .top_advantage p{ text-align:center; } .top_advantage p img{ max-width:100%; } /* ドレス=============================== */ .top_weddingdress{ width:100%; height:700px; margin:0 0 0 0; position:relative; } .top_weddingdress .bgarea{ width:100%; height:700px; margin:0 0 0 0; background:url(https://whitedoor.co.jp/images/bg_dress.jpg) no-repeat center 0; background-size:cover; } /* 内容エリア---------------------------- */ .top_weddingdress .contentbox{ width:300px; height:100%; margin:0 auto 0 auto; } /* 見出し */ .top_weddingdress h2{ width:100%; text-align:center; padding:50px 0 30px 0; } .top_weddingdress h2 img{ height:24px; width:auto; } /* 詳細バナー */ .top_weddingdress p{ text-align:center; color:#ffffff; font-size:9px; line-height:18px; } .top_weddingdress .bn_detail{ margin-bottom:120px; } /*強み */ .top_weddingdress h3{ text-align:center; margin-top: 26px; margin-bottom:15px; } /* お客様の声=============================== */ .top_voice{ width:100%; height:500px; background:url(https://whitedoor.co.jp/images/bg_voice.jpg) no-repeat 0 0; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_voice .contentbox{ width:300px; height:300px; position:absolute; top:0; bottom:0; right:10px; margin:auto; } /* 見出し */ .top_voice h2{ width:100%; text-align:center; margin-bottom:50px; } .top_voice h2 img{ height:41px; width:auto; } /* 説明文 */ .top_voice p{ text-align:center; } .top_voice p img{ max-width:100%; } .top_voice .bn_detail{ margin-top:50px; } /* サービス=============================== */ .top_service{ width:100%; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_service .contentbox{ width:100%; height:auto; position:relative; } /* 見出し */ .top_service h2{ width:256px; height:75px; position:absolute; top:10px; left:0; right:0; margin:auto; text-align:center; z-index:6; } .top_service h2 img{ width:256px; height:75px; } /* バナー */ .top_service p{ width:100%; height:auto; padding:0; margin:0; position:relative; z-index:5; } /* 投稿表示=============================== */ .top_topics{ width:100%; margin:0 0 0 0; box-sizing:border-box; padding:100px 0 0 0px; } .news,.campaign,.topblog{ width:90%; margin:0 5% 50px 5%; } /* .campaign{ margin:0 5% 0 5%; } */ .news h2,.campaign h2,.topblog h2{ width:100%; text-align:left; margin-bottom:20px; } .news ul,.campaign ul,.topblog ul{ width:100%; list-style:none inside; } .news ul li,.campaign ul li,.topblog ul li{ width:100%; /* overflow:hidden; */ line-height:1.5em; height:24px; font-size:10px; color:#000000; } .news ul li a,.campaign ul li a,.topblog ul li a{ color:#000000; } .topblog ul li a[rel] { color: #FFF; } } /* ************************************************************** 固定ページ ************************************************************** */ .main-content-header .main-content-title { margin-top:0px; margin-bottom:20px; padding-bottom:0; background:none; line-height: 1; } .topmain-welcome-area ul li, .textwidget ul li, .entry-content ul li, .comment-content ul li, .mu_register li { margin: 0 0 0 0; } @media screen and (max-width: 650px) { /* ************************************************************** ヘッダー ************************************************************** */ /* メニューボタン */ .mmenu-load-button { top: 15px; left: 25px; } /* ロゴ */ #header-title-area h1{ width:100%; height:60px; text-align:center; box-sizing:border-box; padding-left:70px; } #header-title-area h1 a { max-width: 100%; background: url(https://whitedoor.co.jp/images/logo.png) no-repeat 0 0; background-size:contain; text-indent: -9999px; } } @media screen and (max-width: 400px) { /* ************************************************************** フッター ************************************************************** */ /* お問い合わせエリア---------------------------- */ .footerbox3{ width:100%; overflow:hidden; zoom:1; } /* メール */ .mail{ display:block; width:230px; margin:0 0 20px 0; position:relative; top:0; } /* 資料 */ .footerimg{ display:block; width:292px; margin:0 0 0 0; float:right; } .footer-shop h4{ border:1px solid #777777; text-align: center; padding:10px 0; width:100%; } h5.area{ font-weight:bold; } .footer_kokunai,.footer_europe,.footer_asia{ display:block; width:90%; margin:0 5%; } .footer_kokunai li{ list-style-type:none; width:50%; float:left; } .footer_europe li{ list-style-type:none; width:100%; } .footer_asia li{ list-style-type:none; width:100%; } /* ************************************************************** トップページスライドショー ************************************************************** */ .home ul.topmain{ height:200px; } /* 文字・ボタン=============================== */ ul.topmain li span{ margin:80px 15% 0 5%; } /* 25thアイコン表示用レイヤー 2018.12.19追記ここから */ .overlayer { position: relative; z-index:10000000000; top: 20px; left: 45px; } .overlayer img { width: 180px; height: auto; } /* 2018.12.19追記ここまで */ /* ************************************************************** トップページメインエリア ************************************************************** */ /*コンセプト*/ .top_concept{ width:100%; height:400px; background:url(https://whitedoor.co.jp/images/bg_concept.jpg) no-repeat left top; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_concept .contentbox{ width:300px; height:300px; position:absolute; bottom:30px; right:0; left:0; margin:auto; } /*アドバンテージ*/ .top_advantage{ width:100%; height:400px; background:url(https://whitedoor.co.jp/images/bg_advantage.jpg) no-repeat left top; background-size:cover; margin:0 0 0 0; position:relative; } /* 内容エリア---------------------------- */ .top_advantage .contentbox{ width:300px; height:300px; position:absolute; bottom:30px; right:0; left:0; margin:auto; } .top_weddingdress p{ width: 80%; margin: 0 auto; } .top_weddingdress p br.sp-none{ display: none; } /* お客様の声=============================== */ /* 内容エリア---------------------------- */ .top_voice .contentbox{ width:300px; height:100px; position:absolute; bottom:40px; right:0; left:0; margin:auto; } /* サービス=============================== */ /* 内容エリア---------------------------- */ /* 見出し */ .top_service h2{ width:137px; height:40px; top:15px; } .top_service h2 img{ width:137px; height:40px; } } @media screen and (min-width: 2000px) { /* ************************************************************** フッター ************************************************************** */ /* フッター下エリア=============================== */ .footer-copy-area .component-inner{ overflow:hidden; zoom:1; } /* ウェディングバナー---------------------------- */ .footerbox1,.footerbox2{ float:left; width:22%; height:auto; margin:0 0 30px 2%; } .footerbox2{ margin:0 2% 30px 2%; } /* お問い合わせエリア---------------------------- */ .footerbox3{ float:left; clear:none; width:50%; } /* 電話 */ .tel{ width:30%; margin:0 2% 0 4%; position:relative; top:-10px; } /* メール */ .mail{ width:25%; margin:0 3% 0 0; position:relative; top:-10px; } /* 資料 */ .footerimg{ width:35%; } } /* ************************************************************** 固定ページタイトルエリア ************************************************************** */ .childtitle{ display:none; } /* ************************************************************** トップページスライドショー ************************************************************** */ ul.topmain{ display:none; } .home ul.topmain{ display:block; width:100%; max-width:2000px; left:0; z-index:1; } .home ul.topmain li{ width:100%; height:100%; position:absolute; top:0; /*left:300px;*/ background-repeat:no-repeat; background-position:0 0; background-size:100%; } .home ul.topmain li.slider01{ text-indent:-9999px; background-image:url(https://whitedoor.co.jp/images/slide01.jpg); z-index:2; } .home ul.topmain li.slider02{ background-image:url(https://whitedoor.co.jp/images/slide02.jpg); -webkit-animation: sliderlist2 18s linear infinite; -moz-animation: sliderlist2 18s linear infinite; -ms-animation: sliderlist2 18s linear infinite; -o-animation: sliderlist2 18s linear infinite; } .home ul.topmain li.slider03{ text-indent:-9999px; background-image:url(https://whitedoor.co.jp/images/slide03.jpg); z-index:2; -webkit-animation: sliderlist3 18s linear infinite; -moz-animation: sliderlist3 18s linear infinite; -ms-animation: sliderlist3 18s linear infinite; -o-animation: sliderlist3 18s linear infinite; } .home ul.topmain li.slider04{ background-image:url(https://whitedoor.co.jp/images/slide04.jpg); background-position:left 0; -webkit-animation: sliderlist4 18s linear infinite; -moz-animation: sliderlist4 18s linear infinite; -ms-animation: sliderlist4 18s linear infinite; -o-animation: sliderlist4 18s linear infinite; } @-webkit-keyframes sliderlist1 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-moz-keyframes sliderlist1 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-ms-keyframes sliderlist1 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-o-keyframes sliderlist1 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-webkit-keyframes sliderlist2 { 0% {opacity:0; z-index:1;} 23% {opacity:0; z-index:2;} 33% {opacity:1; z-index:3;} 55% {opacity:1; z-index:3;} 56% {opacity:1; z-index:2;} 66% {opacity:1; z-index:2;} 76% {opacity:0; z-index:1;} 100% {opacity:0; z-index:1;} } @-moz-keyframes sliderlist2 { 0% {opacity:0; z-index:1;} 23% {opacity:0; z-index:2;} 33% {opacity:1; z-index:3;} 55% {opacity:1; z-index:3;} 56% {opacity:1; z-index:2;} 66% {opacity:1; z-index:2;} 76% {opacity:0; z-index:1;} 100% {opacity:0; z-index:1;} } @-ms-keyframes sliderlist2 { 0% {opacity:0; z-index:1;} 23% {opacity:0; z-index:2;} 33% {opacity:1; z-index:3;} 55% {opacity:1; z-index:3;} 56% {opacity:1; z-index:2;} 66% {opacity:1; z-index:2;} 76% {opacity:0; z-index:1;} 100% {opacity:0; z-index:1;} } @-o-keyframes sliderlist2 { 0% {opacity:0; z-index:1;} 23% {opacity:0; z-index:2;} 33% {opacity:1; z-index:3;} 55% {opacity:1; z-index:3;} 56% {opacity:1; z-index:2;} 66% {opacity:1; z-index:2;} 76% {opacity:0; z-index:1;} 100% {opacity:0; z-index:1;} } @-webkit-keyframes sliderlist3 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-moz-keyframes sliderlist3 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-ms-keyframes sliderlist3 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-o-keyframes sliderlist3 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-webkit-keyframes sliderlist4 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-moz-keyframes sliderlist4 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-ms-keyframes sliderlist4 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } @-o-keyframes sliderlist4 { 0% {opacity:0; z-index:1;} 56% {opacity:0; z-index:1;} 66% {opacity:1; z-index:3;} 90% {opacity:1; z-index:3} 100% {opacity:0; z-index:1} } /* ■■■■■■■■■■■■■■■■■■■■■ */ /* 25thアイコン表示用レイヤー 2018.12.19追記 */ @media screen and (max-width: 640px) { .overlayer { position: relative; z-index:10; top: 20px; left: 10px; } .overlayer img { width: 70px; height: auto; } } @media screen and (min-width: 641px){ .overlayer { position: relative; z-index:10; top: 20px; left: 45px; } .overlayer img { width: 180px; height: auto; } } /* ■■■■■■■■■■■■■■■■■■■■■ */ @media screen and (min-width: 786px) and (max-height: 786px){ /* ************************************************************** トップページスライドショー ************************************************************** */ .home ul.topmain li.slider01{ background-image:url(https://whitedoor.co.jp/images/slide01_2.jpg); } /* 文字・ボタン=============================== */ ul.topmain li span{ margin:50px 0 0 50px; } } @media screen and (min-width: 786px) and (max-height: 600px){ /* ************************************************************** トップページスライドショー ************************************************************** */ /* 文字・ボタン=============================== */ ul.topmain li span{ margin:100px 0 0 300px; } } /*投稿*/ .post-wrap{overflow: hidden;} .post-content{} .post-img{} /*archive*/ /*.article-group article { margin: 0 3% 3% 0; width: 30%; font-size: 10px; }*/ @media screen and (min-width: 786px){ body.single .post-content{ width: 90%; margin: 0 auto; } .archive-post .entry-image{ width: 100%; text-align: center; } .entry-summary h2.excerpt-title{ margin-top: 0; padding: 10px 0; } .releaseDate{ text-align: right; } } @media screen and (max-width: 640px) { .post-content{float: none;width: 100%;padding-bottom: 20px;} .post-img{float: none;width: 100%;} .post-img div{float: left;width: 50%;} .article-group article { width: 100%; background: none; } } dl.form{ width: 80%; margin: 60px auto 0; } dl.form dt{ float: left; clear: both; width: 30%; } dl.form dd{ padding-left: 30%; padding-bottom:20px; border-bottom: 1px solid #666; margin-bottom: 20px; } dl.form > dt >span.must{ background: #ff0000; color: #fff; font-size: 12px; padding: .2em .4em; font-weight: normal; text-align: right; margin-left: 1em; } dl.form > dd >p.note{ font-size: .8rem; color: #ff0000; } dl.form > dd > span.tel{ margin: 0; } .wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea{ border-radius: 0; } .wpcf7-form-control-wrap input[type="text"], .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="tel"], .wpcf7-form-control-wrap textarea{ width: 100%; } .wpcf7-form-control-wrap input.half{ width: 40%; margin-right: 1em; } input.wpcf7-submit{ width: 50%; display: block; margin: 0 auto; } @media screen and (max-width: 786px) { dl.form dt{ float:none; width: 100%; } dl.form dd{ padding-left: 0; } .wpcf7-form-control-wrap input.half{ width: 100%; } .home ul.topmain li{ left:0px; width:100%; } ul.topmain li p{ margin:50px 10px 0 0px; } ul.topmain li p img{ width: 80%; height:auto; } ul.topcover li p{ margin:50px 10px 0 0px; position:relative; z-index:10; } ul.topcover li p img{ width: 80%; height:auto; } } h2.excerpt-title{ min-height: 2.8rem; overflow: hidden; } .pdf-dl-txt{ border:3px solid #ddd; color:#777777; text-align: center; padding: 3rem; width: 80%; margin: 0 auto; } .pdf-dl-txt h3{ font-size: 3rem; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; font-weight: bold; } .ultimate_wrap h3{ font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; font-weight: bold; font-size: 2.3rem; background: #f1f1f1; padding: .5rem; width: 80%; margin: 20px auto; } .ultimate_wrap p.copy{ font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; text-align: center; font-size: 1.6rem; line-height: 2; margin-bottom: 20px; } ul.ultimate-list{ font-size: 0; } ul.ultimate-list li{ display: inline-block; width: 20%; } @media screen and (max-width: 480px){ ul.ultimate-list li{ display: inline-block; width: 50%; } } @media screen and (min-width: 786px) and (max-width: 1200px) { ul.gnavi li{ margin:0 0px 0 20px; height:auto; padding:5px 0; font-size: 1.1rem; float:left; } .top_concept{ width:100%; height:800px; background:url(https://whitedoor.co.jp/images/bg_concept.jpg) no-repeat 0 0; background-size:cover; margin:0 0 0 0; position:relative; } .top_advantage{ width:100%; height:800px; background:url(https://whitedoor.co.jp/images/bg_advantage.jpg) no-repeat 0 0; background-size:cover; margin:0 0 0 0; position:relative; } } @media screen and (max-width: 499px) { .contact_info{ width:100%; margin:0 0 50px 0; } .contact_info img{ width:100%; } } @media screen and (min-width:500px) { .contact_info{ width:80%; margin:0 10% 50px 10%; } } /*■■■■■2020.12.25 footer banner 追記■■■■■*/ @media screen and (max-width: 785px) { .footer_banner{ display: flex; flex-flow: row wrap; justify-content: space-between; } .footer_banner li{ width:100%; margin:0 0 20px 0; } } @media screen and (min-width: 786px) and (max-width: 1200px) { .footer_banner{ display: flex; flex-flow: row wrap; justify-content: space-between; } .footer_banner li{ width:49%; margin:0 0 20px 0; } } @media screen and (min-width: 1201px) { .footer_banner{ display: flex; flex-flow: row wrap; justify-content: space-between; } .footer_banner li{ width:24%; } } .footer_banner li{ list-style-type: none; } .footer_banner li img{ width:100%; } .topcover{ display: block; width: 100%; height: 75vw; max-width: 2000px; position: relative; float: left; clear: both; } .topcover li{ background-size: contain; width: 100%; height: 100%; position: absolute; } .topcover li > a{ display: block; width: 100%; height: 75vw; } .slider01{ background-image:url(https://whitedoor.co.jp/images/slide01.jpg); background-repeat: no-repeat; background-position: center top; } .slider02{ background-image:url(https://whitedoor.co.jp/images/slide02.jpg); background-repeat: no-repeat; background-position: center top; } .slider03{ background-image:url(https://whitedoor.co.jp/images/slide03.jpg); background-repeat: no-repeat; background-position: center top; } .slider04{ background-image:url(https://whitedoor.co.jp/images/slide04.jpg); background-repeat: no-repeat; background-position: center top; } .slider05{ background-image:url(https://whitedoor.co.jp/images/slide05.jpg); background-repeat: no-repeat; background-position: center top; } .slider06{ background-image:url(https://whitedoor.co.jp/images/slide06.jpg); background-repeat: no-repeat; background-position: center top; } .slider07{ background-image:url(https://whitedoor.co.jp/images/slide07.jpg); background-repeat: no-repeat; background-position: center top; } .slider08{ background-image:url(https://whitedoor.co.jp/images/slide08.jpg); background-repeat: no-repeat; background-position: center top; } .slider09{ background-image:url(https://whitedoor.co.jp/images/slide09.jpg); background-repeat: no-repeat; background-position: center top; } .cover_img{ } .cover_img img{ display:block; width:100%; }